React

UIを「部品」として組み立てる、Metaが開発したJavaScriptライブラリ。

コンポーネント
UIの「部品」。レゴブロックのように組み合わせて画面を作る。
State
コンポーネントが「覚えておく」値。変わると画面が再描画される。
Props
親から子へ渡すデータ。関数の引数のようなもの。
Hooks
useState、useEffectなど、関数コンポーネントに機能を追加するAPI。

Reactとは？

レゴブロックで考える

Reactでは、UIを「コンポーネント」という小さな部品に分けて作る。レゴブロックを組み合わせて家を作るように、ボタン、カード、ヘッダーなどの部品を組み合わせてWebページを作る。

コンポーネントツリー

↑ コンポーネントのツリー構造

セットアップ

2025年以降は Vite + TypeScript が標準。Create React App は非推奨。

Terminal
# Vite（推奨）
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

コンポーネント

コンポーネントは「UIを返す関数」。propsで親からデータを受け取る。

Greeting.tsx
function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}!</h1>;
}


export default Greeting;
propsは「郵便配達」

親コンポーネントが「手紙（データ）」を子に渡す。子は受け取った手紙を読んで表示するだけ。手紙を書き換えることはできない（読み取り専用）。

Props Example
// 親コンポーネント
function App() {
  return <Card title="React" body="UIライブラリ" />;
}


// 子コンポーネント
function Card({ title, body }: { title: string; body: string }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{body}</p>
    </div>
  );
}

State（状態）

Stateは「コンポーネントが覚えておく値」。変更すると画面が自動で更新される。

初心者がハマるポイント

普通の変数を書き換えても画面は更新されない！必ず useState を使う。

Bad
// ❌ Bad: 直接書き換え（動かない）
let count = 0;


function Counter() {
  return (
    <button onClick={() => count++}>
      Count: {count}
    </button>
  );
}
Good
// ✅ Good: useState を使う
import { useState } from 'react';


function Counter() {
  const [count, setCount] = useState(0);


  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

useEffect

「副作用」を扱うHook。API呼び出し、タイマー設定、DOMの直接操作などに使う。

useEffectは「舞台の裏方」

舞台（UI）が始まった後、裏で照明や音響をセットする係。観客（ユーザー）には見えない仕事をする。依存配列は「どの役者が動いたら裏方も動くか」を指定する。

useEffect Example
import { useState, useEffect } from 'react';


function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);


  useEffect(() => {
    // マウント時にAPIを呼ぶ
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // userIdが変わったら再実行


  if (!user) return <p>Loading...</p>;
  return <h1>{user.name}</h1>;
}
Tip: 依存配列 [] を空にすると、マウント時に1回だけ実行される。

次のステップ

N Next.js SSR・ルーティング・API統合 T TanStack Query サーバー状態管理 Z Zustand シンプルな状態管理

演習課題

課題1: コンポーネント
関数コンポーネントを作成してください。
課題2: useState
useState で状態管理を実装してください。