#JavaScript

Declarative Programmingメモ

React関連の記事を読んでいると、よく「Declarative」という言葉に出くわします。 宣言型プログラミング | Wikipedia Declarative(宣言型)に対して「Imperative(命令型)」という考え方があり、 ...

続きを読む

ES6 - let/const

ES6では変数を定義する際のキーワードとして、let、constが使えます。 let varで宣言した変数は関数スコープを持つようになるので、変数が定義された関数内で参照できます。 var guess = 2; console.log(guess) ...

続きを読む

Array.prototype.reduce

mapはよく使うもののreduceがイマイチ効果的に使えないので、色々試してみました。 よくある例 よくある例としては配列内の要素の合計を求めるものだと思います。 配列をオブジェクトへreduce 配列内の要素の、それぞれの出現数を集計してみる。 map, filterと同じように使ってみる 関数を合成する 以下のような感じで、元のデータを複数の関数で加工して最終的なデータを求めたい場合。 ...

続きを読む

Container / Presentational Component

Container Component ビューを作らないコンポーネント = データをstateとして扱い供給するためのコンポーネント Presentational Component Containerからpropsを受取り、ビューを描画するコンポーネント Ajaxでデータを取得する例 Container ComponentとPresentational Componentの組み合わせに対して、 ...

続きを読む

Firebaseことはじめ

Firebaseはリアルタイム、ユーザ認証、静的なサイトのホスティングに対応したプラットフォーム。Googleがバックに付いてます。 今回は、React + React Routerで作る静的ページをホストできるようにしてみました。 tools % npm i -g ...

続きを読む

webpack.configでハマった話

TL;DR webpackでエラーが出たら--display-error-detailsを付けて確認する webpack-dev-serverとwebpackを実行すると、延々と以下の様なエラーが出ました。このエラー自体は汎用というか、特定の原因を指すものではなく、ぐぐっても色々な原因、対応方法が出るので2時間くらいハマりました。 % webpack --display-error-details ... ERROR ...

続きを読む

SystemJS 一巡り

JavaScriptをロードするための最も基本的な方法は<script>タグですが、特にSPAを構築する場合などは、主に以下の理由からモジュールローダーを使うのが一般的かと思います。 大量の<script>を書くことになり、 ...

続きを読む

WebGL - シェーダを大雑把に

具体的な知識は後で勉強するとして、とりあえず進めてみる系です。 shader 何かを描画するときに必ず使用するもので、GLSL ES(とりあえずC言語に似ていて、言語と理解しておく)で記述します。 頂点シェーダ: 頂点ごとの処理をするプログラム フラグメントシェーダ: ...

続きを読む