ガイド
WEB INTERVIEW Qs
Web開発者を採用する際の技術面接で使える質問と模範回答。HTTP/REST、CSS、ブラウザレンダリング、アクセシビリティ、セキュリティ、パフォーマンスなどを網羅。
最終更新：2026年5月
REST APIとGraphQLの違いと、それぞれの適したユースケースを説明してください
RESTは複数のエンドポイントでリソースを固定構造で返します。シンプルでキャッシュしやすく、HTTPの意味論に沿った設計が可能です。GraphQLは単一エンドポイントでクライアントが必要なフィールドだけを問い合わせでき、オーバーフェッチ/アンダーフェッチを防ぎます。RESTはマイクロサービスやCDNキャッシュが重要な場合に、GraphQLはモバイルアプリや複雑なデータ依存関係があるフロントエンドに適しています。
CSSのSpecificityと、モダンなレイアウト手法（Flexbox vs Grid）の使い分けを教えてください
Specificityはセレクタの優先度を決定し、インラインスタイル > ID > クラス/属性 > 要素 の順に強くなります。!importantは避け、BEMなどの命名規則で低いSpecificityを保つのがベストプラクティスです。Flexboxは1次元（行または列）のレイアウトに、Gridは2次元（行と列）のレイアウトに適しています。複雑なページ全体の構造にはGrid、コンポーネント内の要素配置にはFlexboxが一般的です。
ブラウザのレンダリングパイプライン（Critical Rendering Path）を説明してください
ブラウザはHTMLをパースしてDOMを構築し、CSSをパースしてCSSOMを構築します。DOMとCSSOMを結合してRender Treeを作り、各要素のサイズと位置を計算するLayout（Reflow）を実行します。その後、各要素をピクセル単位で描画するPaint、そして複数のレイヤーを合成するCompositeの順で処理します。JavaScriptはパーサーをブロックするため、defer/asyncや非同期読み込みで最適化します。
Webアクセシビリティ（WCAG）の主要な原則と、実践での対応例を挙げてください
WCAGの4原則はPerceivable（知覚可能）、Operable（操作可能）、Understandable（理解可能）、Robust（堅牢）です。実践例：画像にはalt属性を付与、フォームにはlabelを紐付け、キーボードで全機能を操作可能に、十分なコントラスト比（4.5:1以上）を確保、ARIA属性でスクリーンリーダー向け情報を補完します。Lighthouseやaxe DevToolsで定期的に検査します。
CORS、XSS、CSRFの仕組みと対策を説明してください
CORSはブラウザの同一オリジンポリシーを緩和する仕組みで、サーバーがAccess-Control-Allow-Originヘッダーで許可オリジンを指定します。XSSは悪意のあるスクリプトを注入する攻撃で、入力値のサニタイズ、Content-Security-Policy、HttpOnly Cookieが対策です。CSRFは認証済みユーザーの意図しないリクエストを送信する攻撃で、CSRFトークン、SameSite Cookie、Originヘッダーの検証が有効です。
Webパフォーマンス最適化の主要なテクニックを挙げてください
主要なテクニック：(1) 画像の最適化 — WebP/AVIF変換、レスポンシブ画像、遅延読み込み。(2) コード分割 — ルートベースやコンポーネントベースの動的import。(3) キャッシュ戦略 — Service Worker、CDN、HTTPキャッシュヘッダーの活用。(4) クリティカルCSSのインライン化と非クリティカルCSSの遅延読み込み。(5) フォントの最適化 — subset化、font-display: swap。(6) Core Web Vitals（LCP, INP, CLS）の監視と改善。
お問い合わせ