Framework · 2013年公開

React

React はコンポーネントで UI を組み立てる JavaScript ライブラリです。あるべき画面を宣言すると、変化した部分だけを更新します。

React は Meta（当時の Facebook）で生まれ、2013 年にオープンソースとして公開されたユーザーインターフェース用ライブラリです。画面を小さな関数コンポーネントに分け、それぞれが受け取る props と自身の state に応じて、どう見えるべきかを JSX で記述します。データが変わると React は新しい結果を前回と比較し、実際に違う部分だけを DOM に反映します。

React はボタンやフォーム、リストが多いインタラクティブな画面で特に力を発揮します。シングルページアプリケーション、ダッシュボード、管理画面、デザインシステムなどで広く使われ、Next.js などのフレームワークでサーバーレンダリングのサイトを作るときや、React Native でモバイルアプリを作るときにも同じ考え方がそのまま通用します。ルーター、データ取得ライブラリ、テストツールなどのエコシステムが充実しており、必要な部品を選んで組み合わせられます。

初めて学ぶなら、react.dev のクイックスタートと三目並べのチュートリアルを順に進めるのがおすすめです。公式ドキュメントは新しいプロダクトに Next.js などのフレームワークを勧めていますが、学習中は Vite で作ったシンプルなプロジェクトのほうが構造を理解しやすいでしょう。配列メソッド、分割代入、モジュールといったモダンな JavaScript を先に身につけておくと、JSX とフックがずっと分かりやすくなります。

特徴

コンポーネントによる設計

UI を独立した関数コンポーネントに分け、props でデータを渡し、小さな部品を組み合わせて画面全体を作ります。

JSX による宣言的 UI

DOM を直接書き換える代わりに、現在の state に対する結果を JSX で書くと、React が変わった部分だけを更新します。

フックで扱う状態と副作用

useState、useEffect、useRef、useContext などのフックで、状態、副作用、DOM 参照、共有データを普通の関数の中で扱えます。

幅広いエコシステム

Next.js、React Router、TanStack Query、React Native などの実績あるツールと組み合わせ、Web からモバイルまで同じやり方で開発できます。

主な用途

シングルページアプリケーション（SPA）
ダッシュボードと管理画面
デザインシステムと再利用可能な UI コンポーネント
Next.js や React Native と組み合わせた Web・モバイルアプリ

インストール

1
Node.js を用意する
React の開発ツールは Node.js 上で動きます。nodejs.org から LTS 版をインストールし、node と npm のバージョンが表示されることを確認します。
```
node --version && npm --version
```
2
Vite でプロジェクトを作る
Vite の react-ts テンプレートで TypeScript を使う React プロジェクトを作成します。JavaScript だけを使う場合はテンプレート名を react にします。
```
npm create vite@latest my-app -- --template react-ts
```
3
開発サーバーを起動する
プロジェクトのフォルダーに移動し、依存パッケージをインストールして開発サーバーを起動します。ターミナルに表示されたアドレス（既定では http://localhost:5173）をブラウザーで開きます。
```
cd my-app && npm install && npm run dev
```

はじめてのプログラム

最初のコンポーネント

src/App.tsx の App 関数は、表示する内容を JSX で返すコンポーネントです。useState フックで count という状態を作り、ボタンをクリックすると setCount が値を変えます。状態が変わると React は App を再び呼び出し、画面上の数字だけを更新します。開発サーバーが動いている間は、ファイルを保存するたびにブラウザーがすぐに更新されます。

src/App.tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>Hello, React!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

npm create vite@latest my-app -- --template react-ts && cd my-app && npm install && npm run dev

よく使うツール

Vite: 高速な開発サーバーと最適化された本番ビルドを備えたフロントエンドのビルドツールです。React 用の公式テンプレートがあります。
React Developer Tools: ブラウザー拡張機能で、コンポーネントツリーや各コンポーネントの props・state を調べ、レンダリング性能を計測できます。
ESLint: コード検査ツールです。eslint-plugin-react-hooks を使うと、フックのルール違反やエフェクトの依存配列の漏れを検出できます。
Vitest: Vite の設定をそのまま使えるテストランナーです。React Testing Library と組み合わせ、ユーザーの視点でコンポーネントをテストします。

ステップごとのガイド

インストールから React の中心となる考え方まで、6 章で順を追って学びます。

公式ドキュメント・参考資料

使用する言語

ディスカッション

ディスカッションを始める

React について質問し、経験を共有し、意見を交わす場所です。

まだディスカッションはありません。最初の話題を始めましょう。

特徴