フロントエンド面接核心知識：基礎から応用まで7モジュール

技術面接著者: BeautyResume チーム

フロントエンド技術面接の7つのコアモジュールを体系的に整理。JavaScriptの基礎からフレームワーク原理、パフォーマンス最適化まで、各モジュールに高頻度トピックと回答戦略を付記し、フロントエンド面接の効率的な準備をサポート。

フロントエンド技術面接の評価ロジック

技術面接において、フロントエンドポジションは単に問題を暗記するだけでは合格できません。面接官が本当に見たいのは、知識体系に対する理解の深さと、実際のシナリオで問題を解決する能力です。多くの候補者はフロントエンド面接問題を知識ポイントのチェックリストとして暗記しますが、面接官が重視するのは、散在する知識を体系として結びつけられるかどうかです。

フロントエンド技術面接の評価ロジックは3つのレイヤーに整理できます：基礎知識がしっかりしているか、原理の理解が深いか、エンジニアリング実践に思考があるか。基礎知識は仕事ができるかを決め、原理の理解はトラブルシューティングができるかを決め、エンジニアリング思考はアーキテクチャ決定ができるかを決めます。

本記事では、フロントエンドフロントエンド開発面接で最も核心的な7つのモジュールを体系的に解説し、各モジュールの高頻度トピック、回答戦略、よくある追問を整理し、基礎から応用までの完全な知識マップを構築します。

モジュール1：JavaScript核心——スコープ、クロージャ、プロトタイプチェーン

スコープとスコープチェーン

スコープはJavaScript面接で最も高頻度のトピックの一つです。JavaScriptはレキシカルスコープ（静的スコープ）を採用しており、関数のスコープは定義時に決まり、呼び出し時ではありません。

  • グローバルスコープ：最外層で定義された変数はグローバルスコープを持ち、どこからでもアクセス可能
  • 関数スコープ：関数内で定義された変数はその関数内でのみアクセス可能、外部からは直接取得できない
  • ブロックスコープ：letとconstで宣言された変数はブロックスコープを持ち、{}内でのみ有効、varにはブロックスコープがない

スコープチェーンの本質は変数検索のパスです：現在のスコープで見つからない場合、定義時の外側のスコープに沿って段階的に上方向に検索し、グローバルスコープまで到達します。面接でよく出題される古典的な問題は、forループ内のvarとletの違いです——varはすべての反復で同じ変数を共有し、letは各反復で独立したバインディングを作成します。

クロージャ

クロージャはフロントエンド面接問題の必須トピックです。クロージャの定義：関数がそのレキシカル環境への参照と結びつき、外部関数の実行が完了した後でも外部スコープの変数にアクセスできる仕組み。

クロージャの核心的な応用シーン：

  • データカプセル化とプライベート変数：プライベート変数をシミュレートし、外部は公開されたメソッドからのみアクセス可能
  • 関数ファクトリ：パラメータに基づいて特定の動作を持つ関数を生成
  • コールバックとイベント処理：非同期操作で外部変数への参照を維持
  • モジュールパターン：IIFEを利用してモジュールを作成し、パブリックAPIを公開、内部実装を隠蔽

面接でよくある追問：クロージャはメモリリークを引き起こしますか？答えは直接的には引き起こしません。しかし、クロージャが不要な変数を参照し長期間生存している場合、これらの変数はガベージコレクションされません。解決策は、不要になった時点で参照にnullを設定することです。

プロトタイプチェーン

プロトタイプチェーンはJavaScriptで継承を実装する基盤メカニズムです。すべてのオブジェクトは__proto__を持ち、それがコンストラクタのprototypeを指し、チェーン状の検索パスを形成します。

  • プロパティ検索：オブジェクトのプロパティにアクセスする際、まず自身を検索し、見つからなければ__proto__に沿って上方に検索、nullまで到達
  • constructor：prototypeにはデフォルトでconstructorプロパティがあり、コンストラクタ自体を指す
  • instanceof：オブジェクトのプロトタイプチェーン上にコンストラクタのprototypeが存在するかを判定

高頻度面接追問：Object.create(null)で作成されたオブジェクトにはプロトタイプがなく、クリーンな辞書オブジェクトとして適しています。new演算子の本質は、空のオブジェクトを作成、プロトタイプを設定、コンストラクタを実行、オブジェクトを返すことです。

モジュール2：CSS——レイアウト、BFC、レスポンシブ

レイアウト手法

CSSレイアウトはフロントエンド開発面接の基礎トピックです。従来のfloatからモダンなflexやgridまで、面接官は各手法の適用シーンと限界を明確に説明できることを期待します。

  • Floatレイアウト：初期の主流手法、フロートのクリアが必要、テキスト回り込みに適用、全体レイアウトには現在非推奨
  • Flexレイアウト：1次元レイアウトの第一選択、主軸と交差軸で配置を制御、コンポーネントレベルの配置に適用
  • Gridレイアウト：2次元レイアウトの第一選択、行と列を同時に制御、ページレベルの全体レイアウトに適用
  • ポジションレイアウト：absoluteとfixedはドキュメントフローから外れ、オーバーレイ、固定要素などの特殊シーンに適用

面接でよく出題：Flexのflex:1は何を意味するか？flex-grow:1、flex-shrink:1、flex-basis:0%の短縮形で、残り空間の弾力的分配を意味します。

BFC（ブロック整形コンテキスト）

BFCは技術面接で差がつくCSSトピックです。BFCは独立したレンダリング領域で、内部要素のレイアウトは外部に影響しません。

BFCをトリガーする一般的な条件：

  • ルート要素html
  • floatがnoneではない
  • overflowがvisibleではない（hidden、auto、scrollなど）
  • displayがinline-block、table-cell、flex、grid
  • positionがabsoluteまたはfixed

BFCの核心的な応用：フロートのクリア（親要素がBFCをトリガーして浮動子要素を含む）、マージンの結合防止（同じBFC内の隣接するブロックレベル要素のマージンは結合される）、フロートによる要素の覆いを防止。

レスポンシブデザイン

レスポンシブデザインの核心は、異なるデバイスでページが適切に表示されること：

  • メディアクエリ：ビューポート幅に基づいて異なるスタイルを適用、最も基本的なレスポンシブ手法
  • フレキシブル単位：remはルート要素のフォントサイズ基準、vw/vhはビューポートサイズ基準、%は親要素基準
  • フレキシブル画像：max-width:100%で画像がコンテナを超えないことを確保
  • モバイルファースト：モバイルスタイルを先に書き、min-widthでデスクトップスタイルを段階的に強化

フロントエンド面接の準備をする際、多くの候補者は知識ポイントの復習に集中し、履歴書でこれらの技術能力をどう提示するかをおろそかにしがちです。優れたフロントエンド履歴書は技術スタックの深さとプロジェクト経験を明確に示すべきです——当社の履歴書ツールを使えば、技術的ハイライトを際立たせたプロフェッショナルな履歴書を素早く生成でき、技術面接の前に面接官に好印象を与えられます。

モジュール3：ブラウザ原理——レンダリング、イベントループ、キャッシュ

レンダリングプロセス

ブラウザレンダリングはJavaScript面接でますます重視されるトピックです。URL入力からページレンダリング完了まで、核心的なプロセスは以下の通り：

  1. HTML解析でDOMツリーを構築：バイト→文字→トークン→ノード→DOMツリー
  2. CSS解析でCSSOMツリーを構築：DOMツリー構築と同様、CSSルールを処理
  3. レンダーツリーの合成：DOMとCSSOMをマージ、不可視要素（display:none、headなど）を除外
  4. レイアウト（Layout）：レンダーツリー内の各ノードの位置とサイズを計算
  5. ペイント（Paint）：レイアウトされた要素を画面に描画
  6. コンポジット（Composite）：異なるレイヤーを合成して最終画像を作成

高頻度面接追問：DOMツリーとレンダーツリーの違いは？レンダーツリーには不可視要素が含まれない；visibility:hiddenはレンダーツリーに保持される（スペースを占有）、display:noneはレンダーツリーに含まれない（スペースを占有しない）。

イベントループ（Event Loop）

イベントループはフロントエンド面接問題で最も差がつくトピックの一つです。JavaScriptはシングルスレッド言語であり、イベントループを通じて非同期ノンブロッキングを実現します。

  • コールスタック：同期コードはコールスタックで実行、後入れ先出しに従う
  • マイクロタスク（Microtask）：Promise.then、MutationObserver、queueMicrotask。各マクロタスク実行後、すべてのマイクロタスクをクリア
  • マクロタスク（Macrotask）：setTimeout、setInterval、I/O、UIレンダリング。キューから1つずつ取り出して実行

実行順序：同期コード→マイクロタスクキューを全クリア→次のマクロタスク→マイクロタスクキューを全クリア→ループ。面接ではsetTimeoutとPromiseの実行順序がよく出題されますが、核心は「マイクロタスクは次のマクロタスクより優先される」を覚えることです。

ブラウザキャッシュ

ブラウザのキャッシュ戦略は強力キャッシュと交渉キャッシュに分かれます：

  • 強力キャッシュ：Cache-Control（max-age、no-cache、no-store）とExpires。強力キャッシュにヒットするとローカルキャッシュを直接使用、リクエストを送信しない
  • 交渉キャッシュ：Last-Modified/If-Modified-SinceとETag/If-None-Match。リクエストを送信してリソースが更新されているか検証、304が返ればキャッシュを使用

面接でよく出題：no-cacheはキャッシュしないという意味ではなく、強力キャッシュをスキップして直接交渉キャッシュに進むという意味；no-storeこそが本当にキャッシュしない設定です。

モジュール4：フレームワーク原理——React/Vue核心メカニズム

Virtual DOMとDiffアルゴリズム

Virtual DOMはReactとVueに共通する核心思想です。JavaScriptオブジェクトでDOM構造を記述し、新旧仮想DOMの差分（Diff）を比較することで、実際のDOM操作を最小化します。

Diffアルゴリズムの3つの主要戦略：

  • ツリーレベルの比較：同じレベルのノードのみを比較、クロスレベルの比較は行わない
  • コンポーネントレベルの比較：同じタイプのコンポーネントはサブツリーの比較を継続、異なるタイプは直接置換
  • 要素レベルの比較：同じレベルの子ノードはkey識別子で再利用マッチング

高頻度面接追問：なぜリストにkeyが必要なのか？keyはDiffアルゴリズムがどの要素を再利用できるかを識別するのに役立ち、不要なアンマウントと再作成を回避します。indexをkeyにすると、リスト項目の追加・削除時に誤った再利用が発生する可能性があるため、一意の識別子を使用すべきです。

React核心メカニズム

フロントエンド開発面接におけるReactの核心トピック：

  • Fiberアーキテクチャ：レンダリング作業を小さな単位に分割、中断と優先度スケジューリングをサポート、メインスレッドの長時間ブロックを回避
  • Hooksの原理：useState、useEffectなどのHooksはリンクリスト構造でFiberノードに格納、呼び出し順序が安定している必要がある
  • 合成イベント：Reactはイベント委譲メカニズムを使用、DOM要素ではなくルートノードにイベントをバインド、統一的に管理・配信

Vue核心メカニズム

技術面接におけるVueの核心トピック：

  • リアクティブ原理：Vue2はObject.definePropertyでgetter/setterをインターセプト、Vue3はProxyに切り替え全オブジェクトのインターセプトを実現
  • 依存収集：getterで依存（Watcher）を収集、setterで更新通知をトリガー
  • nextTick：コールバックをマイクロタスクキューに配置、DOM更新後の実行を確保
  • コンパイル最適化：Vue3の静的ホイスティング、パッチフラグ（PatchFlag）、ブロックツリー（Block Tree）でDiffオーバーヘッドを削減

モジュール5：エンジニアリング——Webpack/Viteとビルド最適化

Webpack核心概念

Webpackはフロントエンド面接のエンジニアリングモジュールで重点的に考察されます。核心概念：

  • Entry：ビルドのエントリーポイント、Webpackはエントリーから依存グラフの解析を開始
  • Output：出力設定、バンドルファイルのパスと命名規則を指定
  • Loader：ファイル変換器、WebpackはJSしか理解できないが、LoaderによりCSS、画像などのリソースを処理可能に
  • Plugin：プラグイン機構、ビルドプロセスの特定のフックでカスタムロジックを実行
  • Module：すべてはモジュール——JS、CSS、画像はすべてモジュールであり、Loader処理後に依存グラフに参加

ビルド最適化戦略

ビルド最適化はフロントエンド開発面接でエンジニアリング能力を区別する重要なトピック：

  • コード分割：SplitChunksPluginで共通依存を抽出、dynamic importでルートレベルの遅延読み込みを実現
  • Tree Shaking：ES Moduleの静的分析に基づき、未使用のエクスポートコードを削除
  • キャッシュ最適化：contenthash命名でコンテンツが変わらない場合ハッシュが変わらないことを確保、CDNと組み合わせて長期キャッシュを実現
  • ビルド速度：thread-loaderでマルチスレッドコンパイル、キャッシュ（cache-loaderまたはWebpack5の永続キャッシュ）、excludeでLoaderの処理範囲を絞り込み

なぜViteは速いのか

Viteは開発モードでブラウザのネイティブES Moduleを活用し、オンデマンドでコンパイル、バンドルなしで起動可能です。プロダクションモードではRollupでバンドルし、esbuildでサードパーティ依存をプレバンドルします。面接でよく出題される比較：Webpackはbundle-based（先にバンドルしてから起動）、Viteはnative ESM-based（オンデマンド読み込みでバンドル不要）。

モジュール6：パフォーマンス最適化——読み込みとレンダリングパフォーマンス

読み込みパフォーマンス最適化

読み込みパフォーマンスはユーザーの初回画面体験に直接影響し、技術面接の必須モジュール：

  • リソース圧縮：Gzip/Brotli圧縮転送、画像にWebP/AVIF形式を使用、CSS/JSコードの圧縮
  • 遅延読み込み：画像の遅延読み込み（Intersection Observer）、ルートの遅延読み込み、コンポーネントの遅延読み込み
  • プリロード：preloadで重要リソースを事前読み込み、prefetchで将来必要になる可能性のあるリソースを事前取得、preconnectで接続を早期確立
  • CDN高速化：静的リソースをCDNにデプロイ、ネットワーク遅延を削減、ブラウザの並列ダウンロード能力を活用
  • HTTP/2：多重化、ヘッダー圧縮、サーバープッシュ、接続オーバーヘッドを削減

レンダリングパフォーマンス最適化

レンダリングパフォーマンスはページのインタラクションの滑らかさを決定します：

  • リフローとリペイントの削減：DOM変更のバッチ処理、top/leftの代わりにtransformを使用、display切り替えの代わりにvisibilityを使用
  • 合成レイヤー最適化：will-changeとtransformで独立した合成レイヤーを作成、他の要素への影響を回避
  • 仮想リスト：大規模データリストは表示領域のみレンダリング、DOMノード数を削減
  • デバウンスとスロットル：scroll/resizeなどの高頻度イベントにデバウンス（debounce）またはスロットル（throttle）を使用、実行頻度を削減
  • Web Worker：計算集約型タスクをWorkerスレッドに移行、メインスレッドのブロックを回避

高頻度面接追問：パフォーマンス問題をどう特定するか？Chrome DevToolsのPerformanceパネルでフレームチャートを録画し、ロングタスク、レイアウトシフト、メモリリークを分析；Lighthouseでパフォーマンススコアと最適化提案を生成。

モジュール7：ネットワーク——HTTP/HTTPSとセキュリティ

HTTPプロトコル

HTTPはフロントエンド面接問題のネットワークモジュールの基礎トピック：

  • HTTP/1.1：持続的接続（Keep-Alive）、パイプライン化（ヘッドオブラインブロッキング問題あり）、キャッシュメカニズム
  • HTTP/2：バイナリフレーム、多重化（ヘッドオブラインブロッキングを解決）、ヘッダー圧縮（HPACK）、サーバープッシュ
  • HTTP/3：QUICプロトコル（UDP）ベース、TCPレベルのヘッドオブラインブロッキングを解決、0-RTT接続確立

面接でよく出題：GETとPOSTの違いは？意味的にはGETはリソースの取得、POSTはデータの送信；GETパラメータはURL内、POSTパラメータはリクエストボディ内；GETはキャッシュ可能、POSTはキャッシュ不可；しかし本質的にはどちらもHTTPリクエストであり、POSTでもURLでパラメータを渡すことは可能です。

HTTPS

HTTPS = HTTP + TLS、核心的なプロセス：

  1. TCP3ウェイハンドシェイク：信頼性のある接続を確立
  2. TLSハンドシェイク：サーバー証明書の検証、暗号化アルゴリズムの交渉、鍵の交換
  3. 暗号化通信：交渉された対称鍵を使用して転送データを暗号化

高頻度面接追問：なぜTLSは鍵交換に非対称暗号、データ転送に対称暗号を使用するのか？非対称暗号は安全だが遅く、対称暗号は速いが鍵の配布が安全ではない。両者を組み合わせてそれぞれの長所を活かします。

フロントエンドセキュリティ

フロントエンドセキュリティは技術面接で見逃せないトピック：

  • XSS（クロスサイトスクリプティング）：悪意のあるスクリプトをページに注入。防御：ユーザー入力のエスケープ、CSP（Content-Security-Policy）でスクリプトソースを制限、HttpOnlyを設定してCookieの読み取りを防止
  • CSRF（クロスサイトリクエストフォージェリ）：ログイン状態を利用して偽造リクエストを送信。防御：Referer/Originの検証、CSRFトークンの使用、SameSite Cookie属性の設定
  • クリックジャッキング：透明なiframeを正当なボタンの上に配置。防御：X-Frame-OptionsまたはCSPのframe-ancestorsを設定

フロントエンド面接の3つの高得点戦略

戦略1：回答に構造を持たせる

面接は暗記コンテストではありません——回答には構造が必要です。技術面接で最も良い回答パターンは「総-分-総」です：まず核心的な概念を一文で要約し、次にポイントごとに詳細を展開し、最後に応用シーンや注意事項をまとめます。例えば「クロージャとは何か」と聞かれた場合、定義を暗唱するのではなく、まず「クロージャは関数が定義時のスコープを記憶できる仕組み」と言い、次に原理と応用を展開し、最後にメモリの注意事項に触れます。

戦略2：プロジェクト経験に積極的に結びつける

純粋な理論的回答は「知っている」ことしか証明できませんが、プロジェクト経験に結びつけることで「使ったことがある」ことを証明できます。各知識ポイントに回答する際、「XXプロジェクトでこの問題に遭遇し、当時のアプローチは……」と積極的に述べましょう。これは単なる暗記よりも説得力があり、面接官が最も聞きたい内容です。

戦略3：思考の深さを示す

面接官の追問の目的はあなたを困らせることではなく、理解の境界を探ることです。分からない問題に遭遇した場合、「分かりません」で終わらせず、「私の理解では……ですが、この点は確信がなく、推測では……」と言いましょう。推論プロセスを示すことは、正しいが空虚な回答よりも価値があります。

よくある質問（FAQ）

フロントエンド面接はどの程度の深さまで準備が必要ですか？

目標とする企業のレベルによります。中小企業は基礎知識とプロジェクト経験に重点を置き、大手企業は原理レベルとシステム設計まで深掘りします。フロントエンド面接の準備戦略は「基礎は網羅、原理は深く、プロジェクトは際立つ」——基礎問題で失点せず、原理問題は展開でき、プロジェクト問題にはストーリーがあることを確保しましょう。

JavaScriptの基礎とフレームワーク原理はどちらが重要ですか？

JavaScriptの基礎が基盤であり、フレームワーク原理はボーナスです。面接ではJS基礎問題が必須、フレームワーク原理問題が差別化要因です。まずJS基礎を確実に（スコープ、クロージャ、プロトタイプチェーン、非同期、イベントループ）、その後フレームワーク原理に深く入り込むことをお勧めします。JS基礎がしっかりしていないと、フレームワーク原理も十分に説明できません。

面接で分からない知識ポイントを聞かれたらどうすればいいですか？

焦らず、でたらめも言わないでください。「この点は深く理解していません」と正直に言い、知っている関連知識から推論を試みましょう。技術面接では、面接官はすべての問題に正解できるかよりも、学習能力と思考プロセスを重視します。「後でこの分野を重点的に学習します」と自発的に言うこともプラスになります。

面接でエンジニアリング能力をどうアピールしますか？

エンジニアリング能力は理論だけで示すことはできません——具体的なプロジェクトと結びつける必要があります。例えば「プロジェクトでWebpackのSplitChunksを設定し、共通依存を別チャンクに抽出、初回画面の読み込み時間を40%削減しました」。データで語ることは、設定を単に説明するよりも説得力があります。

フロントエンド面接ではコーディング問題と知識Q&Aのどちらの比重が高いですか？

大手企業では通常半々です。コーディング問題はアルゴリズム的思考とコーディング能力を、知識Q&Aは技術の深さと表現力を評価します。どちらもおろそかにできません。交互に練習することをお勧めします：ある日はアルゴリズム問題、ある日は知識ポイントの復習、両方の能力を同時に向上させましょう。

技術面接の準備は長期戦であり、知識体系からプロジェクト経験まで慎重に磨き上げる必要があります。優れたフロントエンド履歴書は、技術面接の前に面接官の信頼を構築できます——当社の履歴書ジェネレーターを使って、あなたの技術力とプロジェクト成果を的確に提示し、面接を有利に進めましょう。

#技術面接#フロントエンド面接#JavaScript#フロントエンド開発