React基礎講座 #1 Reactとは何か?

フレームワーク React
読了 7分

今日もっとも広く使われているJavaScript UIライブラリ、React。Facebook、Instagram、Netflix、Airbnb…私たちが毎日使うサービスの多くがReactで作られています。日本の開発者求人を見渡しても、フロントエンドポジションの大多数がReactの経験を求めています。

この講座ではReact入門者のために、Reactとは何か、なぜ作られたのか、そしてどんな問題を解決するツールなのかについて学んでいきます。

Reactの誕生 #

Reactは2011年にFacebookのソフトウェアエンジニア、ジョーダン・ウォーク(Jordan Walke)が作り、Facebookのニュースフィード機能に初めて適用され、2013年にオープンソースとして公開されました。

当時Facebookは、徐々に複雑化していくUIを管理するのに苦労していました。ユーザーがコメントを書き込むと、その瞬間に画面のあちこちのカウンター、通知バッジ、フィードの状態がすべて一貫して更新されなければならないのですが、従来の命令型のDOM操作方式では、これらすべての箇所を漏らさず更新するのは非常に難しかったのです。Reactはまさにこの「複雑なUIの一貫性を維持する問題」を解決するために生まれました。

ライブラリかフレームワークか? #

よく「Reactフレームワーク」と呼ばれますが、厳密に言うとReactはUIライブラリです。ルーティング、データフェッチ、フォーム処理のようなフルスタック機能を強制せず、ひたすら「ユーザーインターフェースを描画すること」だけに集中します。

このミニマルな哲学のおかげで、Reactはその上で動作する様々なメタフレームワークやツールのエコシステムを作り出しました。もっとも有名なのがNext.jsで、その他にもRemix、Astro、Gatsbyなどがあります。この講座が運営されているスクールオブウェブのウェブサイトもNext.jsの上で動いています。

Reactの特性 #

Reactの核心となる特性を5つにまとめてみます。

1. コンポーネントベース (Component-based) #

Reactは画面を小さな断片に分けることから始まります。ボタン、入力欄、カード、ヘッダー、コメント1行…これらすべての要素をコンポーネントという独立した単位として作り、それらをレゴブロックのように組み合わせて1つの画面を完成させます。同じコンポーネントを複数のところで再利用でき、各コンポーネントは自身の動作と見た目にだけ責任を負えばよいのです。

2. 宣言的 (Declarative) #

従来のJavaScriptでUIを作るときは「どのように(How)」画面を変えるかを段階的に命令していました。Reactは反対に「何を(What)」見せるかを宣言するだけで、画面をそのように作る作業はReactがうまく処理してくれます。コードがはるかに簡潔になり、意図が明確になります。

簡単な例として、「ボタンをクリックするとカウンターが1増える」という機能を作るとしましょう。純粋なJavaScriptでは次のように記述します。

vanilla.js 
let count = 0;
const button = document.querySelector('#btn');
const display = document.querySelector('#count');

button.addEventListener('click', () => {
  count += 1;
  display.textContent = count;
});

同じ機能をReactではこのように記述します。

App.jsx 
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>増加</button>
    </div>
  );
}

DOMを直接操作しません。countという状態が変わると、Reactがうまく画面の該当部分を更新してくれます。画面がどう変わるべきかを逐一命令せず、どんな姿であるべきかだけを宣言する — これが宣言的の意味です。

3. 仮想DOM (Virtual DOM) #

Reactが高速に動作できる秘訣です。実際のブラウザのDOMは直接操作するたびにコストが大きいです。ReactはJavaScriptオブジェクトで作られた仮想DOMをメモリ内に置き、変更が起きると新しい仮想DOMと以前の仮想DOMを比較して、本当に変わった部分だけを実際のDOMに反映します。開発者はこの過程を気にする必要なく、変わった状態を宣言するだけで済みます。

4. 単方向データフロー (One-way data flow) #

Reactではデータは常に親コンポーネントから子コンポーネントへ一方向にのみ流れます。子は親のデータを勝手に変えることはできず、親が明示的に渡した関数を通してのみ変更の意思を伝えられます。予測可能なフローのおかげでデバッグが容易で、大きなアプリケーションでもデータの出所を追跡しやすくなります。

5. 巨大なエコシステム #

Reactのもっとも大きな強みの1つは、豊富な周辺エコシステムです。ルーティング(React Router、Next.js)、状態管理(Redux、Zustand、Jotai)、サーバー通信(TanStack Query、SWR)、UIキット(MUI、Chakra UI、shadcn/ui)…どんな問題でも既に作られたツールがあり、活発なコミュニティが常に新しい答えを生み出し続けています。

Reactで何が作れるか? #

Reactは単純なウェブサイトから巨大なSaaSサービスまで、ほぼすべての種類のユーザーインターフェースを作れます。

  • シングルページアプリ(SPA): ページ遷移なしで動作する動的なウェブアプリケーション。Facebook、Twitter、Instagramのウェブ版が代表的な例です。
  • 企業向けダッシュボード: データがリアルタイムで変わる複雑な管理画面。Reactのコンポーネントモデルがもっとも輝く分野です。
  • コンテンツサイトとブログ: Next.jsのようなメタフレームワークを使えば、検索エンジンによく露出される静的サイトやブログもReactで作れます。今ご覧になっているこのサイトがその例です。
  • モバイルアプリ: React Nativeを使えば、同じ考え方と似たコードでiOS、Androidアプリを作れます。
  • デスクトップアプリ: Electronと組み合わせれば、Windows、Mac、Linux用のデスクトップアプリケーションも作れます。VS Code、Slack、Notionはすべてこの方式で作られました。

React、Vue、Angular…どんな違いがあるか? #

Reactのもっとも大きなライバルはVue.jsとAngularです。

  • Angularはルーティング、フォーム、通信、依存性注入まですべてが含まれたフルパッケージのフレームワークです。大きな組織のエンタープライズプロジェクトで強みを発揮します。
  • VueはReactとAngularの中間ぐらいに位置します。学習の敷居が低く、ドキュメントが親切なので入門者に人気があります。
  • Reactはもっともミニマルです。ライブラリだけ用意して、残りは開発者(あるいはメタフレームワーク)が選択します。そのため自由ですが、最初は何をどう選ぶべきか決めることが多くて難しく感じられることがあります。

3つのツールはすべて優れていますが、日本やグローバル市場の両方で採用需要と学習資料の量がもっとも多いのは、断然Reactです。

ヒント
Reactを学べばVueやAngularに移行するのも比較的スムーズです。コンポーネントベース、宣言的UIという大きな考え方が似ているからです。最初のツールに何を選ぶかであまり長く悩まないでください。とにかく始めればよいのです。

この講座が扱う範囲 #

この講座はReactのもっとも基本的な核心を、初めて学ぶ方々のために順を追って扱います。この講座をすべて修了した後、皆さんは:

  • Reactコンポーネントを直接作成し組み立てられるようになります
  • 状態(state)とpropsを使って動的なUIを作れるようになります
  • ユーザー入力とフォームを処理できるようになります
  • useEffect、useContextのような核心となるフックを理解して使えるようになります
  • 自分だけのカスタムフックを作れるようになります

もう少しモダンなテーマ — Server Component、Suspense、Server Actionsのようなもの — は別途「モダンReact」シリーズで扱う予定なので、基礎を終えた方々はそちらもチェックしてみてください。

おわりに #

今回の記事ではReactとは何か、なぜ作られたのか、どんな強みを持っているのかを見てきました。次の記事「React基礎講座 #2 開発環境の設定」では、本格的にコードを書くためにNode.jsをインストールし、Viteで初めてのReactプロジェクトを作ってみることにしましょう。

X