部品に分けた次は「値を渡す」
前回のI-02では、画面を役割ごとの部品、すなわちコンポーネントに分ける考え方を扱いました。ただ、部品に分けただけでは、どの部品も同じ内容しか表示できません。実際のアプリでは、同じ形の部品に、一件ずつ違うデータを流し込む必要があります。その値の受け渡しを担うのが、この講義のテーマであるpropsです。
このスライドのポイント
- 前回I-02: 画面を役割ごとの部品（コンポーネント）へ分けた
- 部品に分けただけでは、どの部品も同じ内容しか表示できない
- 実際のアプリでは、同じ形の部品に一件ずつ違うデータを流し込む必要がある
- その受け渡しを担うのがprops
propsとは何か
propsとは、親コンポーネントが子コンポーネントへ渡す値のことです。E-07で学んだ関数の引数を、コンポーネントの世界に置き換えたものだと考えると分かりやすいです。流れは常に親から子への一方向で、逆向きに、子から親へ直接渡すことはできません。そして、子は受け取ったpropsを自分で書き換えません。これは、F-03で扱ったイミュータブル、つまり元の値を変えないという考え方の実践にあたります。
このスライドのポイント
- props＝親コンポーネントが子コンポーネントへ渡す値
- E-07の関数の引数を、コンポーネントの世界に置き換えたもの
- 流れは常に親→子の一方向（子から親へ直接は渡せない）
- 子は受け取ったpropsを書き換えない（F-03のイミュータブルの実践）
なぜpropsの向きを知る必要があるか
propsの向きを理解していないと、一覧の各行がそれぞれ違う内容で表示される仕組みが読めません。同じ部品なのに、なぜ行ごとに金額が違うのか、その答えがpropsです。また、向きを取り違えると、子から親へ直接値を渡そうとする、誤った指示をAIに出してしまいます。propsは親から子への一方向、という原則を先に押さえておくことで、こうしたつまずきを避けられます。
このスライドのポイント
- 向きを知らないと「一覧の各行が違う内容で表示される」仕組みが読めない
- 同じ部品なのに行ごとに中身が違う理由が、まさにprops
- 向きを取り違えると、子から親へ直接値を渡す誤った指示をAIに出してしまう
- 「親→子の一方向」を先に押さえるとつまずきを避けられる
同じ部品 × 違うデータ = 違う表示
構造を図で見てみます。親であるExpenseListから、子であるExpenseItemが三つ並び、それぞれへ異なるpropsが流れ込みます。一つ目の行には会議費のデータ、二つ目には交通費のデータ、というように、同じ部品へ違う値が渡ります。ここで大切なのは、部品の形は一つでも、渡すデータが違えば表示も違う、という点です。同じ部品かける違うデータ、イコール違う表示、と覚えてください。
このスライドのポイント
- 親ExpenseListから、子ExpenseItemが3つ並ぶ
- それぞれの子へ異なるpropsが流れ込む（会議費・交通費…）
- 部品の形は1つでも、渡すデータが違えば表示も違う
- 覚え方: 同じ部品 × 違うデータ = 違う表示
一覧 = 配列 × コンポーネント
実際のパターンを見ます。E-08で学んだ配列、たとえば経費の一覧データを思い出してください。この配列をmapで一件ずつ取り出し、それぞれをpropsとしてExpenseItemに渡します。すると、配列の件数だけ部品が並び、一覧として画面に表示されます。この、一覧イコール配列かけるコンポーネント、という形は、Reactでもっともよく登場するパターンです。一覧を作りたくなったら、まずこの形を思い出すとよいです。
このスライドのポイント
- E-08で学んだ配列（経費一覧データ）をmapで1件ずつ取り出す
- 取り出した1件をpropsとしてExpenseItemに渡す
- 配列の件数だけ部品が並び、一覧として表示される
- 「一覧 = 配列 × コンポーネント」はReactの最頻出パターン
技術サンプル: propsの受け渡し
サンプルコードを読みます。子であるExpenseItemは、波かっこの中でtitleとamountという二つのpropsを受け取っています。親の側は、タグの属性のような形で、title会議費、amount千二百、というように値を渡します。同じ部品でも、渡す値が違えば、表示される行も違うものになります。AIにコードを作らせたときは、このコンポーネントが受け取るpropsの一覧と、それぞれの型を表にしてください、と聞くと、受け渡しの全体像を確認できます。
props と state（次回）の違い
混同しやすいのが、propsと、次回に扱うstateの違いです。propsは親から与えられる値で、子の側では読み取り専用でした。一方stateは、部品自身が持ち、変化していくデータです。ここでは詳しくは踏み込まず、親から来る読み取り専用がprops、自分が持ち変化するのがstate、という対比だけ覚えておいてください。この違いは、次回のI-04ではっきりさせます。
このスライドのポイント
- props: 親から与えられる・子では読み取り専用
- state（次回I-04）: 部品自身が持ち、変化するデータ
- ここでは対比だけ: 親から来る読み取り専用がprops、自分が持ち変化するのがstate
- この違いは次回はっきりさせる
バイブコーディングでの確認点
バイブコーディングでの確認点です。AIが作った部品には、このpropsは何のために使われているのか、そして、使われていないpropsはないか、を一つずつ確認してください。渡しているのに使っていないpropsは、設計の混乱や消し忘れのサインです。また、一つの部品が受け取るpropsが七個を超えたら、その部品に役割が多すぎないかを疑ってください。propsの数は、部品の役割の数をそのまま映します。
このスライドのポイント
- AIが作った部品に「このpropsは何のためか」を1つずつ確認する
- 「使われていないpropsはないか」を確認する（消し忘れ・混乱のサイン）
- propsが7個を超えたら、部品の役割過多を疑う
- propsの数は、部品の役割の数を映す
まとめと次回
最後に一問一答です。propsの流れの向きは、どちらからどちらへでしょうか。……答えは、親から子への一方向です。子から親へ直接渡すことはできません。三十秒でまとめます。propsは親コンポーネントが子へ渡す値で、向きは常に親から子、そして子は書き換えません。同じ部品に違うデータを渡せば違う表示になり、配列をmapで回して渡すのが一覧の基本形でした。次回のI-04では、部品自身が持ち、変化するデータであるstateへ進みます。関連資料は、SaaS機能パーツ100と、AI開発ワード100です。
このスライドのポイント
- 一問一答:「propsの流れの向きは？」→ 親から子への一方向
- 30秒まとめ: propsは親が子へ渡す値／向きは常に親→子／子は書き換えない／同じ部品×違うデータ＝違う表示／配列をmapで回して渡すのが一覧の基本形
- 次回: I-04 state（部品自身が持ち、変化するデータ）
- 関連資料: SaaS機能パーツ100、AI開発ワード100
