IT 技書の森

React

コンポーネントベースの UI ライブラリで、宣言的な記法と仮想 DOM で効率的な UI 構築を実現する

フロントエンドUI

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 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 との比較

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

Next.js との関係

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

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

関連用語