React

React とは

React は、Meta (旧 Facebook) が 2013 年にオープンソース化した UI ライブラリで、コンポーネントベースのアーキテクチャと宣言的な記法で UI を構築する。フロントエンド開発で最も広く使われているライブラリだ。

コンポーネント

コンポーネントのコード例を示す。

// 関数コンポーネント (現在の標準)
function UserCard({ name, email }: { name: string; email: string }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

// 使用
<UserCard name="Alice" email="alice@example.com" />

Hooks

React 16.8 で導入された Hooks で、関数コンポーネントに状態管理と副作用を追加する。

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // count が変わるたびに実行

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

Hook	用途
useState	状態管理
useEffect	副作用 (API 呼び出し、DOM 操作)
useRef	DOM 参照、値の保持 (再レンダリングなし)
useMemo	計算結果のメモ化
useCallback	関数のメモ化
useContext	コンテキストの参照

Server Components (React 19)

Server Components (React 19) のコード例を示す。

// Server Component (デフォルト): サーバーで実行、JS がクライアントに送られない
async function UserList() {
  const users = await db.users.findMany(); // サーバーで直接 DB アクセス
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

// Client Component: ブラウザで実行
'use client';
function SearchBox() {
  const [query, setQuery] = useState('');
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

Server Components はサーバーで実行されるため、DB アクセスや API キーの使用が安全にできる。JavaScript がクライアントに送られないため、バンドルサイズが削減される。

Vue / Svelte との比較

Vue / Svelte との主な違いを以下に比較する。

観点	React	Vue	Svelte
アプローチ	ライブラリ (自由度高い)	フレームワーク (規約あり)	コンパイラ
テンプレート	JSX	SFC (template + script)	SFC
状態管理	Hooks, Zustand, Jotai	Composition API, Pinia	$: リアクティブ宣言
エコシステム	最大	大きい	成長中
学習コスト	中程度	低い	低い

Next.js との関係

React 単体はルーティング、SSR、ビルド設定を提供しない。Next.js がこれらを統合し、React アプリケーションのフルスタックフレームワークとして機能する。React チームも Next.js を推奨している。

実務での活用方法は関連書籍にも詳しい。