この記事の要点

ReactはMeta（旧Facebook）製のUI構築用JavaScriptライブラリ。SPAやコンポーネント指向開発の定番 UIを再利用可能な「コンポーネント」に分割して組み立てる。状態（state）と入力（props）でUIを駆動する 仮想DOM（Virtual DOM）で差分だけを実DOMに反映し、効率的に画面を更新する JSXによりJavaScript内にHTMLライクな記述ができ、見た目とロジックを近くに置ける 関数コンポーネント＋Hooks（useState/useEffect）が現在の標準スタイル 単方向データフローで状態の流れが追いやすく、大規模UIでも保守しやすい

概要

Reactは、Meta（旧Facebook）が開発・公開しているユーザーインターフェース（UI）構築用のJavaScriptライブラリです。Webアプリの画面を「コンポーネント」という再利用可能な部品に分割して組み立てる設計が特徴で、SPA（シングルページアプリケーション）や動的なUIの開発で広く使われています。Vue.jsやAngularと並ぶフロントエンドの代表格であり、求人・学習資料・エコシステムの厚さでも群を抜いています。本記事ではReactの中心概念であるコンポーネント・仮想DOM・JSX・Hooksを整理します。

Reactの主要概念

1. コンポーネントベースのアーキテクチャ
ReactはUIを小さな再利用可能な部品（コンポーネント）に分割します。ボタン、フォーム、リスト項目などを独立した部品として作り、それらを組み合わせて画面を構築します。これにより開発が効率化し、同じ部品を複数箇所で使い回せます。

2. 仮想DOM（Virtual DOM）
Reactは実際のDOMの軽量なコピー（仮想DOM）をメモリ上に保持します。状態が変化すると新旧の仮想DOMを比較（差分検出）し、変更が必要な部分だけを実DOMに反映します。DOM操作は重い処理のため、この仕組みがパフォーマンスとスムーズなユーザー体験を支えています。

3. JSX（JavaScript XML）
ReactではJSXというJavaScriptの構文拡張を使い、HTMLに似た記法でUIを記述します。見た目（マークアップ）と動作（ロジック）を同じファイル内に近接して書けるため、コンポーネントの全体像を把握しやすくなります。

// JSX：HTMLのようにUIを記述できる
function Welcome(props) {
  return <h1>こんにちは、{props.name}さん</h1>;
}

4. 単方向データフローとprops/state
Reactのデータは親から子へ一方向に流れます。親が子へ渡す読み取り専用の入力がprops、コンポーネント自身が持つ可変の状態がstateです。stateが更新されると、Reactが自動的に該当コンポーネントを再描画します。

使い方・手順

現在のReactは関数コンポーネント＋Hooksが標準です。状態はuseState、副作用（データ取得やイベント登録など）はuseEffectで扱います。

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);   // 状態の宣言

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        ＋1する
      </button>
    </div>
  );
}

export default Counter;

ボタンを押すとsetCountが状態を更新し、Reactが仮想DOMの差分を計算して画面の数字だけを書き換えます。手動でDOMを触る必要はありません。

副作用にはuseEffectを使います。例えば初回表示時にAPIからデータを取得する場合は次のように書きます。

import { useState, useEffect } from "react";

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("/api/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);   // 第2引数 [] で初回のみ実行

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

実用例・Tips

• コンポーネント分割：1コンポーネント1責務を意識し、大きくなったら小さく分ける。再利用と保守性が上がる。
• keyを付ける：リスト描画では各要素に一意のkeyを付与する。差分検出が正確になり、無駄な再描画を防げる。
• 状態は最小限に：計算で導ける値はstateにせず、描画時に算出する。状態が増えるほどバグの温床になる。
• エコシステム活用：ルーティングはReact Router、状態管理はRedux/Zustand、フレームワークとしてはNext.jsが定番。SSRやルーティングを一括で面倒見てくれる。

注意点・落とし穴

• stateの直接変更は禁止：count++のように直接書き換えず、必ずsetCountなどの更新関数を使う。直接変更すると再描画されない。
• useEffectの依存配列：第2引数の依存配列を誤ると、実行されない／無限ループになる。参照する値を正しく列挙する。
• Hooksのルール：Hooksはコンポーネントのトップレベルでのみ呼ぶ。条件分岐やループの中で呼ぶと壊れる。
• 過剰な再描画：不要な再描画はパフォーマンス低下の原因。useMemoやReact.memoで最適化する。

関連リンク

Reactを実際に動かすには開発環境のセットアップが必要です。インストールとプロジェクト作成の具体的な手順はReactのインストール手順を参照してください。