React
Reactとは
Reactは、[[JavaScript]] でユーザーインターフェースを構築するためのライブラリです。UIをコンポーネントという部品に分割し、「状態(state)が変わると画面が自動で更新される」宣言的なスタイルで開発します。
function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>クリック数: {count}</button>
}
何を解決するのか
素の [[JavaScript]] では、データの書き換えと、それを映す [[DOM]] の書き換えを手作業で対応付け続けます。表示箇所が増えるほど漏れが起き、不具合はデータと画面のズレとして現れます。
Reactはこの対応付けを引き受けます。書くのは「この状態なら画面はこう見える」という関数だけ。状態が変わると React が再実行し、前回との差分を画面へ反映します(仮想DOM。実DOMが重い理由は [[ブラウザレンダリングの仕組み]])。
初学者向けポイント
- 宣言的UI = 「どう画面を書き換えるか」ではなく「この状態ならこう表示する」と書く
- JSX = JavaScriptの中にHTML風の記法を書ける拡張構文
- 単方向データフロー = データは親→子へpropsで流れる。見通しがよくバグを追いやすい
重要な概念
| 概念 | 説明 |
|---|---|
| コンポーネント | UIの部品。関数として定義する |
| props | 親から子へ渡すデータ(読み取り専用) |
| state | コンポーネント自身が持つ状態。変わると再レンダリング |
| フック | useState useEffect など、関数に機能を追加する仕組み |
| 再レンダリング | 状態が変わった部品とその子孫を再実行し、実際のDOMには差分だけを反映する |
ここから先を選ぶ地図
React が担当するのは描画と状態の保持までです。URLと画面の対応付け・通信・ビルド・スタイリングは含まれず、道具を選んで組み合わせます([[フレームワーク]] と呼ばれない理由です)。テンプレート記法の [[Vue.js]] や標準技術だけで部品を作る [[Web Components]] と並べると、その選択がよく見えます。
書くための言語
コンポーネントは JavaScript の関数です。まず [[JavaScript]] の関数・配列操作・非同期を押さえ、props や state を型で守る段階で [[TypeScript]] へ。JSXが組み立てるのは [[HTML]] 要素です。
画面全体をどう組み立てるか
React 単体で作るのは [[SPAとMPA]] でいう SPA です。URLごとの画面切り替え・初回表示・SEO まで任せるなら [[Next.js]] のようなフレームワークに乗せます。
データをどこに置くか
useState で足りず「同じデータが複数箇所にある」と感じたら [[状態管理]] です。サーバーから取る値は [[fetchと非同期通信]]、再読み込みでも消したくない値は [[WebストレージとCookie]] が受け持ちます。
見た目を作る
スタイルを部品の内側に閉じ込めやすい [[Tailwind CSS]] が定番ですが、土台は [[CSS]] と [[レスポンシブデザイン]] の知識です。div にクリックを付けただけの部品は読み上げに届かないため、[[Webアクセシビリティ]] も設計時点の話です。
動かす道具
開発サーバーとビルドは [[Vite]]、ライブラリの追加は [[npmとパッケージ管理]]、import で分けたファイルが1つの配信物になる仕組みは [[ESモジュールとバンドラ]] です。
壊れていないことを確かめる
[[自動テスト]] は Testing Library で「見える振る舞い」を検証するのが主流です。文字列をHTMLとして描く dangerouslySetInnerHTML は [[XSS(クロスサイトスクリプティング)]] の入口、イベントの間引きは [[デバウンスとスロットル]] が扱います。
関連技術とのつながり
- [[JavaScript]] / [[TypeScript]] — 書くための言語
- [[DOM]] / [[HTML]] — 書き換える対象
- [[SPAとMPA]] / [[Next.js]] — 画面全体の構成
- [[状態管理]] — データの持ち方
- [[Vite]] / [[Tailwind CSS]] — ビルドと見た目
- [[Vue.js]] / [[Web Components]] — 部品化の別解
Q: Reactのpropsの説明として正しいのはどれ?
- [ ] コンポーネント自身が持つ状態で、自由に書き換えられる
- [x] 親から子へ渡すデータで、読み取り専用
- [ ] JavaScriptの中にHTML風の記法を書ける拡張構文
解説: propsは親から子へ渡す読み取り専用のデータで、単方向データフローの土台です。
Q: stateが変わるとコンポーネントはどうなる?
- [ ] 何も起きない(手動で画面を書き換える必要がある)
- [ ] コンポーネントが破棄される
- [x] 再レンダリングされて画面が自動で更新される
解説: 「状態が変わると画面が自動で更新される」のがReactの宣言的UIの中心的な仕組みです。
Q: 「宣言的UI」の考え方として記事の説明に合うのはどれ?
- [x] 「この状態ならこう表示する」と書く
- [ ] 「どう画面を書き換えるか」の手順を書く
解説: 宣言的UIでは書き換え手順ではなく、状態に対応する表示を記述します。
Q: 本文の説明で、React が標準で担当する範囲はどれ?
- [ ] ルーティング・通信・ビルド・スタイリングまで一式を含む
- [x] コンポーネントの描画と状態の保持まで。周辺は道具を選んで組み合わせる
- [ ] サーバー側のデータベース操作までを含む
解説: Reactはライブラリであり、URLと画面の対応付けや通信、ビルドは別の道具の担当です。だからNext.jsのようなフレームワークや、Viteのようなビルドツールと組み合わせて使います。