React初学者のための全体像解説

はじめに

Reactを学び始めると、React本体だけでなくNode.js、npm、Vite、react-dom、TypeScriptといった名前が次々に登場します。それらの用語が全体像のどこに位置するのかを理解することで、常に現在地を把握しながら学習することができるようにすることが今回の目的です。この記事では、コードの書き方には踏み込まず、それぞれが「何の役割で、どこで働くのか」だけに絞って整理します。

全体像

React関連のものには以下のものが存在します。

実行環境を用意し、パッケージ管理ツールで部品を取得し、UIライブラリでコードを書き、ビルドツールが変換してまとめ、それを配信したあとブラウザ側でレンダラーが画面を描き、表示する、という流れになります。

ただし、Viteのようなビルドツールはコードを変換・梱包するだけで、配信後のブラウザには登場しません。実際にブラウザへ届き、実行時に働くのは、『UIライブラリで記述したコード』と、それに同梱された『react-dom』であることには注意が必要です。

種類ごとの役割と担当範囲

ここからは、全体像に登場した要素を種類ごとに見ていきます。同じ種類のなかでの選択肢は基本的に入れ替えが可能ですが、その自由度や選び方は種類ごとに異なります。

実行環境

実行環境は、JavaScriptで書かれたコードやツールを、ブラウザの外（開発者のPC上）で読み込んで動かすためのものです。npmやViteといった他の開発ツールも、この上で動きます。具体的には以下のようなものがあります。

なお、JavaScriptはブラウザでも動きますが、ブラウザとは役割が異なります。ブラウザは利用者の手元で画面を表示するためにJavaScriptを動かすのに対し、実行環境は開発者のPC上で開発作業のためにJavaScriptを動かします。ブラウザは安全のためにファイルの読み書きなどが制限されていますが、実行環境にはその制限がなく、ファイル操作やパッケージの取得といった開発に必要な処理を行えます。そのため、Reactの開発ではこの実行環境が土台になります。

パッケージ管理

パッケージ管理は、Reactなどのライブラリを取得・管理し、開発用のコマンドを実行するためのものです。開発者のPC側で働きます。具体的には以下のようなものがあります。

言語

言語は、コードそのものを記述するためのものです。ブラウザが直接理解できるのはJavaScriptで、TypeScriptはそれに型を足した拡張です。具体的には以下のようなものがあります。

ビルドツール

ビルドツールは、書いたコードと読み込んだライブラリを、ブラウザが理解できる形に変換してひとまとめにするためのものです。開発者のPC側（ビルド時）で働き、配信後の実行時には登場しません。具体的には以下のようなものがあります。

UIライブラリ（中核）

UIライブラリは、画面を「コンポーネント」の組み合わせとして記述するための中核です。本記事の主役であるReactがこれにあたります。同じ役割を担う代表例として、以下のようなものがあります。

これらは互いに代替できますが、Reactを別の系統に変えると、次に挙げるレンダラーや周辺ライブラリも、その系統の専用品に入れ替わります。

レンダラー

レンダラーは、Reactで記述した部品を、実際の出力先に描画するためのものです。実行時に働きます。React本体は「描く場所」を決めておらず、ここで出力先が決まります。他の種類と違い、好みで入れ替えるものではなく、出力先によって選ぶ点が特徴です。具体的には以下のようなものがあります。

周辺ライブラリ

周辺ライブラリは、React本体だけでは足りない機能を、必要に応じて追加するためのものです。実行時に働きます。分野ごとに代表的なものがあり、最初からすべてを使う必要はありません。具体的には以下のようなものがあります。

まとめ

Reactの全体像は、「言語（JS／TS）を、実行環境（Node.js）の上で、パッケージ管理（npm）が用意し、ビルドツール（Vite）が変換し、ライブラリ（React＋レンダラー）が画面を作る」という役割分担で捉えると整理できます。