前回の続き——「部品化」の入口に立つ
前回のI-01では、フロントエンドが担う5つの責務を整理し、そのうちの部品化という仕事をI-02とI-03で扱うとお伝えしました。この講義は、その部品化の入口です。H-10で学んだ共通部品という設計上の考え方を、Reactでは実際にどう形にするのか。設計として理解していたものを、ここからは実装の単位として捉え直していきます。
このスライドのポイント
- I-01で整理したフロントエンドの5責務のうち、部品化はI-02・I-03で扱うと予告した
- この講義はその部品化の入口
- H-10で学んだ「共通部品」という設計上の考え方を、実装の単位として捉え直す
コンポーネントとは何か
コンポーネントとは、UIの再利用できる部品のことです。Reactでは、propsを受け取ってJSX（見た目を書く記法。I-01で触れました）を返す関数として書きます。E-07で学んだ関数の、画面版だと考えてください。そして画面全体は、このコンポーネントを入れ子にしたツリー、つまり木構造で構成されます。これはG-02で見たDOMツリーと同じ、木構造の考え方です。H-10で設計上の言葉として出てきた共通部品が、ここで実装の形を持つことになります。
このスライドのポイント
- コンポーネント＝UIの再利用できる部品
- Reactでは「propsを受け取りJSXを返す関数」（E-07の関数の画面版）
- 画面はコンポーネントの入れ子ツリーで構成される（G-02のDOMツリーと同じ木構造）
- H-10の共通部品が、ここで実装の形を持つ
なぜ部品の単位が必要か
この部品という単位がわからないと、AIが生成したコードを読むときの区切りが見えません。どこからどこまでが一つの部品なのかがわからず、変更したい場所を正しく指し示せなくなります。また、AIが画面全体を巨大な一つのファイルとして作ってしまったときにも、どう分ければよいかの指示が出せません。部品という単位を持つことが、コードを読み、直す指示を出すための土台になります。
このスライドのポイント
- 単位がわからないと、AI生成コードのどこからどこまでが一部品かが読めない
- 変更したい場所を指し示せず、直す指示が出せない
- AIが画面全体を巨大な1ファイルで作っても、分割の指示ができない
部品ツリーの構造
構造を、経費一覧画面を例に見てみます。いちばん外側にページ全体があり、その中にヘッダーと、経費の一覧が入ります。一覧の中には、経費の一行を表す部品が件数のぶんだけ並び、その下に申請ボタンが置かれます。このように、大きな部品の中に小さな部品が入る入れ子の関係を、部品ツリーと呼びます。画面を見たら、まずはこのツリーの形を思い描けるようにしましょう。
このスライドのポイント
- 経費一覧画面の部品ツリー: Page > Header ＋ ExpenseList > ExpenseItem×N ＋ SubmitButton
- 大きな部品の中に小さな部品が入る入れ子の関係
- 画面を見たら、まずこのツリーの形を思い描く
同じ部品を使い回す
再利用の利点を、ボタンで考えます。同じ見た目と動きのボタンを、三つの画面で使うとします。部品にしていなければ、三か所に同じコードを書き、直すときも三か所を直すことになります。ボタンを一つの部品にしておけば、その一か所を直すだけで、使っている全画面に反映されます。E-07やH-10で予告した、一度書いて使い回すという話が、ここで実際に形になります。
このスライドのポイント
- 同じボタンを3画面で使う→Buttonコンポーネント1つを再利用
- 部品にしないと、3か所に同じコードを書き、直すのも3か所
- 部品にすれば修正1箇所で全画面反映（E-07・H-10で予告した話の実現）
技術サンプル——コンポーネントの形を読む
サンプルを見てみましょう。ExpenseItemという関数が、経費の一行を表すJSXを返しています。この、関数が見た目を返している形そのものがコンポーネントです。読むときの手がかりは二つあります。一つは、関数がJSXを返していること。もう一つは、部品の名前が大文字で始まるという約束です。AIにこの画面の分割を尋ねるときは、ツリー図で見せてもらったうえで、一つの部品に役割が二つ以上入っているものはどれかを合わせて聞くとよいでしょう。
混同しやすい——タグと部品の見分け
見分けを一つ持っておきましょう。JSXの中には、liやspanのような小文字で始まるタグと、ExpenseItemのような大文字で始まる部品が混ざって現れます。小文字で始まるものは、G-01で学んだHTMLのタグです。大文字で始まるものは、自分で作ったコンポーネントです。この最初の一文字が小文字か大文字かが、両者を見分けるための約束になっています。
このスライドのポイント
- HTMLのタグ（小文字始まり・G-01）vs コンポーネント（大文字始まり・自作部品）
- JSXの中に両者が混在するので、見分けを持つ
- 見分けの決め手は「最初の一文字が小文字か大文字か」
バイブコーディングでの確認点
バイブコーディングでは、AIが作った各部品に対して、この部品の役割を一行で言うと何ですか、と聞いてみてください。一行で言い切れない部品は、役割を持ちすぎている可能性が高く、分割の候補になります。これはE-07で学んだ、関数が一つのことをしているかを確かめる型と、まったく同じ考え方です。部品の粒度は、役割を一行で言えるかどうかで測りましょう。
このスライドのポイント
- AIの各部品に「このコンポーネントの役割を1行で言うと？」を聞く
- 1行で言えない部品は役割を持ちすぎ→分割の候補
- E-07の「関数が1つのことをしているか」の確認と同じ型
まとめと一問一答
では一問一答です。Reactのコンポーネントの正体は何でしょうか。……答えは、propsを受け取ってJSXを返す関数です。30秒でまとめます。コンポーネントはUIの再利用できる部品で、関数として書き、入れ子のツリーで画面を作ります。一つの部品に一つの役割を持たせるのが、良い分割の目安でした。次回のI-03では、その部品へ外から値を渡すpropsを扱います。関連資料は、「SaaS機能パーツ100」と「リファクタリング指示文50」です。
このスライドのポイント
- 一問一答: Reactのコンポーネントの正体は？ → propsを受け取りJSXを返す関数
- 30秒まとめ: コンポーネント＝UIの再利用できる部品／関数として書く／入れ子ツリーで画面を作る／1部品1役割が良い分割の目安
- 次回: I-03、部品へ外から値を渡すpropsへ
- 関連資料: 「SaaS機能パーツ100」「リファクタリング指示文50」
