以下は、React 19 と Next.js 16 の最新の技術標準に基づいて編集された、2026 年のフロントエンドの面接の質問に対する詳細かつ詳細な回答です。
I. JavaScript と TypeScript コア
1.イベント ループとタスクの優先順位付け: マイクロタスク キュー (Promises、async/await、MutationObserver) は、マクロタスク キュー (setTimeout、I/O、イベント) よりも優先されます。マイクロタスクは同期コードの直後に実行され、ブラウザが次の再描画ステップを実行する前に完全に解放される必要があります。 「スターベーション」は、再帰的なマイクロタスク スレッドがキューに新しいタスクを継続的に追加すると発生し、マクロタスクとレンダリングが無期限にブロックされ、アプリケーションが完全にクラッシュします。
2.メモリ管理 (マーク アンド スイープ & WeakMap): 「マーク アンド スイープ」メカニズムはルート オブジェクトから開始され、アクセス可能なすべてのオブジェクトを「生存」としてマークし、マークされていないオブジェクトのメモリを再利用します。 WeakMap と WeakSet は、オブジェクトへの弱い参照を保持します。つまり、オブジェクトに他の強い参照がない場合、ガベージ コレクターによるメモリの再利用は妨げられません。これは、メモリ リークを心配することなく、DOM ノードまたはキャッシュのメタデータを保存するための強力なツールです。
3.オブジェクト コピーの仕組み:
浅いコピー: 第 1 レベルのプロパティのみをコピーし、ネストされたオブジェクトは同じ参照を共有します。
ディープ コピー: オブジェクト構造を完全にコピーします。
比較:
structurdClone()は最速のネイティブ Web API、Map、Set、循環参照はサポートされていますが、関数や DOM ノードはコピーできません。JSON.parse(JSON.stringify())は非常に遅く、特別なデータ (日付、RegExp) が失われます。lodash.cloneDeepはすべてのケースを処理しますが、バンドル サイズが約 17 KB 増加します。
4.リファレンス ロジックとコピー アルゴリズム: b = a を割り当てる場合、両方の変数は同じメモリ位置を指します。 b の属性を変更すると、a が直接変更されます。ネストされたオブジェクトをコピーするために、Lodash などのライブラリは、マップと組み合わせた再帰アルゴリズムを使用して処理されたオブジェクトを追跡し、循環参照が発生した場合の無限ループを回避し、複雑なデータ型を保持します。
5. Promise.all と Sequential Await: タスクが相互に依存せずに並列実行する場合は Promise.all を使用し、合計待機時間を最も長いタスクの時間まで短縮します。 Promise.allSettled は、(成功または失敗に関係なく) すべての Promise が終了するのを待機し、詳細な結果配列を返すため、安定性を提供します。これにより、失敗したタスクが Promise.all のようにチェーン全体をクラッシュさせることを回避できます。
6.条件付きパフォーマンス (Switch と If-Else): 複数の条件がある場合、switch は多くの場合 if-else より高速です。これは、コンパイラ (V8 など) が、各分岐を順番にチェックする (O(n)) 代わりに、実行する命令のブロック (O(1)) に直接アクセスできる「ジャンプ テーブル」を作成できるためです。
7. TypeScript の進化 (Unions vs Enum): 2026 年では、as const と組み合わせた「文字列リテラル Union」('A' | 'B') が、コンパイル後に完全に消える (バンドル サイズがゼロ) ため、推奨されますが、Enum は冗長な JavaScript コードを生成します。さらに、数値列挙型には任意の数値を割り当てることができるため、タイプ セーフがありません。
8.高度な型付け (推論と満足): infer を使用すると、条件付き型の複雑な構造内からデータ型を抽出できます (たとえば、関数の戻り値の型を取得します)。 satisfies 演算子は、リテラル データ型を維持しながらオブジェクトがインターフェイスに一致するかどうかを確認するのに役立ち、as を使用してキャストするよりも IntelliSense がより正確に動作するのに役立ちます。
II. React 19 コアとフック
9. useMemo は関数を記憶します: はい、useMemo は、その関数が内部計算ロジック ブロックの戻り値である場合、関数定義を完全に記憶できます。ただし、useCallback は、この目的に特化した短縮構文です。
10. useCallback の使用例: 再レンダリングの最適化に加えて、useCallback は、依存関係として関数を他のフック (useEffect、useMemo) に渡すとき、または React.memo でラップされた子コンポーネントの再レンダリングを防ぐときに参照の安定性を確保するために重要です。
11.内部フック ストレージ: React は、各ファイバー ノードの memoizedState プロパティに添付されたリンク リストとしてフック値を保存します。 React は古い状態を対応するフックに適切にマップするために実行順序に依存しているため、フックの呼び出し順序は「神聖」です。条件で Hook を呼び出すと、このリストにインデックスが作成されます。
12. useMemo と useEffect (同じロジック、異なる結果):
useMemo: レンダリング プロセス中に同期的に実行します。内部に不純な (副作用) ロジックがあると、UI のレンダリングが遅くなったり、フリーズしたりする可能性があります。useEffect: インターフェイスが描画された後に非同期で実行されます。例: ロジックがグローバル変数を更新する場合、
useMemoはレンダリング直後にその変数を変更しますが、useEffectはユーザーがそれを見るまで待ちます。新しいインターフェースが変更されたため、データ表示のタイミングに不一致が発生しました。
13. DOM 同期 (useEffect と useLayoutEffect): useLayoutEffect は、DOM が変更された直後、ブラウザーがペイントする前に同期的に実行されます。これは、要素のサイズを測定し、ちらつきを避けるために UI をすぐに更新するために使用されます。一方、useEffect (ペイント後に実行) により、ユーザーは数ミリ秒間古い UI が表示されます。
14.関数コンポーネントのライフサイクル: マウント (DOM への追加)、更新 (レンダリング)、アンマウント (削除) の 3 つのフェーズで構成されます。 useEffect はレンダリング後に実行されます。クリーンアップ関数は、コンポーネントがアンマウントされる直前、または次のレンダリングでエフェクトが再度実行されて古いリソースをクリーンアップする前に実行されます。
15.フックのルール: React は Fiber のリンク リスト内の呼び出し順序に基づいて状態を管理するため、ループまたは条件内でフックを呼び出さないでください。順序が変わると、React はどのステートがどのフックに属するかを判断できなくなります。
16. useRef メカニズム (React 19): useRef は、値が変更されたときに再レンダリングをトリガーすることなく、コンポーネントのライフサイクル全体を通じて持続する永続オブジェクト {current:...} を返します。 React 19 では、ref を通常の prop として子コンポーネントに渡すことができるため、forwardRef を使用する必要がなくなります。
17.コンテキスト API の最適化: コンテキストを分割 (コンテキスト分割) して頻繁に変化する状態を分離するか、子コンポーネントを useMemo/React.memo でラップして、親の Context 値が変更されても子コンポーネントがそれを使用しない場合の再レンダリングを回避します。
18.新しい React 19 フック:
-
if/else)。
19. React コンパイラー ルール: コンパイラーは、ビルド時レベルでメモ化を自動化します。プログラマーは、props/state の純粋性 (冪等性) と不変性 (不変性) を遵守する必要があります。違反した場合、コンパイラはそのコンポーネントの最適化を「スキップ」します。
III. Next.js 16 以降とレンダリング戦略
20.ハイドレーション メカニズム: サーバーは、