Electron - MacでWindowsビルドする際に必要なやつ

Mac or LinuxでWindowsビルドをする場合、事前にWineがビルドマシンにインストールされている必要があります。 .exeのアイコンを編集するために使われているnode-rceditというモジュールがうまく動かないようです。 以下はMacでのWineインストール手順。 Wineインストール ➜ brew search wine ==> Searching ...

続きを読む

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 ...

続きを読む

PostCSS x Webpack

PostCSSを試してみました。JSで言うところのBabelのようなモノという理解です。 PostCSSについてはPostCSSの概要と書き方の記事が分かりやすかったです。 Loaderとプラグインをインストールする postcss-loaderと、今回は以下のプラグインをインストールしておきます。 precss ... Sassライクなシンタクスで書くためのプラグイン autoprefixer ... ベンダープレフィックスを自動で付加してくれるプラグイン % npm i ...

続きを読む

webpack.configでハマった話

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

続きを読む