Webフロントエンド - フレームワーク・ライブラリ

React りあくと

コンポーネント仮想DOMJSXフック（Hooks）SPA（シングルページアプリケーション）UI構築

Reactについて教えて

簡単に言うとこんな感じ！

ReactはWebページの「見た目の部品」を作るためのJavaScriptライブラリだよ。レゴブロックみたいに画面をパーツ（コンポーネント）に分けて作れるから、複雑なWebアプリもスッキリ管理できるんだ！

Reactとは

Reactは、Meta（旧Facebook）が開発・公開したJavaScriptのUIライブラリ（ユーザーインターフェース構築用のライブラリ）です。Webページの画面表示部分を「コンポーネント」と呼ぶ再利用可能なパーツに分けて組み立てる考え方が特徴で、2013年のオープンソース公開以来、世界中のフロントエンド開発の現場で広く使われています。

Reactが注目される最大の理由は、「状態（state）が変わったら画面を自動で更新してくれる」 という仕組みにあります。たとえばショッピングカートに商品を追加したとき、ページ全体をリロードしなくても数量表示だけがサッと変わる——そういった滑らかな動きを、少ないコードで実現できます。これは内部的に仮想DOM（Virtual DOM）という技術を使い、変更が必要な箇所だけを効率よく画面に反映しているためです。

ビジネス観点では、ReactはNetflix・Airbnb・Atlassianなど多くの企業が採用しており、エンジニア採用市場でも需要が高いスキルです。システム発注・選定の場面で「フロントエンドはReactで実装します」という提案を受けることは多く、その特性を理解しておくと発注判断に役立ちます。

Reactの核心：コンポーネントと仮想DOM

コンポーネントとは

Reactでは画面をコンポーネントという独立した部品に分割して作ります。例えばECサイトなら「ヘッダー」「商品カード」「カートアイコン」がそれぞれ1つのコンポーネントです。

概念	意味	例え
コンポーネント	画面の再利用可能なパーツ	レゴブロック1個
props（プロップス）	親から子に渡すデータ	ブロックの色・形の指定
state（ステート）	コンポーネント内部で管理する状態	ブロックが今どの位置にあるか
JSX	HTMLに似たJavaScriptの記法	設計図の書き方

仮想DOMの仕組み

通常のWeb開発では画面（DOM）を直接書き換えます。Reactは一度仮想DOM（メモリ上に作った画面の写し）と比較し、差分だけを本物の画面に反映します。

ユーザー操作
    ↓
Reactが「新しい仮想DOM」を作成
    ↓
「前の仮想DOM」と差分比較（Diffing）
    ↓
差分だけを本物の画面（Real DOM）に反映

この仕組みにより、大きなページでも必要な部分だけが更新され、表示速度・応答性が向上します。

Hooks（フック）：覚え方

React 16.8以降、Hooks（フック）という機能が追加され、コンポーネントに「状態管理」や「副作用処理」を引っ掛ける（hook）ように追加できるようになりました。

代表的なHooksは 「useState・useEffect・use系はuseから始まる」 と覚えましょう。

Hook名	役割
`useState`	コンポーネントの状態（変数）を管理
`useEffect`	外部APIとの通信など副作用処理を管理
`useContext`	コンポーネントをまたいでデータを共有
`useRef`	DOM要素や前の値への参照を保持

歴史と背景

2011年 — Meta社内でFacebookの広告管理ツール向けにReactの原型が開発される
2013年5月 — JSConf USにてオープンソースとして公開。当初は「JSXってHTMLとJSが混ざって気持ち悪い」と批判も受ける
2015年 — React Nativeが公開。iOSとAndroidアプリもReactの知識で開発できるようになり注目が爆発的に拡大
2016年 — Facebookが「Reactのライセンス問題（BSD+Patents）」で物議をかもす
2017年9月 — ライセンスをMITライセンスに変更し、企業採用のハードルが下がる
2018年 — Hooks（フック）が発表・翌年正式リリース。クラスコンポーネント中心から関数コンポーネント中心へ大きく転換
2022年 — React 18リリース。並行レンダリング（Concurrent Features）導入でさらに高パフォーマンス化
2024年〜 — React Server Componentsが普及し始め、サーバーサイドでも動作するコンポーネントモデルが広がる

主要フレームワークとの比較

ReactはあくまでUI構築のライブラリです。Vue.jsやAngularのようなフレームワーク（=アプリ全体の設計ルールが決まっているもの）とは位置付けが異なります。

	React	Vue.js	Angular
種別	ライブラリ	フレームワーク	フレームワーク
開発元	Meta（Facebook）	Evan You（個人→コミュニティ）	Google
学習コスト	中（自由度が高い分、設計判断が必要）	低〜中（日本語情報も豊富）	高（TypeScript必須・規約が厳しい）
採用規模	大企業・スタートアップ問わず幅広い	日本の中小規模開発に多い	大規模エンタープライズ向け
Next.jsとの関係	Next.jsはReactベースのフレームワーク	Nuxt.jsがVue.jsの上位フレームワーク	—

ReactとNext.jsの位置関係

Reactは「エンジン」、Next.jsは「エンジンを積んだ完成車」に例えられます。