Reactの公式チュートリアルをやってみた感想
実務でそろそろNext.jsを触ることになりそうなので、Reactのチュートリアルをやってみた。
各ステップでcodesandbox（ブラウザでJavaScriptなどを書けるエディタ）を呼び出せるようになっていて、ローカルで環境構築してGitHubに上げて・・・というステップが必要ないのがありがたい。
自分は当初、以下の日本語に翻訳されたページの存在を知らずオリジナルの英語版で読んでいた。ただ、難しい表現は使われていないし、翻訳アプリを使えば難なく読める分量になっているのでそれほど苦労することなく進められた。
このチュートリアルではtic-tac-toeという三目並べ（マルバツゲーム）アプリを作りながら、コンポーネントや状態管理といった概念をステップバイステップで学んでいくような構成になっている。
本当に入門したてなので正しいことを書ける自信はないが、感想を書き残しておきたい。
Reactの主要コンセプト
コンポーネント
自分がチュートリアルをやる前にReactに関して小耳に挟んでいたことの一つがコンポーネント。どうやらUIを構成するテーブルやボタンなどをコンポーネントとして切り分け、各コンポーネントを状態の変化に応じて動的に変更しながら画面を作っていくらしい。
以下のページを読むとその概念が理解しやすかった。在庫を検索する簡易的なページをReactでどう作るかを題材にしていて、検索ボックス、タイトル、アイテム表示欄などコンポーネントに切り分け、まずは静的なページを作り、次にstateなどを使用して動的に作り上げていく手順を踏んでいる。
たぶん感覚的には絵を描くことに似ていて、まずはスケッチしてラフに形を作っていき、そこから徐々に精緻化させていくようなイメージだろう。プラグラムを書く上では新規機能を作るよりも改修することの方が大抵の場合において楽なように（人によるかも）、未確定の要素を減らしながら、徐々に掘り進めていくようなプロセスは理にかなっていると思う。
宣言的UI
自分はJavaScript（バニラJS）やjQueryを何度か実務で書いたことがあり、Vue.jsやReact.jsといったいわゆる宣言的UIというコンセプトを採用したフレームワークを使用したことがなかった。
以下の記事は命令的UI（jQueryなど）と宣言的UIの違いをサンプルコードを用いて解説されていて、おかげさまで理解が深まった。
先ほどのコンポートネントのくだりで書いたことと同じで、宣言的UIにおいては、「こんなDOMになりますよ」と先にマークアップしておき、動的なロジック部分を虫食い状態にしておくような考え方になるらしい。一方で命令的UIはappendメソッドなどを用いて、ロジックの中に追加するHTML要素を書いていくような形になるので、最終的にどのようなDOMになるのか、コードから理解しづらく、そのコード自体も複雑になってしまう。（DOMって言葉の使い方あってるか不安）
この辺りは理論的にはそうなんだろうけど、プロダクションコードを触ったことがないので、その明快さがまだ実感できていない。書くの楽しそうだなという感じはなんとなくしている。
ステート
動的に画面を変化させていく上で鍵となるのがステート。propsという形で親コンポーネントから子コンポーネントにデータ（オブジェクト）やイベントを渡し、データに変更が加えられた時にそれを検知し、即座に対象のコンポーネントを再構築する。宣言的UIを採用したフレームワークはDOMが滅茶苦茶になって画面が崩れたりしないという話をよく聞くけど、おそらくDOMがコンポーネントの繋がりとして表現され、何を変えればどこに影響があるのか（再レンダリングされるのか）が明確に管理されているからだろう。（これも合ってるかよくわからない）
たぶん自分が足りない知識でつらつらと書くよりも以下の公式解説を読むのが一番良いように思う。具体例付きでとてもわかりやすい。
Reactの流儀 ステップ 3：UI の状態を最小限かつ完全に表現する方法を見つける
▼事例以外の解説部分
state とは、アプリが記憶する必要のある、変化するデータの最小限のセットのことである、と考えましょう。state の構造を考える上で最も重要な原則は、DRY（Don’t Repeat Yourself; 繰り返しを避ける）です。アプリケーションが必要とする状態に関する必要最小限の表現を見つけ出し、他のすべてのものは必要になったらその場で計算します。(以下略）
時間が経っても変わらないものですか？ そうであれば、state ではありません。 親から props 経由で渡されるものですか？ そうであれば、state ではありません。 コンポーネント内にある既存の state や props に基づいて計算可能なデータですか？ そうであれば、それは絶対に state ではありません！
これからどう学習を進めるか
まずはチュートリアルで作った三目並べアプリを自分で作ってみようと思う。三目並べに必要な概念を一つ一つ洗い出し、マス目のようなUIをどうコンポーネントとして切り出すかを考え、まずは静的なUIを作ってから、徐々にロジックを入れ込んでいくようなステップを踏むとよさそう。たぶん出来上がるコードはチュートリアルのものと比較して冗長だったり汚かったりするだろうけど、その差分を埋める作業を通してまた学びが深まりそうな気がする。
次に、Next.jsで簡易的なアプリを作ってみて、Vercelを使ってデプロイしてみる。聞くところによるとReact単体で作るよりもNext.jsを使用した方がルーティングなど複雑になりがちな部分をよしなにやってくれるので、初心者にはNext.jsから入った方がよかったりするらしい。たぶんRubyだけでアプリ作るよりも、Ruby on Railsでrails newした方が簡単に作れるのと同じことだろう。
後はTypeScriptもやっていかなければ。最近、実務でGraphQLのサーバーサイドの実装を行っていて型定義などをちょっとだけやっていたりするが、型があることでどんな値が入出力されるのかコードから読み解けるようになりとても見通しがよくなるなと思っている。TypeScriptもこれだけで複数のオライリー本が書けるような体系になっていて、さらにHTML、CSS、JavaScriptなどもやっていこうとするとWebフロントエンドをちゃんと書けるようになる日はいつになるのだろうかと気の遠くなる思いだ。ただ、もっと幅広く課題解決できるエンジニアになるためにもやっていきたい。
終わりに
Reactはコンセプトがとてもシンプルかつ理にかなっていて、素晴らしいなと思った。多くのエンジニアが熱狂する理由がわかったような気がした。2024年にはフロントエンド書けますと自信を持って言えるようにこれからやっていくぞ。
