React 入門

React は Facebook（現 Meta）によって開発され、2013 年にオープンソース化された JavaScript ライブラリであり、ユーザーインターフェース、特にシングルページアプリケーション（SPA）の構築に特化しています。

React により、開発者は宣言的な方法で再利用可能な UI コンポーネントを構築できます。

React の位置付け

  • フレームワークではなくライブラリ：React はビュー層（MVC の V）に特化しており、Angular のように完全なフレームワークソリューションを提供するわけではありません
  • コンポーネント指向の考え方：UI を独立した再利用可能なコンポーネントに分割する
  • JavaScript 中心：構造、スタイル、ロジックのすべてが JavaScript で表現される

React の核心的な特徴

1. 宣言的プログラミング（Declarative）

従来の命令型プログラミング：コンピュータにやり方を指示する

// 原生 JavaScript（命令式）
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  const counter = document.getElementById('counter');
  const currentValue = parseInt(counter.textContent);
  counter.textContent = currentValue + 1;
});

React の宣言的プログラミング：コンピュータに求める結果を指示する

// React（声明式）
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

利点：

  • コードがより簡潔で直感的
  • 理解と保守が容易
  • DOM を手動で操作することによるエラーを削減
  • 状態と UI の同期を維持

2. コンポーネント指向（Component-Based）

React の核心はコンポーネント指向の考え方であり、UI を独立・再利用可能・組み合わせ可能なコンポーネントに分割します。積み木のように、各コンポーネントは自身の状態（state）とプロパティ（props）だけを管理し、ロジックが明確で保守しやすいです。

React アプリケーションは独立したコンポーネントの集合で構成され、各コンポーネントは：

  • 自身の構造、スタイル、ロジックをカプセル化している
  • 入力（props）を受け取ることができる
  • 内部状態（state）を管理できる
  • 再利用と組み合わせが可能

例

// シンプルなコンポーネント
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// コンポーネントの再利用と組み合わせ
function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

コンポーネント指向の利点：

  • 再利用性：同じコンポーネントを複数の場所で使用可能
  • 保守性：コンポーネントの変更が他の部分に影響しない
  • テスト容易性：独立したコンポーネントはユニットテストが容易
  • 協業性：チームメンバーが異なるコンポーネントを並行開発できる

3. 仮想 DOM（Virtual DOM）

仮想 DOM とは？

仮想 DOM は、実際の DOM を JavaScript オブジェクトで表現したものであり、メモリ内の軽量なデータ構造です。

動作原理：

1. 状态改变
   ↓
2. 生成新的虚拟 DOM 树
   ↓
3. 与旧虚拟 DOM 树进行对比（Diffing）
   ↓
4. 计算出最小差异（Reconciliation）
   ↓
5. 只更新真实 DOM 中变化的部分

図解による説明：

  • Virtual DOM はブラウザの DOM を軽量な JavaScript オブジェクトで表現したものです。
  • 状態が変化すると、フレームワーク（React など）はまず Virtual DOM 上で計算と比較（diff アルゴリズム）を行います。
  • その後、patch プロセスを通じて、最小限の必要な更新のみを Real DOM に適用します。

なぜ仮想 DOM が必要なのか？

実際の DOM 操作の問題点：

  • DOM 操作は非常に遅い（JavaScript の演算と比較して）
  • 頻繁な DOM 操作はページのリフローと再描画を引き起こす
  • DOM を直接操作するとエラーが発生しやすい

仮想 DOM の利点：

  • パフォーマンス最適化：バッチ更新により、実際の DOM 操作の回数を削減
  • クロスプラットフォーム：仮想 DOM はさまざまなプラットフォーム（Web、モバイル、デスクトップ）にレンダリング可能
  • 宣言的：開発者は状態のみを管理すればよく、DOM を手動で操作する必要がない

サンプル比較：

// 假设要更新 1000 个列表项
const items = Array(1000).fill(0).map((_, i) => i);

// 传统方式：每次都操作真实 DOM（慢）
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li); // 1000 次 DOM 操作
});

// React 方式：通过虚拟 DOM 批量更新
function ItemList() {
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}
// React 会智能地批量更新 DOM

4. 単方向データフロー（Unidirectional Data Flow）

React のデータは単方向に下向きに流れます。Parent（親）→ Child（子）であり、Child から Parent へ逆向きには流れません：

React はトップダウンのデータフロー方式を採用しています：

父组件
  ↓ (props)
子组件
  ↓ (props)
孙组件

特徴：

  • データは親コンポーネントから子コンポーネントへ流れる
  • 子コンポーネントはコールバック関数を通じて親コンポーネントに通信する
  • データの流れが明確で、追跡とデバッグが容易

例

function Parent() {
  const [message, setMessage] = useState('Hello');
 
  return (
    <Child
      message={message}  // データを下に渡す
      onUpdate={setMessage}  // コールバックで上に通信する
    />
  );
}

function Child({ message, onUpdate }) {
  return (
    <div>
      <p>{message}</p>
      <button onClick={() => onUpdate('Updated!')}>
        Update
      </button>
    </div>
  );
}

React の主な利点

1. 学習曲線が比較的緩やか

  • コア API が少ない
  • 主に JavaScript の知識を使用する
  • 概念が明確で、ドキュメントが充実している

2. 強力なエコシステム

  • ルーティング：React Router
  • 状態管理：Redux, Zustand, Jotai
  • UI ライブラリ：Material-UI, Ant Design, Chakra UI
  • ツールチェーン：Create React App, Vite, Next.js

3. 広範なコミュニティサポート

  • GitHub で最も人気のあるフロントエンドライブラリの一つ
  • 多数のサードパーティ製コンポーネントとツール
  • 活発なコミュニティと豊富な学習リソース

4. 優れたパフォーマンス

  • 仮想 DOM による最適化
  • 必要に応じたレンダリング
  • コード分割と遅延読み込みのサポート

5. クロスプラットフォーム対応

  • React Native：モバイルアプリ開発
  • React Native for Windows：デスクトップアプリ
  • React 360：VR アプリ

6. エンタープライズ向けアプリケーションのサポート

多くの有名企業で使用されています：

  • Facebook/Meta
  • Instagram
  • Netflix
  • Airbnb
  • Uber
  • テンセント、アリババなど

React の適用シナリオ

React の使用に適したシナリオ：

  • シングルページアプリケーション（SPA）
  • 頻繁な更新が必要な動的インターフェース
  • 複雑なインタラクティブ UI
  • コンポーネントの再利用が必要な大規模プロジェクト
  • クロスプラットフォーム開発が必要なアプリ

あまり適さないシナリオ：

  • シンプルな静的 Web サイト（設計過剰になる可能性がある）
  • SEO 要件が非常に高い Web サイト（Next.js などの SSR 方式と組み合わせる必要がある）
  • チームが JavaScript に精通していない場合

React と他のフレームワークの比較

特徴 React Vue Angular
種類 库 プログレッシブフレームワーク 完全なフレームワーク
学習曲線 中程度 比較的緩やか 比較的急
柔軟性 高 中 低い（規約が多い）
エコシステム 非常に豊富 豊富 完全に統合
エンタープライズサポート Meta 独立 Google
TypeScript サポート良好 サポート良好 ネイティブサポート

React の発展の歴史

  • 2013：React がオープンソース化
  • 2015：React Native がリリース
  • 2016：React 16（Fiber アーキテクチャ）
  • 2019：React Hooks が正式リリース
  • 2020：並列モード（Concurrent Mode）の実験版
  • 2022：React 18（並行レンダリング）
  • 2024-2025：React Compiler、Server Components などの新機能
その他の拡張