これの、2016/01/07時点での日本語訳です。
更新は追わないと思うので、流し読みにどうぞ。
react-howto
もしあなたがReactをはじめたばかりで(もしかしたらフロントエンド自体もはじめてで)、React周辺のエコシステムに困惑してるとしたら、そこにはこういう理由がある。
- そもそもReactはアーリーアダプターやエキスパート向けに作られた経緯がある
- Facebookが唯一実際に使われてる例であり、Facebookより小規模なプロジェクト向けの使い方にフォーカスしてない
- Reactのガイドを装った間違った情報も多い
このドキュメントは、HTML・CSS・JavaScriptでWebページを作ったことがある人を想定読者にしてる。
これを書いたワケ
Reactに関する情報が山ほど交錯してるから。
自分はReactを作ったFacebookのチームのオリジナルメンバーだった。
今は小さなスタートアップにいるので、Facebookの中の人ではないっていう視点もあわせて書く。
Reactのエコシステムをどう知っていくか
ソフトウェアにはテクノロジースタックがあって、それが何で作られてるかを知らないことにはアプリは作れない。
Reactやるのに必要なものが大それて見えるのは、順序立ててそれらが説明されてないから。
Reactやるなら以下の順に調べると良い。
絶対に飛ばしたり二股かけたりしないように。
- React自体
- npm
- JavaScript “bundlers”
- ES6
- Routing
- Flux
- Immutable.js
- Relay, Falcor, etc
もちろん全部を知らないとReactを使えないわけではなくて、困ってることが解消されたら次へ進んで良いよ。
React自体
そもそもReactをさわるのにあれこれツールを用意するところで時間をかけるのが間違い。
公式サイトにいけば、コピペできるのがあるし、それを`.html`に保存すれば即さわれる。
この時点では何のツールもいらんので、React自体に慣れるまでは他のものをさわらなくていい。
Reactを学ぶのには、やっぱ公式のチュートリアルがおすすめ。
npm
`npm`はNode.jsのパッケージマネージャで、フロントエンド界隈でコードを共有するにあたって一番人気のやつ。
CommonJS(知らない人はGoogleで調べて)方式って言われるモジュールシステムで、コマンドラインから色々インストールできるやつ。
再利用できるコンポーネントとかライブラリなどなどCommonJS方式で利用できるものがnpmにはいっぱいある。
JavaScriptバンドラー
幾つかあるCommonJSの良いところのひとつは、そのままではブラウザで読み込んで使えないところ。
何かしらバンドラーを用意してモジュールたちを`.js`ファイルにバンドルして、scriptタグで読み込めるようにしないといけない。
バンドラーにはたとえば`webpack`や`browserify`があって、どっちも良いけど個人的には`webpack`をオススメする。
大きなアプリを作るにあたって便利な機能がいっぱいあるから。
Webpackのドキュメントが取っつきにくいなら、以下のドキュメントを書いたので読んでみて欲しい。
petehunt/react-webpack-template · GitHub
petehunt/webpack-howto · GitHub
ひとつ注意があって、`CommonJS`は`require()`って関数を使うんだけど、これを見て`require.js`のことと勘違いする人が結構いる。
`require.js`はいろいろ理由があるけど使わない方がいいと思ってて、もちろんReact界隈ではあまり使われてない。
ES6
ReactでJSXのことを知ったと思うけど、それ以外の部分のコードで見慣れない記法を目にしたかもしれない。
それはES6で、JavaScriptの最新の記法なのでまだ馴染みがないかもしれない。
なのでブラウザでもそのまま書けない方が多いんだけど、バンドラーがそれを使えるよう変換してくれる。
ただReactを使いたいだけなら、ES6のことは飛ばしてもいい。
ルーティング
Single Page Appって流行ってるよね。
あれは、ページが一度読み込まれてユーザーがリンクやボタンを押した時に、JavaScriptがページの中身やアドレスバーを更新してくれて、ページ自体は更新されないようになってる。
このアドレスバーのURLの管理やらをやってくれるのがルーター。
Reactやるならreact-routerが良いかな。
Single Page Appを作るなら、ルーターを使わない理由はないと思う。
逆にSingle Page Appを作らないならルーターは必要なくて、どんな巨大プロジェクトも最初は小さく作っていくべき。
Flux
Fluxについてはたぶん聞いたことくらいはあるはず。
これも誤った情報が山ほどある。
多くの人は、アプリを作りはじめて「さて必要なデータを用意するかー」っていう初段階で、Fluxが必要かどうかを考え始めてしまう。
けどこれは間違った入り方で、既にたくさんのコンポーネントがあって、後からFluxを適応するか考えるもの。
Reactのコンポーネントは階層構造になってるので、だいたいのケースでデータも同じ形になってるはず。
その場合にはFluxはあまり役に立たない。
でもデータが階層構造になってなくて、本質じゃないpropsが増えてきたなーとか、複雑に組み合わさるコンポーネントが既にあって・・みたいな場合には、Fluxを検討する価値があると思う。
Fluxが必要になったら知ればよくて、必要かどうかわからないなら、必要ないってこと。
Fluxを使うことにしたなら、Reduxがライブラリとしてはオススメ。
他にもライブラリが山ほどあるしもちろんそれらを試してもいいけど、アドバイスするとすれば「一番人気のやつを使え」ってとこかな。
Immutable.js
Immutable.jsで作るデータ構造は、Reactで直面しがちなパフォーマンスに関する問題を解決してくれる。
すごく有益なライブラリではあるものの、パフォーマンスに困ってないならほぼ必要ないとも言える。
Relay, Falcor etc
Ajaxでデータをたくさん取ってくる処理を書いてるなら、これらについても知っておくべき。
ただこれもまだカッティング・エッジな技術たちなので、Ajaxリクエストが多すぎて困ってないなら、必要ない。
おわりに
なんか間違ってたら教えてください！