Web系エンジニアの技術面接｜頻出6分野と答え方の型
結論：Web系エンジニアの技術面接で頻出するのは、「HTTPとブラウザの仕組み」「フロントエンド（JavaScript・React など）」「バックエンドとDB（SQL・トランザクション）」「セキュリティ」「パフォーマンス」「過去の開発経験の深掘り」の6分野です。どの質問も、正解を暗唱するより「理由とトレードオフを自分の言葉で説明できるか」が見られます。この記事では、分野ごとに質問例と答え方の型、公式ドキュメントで確認できる事実を整理しました。
Web系の技術面接で聞かれる6分野
Web系の自社開発・受託・SESでは面接の形も違いますが、技術面接で話題になる範囲はおおむね共通しています。募集要項の技術スタックを見て、重点を置く分野を決めましょう。
- HTTP・ブラウザ：URLを入力してから画面が表示されるまで、HTTPメソッドとステータスコード、CookieとCORS。
- フロントエンド：JavaScriptの非同期処理、状態管理、再レンダリングの理由、アクセシビリティ。
- バックエンド・API設計：RESTの設計、認証と認可、エラーハンドリング、冪等性。
- データベース：インデックス、N+1問題、トランザクションと分離レベル。
- セキュリティ：XSS・CSRF・SQLインジェクション、パスワードの扱い。
- 経験の深掘り：「なぜその設計にしたか」「別案は何か」「もう一度やるなら何を変えるか」。
なお、技術面接全体の準備の進め方は技術面接の準備ガイドに、システム設計の型はシステム設計面接のフレームワークにまとめています。
HTTPとブラウザ：基本ほど深く聞かれる
HTTPメソッドと冪等性
よくある質問は「GETとPOSTの違いは」「PUTとPATCHの違いは」です。MDNのHTTPメソッド一覧では、GET・HEAD・OPTIONS・TRACEが「安全」、これらにPUT・DELETEを加えたものが「べき等」、POST・PATCH・CONNECTは安全でもべき等でもないと整理されています。答えるときは「同じリクエストを繰り返してもサーバー上の結果が変わらない＝べき等」と定義を添えたうえで、「通信が途中で切れてリトライするとき、POSTは二重登録のおそれがあるので冪等キーを設ける」のように実務につなげると深い答えになります。
CORSとプリフライト
「CORSとは何で、なぜエラーになるのか」は定番です。MDNの説明では、CORSは異なるオリジン（ドメイン・プロトコル・ポートが異なるもの）のリソースへのアクセスをブラウザに許可させる仕組みで、同一オリジンポリシーによる制限を安全に緩和するために使われます。GET以外のメソッドや独自ヘッダーを含むリクエストでは、ブラウザが先にOPTIONSメソッドでサーバーに確認する「プリフライト」を送ります。ポイントは「CORSはブラウザの制限であり、サーバー同士の通信やcurlには効かない」と説明できることです。
Cookieの属性
MDNのCookieの解説では、Secure属性付きのCookieはHTTPSの暗号化されたリクエストでのみ送信され、HttpOnly属性付きのCookieはJavaScriptのDocument.cookieから読めず、XSSの影響を和らげるのに役立つと説明されています。SameSiteにはStrict・Lax・Noneがあり、属性を指定しない場合は既定でLax扱いになること、SameSite=NoneにはSecureも必要なことも同じページに書かれています。「セッションCookieにはどの属性を付けるか」と聞かれたら、この3つを理由つきで答えられれば十分です。
フロントエンド：「なぜそう書くか」を説明する
React・Vue・TypeScriptのどれを使う職場でも、次のような質問が出ます。
- Promise、async/await、イベントループの関係を説明してください。
- コンポーネントが再レンダリングされる条件は何ですか。不要な再レンダリングをどう減らしますか。
- グローバルな状態管理は、いつ必要になりますか（まずprops・Contextで足りないか）。
- フォームのバリデーションを、クライアントとサーバーのどちらで行いますか。
- アクセシビリティ（キーボード操作、
label、コントラスト）で気をつけている点は。
答え方の型は「定義→具体例→落とし穴」です。たとえば非同期なら「Promiseは将来の結果を表すオブジェクトで、async/awaitはその書き方を同期的に見せる構文。ただしawaitを直列に並べると並列にできる処理も遅くなるので、独立した処理はPromise.allにまとめる」と締めると、経験を感じさせます。ライブラリの細かいAPIを忘れても、「公式ドキュメントでこう確認する」と言えれば減点は小さいでしょう。
パフォーマンスに触れる質問では、GoogleのCore Web Vitalsが共通言語です。web.devの解説では、LCP（読み込み）は2.5秒以内、INP（応答性）は200ミリ秒以内、CLS（視覚的安定性）は0.1以下が「良好」の目安で、ページ読み込みの75パーセンタイルで満たすことが推奨されています。数字を覚えるより、「何を計測する指標か」を説明できることが大切です。
バックエンドとDB：トランザクションとインデックス
バックエンドでは、API設計の質問から入ることが多いです。「リソースの命名」「ページネーションの方式（オフセットとカーソル）」「エラーレスポンスの形」「認証（セッションとトークン）と認可の違い」などを、実際に作った経験と結びつけて話せるよう準備しましょう。
DBでは次の3つが定番です。
- インデックス：何のために張るか、張りすぎるとどうなるか（書き込みが遅くなり、容量も増える）。複合インデックスの列順の考え方。
- N+1問題：一覧取得で関連データを1件ずつ追加クエリするパターン。ORMのeager loadingやJOINでの解消。
- トランザクションと分離レベル：ダーティリード、ノンリピータブルリード、ファントムリード。
PostgreSQLの公式ドキュメントでは、SQL標準の4つの分離レベル（Read uncommitted・Read committed・Repeatable read・Serializable）が定義され、PostgreSQLではRead uncommittedを指定してもRead committedと同じ動きになること、既定はRead committedであること、Repeatable readではファントムリードが起きないがシリアライゼーション異常は起こり得るため、アプリ側でリトライが必要になることが説明されています。なお、この挙動はDBごとに異なります。使っているDB（MySQLなど）の名前を出されたら、「PostgreSQLでは〜ですが、御社のDBは公式ドキュメントで確認します」と区別して答えると誠実です。
セキュリティ：用語を言えるだけでは足りない
OWASP Top 10は、Webアプリのセキュリティリスクの代表的な一覧で、面接の共通言語としてよく使われます。公式サイトの最新版（2025年版）には、A01「Broken Access Control」、A02「Security Misconfiguration」、A03「Software Supply Chain Failures」、A04「Cryptographic Failures」、A05「Injection」などが並んでいます。
質問例と答えの軸は次のとおりです。
- XSS：出力時のエスケープが基本。フレームワークの自動エスケープを回避するAPI（
dangerouslySetInnerHTMLなど）を使う場面に注意。CookieのHttpOnlyは被害を限定する補助策。 - CSRF：SameSite属性、CSRFトークン、重要操作での再認証。
- SQLインジェクション：文字列連結をやめ、プレースホルダ（プリペアドステートメント）を使う。
- 認可の漏れ：「IDを書き換えると他人のデータが見えないか」を、サーバー側のチェックで防ぐ。
- パスワード：平文では保存せず、ソルト付きの遅いハッシュを使う。独自実装は避ける。
経験の深掘りと答え方の型
Web系の面接で一番時間を使うのは、職務経歴の深掘りです。「何を作ったか」より「自分は何を判断したか」が聞かれます。次の4点を、直近2〜3件のプロジェクトについて用意してください。
- 背景と制約：チーム人数、期限、既存システム。
- 自分の担当と判断：技術選定や設計で自分が決めたこと、その理由。
- 別案とトレードオフ：なぜ他の案を選ばなかったか。
- 結果と振り返り：数字で言えるものは数字で（言えないものは無理に作らない）、もう一度やるなら何を変えるか。
分からない質問が来たときは、黙るより「知っている範囲では〜と理解しています。〜の部分は自信がないので、実務なら公式ドキュメントで確認します」と整理して話すほうが評価されやすいです。ここで「推測だと断る」姿勢は、実務でも信頼につながります。
コーディングテストがある選考では、日本の主要なコーディングテストプラットフォームの記事で、形式や規約の確認方法を扱っています。面接の最後の逆質問の例文も合わせて準備しておくと安心です。
AIツールで練習するなら：ルールを先に確認する
質問への答えを声に出して練習する、コードの画面を共有して説明する練習をする、といった準備にはAIツールが役立ちます。Interview Copilotは、通話の音声を聞き取ってリアルタイムに回答の案を出すデスクトップのオーバーレイで、スクリーンショットからコード問題の解き方を示す機能もあります。無料プランはカード登録なしで、5分間のライブ音声認識と3回のスクリーンショット解析を試せます。詳しくは無料プランのページやコーディング面接アシスタントをご覧ください。
ただし、本番の面接でAIツールを使ってよいかは企業ごとに違います。macOSとWindowsではウィンドウが画面キャプチャに映らないよう設定されますが、Linuxでは映り、結果は画面共有アプリによっても変わります。必ず事前に非公開の画面共有で試し、面接前に採用担当者へ「使ってよいツールの範囲」を確認してください。AI利用を禁止している選考で使うのは避けるべきです。
Web系技術面接の準備チェックリスト
- 募集要項の技術スタックを、6分野のどれに当たるかで分類した。
- HTTP・CORS・Cookie・分離レベルの説明を、1分で口頭で言える。
- 直近2〜3件のプロジェクトで「判断・別案・振り返り」を話せる。
- 分からないときの言い方（知っている範囲と確認方法）を決めている。
- 使ってよいツールの範囲を、面接前に採用担当者へ確認した。
参考資料（Sources）
- MDN：HTTP リクエストメソッド — 安全・べき等の一覧表
- MDN：オリジン間リソース共有（CORS） — プリフライトの説明
- MDN：HTTP Cookie の使用 — Secure・HttpOnly・SameSite
- web.dev：Web Vitals — LCP・INP・CLS の目安
- PostgreSQL 公式：Transaction Isolation
- OWASP Top 10:2025
2026年11月13日に確認。「面接でどの質問が出やすいか」は企業ごとに異なり、公式な統計はありません。本記事の分野分けは一般的な目安です（確認できませんでした）。
FAQ
Web系エンジニアの技術面接では何を聞かれますか？
HTTPとブラウザ、フロントエンド、バックエンド・API設計、DB、セキュリティ、過去の開発経験の深掘りが中心です。企業ごとに重点は違い、公式な出題統計はないため、募集要項の技術スタックから逆算して準備してください。
GETとPOSTの違いはどう答えればよいですか？
MDNでは、GETは安全かつべき等、POSTは安全でもべき等でもないと整理されています。「リトライしたとき二重登録のおそれがあるか」という実務の観点を添えると、定義だけの答えより深くなります。
CORSエラーはなぜ起きるのですか？
ブラウザが同一オリジンポリシーでスクリプトによる異なるオリジンへのリクエストを制限しているためです。サーバーが Access-Control-Allow-Origin などのヘッダーで許可すると解消します。ブラウザの制限なので、curlやサーバー間通信では起きません。
トランザクション分離レベルは覚える必要がありますか？
4段階の名前と、起こり得る現象（ダーティリード等）の対応は説明できると安心です。PostgreSQLの公式ドキュメントでは既定はRead committedで、Read uncommittedは同じ動きになります。DBごとの違いは公式資料で確認すると答えましょう。
分からない技術質問をされたらどうすればよいですか？
黙らず、知っている範囲を整理して話し、不確かな部分は「実務なら公式ドキュメントで確認します」と区別して伝えます。推測を事実のように断言しないことが、信頼につながります。
面接でAIツールを使ってもよいですか？
企業ごとに異なります。AI利用を禁止する選考もあるため、面接前に採用担当者へ使ってよいツールの範囲を確認してください。ツールは練習や準備に使い、本番の可否は必ず先に確認するのが安全です。