React-Redux 完全に理解した
- 昨年末から、React-Reduxを使ったフロントエンド開発に入りました
- (去年は AWS とかインフラ周りがメインだったのに...)
- 立ち上げフェーズで事実上の独学キャッチアップになりましたが、かなり分かってきました
- キャッチアップするために読んだ記事や、ハマったところを紹介します。
まずは公式サイト
何はなくとも公式サイトです。始まりにして最強の情報量です。 基本的に英語ですが、そこまで苦にはなりませんでした。React、Reduxともにチュートリアルや初心者向けガイドが充実しているので、まずはこちらを読んで写経します。
- React 公式チュートリアル
- Redux 公式チュートリアル
- React-Redux 公式チュートリアル
ES6(Babel) の文法:
Babel を利用したES6の記法がそこかしこに現れます。自分はES6は触ったことがなかったので、「なんとなくわかるけど、ちょっと大変」な状況でした。 文法処理に頭を使って本質的な部分を考えるためのリソースを取らたくないので、一旦おさらいします。
頻出は以下の3つ。
- Spread Operator
...: http://es6-features.org/#SpreadOperator - Property Shorthand: http://es6-features.org/#PropertyShorthand
- Destructuring Assignment: http://es6-features.org/#ObjectMatchingShorthandNotation
そして、Object/Array の操作は常に求められるのでAPIドキュメントに目を通します。特に Array.reduce() は慣れてないととっつきづらいので自信がない人は要チェックです(自分は Scala で慣れてたのでそこまで辛くありませんでした)。
Reactstrap 公式
各種コンポーネントをデザインするのがめんどくさい効率的に作成したいので、Bootstrap 先生の力を利用します。
redux-thunk
実際のプロダクトでは App サーバへの API コールがある以上、非同期処理は避けられません。私の Project では redux-thunk を使っていたのでこちらの記事に目を通します。シンプルなシーケンスならこれでそれほど困ることはないと思います。
わかりやすい日本語の解説
ここまでで、情報としては充分かもしれませんが、「分かりやすく解説された日本語記事」を読んで整理することで理解が深まりました。 以下の記事はほんとに分かりやすかったのでオススメです。
以下の文が React-Redux を理解するためのエッセンスかと。
Storeおよびそこに存在するStateはとても神聖なものだ。Reactコンポーネントなんぞ下界のものに直接触らせるわけにはいかんのだ。ここに触れるためには，Actionという儀式を介さなければならない。
おわりに
以上の記事を読み、実際に画面を作ればキャッチアップできると思います。感想としては「公式ドキュメント最強」ということでしょうか。
一人の人が書いたブログ記事と、世界中の人によって修正され続ける公式ドキュメントのどっちが優れた情報かを比べれば、答えは考えるまでもなく公式ドキュメントなわけです。（ブーメランを投げるわけではなく、、、）
React のような世界中で使われている OSS ライブラリであれば、公式ドキュメントが非常に充実しているので、まずは公式ドキュメントを当たるほうが手っ取り早いように思います。 もちろん、Qiita や はてなブログは日本語で、細かく分かりやすく説明されているので理解を深めるためには有用です。優れた記事は無数にあるので、副教材として適宜使っていくと良いですね。
なので、「公式ドキュメントをメインにして知識を集め、日本語ブログ記事で理解を深める」という流れが最強なのかなと思っています。そして「同時並行で手を動かす」ことで早々にキャッチアップできると思います。
