ReactはFacebook（現Meta）が2013年にオープンソース化したJavaScript製のUIライブラリです。「UIを部品（コンポーネント）の組み合わせで宣言的に書く」というアプローチで一気にフロントエンド開発の常識を塗り替え、現在ではVue.jsやAngularと並ぶ三大フレームワーク——のうち、求人需要・採用事例ともに最大の勢力になっています。本記事ではReactの設計思想、主要概念、エコシステムを整理します。
この記事の目次
- Reactを支える3つの考え方
- JSXとフックの登場
- Reactとセットで使われるツール
- React vs Vue vs Angular
- まとめ
Reactを支える3つの考え方
Reactを理解する出発点は「コンポーネント指向」「宣言的UI」「片方向データフロー」の3点セットです。画面を細かなコンポーネント（ボタン、カード、フォームなど）に分けて作り、上位コンポーネントが小さな部品を組み合わせるという作り方をします。それぞれが独立した部品なので、再利用やテストもしやすくなります。
「状態（state）が変わったら画面はこうなる」という対応関係をJSXで宣言的に書く点もReactの肝です。DOM操作を直接命令する命令的なスタイル（昔ながらのjQueryなど）に対して、Reactでは差分計算（Virtual DOM）をライブラリが代行してくれるので、開発者は最終的な見た目だけを記述すればよくなります。
JSXとフックの登場
React登場時に物議を醸したのが「JSX」でした。JavaScriptの中にHTML風のタグを書く異質な記法は、当初「責務を混ぜている」と批判されたものの、実際に書いてみると見通しが良いという評価が広がり、いまや業界標準の書き味になっています。
もうひとつの転換点が2019年に追加された「フック（Hooks）」です。それまではクラスコンポーネントで状態管理やライフサイクルを書くのが定番でしたが、フック導入後は関数コンポーネントの中で useState / useEffect / useContext などを呼ぶスタイルに統一されました。新規コードでクラスコンポーネントを書く理由はほぼなくなっています。
Reactとセットで使われるツール
Reactそのものは「UIを描く」ことに専念したライブラリで、ルーティングやサーバサイドレンダリング、状態管理など実アプリで必要になる機能はエコシステムで補完します。現在のデファクトスタンダードは Next.js（Vercel社が開発）で、ルーティング・SSR・SSG・APIルートまで一括して提供してくれます。
状態管理は要件次第で Redux / Zustand / Jotai / Recoil などを使い分け、サーバから取得するデータには TanStack Query（旧React Query）や SWR を組み合わせるのが定番です。選択肢が多すぎて迷うところでもありますが、「いきなり全部入れず、必要になってから足す」のが安全な進め方です。
React vs Vue vs Angular
フロントエンドフレームワーク選びでは、ReactとVue.jsとAngularが三つ巴と言われます。Reactはライブラリとしての柔軟さと巨大なエコシステム、Vueは学習コストの低さと公式ドキュメントの親切さ、AngularはGoogle製のフルセット型でルール志向、というキャラクターの違いがあります。
求人需要や事例の豊富さを優先するならReactがいまも最大勢力。個人開発で素早く立ち上げたいならVue、大企業で型・テスト・ルールを重視したいならAngular、という大ざっぱな指針で選ぶと判断を誤りにくいでしょう。
まとめ
Reactは「コンポーネント単位でUIを組み立てる」という発想を業界標準に押し上げたライブラリです。Webフロントエンドの仕事に関わるなら、Reactと周辺ツールチェーン（Next.js、TypeScript、状態管理ライブラリ）まで含めて押さえておくと、現代の開発現場へスムーズに参加できます。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント