React

この用語をシェア

概要

Reactは、UIを「関数コンポーネント」という単位で組み立て、propsとstateの変化に応じて自動的に再描画する宣言的UIライブラリです。開発の起点はFacebook社内で、2011年にニュースフィード機能の再構築のためJordan Walke氏が試作し、2012年にInstagram.comへ導入、2013年5月のJSConf USでオープンソースとして公開されました。以来10年以上にわたりMeta社内（Facebook、Instagram、WhatsApp Web等）で継続的に利用されながら、外部コミュニティと共同でメンテナンスされています。ライセンスはMITで、npm経由で誰でも無償で利用できます。

重要な位置づけとして、Reactは「フレームワーク」ではなく「ライブラリ」を名乗っている点があります。ルーティング・状態管理・データフェッチ・ビルド設定といった周辺機能は同梱せず、開発者が用途に応じてNext.jsやReact Router、TanStack Queryなどを組み合わせる設計です。この「最小限のコアAPI＋自由な組み合わせ」という思想が、Angularのような統合フレームワークとの最大の違いであり、Reactのエコシステムが多様化した理由でもあります。

パッケージ構成としては、UIロジックを担うreact本体と、Web向けDOM描画を担うreact-domが分離されています。同じReactのコンポーネントモデルを使いながら、iOSやAndroidのネイティブUIを描画するReact Native、3D描画ライブラリと組み合わせるreact-three-fiberなど、「Reactというプログラミングモデルを様々なレンダラーで動かす」という設計が採用されています。2026年時点の最新安定版はReact 19系で、Server ComponentsやActionsといったサーバー統合機能がコア機能として取り込まれています。

主要特徴

• コンポーネントベースアーキテクチャ：ボタン・カード・フォームなどUIを独立した部品に分割し、propsで値を受け渡ししながら組み合わせる。同じコンポーネントを異なる画面で再利用でき、テストや保守がしやすくなる。
• 仮想DOM (Virtual DOM) と差分検出：状態が変化するたびに実DOMを直接書き換えるのではなく、メモリ上の仮想DOMツリーを再計算し、変更差分（diff）のみを実DOMに反映する「reconciliation（差分検出）」処理を行う。これによりDOM操作コストを最小化する。
• Fiberアーキテクチャ：React 16（2017年）で刷新されたレンダリングエンジン。レンダリング作業を小さな単位に分割し、優先度の高い更新（ユーザー入力など）を先に処理できる「中断可能なレンダリング」を実現する、後述のConcurrent機能の土台。
• JSX：JavaScript内にHTMLライクな構文でUI構造を記述するシンタックス拡張。ビルド時にBabelやSWCが素のJavaScript（React.createElement呼び出し）へトランスパイルする。
• 単方向データフロー：親から子への一方向のprops伝播が基本で、データの流れを追いやすくデバッグしやすい。
• Hooksによる関数コンポーネント中心の設計：2019年のReact 16.8以降、状態やライフサイクル処理をクラスなしで扱えるようになり、ロジックの再利用（カスタムフック）が容易になった。
• Concurrent Rendering：React 18（2022年）で導入。自動バッチング、startTransition、Suspenseとの連携により、重い描画処理中でも入力への応答性を保てる。
• Server Components：React 19（2024年）で正式導入。サーバー上でのみ実行されるコンポーネントを混在させ、クライアントに送信するJavaScriptバンドルのサイズを削減できる。
• 豊富なエコシステム：Next.js・React Router・TanStack Query・Storybookなど、用途別のライブラリやツールが充実しており、規模やチーム構成に応じて構成を選べる。

コアコンセプト

Reactでの開発は、以下の基本要素の組み合わせで成り立っています。

• コンポーネント：UIの最小単位。関数として定義し、JSXを返す。PascalCase（先頭大文字）で命名する規則になっている。
• Props：親から子へ渡す読み取り専用のパラメータ。コンポーネント内部から書き換えることはできない。
• State：コンポーネントが内部で保持する可変データ。useStateやuseReducerで管理し、更新すると再レンダリングがスケジュールされる。
• Hooks：関数コンポーネントに状態やライフサイクル処理を組み込むための関数群。主なものにuseState（状態管理）、useEffect（副作用・データ取得）、useContext（コンテキスト参照）、useMemo／useCallback（メモ化によるパフォーマンス最適化）、useRef（DOM参照・再レンダリングを伴わない値の保持）がある。React 19では非同期リソースを読み取るuse()フックや、フォーム送信状態を扱うuseActionStateが加わった。
• Context：propsのバケツリレー（prop drilling）を避け、コンポーネントツリー全体でテーマ・認証情報などのデータを共有する仕組み。
• Reconciliation（差分検出）とkey：state更新時にReactが仮想DOMを再計算し、key属性を手がかりに変更箇所だけを実DOMに反映するアルゴリズム。リストレンダリング時に配列のindexをkeyに使うなど指定を誤ると、意図しない再描画や入力値のずれが発生しやすい典型的な落とし穴になっている。

基本的なコード例

useStateとuseEffectを使った典型的な例です。ボタンクリックのたびにカウンターの値を更新し、副作用としてページタイトルへ反映しています。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `カウント: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      クリック回数: {count}
    </button>
  );
}

同じロジックを複数のコンポーネントで使い回したい場合は、useから始まる名前でカスタムフックとして切り出すのが定石です。

function useUserData(userId) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(setUser);
  }, [userId]);

  return user;
}

このuseUserDataは、ユーザーIDが変わるたびにデータを再取得し、複数の画面から同じ取得ロジックを呼び出せるようにしたものです。フェッチ処理・ローディング状態・エラー処理をコンポーネントごとに書く代わりに、カスタムフックへ集約することでコードの重複を防げます。

メリット・デメリット

メリット

• 巨大なエコシステムと求人市場：npmにはReact関連パッケージが多数公開されており、Next.js・Remixなどのフレームワーク、TanStack Query・Zustand等の状態管理ライブラリ、Storybookのような開発ツールが揃っている。フロントエンド求人でも採用実績が多く、学習リソースや事例を見つけやすい。
• 柔軟なアーキテクチャ選択：ライブラリであるがゆえに、ルーティングや状態管理を自由に選べる。小規模プロジェクトでは最小構成、大規模プロジェクトではNext.js＋TypeScript＋TanStack Queryのような構成と、規模に応じて組み方を変えられる。
• 段階的なパフォーマンス最適化手段：Fiberによる中断可能なレンダリング、Concurrent機能（startTransition、useDeferredValue）、Server Componentsによるバンドル削減など、性能問題への対処法が用意されている。
• React NativeによるWeb/モバイルの知識共有：コンポーネント設計やHooksの考え方をモバイルアプリ開発に転用でき、チームのスキルセットを一本化しやすい。
• 大企業による継続的な投資：Meta社内サービス（Facebook、Instagram、WhatsApp Web等）で使われ続けているため、大規模利用に耐える改善が継続的に行われている。

デメリット・注意点

• 「フレームワーク不在」による意思決定コスト：ルーティング、状態管理、フォーム処理、データフェッチなど標準機能として提供されない部分をチームごとに選定する必要があり、プロジェクトごとに構成がばらつきやすい。
• パラダイムシフトの多さ：クラスコンポーネント中心からHooks中心へ（2019年）、Concurrent機能の追加（2022年）、Server Components導入（2024年）と、数年単位で推奨される書き方が変わってきた。古いコードベースの改修コストが発生しやすい。
• SEO・初期表示対策が別途必要：クライアントサイドレンダリングのみの構成では検索エンジンのクロールや初期表示速度が不利になりやすく、Next.jsなどによるSSR/SSGの導入が事実上必須になるケースが多い。
• JSXやビルド設定の学習コスト：素のHTML/JSと文法が異なるJSX、Babel/SWCによるトランスパイル、Viteなどのビルド設定など、環境構築段階で学ぶことが多い。
• Hooksの誤用による不具合：useEffectの依存配列の指定漏れによる無限レンダリングや、クリーンアップ処理忘れによるメモリリークなど、挙動を正しく理解していないと発生しやすい典型的なバグパターンがある。

混同されやすい用語・類似技術との違い

Reactは名称や役割の近い技術と混同されがちです。代表的な違いを整理します。

実務での採用ポイント

採用が向いているケース

• 複雑な状態管理やインタラクションが多い管理画面・SPAを構築する場合
• 求人・保守要員の確保を重視するチーム（React経験者の母数が多い）
• WebとモバイルアプリでUIロジックを一部共有したい場合（React Nativeとの組み合わせ）
• Next.jsやRemixのエコシステムを活用し、SSRを含む本番運用を前提とする場合

他の選択肢を検討すべきケース

• ランディングページや会社紹介サイトなど、インタラクションの少ない静的サイト：静的サイトジェネレーターやシンプルなHTML/CSSの方がビルド・保守コストが低いことが多い
• 学習コストを抑えたい小規模チーム：公式ルーター・状態管理が統合されたVue.jsの方が立ち上げが早いことが多い
• 厳格な規約に沿った大規模組織開発：Angularのようなオピニオンフレームワークの方が統制を取りやすい場合がある

実務では、TypeScriptとの併用、ESLint/Prettierによるコード品質の統一、React Testing Library・Vitestによるテスト、TanStack Query（旧React Query）によるサーバー状態管理の分離が定石とされている。新規プロジェクトでは素のReact単体よりも、Next.jsのようなフレームワークから始めて必要に応じて機能を絞り込む方が、SSR・ルーティング・画像最適化などの周辺実装コストを抑えられる。

2025-2026年の最新動向

2024年12月にリリースされたReact 19で、Server Components・Server Actions・use()フック・React Compiler（自動メモ化）が導入され、パフォーマンス最適化の多くが自動化されました。React CompilerはuseMemo・useCallbackを手動で書かなくても、ビルド時に不要な再レンダリングを検出して最適化するコンパイラで、2025年以降Next.jsなどのフレームワーク経由での採用が広がっています。

フルスタックフレームワーク（Next.js App Router・Remix）との統合が深化し、サーバーサイドレンダリングとServer Componentsを前提にした設計がデフォルトの開発パターンになりつつあります。Suspenseによるデータフェッチングの標準化、フォーム送信を扱うuseActionState・useFormStatusの実務利用も進んでいます。

状態管理ではZustand・Jotaiのような軽量ライブラリがReduxに代わる選択肢として定着し、サーバー状態の管理はTanStack Queryがデファクトスタンダードになりつつあります。テスト分野ではVitest + React Testing Library、ビルドツールではViteがCreate React Appの後継として広く使われています（Create React App自体はReactチームから非推奨の案内が出ています）。

関連用語

• Next.js - Reactを土台にしたフルスタックフレームワーク
• React Native - Reactのコンポーネントモデルを使うモバイルフレームワーク
• JavaScript - Reactのベース言語
• TypeScript - 型安全なReact開発に使われる言語
• Angular - 競合するフルスタックフレームワーク
• Svelte - コンパイラベースの競合UIライブラリ
• Vite - Reactプロジェクトで広く使われる高速ビルドツール

外部リンク

• React公式サイト
• React GitHub
• React公式チュートリアル

この用語についてもっと詳しく

Reactに関するご質問や、システム導入のご相談など、お気軽にお問い合わせください。