【毎日投稿24日目】Reactの基礎を、学習中の頭で整理してみる

8月から新しい職場でReactとGoを書くことになった。どちらも実務では未経験で、いま少しずつ手を動かしている。

学習中の人間が書く記事は、経験者が書くものより浅い。ただ『どこで詰まったか』だけは、いま書かないと忘れてしまう。だからこの記事は、教える目的ではなく、自分の理解を並べ直すために書いている。

画面を『組み立てる』のではなく『宣言する』

これまで自分が書いてきたのは、DOMを直接触るコードだった。要素を取ってきて、値を書き換えて、表示を切り替える。手順を上から書いていく感覚に近い。

Reactはそこが逆になる。「この状態のとき、画面はこう見える」と書いておくと、状態が変わったタイミングでReact側が差分を計算して描画し直してくれる。手順ではなく結果を書く。

最初はここが飲み込めなかった。書き換える処理はどこに行ったのか、と探してしまう。探しても無い。状態を更新すれば、画面はその状態に追従する。それだけだった。

部品として切り出す

Reactではコンポーネントという単位で画面を分ける。ボタン、カード、フォーム。それぞれが自分の見た目と振る舞いを持った関数として存在する。

親から子へは『props』でデータを渡す。渡された側は基本的にそれを書き換えない。データの流れが上から下の一方向に固定されるので、値がどこで変わったのか追いやすい。

規模が小さいうちは正直ありがたみが薄い。ただ画面が増えたとき、どこを直せばどこに影響するかが読める構造になっているのは効いてくるだろうと思う。

状態は『いま持っている値』

コンポーネントが自分で保持する値が『state』にあたる。入力欄の中身、開閉フラグ、読み込み中かどうか。