フロントエンドのシステム設計面接

シニアフロントエンド面接では、ニュースフィード、オートコンプリート、画像ギャラリー、無限スクロールのダッシュボードなど、実用的な UI 機能をエンドツーエンドで設計するよう求められます。評価されるのは、フレームワークの知識を問う些細な問題ではなく、アーキテクチャ、トレードオフへの理解、パフォーマンスに対する直感、コミュニケーションです。

ほとんどの 45～60 分の面接は、次の流れで進みます。1) 要件の明確化（5 分）。2) 高レベルアーキテクチャのスケッチ（10 分）。3) コンポーネント分解（10 分）。4) データ取得と状態管理（10 分）。5) パフォーマンスとアクセシビリティ（10 分）。6) 1 つの領域を深掘り（面接官が選択）。

いきなりコーディングを始めないでください。対象デバイスは何か、ログインユーザーか匿名ユーザーか、オフライン対応が必要か、リアルタイム更新が必要か、想定規模はどの程度か（10 ユーザーか 1,000 万ユーザーか）、アクセシビリティ要件は何か、対応ブラウザーは何かを確認します。これらの決定は設計全体に影響します。

クライアント（SPA か SSR か）、API ゲートウェイ、サービス、キャッシュ、CDN などの構成要素を図にします。ユーザーの操作とデータフローを示します。早い段階でエッジケースにも触れてください。実際の開発経験があることを示せます。

コンポーネント階層をスケッチします。NewsFeed → Header、Story[]、Composer。Story → Avatar、Content、Actions、Comments。再利用可能なコンポーネントと、特定の機能に固有のコンポーネントを見分けます。

それぞれの状態はどこに保持するでしょうか。ローカル（useState）、URL（router）、サーバー状態（React Query）、クライアント状態（Zustand）のどれでしょうか。データ取得戦略について、初期 SSR、無限スクロール、リアルタイムの WebSocket 更新、楽観的 UI などを説明します。

ルート境界でコード分割します。長いフィードには仮想化リストを使用します。画像を最適化します（遅延読み込みと AVIF/WebP）。メインスレッドをブロックしないようにします。バンドルサイズの予算を設定します。再訪問にはキャッシュファーストの SW を使用します。

セマンティック HTML、キーボード操作、ARIA ロールとライブリージョン、色のコントラスト、スクリーンリーダーでのテストを検討します。さらに、ルート変更時のフォーカス管理に触れれば加点になります。

IntersectionObserver を使った無限スクロール、メモリ使用量を抑える仮想化、楽観的ないいね処理、リアルタイムの新着投稿インジケーター、ぼかしプレースホルダー付きの画像遅延読み込み、SEO のための SSR、頻繁に更新されるタイムライン向けの ISR/エッジキャッシュについて説明します。

デバウンスした入力、古いリクエストをキャンセルする AbortController、リクエストの重複排除、レスポンスキャッシュ（LRU）、キーボード操作（上/下/Enter/Escape）、ARIA combobox ロール、モバイルの仮想キーボードへの対応について説明します。

masonry とグリッドレイアウトの比較、Retina 対応のレスポンシブな srcset、Intersection ベースの遅延読み込み、次の画像のプリフェッチ、フォーカストラップ付きのライトボックス/モーダル、モバイルでのスワイプジェスチャー、キーボードの矢印キーによる移動、ディープリンクについて説明します。

選択するたびに、代替案とその選択理由を説明します。「遅延読み込みには IntersectionObserver を使います。ネイティブ機能で効率的だからです。代替案は throttle を使ったスクロールリスナーです。よりシンプルですが、CPU が遅い環境ではカクつきやすくなります」。シニア向けの面接官が評価するのは、まさにこの点です。

1) 要件を明確にする前にコードへ飛びつく。2) アクセシビリティを無視する。3) エラー状態（ネットワーク障害、結果なし）を忘れる。4) ローディング状態を考えない。5) 曖昧な回答をする（「React を使います」だけで、どのアーキテクチャか説明しない）。

システム設計面接でオートコンプリート検索ボックスの設計を求められた場合、最初に何をすべきでしょうか。

まずスコープを明確にします。高レベルアーキテクチャ（クライアント、API、キャッシュ、CDN）を設計し、コンポーネントツリーを作ります。状態の保持場所（ローカル、URL、サーバーキャッシュ、グローバル）とデータ取得戦略を決めます。パフォーマンスでは、コード分割、仮想化、画像最適化を検討します。アクセシビリティでは、キーボード操作、ARIA、コントラストを確認します。トレードオフを伝え、いきなりコードを書き始めないようにします。フィード、オートコンプリート、ギャラリー、ダッシュボードといった典型的なパターンを練習してください。