部品とレイアウト

1. 画面は部品の組み合わせ

ネットショップのトップページを思い浮かべてください。上にヘッダー、真ん中に商品カードがずらりと並び、下にフッターがあります。商品カードはどれも同じ形で、写真・商品名・価格だけが違います。

ReactとNext.jsでは、こうした画面のまとまりをコンポーネント（部品）として作り、組み合わせて画面を完成させます。

2. コンポーネントのコードを眺めてみる

実際のコードを少しだけ見てみましょう。書けるようになる必要はありません。「どこに何が書いてあるか」が分かれば、AIや開発者が作ったものを確認するときに役立ちます。

// 商品カードという部品を定義する
export function ProductCard({ name, price }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{price}円</p>
    </div>
  );
}

// ページの中で、部品を使う
<ProductCard name="りんご" price={300} />
<ProductCard name="みかん" price={200} />

上半分が「部品の作り方」、下半分が「部品の使い方」です。

HTMLとよく似た <div> や <h3> が、プログラムの中に直接書かれていますね。この書き方をJSX（ジェイエスエックス）と呼びます。{name} のように波かっこで囲んだ部分に、値が差し込まれます。

部品の名前は ProductCard のように大文字で始まる決まりがあります。コードの中で大文字で始まるタグを見たら「これは誰かが作った部品だな」と分かります。

3. props と state：部品が扱う2種類の値

部品が扱う値には、大きく2つの種類があります。この2つの違いは、開発者との会話でもよく出てきます。

props（プロップス）：外から渡す値

先ほどの例の name="りんご" や price={300} がpropsです。部品を使う側から、部品に値を渡します。部品の側では、受け取った値を表示するだけで、勝手に書き換えません。

state（ステート）：部品が覚えている値

一方、利用者の操作によって部品の中で変化していく値がstateです。例えば、「カートに入れる」ボタンを押すたびに増える個数や、開いたり閉じたりするメニューの状態などです。stateが変わると、Reactがその部分の画面を自動で描き直してくれます。

stateを使う部品は、ブラウザ側で動く必要があります。この点は第4章の「"use client"」で再び登場します。

4. 見た目を付ける：CSSとTailwind CSS

部品の見た目（色・余白・文字の大きさ）は、CSSで指定します。Next.jsでよく使われる方法は主に2つです。

CSS Modules（シーエスエス・モジュールズ）

部品ごとに専用のCSSファイル（例：ProductCard.module.css）を作る方法。ほかの部品の見た目に影響しないのが利点です。

Tailwind CSS（テイルウィンド・シーエスエス）

あらかじめ用意された短いクラス名を並べて、見た目を指定する方法。Next.jsの新規作成時にも選べ、AIが書くコードでも非常によく使われます。

<button className="px-4 py-2 bg-blue-600 text-white rounded">
  購入する
</button>

px-4＝左右の余白、py-2＝上下の余白、bg-blue-600＝青い背景、text-white＝白い文字、rounded＝角を丸く。

クラス名は英単語の略なので、慣れると「何となく」読めるようになります。「ボタンの色を変えたい」とAIに頼んだとき、ここの bg-blue-600 が変わるのだな、と分かれば十分です。

5. 部品に分けるメリットと、フォルダの習慣

• 使い回せる：一度作ったボタンや商品カードを、どのページでも使えます。
• 修正が1か所で済む：ボタンのデザインを変えたいとき、部品を1つ直せば全ページに反映されます。
• 分担しやすい：「ヘッダーはAさん、商品カードはBさん」と作業を分けられます。
• 確認しやすい：部品ごとに動作を確かめられるので、不具合の場所を特定しやすくなります。

部品は、components というフォルダにまとめておくのが一般的です。app フォルダが「ページ（部屋）」、components フォルダが「部品の倉庫」と考えると、プロジェクトの全体像がつかみやすくなります。

my-site/
├─ app/            ← ページ（URLになる）
│   ├─ layout.tsx
│   ├─ page.tsx
│   └─ products/[id]/page.tsx
├─ components/     ← 部品の倉庫
│   ├─ Header.tsx
│   └─ ProductCard.tsx
├─ public/         ← 画像などをそのまま置く場所
└─ package.json    ← 使っている道具の一覧（第7章）