Reactコンポーネント設計の基礎

Reactはユーザーインターフェースを「コンポーネント」という再利用可能な部品に分割して構築するライブラリである。「UIは状態の関数である（UI = f(state)）」という考え方が核心で、状態が変わると自動的にUIが更新される。

この章で作るもの（全体像）

基礎編を貫く Todo アプリの第 1 ステップとして、App → TodoList → TodoItem のツリーを props だけで作る。

コンポーネントの基本

// シンプルなコンポーネント
export function Greeting() {
  return <h1>こんにちは</h1>;
}

// JSX: JavaScript の中に HTML のような構文が書ける
// 実際には React.createElement に変換される

JSXのルール:

• 必ず一つのルート要素を返す（<>...</> のフラグメントで複数をラップできる）
• class ではなく className を使う（HTMLと同じ属性名にできないため）
• {} でJavaScript式を埋め込める

Props（コンポーネントへの入力）

// Props の型定義
interface PatientCardProps {
  name: string;
  age: number;
  status: "active" | "inactive";
}

// Props を受け取るコンポーネント
export function PatientCard({ name, age, status }: PatientCardProps) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>年齢: {age}</p>
      <span className={status === "active" ? "text-green-500" : "text-gray-400"}>
        {status}
      </span>
    </div>
  );
}

// 使用側
<PatientCard name="山田太郎" age={45} status="active" />

Propsはコンポーネントへの引数であり、読み取り専用。コンポーネントはPropsを変更しない（純粋関数の考え方）。

リストのレンダリング

const patients = [
  { id: "1", name: "山田太郎", age: 45 },
  { id: "2", name: "佐藤花子", age: 32 },
];

export function PatientList() {
  return (
    <ul>
      {patients.map((patient) => (
        <PatientCard
          key={patient.id}   // keyは必須（Reactが差分更新に使う）
          name={patient.name}
          age={patient.age}
          status="active"
        />
      ))}
    </ul>
  );
}

コンポーネントの分割方針

単一責任原則: 1つのコンポーネントは1つの役割を持つ。大きくなったら分割する目安：

• 100行を超えたら分割を検討
• 同じUIパターンが2箇所以上に現れたら共通化
• 「〇〇カード」「〇〇リスト」「〇〇フォーム」のように役割で命名できるか

Page コンポーネント（ページ全体）
  └─ Layout（ヘッダー・サイドバー・フッター）
       └─ PatientList（患者一覧）
            └─ PatientCard（患者カード）× n
                 └─ StatusBadge（ステータスバッジ）

Propsのバケツリレー問題

コンポーネントツリーが深くなると、上位から下位へPropsを何段も経由して渡す「Propsのドリリング」が発生する。3階層を超えるようなら状態管理ライブラリ（b12参照）の検討サインとなる。

Vite + React Router v7 のファイル構成

このカリキュラムでは web/src/ 以下に手動でファイルを配置し、React Router v7 でルーティングを定義する：

web/src/
├── main.tsx          アプリのエントリーポイント（RouterProvider）
├── router.tsx        ルーティング設定（createBrowserRouter）
├── App.tsx           共通レイアウト（Header + Outlet）
├── pages/
│   ├── Home.tsx      タイムライン（/）
│   ├── Login.tsx     ログイン（/login）
│   └── Profile.tsx   プロフィール（/profile/:username）
└── components/
    ├── PostCard.tsx   投稿カード（再利用可能なUI部品）
    └── Header.tsx    ヘッダーナビゲーション

pages/ がURL対応のページコンポーネント、components/ が再利用される部品コンポーネント。ルーティングの詳細は b14 を参照。

手を動かす

基礎編を通して育てる Todo アプリ の第 1 ステップ。ここでは props だけで静的な一覧を描画する。

やること

1. web/ ディレクトリで Vite + React + TypeScript のひな型を作る
2. web/src/components/TodoItem.tsx を作り、text と done を props で受け取る
3. web/src/App.tsx でハードコードした Todo 配列を TodoItem に map で流し込む

web/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   └── components/
│       └── TodoItem.tsx
└── package.json

# 初回のみ：web アプリのひな型を生成
pnpm create vite@latest web -- --template react-ts
cd web
pnpm install

type Props = {
  text: string;
  done: boolean;
};

export function TodoItem({ text, done }: Props) {
  return (
    <li style={{ textDecoration: done ? 'line-through' : 'none' }}>
      {text}
    </li>
  );
}

import { TodoItem } from './components/TodoItem';

const todos = [
  { id: 1, text: 'React のコンポーネント基本を学ぶ', done: true },
  { id: 2, text: 'Props でデータを流す', done: true },
  { id: 3, text: 'リストレンダリングを書く', done: false },
];

export default function App() {
  return (
    <main>
      <h1>Todo</h1>
      <ul>
        {todos.map((t) => (
          <TodoItem key={t.id} text={t.text} done={t.done} />
        ))}
      </ul>
    </main>
  );
}

実行

pnpm dev

成功条件

• http://localhost:5173 を開くと、3 件の Todo が一覧表示されていること
• done: true の 2 件に取り消し線が付いていること
• ブラウザの DevTools Console にエラーが出ていないこと
• App.tsx の todos 配列に 4 件目を追加すると、画面にも即座に反映されること

次の章（b12）で 入力フォーム と チェックボックスでの done 切り替え を加える。今は props のみで状態はまだない。

参考リソース

• React公式ドキュメント（https://ja.react.dev/）— 日本語対応、インタラクティブなチュートリアル付き
• React Router v7（https://reactrouter.com/）
• 『Reactハンズオンラーニング』Leigh Halliday著（O’Reilly）

確認クイズ

生きているコード

本ドキュメントで扱ったパターンの完全な動作コードは、メンター側リポジトリの参照ブランチで確認できます。

• 対応 Week: W2 / W9 / W10
• 参照ブランチ:
• W2: reference/week-2
• W9: reference/week-9
• W10: reference/week-10
• 対応 checklist 項目: M2, M3

ブランチの作り方・見方は b00-curriculum-map を参照してください。