はじめに

そもそも React ってなんだっけ？
いつもなんとなくこんな感じ〜で書いてるけど、これで本当にいいんだっけ？ってふと疑問に思った。
この「なんとなく使う」を脱却したく、原点に立ち返り、

React の公式ドキュメントにある React の流儀

を読んで、自分なりにまとめることにした。
ちなみに余談だけど React の流儀は、英語では Thinking in React だった。訳し方がカッコイイ！

React の流儀まとめ

React で UI を実装するときの５つのステップ

モックアップのすべてのコンポーネントとサブコンポーネントを囲む、それぞれに名前をつける
- １つのコンポーネントは理想的には１つのことだけを行うべきである（単一責任の原則）
- コンポーネントが大きくなってしまったら、より小さなサブコンポーネントに分解するべき
モックアップ内にあるコンポーネントを特定したら、それらを階層構造に整理する

ここでようやく state が登場する
state の構造を考える上で最も重要な原則は DRY(Don’t Repeat Yourself: 繰り返しを避ける)
state の見分け方
- 時間が経っても変わらないもの → state ではない
- 親から props 経由で渡されるもの → state ではない
- コンポーネント内にある既存の state や props に基づいて計算可能なデー → state ではない
- それら以外で残ったものが state

サンプルコードも眺めてたんだけど、コンポーネントの認識が実はズレてるかもしれないことに気づいた。

コンポーネント＝再利用できる＝同じものが複数出てきたらそれらをまとめる

だと思ってた。

しかし、サンプルコードを見るとどうも違う。
小さいパーツ毎にコンポーネントにしており、それらをいい感じにグルーピングして新たにコンポーネントを作っている。
そうか。単一責任の原則が抜けているのか。
React の言う「コンポーネント」ってそういう意味で使っていたのか・・・。

おそらく現場では UI が確定しないうちから実装を始めているので、ステップ１やステップ２が抜け落ちているのかもしれない。
最初のうちは仕方ないかもしれないが、UI が出てきたら、一度立ち止まってコンポーネントの分け方や階層構造の見直しなどを行う必要があるのではないだろうか。

サンプルコードを眺めてるだけじゃ分からないこともあったので、実際に手を動かしてコーディングしてみようと思う。
こんなに小さくコンポーネントを分けたことがないので、実装の流れを把握できるようにしたい。