React × Next.js 用語集¶
（2025年度版・フロントエンド開発のための包括的用語集）
はじめに¶
このドキュメントは、React 18/19 および Next.js 13〜15（App Router世代）でのモダンフロントエンド開発に必要な用語を網羅的にまとめたものです。
📘 対象読者¶
- React および Next.js を学習中の開発者
- Server Components, Server Actions などの新機能を理解したい人
- 技術用語を体系的に整理したいエンジニア
- チーム内での共通言語を確立したい技術リード
🎯 このガイドの使い方¶
各用語には以下の情報を含んでいます： - 英語表記 と 日本語訳 - 明確な説明 - サル的説明（直感的な理解のためのたとえ） - 関連する技術分野
📑 目次¶
基礎概念¶
Component（コンポーネント）¶
説明: UIの部品となる再利用可能な関数またはクラス。Reactの基本構成要素。
サル的説明: 「レゴブロック」。組み合わせて大きなものを作る。
分類: React
Props（プロップス）¶
説明: 親コンポーネントから子コンポーネントへ渡すデータ。読み取り専用。
サル的説明: 「上司が部下に渡すメモ」。一方通行で変更できない。
分類: React
State（ステート）¶
説明: コンポーネント内部で管理される可変データ。変更されると再レンダリングが発生する。
サル的説明: 「この部屋の中だけの温度設定」。自分で変えられる。
分類: React
JSX（JavaScript XML）¶
説明: JavaScriptの中でHTMLライクな記法を使える構文拡張。
サル的説明: 「JavaScriptの中でHTMLを書ける魔法」。
分類: React
Virtual DOM（仮想DOM）¶
説明: Reactが持つ画面の設計図。実際のDOMとの差分を検出して効率的に更新する。
サル的説明: 「家の青写真みたいなもの」。変更点だけ本物に反映する。
分類: React
React Core¶
Rendering（レンダリング）¶
説明: データをHTMLに変換して画面に表示すること。
サル的説明: 「食材を盛り付ける」作業。
分類: React
Re-render（再レンダリング）¶
説明: stateやpropsが変わったときに、コンポーネントを再度描画すること。
サル的説明: 「味見して塩を足す」。変化に応じて作り直す。
分類: React
Diffing（差分検出）¶
説明: Virtual DOMの変更箇所を検出する仕組み。
サル的説明: 「間違い探し」。どこが変わったかを見つける。
分類: React
Fiber（ファイバー）¶
説明: Reactのレンダリングエンジン。優先度をつけて処理を分割できる。
サル的説明: 「Reactの脳みそ」。賢く処理を振り分ける。
分類: React
Context（コンテキスト）¶
説明: コンポーネント間でグローバルにデータを共有する仕組み。propsのバケツリレーを回避。
サル的説明: 「みんなで共有している冷蔵庫」。誰でもアクセスできる。
分類: React
React Hooks¶
Hook（フック）¶
説明: Reactの機能を関数コンポーネントで使うための仕組み。useで始まる関数。
サル的説明: 「便利なスイッチ。押すとReactが動く」。
分類: React
useState¶
説明: 状態（state）を使うためのHook。値と更新関数のペアを返す。
サル的説明: 「変数を反応的にしてくれる魔法」。値を覚えておくメモ帳。
分類: React Hooks
useEffect¶
説明: 画面が変わった後に副作用処理（API呼び出しやDOM操作）をするHook。
サル的説明: 「画面が変わったら掃除する係」。何かが変わったら動くスイッチ。
分類: React Hooks
useContext¶
説明: コンテキストの値を取り出すHook。
サル的説明: 「共有冷蔵庫からジュースを取る」。
分類: React Hooks
useMemo¶
説明: 計算結果をメモ化（キャッシュ）して、無駄な再計算を防ぐHook。
サル的説明: 「前回の答えをメモしておく」。同じ計算を繰り返さない。
分類: React Hooks
useCallback¶
説明: 関数をメモ化して、無駄な再生成を防ぐHook。
サル的説明: 「同じ関数を毎回作らずに再利用」。
分類: React Hooks
useRef¶
説明: DOMや値を直接参照するためのHook。再レンダリングを引き起こさない。
サル的説明: 「メモをポケットに入れておく」。こっそり覚えておく。
分類: React Hooks
useReducer¶
説明: 複雑な状態管理をする際に使うHook。actionとreducerで状態を更新。
サル的説明: 「司令官が指示を出して部下が状態を変える」。
分類: React Hooks
useFormState¶
説明: Server Actionと連携してフォーム送信結果を受け取るHook（React 19 / Next.js 14〜）。
サル的説明: 「サーバーからの返事を待つポスト」。
分類: React Hooks, Next.js
useFormStatus¶
説明: フォーム送信中の状態（pending）を取得するHook。
サル的説明: 「今、送信中ですよ」のランプ。
分類: React Hooks, Next.js
Custom Hook（カスタムフック）¶
説明: これらのHooksを組み合わせて自作したフック。useで始める約束。
サル的説明: 「自分用の便利ツール」。よく使う処理をパッケージ化。
分類: React Hooks
Next.js App Router¶
App Router¶
説明: Next.js 13〜で導入された新しいルーティングシステム。app/ディレクトリ構成。
サル的説明: 「新しい道路システム」。pages/からapp/への引っ越し。
分類: Next.js
Route Handlers¶
説明: app/api/route.tsでAPIエンドポイントを定義する仕組み。RESTやGraphQLも書ける。
サル的説明: 「お店のレジカウンター」。注文を受け付ける窓口。
分類: Next.js
Route Groups¶
説明: (groupName)のようにディレクトリ名を括弧で囲み、URL構造を変えずに整理する仕組み。
サル的説明: 「見えない仕切り」。整理のためだけのフォルダ。
分類: Next.js
Edge Runtime¶
説明: CDNノードで低レイテンシ実行できる軽量実行環境。
サル的説明: 「お客さんの近くに小さなお店を出す」。地理的に近いから速い。
分類: Next.js
Streaming SSR¶
説明: <Suspense>と組み合わせて、HTMLを部分的に送出する仕組み。
サル的説明: 「小分け配信」。全部できるまで待たずに少しずつ出す。
分類: Next.js
Segment¶
説明: App Routerでのルート単位（フォルダ単位）。各Segmentごとに異なる設定が可能。
サル的説明: 「道路の区間」。それぞれ速度制限が違う。
分類: Next.js
レンダリング戦略¶
SSR（Server-Side Rendering）¶
説明: サーバーでHTMLを生成してからブラウザに送る方式。初回表示が速い。
サル的説明: 「料理を完成させてからお客さんに出す」。
分類: レンダリング
CSR（Client-Side Rendering）¶
説明: JavaScriptでブラウザ側が画面を組み立てる方式。
サル的説明: 「お客さんの前で全部調理する」。
分類: レンダリング
SSG（Static Site Generation）¶
説明: ビルド時にHTMLを全部作っておく方式。
サル的説明: 「前日に料理を全部作り置きしておく」。
分類: レンダリング
ISR（Incremental Static Regeneration）¶
説明: SSGの一部だけを動的に更新できるようにしたもの。
サル的説明: 「人気メニューだけ作り直す」。全部じゃなく一部だけ更新。
分類: レンダリング
Hydration（ハイドレーション）¶
説明: サーバーが出したHTMLに"動き"を与える処理。SSR後にイベントを再接続する。
サル的説明: 「料理が冷めてるから、温めて動けるようにする」。魂を入れる儀式。
分類: レンダリング
Dehydration / Rehydration¶
説明: 一度状態を"乾燥（保存）"させて、再ロード時に"復活"させること。
サル的説明: 「セーブ＆ロード」。ゲームの続きから始める。
分類: レンダリング
Prefetch / Prerender¶
説明: あらかじめページやデータを読み込んでおくこと。
サル的説明: 「次のページを予習」。先回りして準備。
分類: パフォーマンス
サーバーコンポーネント¶
RSC（React Server Components）¶
説明: サーバーで実行されるReactコンポーネント。データ取得を直接できる。
サル的説明: 「厨房（サーバー）で調理」。お客さんの前に出る前に完成。
分類: React 18, Next.js
RCC（React Client Components）¶
説明: ブラウザで動くReactコンポーネント。"use client"を明示する。
サル的説明: 「お客さんの机（ブラウザ）で調理」。
分類: React 18, Next.js
Server Actions¶
説明: "use server"宣言した関数をクライアントから直接呼び出せる仕組み。
サル的説明: 「ボタンからサーバー実行」。APIを書かずに直接つながる。
分類: Next.js 14〜
React.cache¶
説明: サーバー側でPromise（fetch結果など）をキャッシュ・共有できる新API。
サル的説明: 「一度取ったデータをメモしておく」。同じ質問には同じ答え。
分類: React 18.3〜
use()¶
説明: Promiseの結果を直接利用できるHook（React 19〜）。
サル的説明: 「届いてない荷物を待つ」。非同期データを自然に扱える。
分類: React 19
パフォーマンス最適化¶
Suspense（サスペンス）¶
説明: 非同期ロードを待つ仕組み。データ待ち中にfallbackを表示。
サル的説明: 「料理がまだ来てないので少々お待ちください」。
分類: React
Lazy Loading（遅延ロード）¶
説明: 必要な時だけコンポーネントやデータをロードする技術。
サル的説明: 「注文されてから作る」。最初から全部は用意しない。
分類: パフォーマンス
Code Splitting（コード分割）¶
説明: JavaScriptを分割して遅延ロードする技術。
サル的説明: 「必要な分だけ読み込み」。全部一気に持ってこない。
分類: パフォーマンス
Tree Shaking¶
説明: 使われていないコードを削除してバンドルサイズを削減。
サル的説明: 「冷蔵庫整理」。使わないものは捨てる。
分類: パフォーマンス
Bundle（バンドル）¶
説明: 複数のJavaScriptファイルを1つにまとめたもの。
サル的説明: 「お弁当箱に詰める」。バラバラを1つに。
分類: ビルド
Transition¶
説明: 状態遷移をノンブロッキングで処理するReact機能。重い処理を低優先度に。
サル的説明: 「待てる処理を後回し」。急ぎじゃないものは後で。
分類: React 18
Concurrent Rendering¶
説明: React 18の裏で動いているレンダリング最適化の仕組み。
サル的説明: 「同時並行作業」。複数のことを賢く処理。
分類: React 18
Partial Hydration / Islands Architecture¶
説明: ページの一部だけハイドレーションする技術（Astroなどが採用）。
サル的説明: 「必要な島だけ動かす」。全部じゃなく一部だけ。
分類: パフォーマンス
設計・アーキテクチャ¶
Entity（エンティティ）¶
説明: 一意なIDで識別されるオブジェクト（例：User, Order）。
サル的説明: 「名札付きの人」。誰か特定できる。
分類: DDD
Value Object（値オブジェクト）¶
説明: 値として等価性を持つ型（例：Email, Price）。
サル的説明: 「1000円札」。中身が同じなら同じもの。
分類: DDD
Aggregate（集約）¶
説明: 複数のEntityをまとめる単位。整合性の境界。
サル的説明: 「家族」。1つのグループとして扱う。
分類: DDD
Repository（リポジトリ）¶
説明: 永続化を抽象化（DBやAPIアクセス）する層。
サル的説明: 「倉庫の管理人」。データの出し入れを担当。
分類: DDD
Domain Service（ドメインサービス）¶
説明: ルールを表現するドメインロジック。
サル的説明: 「ルールブック」。業務の決まりごと。
分類: DDD
Application Service（アプリケーションサービス）¶
説明: ユースケースの実行制御。
サル的説明: 「指揮官」。流れを組み立てる。
分類: DDD
Domain Event（ドメインイベント）¶
説明: ビジネス上の重要な出来事を表すイベント。
サル的説明: 「重大ニュース」。何か起きたことを知らせる。
分類: DDD
Atomic Design¶
説明: UIコンポーネントを原子（Atoms）→分子（Molecules）→生物（Organisms）→テンプレート→ページと階層化する設計手法。
サル的説明: 「レゴブロックの組み立て説明書」。小さい部品から大きなものへ。
分類: UI設計
Feature-based Architecture¶
説明: 機能単位でフォルダを分ける構成。画面単位ではなく機能単位。
サル的説明: 「お店を部門で分ける」。本、服、食品とか。
分類: アーキテクチャ
Clean Architecture¶
説明: UI・ロジック・データアクセスを分離して保守性を上げる設計。
サル的説明: 「役割分担」。料理人、ホール、会計で分ける。
分類: アーキテクチャ
Container/Presenter Pattern¶
説明: ロジックを持つコンポーネント（Container）と表示だけのコンポーネント（Presenter）を分離。
サル的説明: 「裏方と表舞台」。考える人と見せる人を分ける。
分類: React設計
開発ツール¶
React Developer Tools¶
説明: Chromeなどの拡張機能。コンポーネントツリーやProfilerで再レンダリングを可視化。
サル的説明: 「Reactの診断ツール」。中身が見える。
分類: 開発ツール
why-did-you-render¶
説明: 不必要な再レンダリングを検出する開発ツール。
サル的説明: 「無駄遣い警報」。なんで再描画したか教えてくれる。
分類: 開発ツール
React Profiler¶
説明: レンダリング時間を可視化するツール。React DevTools内にある。
サル的説明: 「ストップウォッチ」。どこが遅いか測る。
分類: 開発ツール
ESLint¶
説明: JavaScriptの文法やスタイルをチェックする静的解析ツール。
サル的説明: 「先生の添削」。間違いを指摘してくれる。
分類: 開発ツール
react-hooks plugin¶
説明: ESLintプラグイン。Hooksの依存配列ミスなどを検出。
サル的説明: 「フック専門の先生」。フックの使い方をチェック。
分類: 開発ツール
Vercel DevTools¶
説明: Vercelが提供する開発ツール。Server ActionsやEdgeのトレースが可能。
サル的説明: 「Next.js専用の診断機」。
分類: 開発ツール
その他の重要用語¶
SPA（Single Page Application）¶
説明: ページ遷移をJavaScriptで完結するアプリケーション。
サル的説明: 「1ページで完結」。ページ移動が速い。
分類: アーキテクチャ
MPA（Multi Page Application）¶
説明: ページごとにHTMLがある従来型のWebアプリケーション。
サル的説明: 「昔ながらのサイト」。ページごとに読み込む。
分類: アーキテクチャ
revalidate¶
説明: fetchキャッシュの再生成間隔を指定するNext.jsの機能。
サル的説明: 「賞味期限」。この時間が過ぎたら新しく取得。
分類: Next.js
Store（ストア）¶
説明: グローバルで状態を管理する仕組み（Zustand、Reduxなど）。
サル的説明: 「全員のノート」。みんながアクセスできる共通の場所。
分類: 状態管理
TypeScript¶
説明: JavaScriptに型システムを追加した言語。
サル的説明: 「間違いを事前に教えてくれるJavaScript」。
分類: 言語
zod¶
説明: TypeScriptのバリデーションライブラリ。型安全なスキーマ定義が可能。
サル的説明: 「入力チェックマン」。データが正しいか確認。
分類: ライブラリ
TanStack Query（React Query）¶
説明: データフェッチ・キャッシュ・同期を管理するライブラリ。
サル的説明: 「データ配達サービス」。自動で取ってきて管理。
分類: ライブラリ
Zustand¶
説明: シンプルな状態管理ライブラリ。Reduxより軽量。
サル的説明: 「軽い共通ノート」。簡単に使える。
分類: ライブラリ
Tailwind CSS¶
説明: ユーティリティファーストのCSSフレームワーク。
サル的説明: 「スタイルの部品箱」。組み合わせて使う。
分類: CSS
Storybook¶
説明: UIコンポーネントを独立して開発・テストできるツール。
サル的説明: 「部品の展示室」。1つずつ確認できる。
分類: 開発ツール
まとめ¶
この用語集は、React × Next.js 開発において頻出する用語を体系的にまとめたものです。 各用語を理解することで、チーム内のコミュニケーションが円滑になり、技術文書の理解も深まります。
学習の進め方¶
- 基礎概念から順に理解する
- サル的説明で直感的にイメージをつかむ
- 実際のコードで実践してみる
- 分類を意識して関連技術をまとめて学ぶ
参考リソース¶
最終更新: 2025年10月
作成者: winlogic開発チーム