フロントエンド用語集

メモリ上にDOMのコピーを持ち、差分だけを実際のDOMに反映する仕組み

Reactが仮想DOMの差分を検出して実DOMを効率的に更新するアルゴリズム

React 16で導入された非同期・中断可能なレンダリングを実現するアーキテクチャ

サーバーで生成した静的HTMLにクライアントでイベントハンドラを付与する処理

React 18から正式導入。レンダリングを中断・再開できるようにし、UIの応答性を高める

リクエストのたびにサーバーでHTMLを生成して返すレンダリング方式

ビルド時にHTMLを生成し、CDNで配信するレンダリング方式

SSGの静的ページを一定時間後にバックグラウンドで自動更新する仕組み

ブラウザ上でJavaScriptがDOMを生成するレンダリング方式

サーバー側でのみ実行されるReactコンポーネント。バンドルサイズに含まれない

リスト描画時にReactが要素の同一性を識別するための特別な属性

中間コンポーネントを経由してpropsを深い階層に渡し続ける問題

コンポーネントツリーを通じて値をグローバルに共有する仕組み

childrenやslotパターンで柔軟なコンポーネント設計を実現するパターン

複数のコンポーネントで状態を共有するため、共通の親に状態を移動するパターン

フォーム要素の値をReact状態で管理するか、DOMに任せるかの違い

計算結果や関数参照をキャッシュして、同じ入力では再計算しない最適化技術

JavaScriptの中にHTMLのような構文でUIを記述できるReactの記法

UIを再利用可能な部品に分割したもの。Reactアプリはコンポーネントの組み合わせで構成される

親コンポーネントから子コンポーネントへ渡すデータ。読み取り専用

コンポーネントが内部で管理する動的なデータ。変化するとUIが再レンダーされる

Reactがコンポーネント関数を実行してUIを生成・更新するプロセス

stateやpropsが変化したときにコンポーネントが再び実行され、UIが更新されること

クリック・入力・送信などのユーザー操作に応じて実行される関数

コンポーネントがマウント→更新→アンマウントの段階を経る流れ

Next.js 13で導入されたapp/ディレクトリベースの新しいルーティングシステム

クライアントから直接呼び出せるサーバー側の非同期関数

ページ全体の準備を待たず、準備できた部分から順次HTMLを送信する技術

リクエストが処理される前に実行されるエッジ関数。認証・リダイレクトに使う

関数が定義された時点のスコープの変数を「閉じ込めて」参照し続ける仕組み

変数がアクセスできる有効範囲。ブロックスコープ・関数スコープ・グローバルスコープがある

変数・関数の宣言がスコープの先頭に「巻き上げ」られるJavaScriptの挙動

JavaScriptの継承の仕組み。オブジェクトは__proto__でつながるチェーンを遡ってプロパティを探す

非同期処理を実現するJavaScriptの実行モデル。コールスタック・タスクキュー・マイクロタスクキューで構成される

非同期処理の最終的な完了または失敗を表すオブジェクト

Promiseを同期的に書けるES2017のシンタックスシュガー

明示的な型注釈なしにTypeScriptが自動的に型を推測する機能

if文やinstanceofなどで型を絞り込み、安全にプロパティにアクセスする

型をパラメータとして受け取り、再利用可能な型安全なコードを作る仕組み

TypeScript組み込みの型変換ツール。Partial・Pick・Omit・Readonlyなど

条件分岐の中でTypeScriptが型を絞り込めるようにする関数や式

T extends U ? X : Y の形式でジェネリクスに条件分岐を持たせる型

keyof でオブジェクト型の全プロパティをイテレートして新しい型を作る仕組み

A & B の形式で複数の型を合成して全プロパティを持つ型を作る

TypeScriptの定数定義の3パターンとそれぞれのトレードオフ

複数のJavaScriptファイルとその依存関係を一つ（または少数）のファイルにまとめるツール

使われていないコード（デッドコード）をバンドルから除去する最適化

新しいJavaScript/TypeScriptを古いブラウザでも動く形式に変換するツール

異なるオリジン間でHTTPリクエストを安全に行うためのブラウザのセキュリティ機能

世界中にサーバーを分散配置し、ユーザーに最も近いサーバーからコンテンツを配信する仕組み

Googleが定めるWebパフォーマンスの主要指標。LCP・INP・CLSの3つ