react の使い方 — JavaScriptでUIを構築するためのライブラリ

一言でいうと

Reactは、コンポーネントベースでユーザーインターフェースを構築するためのJavaScriptライブラリです。宣言的なUIの記述と効率的な差分レンダリングにより、複雑なWebアプリケーションを予測可能かつ保守しやすい形で開発できます。

どんな時に使う？

• SPA（シングルページアプリケーション）の構築 — Next.js や React Router と組み合わせて、ページ遷移のないスムーズなWebアプリを開発する
• 再利用可能なUIコンポーネントライブラリの開発 — ボタン、モーダル、フォームなどを独立したコンポーネントとして設計・共有する
• 既存のWebページへの部分的なUI追加 — サーバーサイドレンダリングされたページの一部にインタラクティブなウィジェットを埋め込む

インストール

# npm
npm install react react-dom

# yarn
yarn add react react-dom

# pnpm
pnpm add react react-dom

補足: react はコアライブラリ、react-dom はブラウザ向けのレンダリングエンジンです。Webアプリケーション開発では両方が必要です。

TypeScript を使用する場合、React 19 では型定義が本体に同梱されているため、別途 @types/react をインストールする必要はありません。

※ 本記事は React 19.x（v19.2.4） を前提としています。React 18 以前とはAPIや挙動が異なる部分があります。

基本的な使い方

最もシンプルなReactアプリケーションの例です。

// main.tsx
import { createRoot } from 'react-dom/client';

function App() {
  return <h1>Hello, React!</h1>;
}

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

状態管理を含む、より実践的な例です。

import { useState } from 'react';

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
}

export default Counter;

よく使うAPI — react の主要フック・関数5選

1. useState — 状態管理の基本

コンポーネントにローカルな状態を持たせます。

import { useState } from 'react';

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn((prev) => !prev)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

2. useEffect — 副作用の実行

データフェッチ、DOM操作、タイマーなど、レンダリング以外の処理を行います。

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
}

function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const controller = new AbortController();

    fetch('https://jsonplaceholder.typicode.com/users', {
      signal: controller.signal,
    })
      .then((res) => res.json())
      .then((data: User[]) => {
        setUsers(data);
        setLoading(false);
      })
      .catch((err) => {
        if (err.name !== 'AbortError') {
          console.error(err);
          setLoading(false);
        }
      });

    return () => controller.abort();
  }, []);

  if (loading) return <p>読み込み中...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

3. useRef — DOMアクセスとミュータブルな値の保持

再レンダリングを発生させずに値を保持したり、DOM要素に直接アクセスしたりします。

import { useRef } from 'react';

function TextInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="ここに入力" />
      <button onClick={handleClick}>フォーカスを当てる</button>
    </div>
  );
}

4. useMemo / useCallback — パフォーマンス最適化

高コストな計算結果やコールバック関数をメモ化し、不要な再計算・再生成を防ぎます。

import { useState, useMemo, useCallback } from 'react';

function ExpensiveList({ items }: { items: number[] }) {
  const [filter, setFilter] = useState('');
  const [count, setCount] = useState(0);

  // items や filter が変わらない限り再計算されない
  const filteredItems = useMemo(() => {
    console.log('フィルタリング実行');
    return items.filter((item) => String(item).includes(filter));
  }, [items, filter]);

  // count が変わっても関数の参照が変わらない
  const handleReset = useCallback(() => {
    setFilter('');
  }, []);

  return (
    <div>
      <input
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="フィルタ"
      />
      <button onClick={handleReset}>リセット</button>
      <button onClick={() => setCount((c) => c + 1)}>
        再レンダリング ({count})
      </button>
      <ul>
        {filteredItems.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

React 19 の補足: React 19 ではコンパイラ（React Compiler）による自動メモ化が進んでいます。将来的に useMemo / useCallback の手動記述が不要になるケースが増える見込みです。

5. use — Promise・Contextの読み取り（React 19 新API）

React 19 で正式に追加された use フックは、Promise や Context をコンポーネント内で直接読み取れます。

import { use, Suspense } from 'react';

async function fetchUser(id: number): Promise<{ id: number; name: string }> {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  return res.json();
}

// Promise をコンポーネントの外、またはキャッシュ経由で生成
const userPromise = fetchUser(1);

function UserProfile() {
  const user = use(userPromise);

  return (
    <div>
      <h2>{user.name}</h2>
      <p>ID: {user.id}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>読み込み中...</p>}>
      <UserProfile />
    </Suspense>
  );
}

注意: use は条件分岐やループの中でも呼び出せる点が他のフックと異なります。ただし、Suspense と組み合わせて使う必要があります。

類似パッケージとの比較

Reactの最大の強みはエコシステムの圧倒的な規模と求人・情報量の多さです。技術選定において「安全な選択肢」として依然として最有力です。

注意点・Tips

1. React 19 の破壊的変更に注意

React 19 では以下の重要な変更があります。

• forwardRef が不要に — ref が通常のpropsとして渡せるようになりました
• useContext → use(Context) — use フックでContextを読み取る新しいパターンが追加されました（useContext も引き続き使用可能）
• ref コールバックのクリーンアップ — ref コールバックから関数を返すとクリーンアップ関数として扱われます

// React 19: forwardRef 不要
function MyInput({ ref, ...props }: { ref?: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />;
}

2. key の正しい使い方

配列のレンダリングでは、安定した一意の key を必ず指定してください。インデックスを key にするのは、要素の追加・削除・並べ替えがない場合のみ許容されます。

// ✅ 良い例
{users.map((user) => <UserCard key={user.id} user={user} />)}

// ❌ 悪い例（並べ替えや削除がある場合）
{users.map((user, index) => <UserCard key={index} user={user} />)}

3. useEffect の依存配列を正しく管理する

依存配列の漏れはバグの温床です。ESLintの react-hooks/exhaustive-deps ルールを必ず有効にしてください。

npm install -D eslint-plugin-react-hooks

4. 状態の設計原則

• 状態は最小限に — 計算で導出できる値は状態にしない
• 状態は適切な位置に — 必要なコンポーネントに最も近い場所で管理する
• 不変性を守る — オブジェクトや配列は直接変更せず、新しい参照を作る

// ✅ 正しい更新
setItems((prev) => [...prev, newItem]);
setUser((prev) => ({ ...prev, name: 'New Name' }));

// ❌ ミュータブルな変更（Reactが変更を検知できない）
items.push(newItem);
setItems(items);

5. StrictMode を開発時に有効にする

開発環境では StrictMode を使い、潜在的な問題を早期に検出しましょう。コンポーネントが2回レンダリングされるのは意図的な挙動です。

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

まとめ

Reactは19.xで use フックやServer Components、Actions など大きな進化を遂げ、より直感的で強力なUI開発が可能になりました。エコシステムの成熟度と情報量の豊富さは他のライブラリを大きく引き離しており、2025年現在もフロントエンド開発の第一選択肢です。新規プロジェクトでは React 19 の新機能を積極的に活用しつつ、Next.js などのフレームワークと組み合わせて使うのがベストプラクティスとなっています。