前回の続き——stateを変えると、なぜ画面が変わるのか
I-04で、stateは操作や通信結果で変化するデータであり、更新関数を使わなければ画面が変わらないことを学びました。では、なぜ更新関数を呼ぶと画面が変わるのでしょうか。その裏側の仕組みが、この講義のレンダリングです。I-01で示した5責務の地図のうち、ここは「表示」を担当する回にあたります。stateとpropsが、どのように画面へ姿を変えるのかを見ていきます。
このスライドのポイント
- I-04: stateは変化するデータ。更新関数を使わないと画面が変わらない
- では「なぜ更新関数を呼ぶと画面が変わるのか」——その裏側がレンダリング
- I-01の5責務の地図のうち「表示」を担当する回
レンダリングの定義——JSXを計算し直すこと
レンダリングとは、コンポーネント関数を実行して、JSXという画面の設計図を計算することです。stateかpropsが変わると、この関数がもう一度実行されます。これが再描画です。大切なのは、手続き的に画面を書き換えるのではなく、データから画面を毎回計算し直す、という考え方です。なお、ここで言うレンダリングはJSXを計算する工程であり、D-09で学んだブラウザの描画とは層が違います。Reactの計算、DOMへの反映、ブラウザの描画、という順に並びます。記法の細部はバージョンで変わるため、公式ドキュメントで確認する姿勢を保ってください。
このスライドのポイント
- レンダリング＝コンポーネント関数を実行し、JSX（画面の設計図）を計算すること
- stateかpropsが変わると関数が再実行される＝再描画
- 手続き的に画面を書き換えるのではなく、データから画面を毎回計算し直すモデル
- D-09のブラウザの描画とは層が違う（Reactの計算→DOM反映→ブラウザ描画）
なぜ必要か——再描画の起点が読めないと混乱する
この仕組みを知らないと、いつ、なぜこの関数が再び実行されるのかが読めません。その結果、console.logが何度も出る、重い処理が毎回走る、といった現象に戸惑うことになります。AIが生成したコードを読むときも、再描画の起点がstateとpropsの変化だと分かっていれば、画面がどう動くかを予測できます。逆に分かっていないと、不具合が起きても原因の切り分けができません。
このスライドのポイント
- 起点が読めないと「いつ・なぜ関数が再実行されるか」が分からない
- console.logが何度も出る、重い処理が毎回走る等の現象に戸惑う
- 起点がstate・propsの変化だと分かれば、AI生成コードの動きを予測できる
構造——データが変われば画面がついてくる
全体像は一方向の流れです。データ、つまりstateかpropsが変わると、コンポーネント関数が実行され、新しいJSXが計算され、前回との差分だけがDOMへ反映されます。ここで覚えてほしい原則は一つだけです。画面を直接いじらず、データを変える、ということです。データを変えれば、画面はその計算結果として、後からついてきます。この順番を逆にしないことが、Reactを扱う上での土台になります。
このスライドのポイント
- 一方向フロー: データ（state/props）→ 関数実行 → JSX → DOM反映（差分だけ）
- 覚える原則は一つ「画面を直接いじらず、データを変える」
- 画面はデータの計算結果として、後からついてくる
処理の流れ——一覧の行を消すには配列を変える
具体例を見ます。E-06のループで学んだ考え方が、そのまま生きます。経費一覧の表示は、配列データをmapで回してJSXにした計算結果です。ですから、ある行を消したいときに、画面を直接いじる必要はありません。元の配列からその1件を取り除けば、F-03で学んだfilterのように、再描画によって表示からも消えます。操作の対象は常にデータで、画面はその結果である、という関係がここでも成り立っています。
このスライドのポイント
- E-06のループの考え方が生きる: 一覧の表示は「配列 → map → JSX」の計算結果
- 行を消したいときは画面をいじらない。元の配列から1件取り除く（F-03のfilter）
- 配列から消える → 再描画で表示からも消える
技術サンプル——レンダリングの流れの図
サンプルは、レンダリングの流れを示した図です。起点は常にデータの変化で、そこからコンポーネント関数の再実行、新しいJSX、差分のDOM反映、そしてブラウザの描画へと進みます。読み方の要点は二つです。起点がデータの変化であること、そしてDOMへの反映は全部の書き直しではなく差分だけであることです。AIには、このコンポーネントが再描画されるのはどのstateやpropsが変わったときか、と聞くと動きを確認できます。
混同しやすい概念——Reactのレンダリングとブラウザの描画
混同しやすいのが、Reactのレンダリングと、ブラウザの描画です。どちらも描画と呼ばれますが、層が違います。Reactのレンダリングは、関数を実行してJSXという設計図を計算する工程です。一方、ブラウザの描画はD-09の⑦にあたり、DOMをもとに実際の画面を塗る工程です。Reactが差分を計算してDOMへ反映し、そのあとにブラウザが描画する、という順序で、この二つはつながっています。同じ言葉でも指している層が違う、と覚えてください。
バイブコーディングでの確認点——古い表示はデータから疑う
バイブコーディングでの確認点です。表示が古いままという不具合に出会ったら、まず表示の元データはどのstateやpropsか、次にそれは本当に変わっているか、の順で切り分けさせます。画面を直接直そうとするのではなく、データが変わっているかを先に疑うのが近道です。AIへの質問例は、この表示の元になっているstateやpropsを挙げ、それが更新されているか確認してください、です。データを起点に考える癖が、切り分けを速くします。
このスライドのポイント
- 「表示が古いまま」は①表示の元データはどのstate/propsか ②それは本当に変わっているか、の順で切り分ける
- 画面を直接直そうとせず、データが変わっているかを先に疑う
- AIへの質問例: 「この表示の元になっているstate・propsを挙げ、それが更新されているか確認してください」
まとめと次回——画面はデータの関数
一問一答です。Reactで画面を変えたいとき、直接いじるのは画面とデータのどちらでしょうか。……答えはデータです。stateやpropsを変えれば、画面はその計算結果として更新されます。30秒まとめとして、画面はデータの関数であり、再描画の起点は常にstateとpropsの変化である、という一点を押さえてください。次回は、その操作をデータの変更へつなぐイベント処理を扱います。関連資料は「UI改善プロンプト50」「AI開発ワード100」です。
このスライドのポイント
- 一問一答: 「Reactで画面を変えたいとき、直接いじるのは画面とデータのどちら？」→ データ
- 30秒まとめ: 画面はデータの関数。再描画の起点は常にstate・propsの変化
- 次回: 操作をデータ変更へつなぐイベント処理（I-06）
- 関連資料: 「UI改善プロンプト50」「AI開発ワード100」
