シニアフルスタックエンジニア面接質問

シニアフルスタックエンジニア面接の重点、よく出る質問、そして即時AIフィードバックでの練習方法。

無料のAI模擬面接を受ける

シニアレベルで求められること

スタック全体のアーキテクチャ、技術的リーダーシップ、提供品質の責任が問われます。

ジュニアミドル

フルスタックエンジニアの面接質問サンプル

技術面接どのロジックをクライアント側に、どれをサーバー側に置くかをどう判断しますか？
良い回答が押さえる点
- セキュリティ制約（機密データはサーバー）
- レイテンシ要件（即時応答はクライアント）
- データ量（大量データはサーバーで処理）
- 状態管理の複雑さ
- キャッシュ可能性（静的リソースはCDN）
サンプル回答を見る
判断基準は主にセキュリティ、パフォーマンス、ユーザー体験です。例えば、認証トークンや個人情報などの機密データは絶対にクライアント側で処理せず、サーバー側で保持・検証します。一方、フォーム入力のバリデーションやUIのアニメーションなど、レイテンシが重要な操作はクライアント側で実行します。また、大量データの集計やソートはサーバー側で行い、ネットワーク転送量を削減します。状態管理では、サーバー側にセッションを持たせるかJWTを使うかでアーキテクチャが変わります。静的リソースはCDNにキャッシュし、動的データはAPI経由で取得します。よくある間違いは、クライアント側でセキュリティチェックを完結させてしまうことです。フォローアップとして、GraphQLを使う場合の判断基準も聞かれることがあります。
技術面接認証とセッションがエンドツーエンドでどう機能するか説明してください。
良い回答が押さえる点
- JWTトークン vs セッションID方式のトレードオフ
- クッキー（HttpOnly）とローカルストレージのセキュリティ差
- リフレッシュトークンによる長期セッション
- CSRF・XSS対策
- フロントエンドでのトークン保持とバックエンドでの検証フロー
サンプル回答を見る
認証のエンドツーエンドフローは、まずユーザーがログイン情報をサーバーに送信し、サーバーが検証後、JWTやセッションIDを発行します。JWTは署名済みトークンで、クライアント側でデコード可能ですが、秘密鍵はサーバーのみ保持します。クッキーにHttpOnly属性を付けるとJavaScriptから読み取れずXSSに強いですが、CSRF対策としてSameSite属性やCSRFトークンが必要です。ローカルストレージに保存するとJavaScriptからアクセス可能で、CSRFには強いがXSSに弱いというトレードオフがあります。リフレッシュトークンを使用する場合は、アクセストークンの有効期限を短くし、リフレッシュトークンは安全なストレージ（HttpOnlyクッキー）に保存します。バックエンドでは、各リクエストでトークンを検証し、必要に応じて権限チェックを行います。よくある問題は、クライアント側でトークンの有効期限をチェックせず、APIエラーが発生してからリフレッシュを試みることです。
技術面接遅いAPIに依存する遅いページをどう最適化しますか？
良い回答が押さえる点
- バックエンドでのキャッシュ戦略（Redis, CDN）
- プリフェッチと先読み
- ローディングスケルトンと非同期レンダリング
- バッチAPIリクエスト（GraphQL, REST結合）
- Web Workersによる処理の分離
サンプル回答を見る
遅いAPIに依存するページの最適化は多層的に行います。まず、可能な限りバックエンド側でキャッシュします。Redisを使ってAPIレスポンスをキャッシュし、TTLを設定して古いデータを避けます。また、ユーザーがページを開く前に、予測してデータをプリフェッチする手法（prefetch linksやService Worker）も有効です。UI面では、スケルトンローディングや部分レンダリング（ReactのSuspense）を使って、データ取得中でも画面が固まらないようにします。複数の依存APIがある場合は、GraphQLやBFF（Backend For Frontend）を使って1回のリクエストにまとめます。さらに、非同期処理が必要な場合はWeb Workersを使ってメインスレッドをブロックしないようにします。よくある誤りは、すべてのデータを同期で待つ実装です。フォローアップとして、リアルタイム性が必要な場合のSSEやWebSocketの使用も検討します。

コーディング小さなCRUD機能を作ってください：スキーマ、APIエンドポイント、UIフォーム。

良い回答が押さえる点

RESTful API設計（CRUD）
スキーマ定義（MySQL）
バリデーションとエラーハンドリング
UIフォームとAPI連携

サンプル回答を見る

簡単なメモ管理CRUDを作成します。スキーマはMySQLで`memos`テーブル（id, title, content, created_at, updated_at）とします。APIエンドポイントはExpress.jsで実装します。UIはHTMLとJavaScriptのfetchで単一ページにフォームと一覧表示を行います。以下にコード全体を示します。よくある落とし穴は、SQLインジェクション対策や、PUTリクエストの冪等性の考慮漏れです。

参考コードjavascript

// npm install express cors mysql2
const express = require('express');
const cors = require('cors');
const mysql = require('mysql2/promise');
const app = express();
app.use(cors());
app.use(express.json());

// DB接続（環境変数推奨）
const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'test'
});

// SQLスキーマ（事前実行）
// CREATE TABLE memos (
//   id INT AUTO_INCREMENT PRIMARY KEY,
//   title VARCHAR(255) NOT NULL,
//   content TEXT,
//   created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
//   updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
// );

// CRUD APIエンドポイント
app.get('/api/memos', async (req, res) => {
  const [rows] = await pool.query('SELECT * FROM memos ORDER BY created_at DESC');
  res.json(rows);
});

app.post('/api/memos', async (req, res) => {
  const { title, content } = req.body;
  const [result] = await pool.query('INSERT INTO memos (title, content) VALUES (?, ?)', [title, content]);
  res.status(201).json({ id: result.insertId, title, content });
});

app.put('/api/memos/:id', async (req, res) => {
  const { title, content } = req.body;
  await pool.query('UPDATE memos SET title=?, content=? WHERE id=?', [title, content, req.params.id]);
  res.json({ id: req.params.id, title, content });
});

app.delete('/api/memos/:id', async (req, res) => {
  await pool.query('DELETE FROM memos WHERE id=?', [req.params.id]);
  res.status(204).send();
});

// UIを兼ねたHTML（単一ページ）
app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
    <head><title>メモアプリ</title></head>
    <body>
      <h1>メモ一覧</h1>
      <form id="memoForm">
        <input type="text" id="title" placeholder="タイトル" required />
        <textarea id="content" placeholder="内容"></textarea>
        <button type="submit">追加</button>
      </form>
      <div id="memoList"></div>
      <script>
        const API = '/api/memos';
        async function loadMemos() {
          const res = await fetch(API);
          const memos = await res.json();
          document.getElementById('memoList').innerHTML = memos.map(m => 
            \`<div>\${m.title} - \${m.content} <button onclick="deleteMemo(\${m.id})">削除</button>\n            <button onclick="editMemo(\${m.id}, '\${m.title}', '\${m.content}')">編集</button></div>\`
          ).join('');
        }
        document.getElementById('memoForm').onsubmit = async (e) => {
          e.preventDefault();
          const title = document.getElementById('title').value;
          const content = document.getElementById('content').value;
          await fetch(API, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({title, content}) });
          document.getElementById('title').value = '';
          document.getElementById('content').value = '';
          loadMemos();
        };
        async function deleteMemo(id) {
          await fetch(API + '/' + id, { method: 'DELETE' });
          loadMemos();
        }
        async function editMemo(id, title, content) {
          const newTitle = prompt('新しいタイトル', title);
          const newContent = prompt('新しい内容', content);
          if (newTitle && newContent) {
            await fetch(API + '/' + id, { method: 'PUT', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({title: newTitle, content: newContent}) });
            loadMemos();
          }
        }
        loadMemos();
      </script>
    </body>
    </html>
  `);
});

app.listen(3000, () => console.log('Server running on port 3000'));

コーディング失敗時にロールバックする楽観的UI更新を実装してください。

良い回答が押さえる点

楽観的UI更新のパターン
APIエラー時のロールバック
状態管理（useState）
非同期処理とエラーハンドリング

サンプル回答を見る

楽観的UI更新では、API応答を待たずにUIを先に変更し、APIが失敗したら元の状態にロールバックします。ReactのuseStateで状態を管理し、API呼び出しの前に新しい状態を設定、失敗時に以前の状態を復元します。以下に実装例を示します。エラー時にはユーザーに通知し、データの整合性を保ちます。よくある問題は、複数の楽観的更新が競合した場合のロールバック処理です。

参考コードjavascript

import React, { useState } from 'react';

// 楽観的UI更新とロールバックの例
function CommentList() {
  const [comments, setComments] = useState([
    { id: 1, text: 'いいね！', pending: false }
  ]);
  const [error, setError] = useState(null);

  // API関数（ダミー：50%の確率で失敗）
  const fakeDeleteComment = (id) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve();
        } else {
          reject(new Error('APIエラー'));
        }
      }, 1000);
    });
  };

  const handleDelete = async (id) => {
    // 現在のコメントリストを保存（ロールバック用）
    const prevComments = [...comments];
    
    // 楽観的更新：該当コメントを削除し、pendingフラグを立てる
    setComments(comments.filter(c => c.id !== id).map(c => ({ ...c, pending: true })));
    
    try {
      await fakeDeleteComment(id);
      // 成功時：pendingフラグを解除（既に削除済みなので何もしない）
    } catch (err) {
      // 失敗時：元の状態にロールバック
      setComments(prevComments);
      setError('コメントの削除に失敗しました。');
      setTimeout(() => setError(null), 3000);
    }
  };

  return (
    <div>
      {error && <p style={{color: 'red'}}>{error}</p>}
      {comments.map(comment => (
        <div key={comment.id}>
          {comment.text}
          <button onClick={() => handleDelete(comment.id)} disabled={comment.pending}>
            {comment.pending ? '削除中...' : '削除'}
          </button>
        </div>
      ))}
    </div>
  );
}

export default CommentList;

システム設計リアルタイム更新とモデレーションを備えたコメントシステムを設計してください。
良い回答が押さえる点
- WebSocket vs SSEの選択
- リアルタイムメッセージブローカー（Redis Pub/Sub）
- モデレーションキュー（キーワードフィルター, 人間審査）
- データベース設計（コメント, ユーザー, モデレーション状態）
- スケーラビリティ（水平スケーリング, キャッシュ）
サンプル回答を見る
リアルタイムコメントシステムの設計は以下の通りです。要件として、低レイテンシのコメント配信、モデレーションによる不適切コンテンツの除去、高トラフィックへの対応が必要です。アーキテクチャは、クライアントとサーバー間のリアルタイム通信にWebSocketを使用します。大規模ではSocket.IOやSockJSが便利です。バックエンドでは、複数サーバー間でメッセージを同期するためにRedis Pub/Subを使用します。コメントデータはPostgreSQLなどのRDBMSに保存し、モデレーション状態（承認待ち、承認済み、拒否）のカラムを追加します。モデレーションは、まず自動キーワードフィルターを通し、ヒットした場合は人間による審査キューに入れます。CDNには静的アセットのみキャッシュし、コメントは動的に配信します。スケーラビリティのために、WebSocketサーバーはステートレスにし、セッションはRedisに保持します。データベースは読み取りレプリカを追加し、コメント取得はキャッシュ（Redis）で高速化します。よくある落とし穴は、WebSocketの再接続処理と、モデレーション遅延によるユーザー体験の悪化です。
行動面接完全に自分一人でリリースした機能について教えてください。
良い回答が押さえる点
- STAR法：状況(Situation), 課題(Task), 行動(Action), 結果(Result)
- 単独で設計からデプロイまで担当
- 具体的な機能名と技術スタック
- 計測可能な成果（数値）
- 苦労した点と学び
サンプル回答を見る
私が一人でリリースした機能は、社内向け社員情報管理システムの「部署異動履歴機能」です。状況：従来は部署異動を手動でメール管理していたため、過去履歴の確認に時間がかかっていました。課題：ユーザーが簡単に履歴を追加・参照でき、権限に応じて編集制限をかける必要がありました。行動：私は要件定義からUI設計、データベース設計、API実装、デプロイまでを単独で実施しました。フロントエンドはReact、バックエンドはNode.js（Express）、データベースはPostgreSQLを使用し、Dockerでコンテナ化してStaging環境にデプロイ後、本番環境にリリースしました。結果：リリース後、人事部門の作業時間が月間約10時間削減され、ユーザーアンケートで満足度90%を得ました。苦労した点は、権限管理を細かく設定するためのデータモデル設計と、レガシーシステムからのデータ移行です。この経験から、一人で責任を持って機能を完成させる力が身につきました。
行動面接スタックのどの部分を深く掘り下げるかをどう決めますか？
良い回答が押さえる点
- 影響度と優先度（P0/P1）
- 学習コストと現在のスキルギャップ
- プロジェクトの要件とロードマップ
- チームメンバーの強みと分担
- 短期的成果と長期的成長のバランス
サンプル回答を見る
スタックのどの部分を深掘りするかは、影響度、学習効率、プロジェクトニーズの3軸で決めます。まず、現在のプロジェクトで最もボトルネックとなっている部分や、障害発生時の影響が大きい部分（認証基盤、データベースパフォーマンスなど）を優先します。次に、自分のスキルセットと比較して、習得により大きな付加価値が見込める技術（例えば、インフラ経験が少なければKubernetesを学ぶ）を選びます。また、チーム内で誰も担当していない部分をカバーすることで、チーム全体のスキル分布を高めます。短期的な成果を出すために、すぐに活用できる技術を深掘りする一方、長期的には基盤技術（OS、ネットワーク、DB内部構造）を理解することで応用力を高めます。よくある失敗は、好奇心だけで流行の技術に飛びつき、プロジェクトに貢献できないことです。フォローアップとして、深掘りする際の具体的な学習方法（公式ドキュメント読破、OSSコントリビュートなど）も聞かれます。

面接官が評価するポイント

フロントエンドの技術

コンポーネントの状態、レンダリング、レスポンシブでアクセシブルなUI。

バックエンドとAPI

エンドポイント設計、認証、バリデーション、データモデリング。

エンドツーエンドの思考

ロジック・キャッシュの配置、クライアント/サーバーの境界。

データベース

スキーマ設計、クエリ、基本的なパフォーマンスチューニング。

デリバリー

テスト、CI/CD、フラグの背後での安全なリリース。

準備の進め方

深さの分野を選び、明確に示しましょう — どこかで深く掘れるジェネラリストは際立ちます。
リクエストの全ライフサイクルを語り、エンドツーエンドの理解を示しましょう。
テストとデプロイを軽視しないこと。フルスタック面接はコードだけでなく提供も問います。

よくある質問

フルスタック面接は専門職よりも難しいですか？

より幅広いですが必ずしも難しくはありません。多少の深さとエンドツーエンドの網羅を交換しますが、少なくとも1つのレイヤーでは本物の深さが必要です。

フルスタック面接で何に注力すべきですか？

スキーマ・API・UIにまたがる小さな機能を作れること、クライアント/サーバーのトレードオフを明確に説明できることです。

フルスタック職でもシステム設計は尋ねられますか？

はい、純粋なインフラよりも、フロントエンドとバックエンドの両方に触れる実用的なプロダクト機能設計が通常です。

フルスタックエンジニアの質問をAIの即時フィードバックで練習

Offerslyはあなたの履歴書と希望職種に合わせた模擬面接を実施し、すべての回答を関連性・深さ・明確さ・正確さで採点します。

無料で始めるフルスタックエンジニア面接質問の一覧

フルスタックエンジニアの面接質問サンプル

技術面接どのロジックをクライアント側に、どれをサーバー側に置くかをどう判断しますか？

良い回答が押さえる点

セキュリティ制約（機密データはサーバー）
レイテンシ要件（即時応答はクライアント）
データ量（大量データはサーバーで処理）
状態管理の複雑さ
キャッシュ可能性（静的リソースはCDN）

サンプル回答を見る

判断基準は主にセキュリティ、パフォーマンス、ユーザー体験です。例えば、認証トークンや個人情報などの機密データは絶対にクライアント側で処理せず、サーバー側で保持・検証します。一方、フォーム入力のバリデーションやUIのアニメーションなど、レイテンシが重要な操作はクライアント側で実行します。また、大量データの集計やソートはサーバー側で行い、ネットワーク転送量を削減します。状態管理では、サーバー側にセッションを持たせるかJWTを使うかでアーキテクチャが変わります。静的リソースはCDNにキャッシュし、動的データはAPI経由で取得します。よくある間違いは、クライアント側でセキュリティチェックを完結させてしまうことです。フォローアップとして、GraphQLを使う場合の判断基準も聞かれることがあります。

技術面接認証とセッションがエンドツーエンドでどう機能するか説明してください。

良い回答が押さえる点

JWTトークン vs セッションID方式のトレードオフ
クッキー（HttpOnly）とローカルストレージのセキュリティ差
リフレッシュトークンによる長期セッション
CSRF・XSS対策
フロントエンドでのトークン保持とバックエンドでの検証フロー

サンプル回答を見る

認証のエンドツーエンドフローは、まずユーザーがログイン情報をサーバーに送信し、サーバーが検証後、JWTやセッションIDを発行します。JWTは署名済みトークンで、クライアント側でデコード可能ですが、秘密鍵はサーバーのみ保持します。クッキーにHttpOnly属性を付けるとJavaScriptから読み取れずXSSに強いですが、CSRF対策としてSameSite属性やCSRFトークンが必要です。ローカルストレージに保存するとJavaScriptからアクセス可能で、CSRFには強いがXSSに弱いというトレードオフがあります。リフレッシュトークンを使用する場合は、アクセストークンの有効期限を短くし、リフレッシュトークンは安全なストレージ（HttpOnlyクッキー）に保存します。バックエンドでは、各リクエストでトークンを検証し、必要に応じて権限チェックを行います。よくある問題は、クライアント側でトークンの有効期限をチェックせず、APIエラーが発生してからリフレッシュを試みることです。

技術面接遅いAPIに依存する遅いページをどう最適化しますか？

良い回答が押さえる点

バックエンドでのキャッシュ戦略（Redis, CDN）
プリフェッチと先読み
ローディングスケルトンと非同期レンダリング
バッチAPIリクエスト（GraphQL, REST結合）
Web Workersによる処理の分離

サンプル回答を見る

遅いAPIに依存するページの最適化は多層的に行います。まず、可能な限りバックエンド側でキャッシュします。Redisを使ってAPIレスポンスをキャッシュし、TTLを設定して古いデータを避けます。また、ユーザーがページを開く前に、予測してデータをプリフェッチする手法（prefetch linksやService Worker）も有効です。UI面では、スケルトンローディングや部分レンダリング（ReactのSuspense）を使って、データ取得中でも画面が固まらないようにします。複数の依存APIがある場合は、GraphQLやBFF（Backend For Frontend）を使って1回のリクエストにまとめます。さらに、非同期処理が必要な場合はWeb Workersを使ってメインスレッドをブロックしないようにします。よくある誤りは、すべてのデータを同期で待つ実装です。フォローアップとして、リアルタイム性が必要な場合のSSEやWebSocketの使用も検討します。

コーディング小さなCRUD機能を作ってください：スキーマ、APIエンドポイント、UIフォーム。

良い回答が押さえる点

RESTful API設計（CRUD）
スキーマ定義（MySQL）
バリデーションとエラーハンドリング
UIフォームとAPI連携

サンプル回答を見る

参考コードjavascript

// npm install express cors mysql2
const express = require('express');
const cors = require('cors');
const mysql = require('mysql2/promise');
const app = express();
app.use(cors());
app.use(express.json());

// DB接続（環境変数推奨）
const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'test'
});

// SQLスキーマ（事前実行）
// CREATE TABLE memos (
//   id INT AUTO_INCREMENT PRIMARY KEY,
//   title VARCHAR(255) NOT NULL,
//   content TEXT,
//   created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
//   updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
// );

// CRUD APIエンドポイント
app.get('/api/memos', async (req, res) => {
  const [rows] = await pool.query('SELECT * FROM memos ORDER BY created_at DESC');
  res.json(rows);
});

app.post('/api/memos', async (req, res) => {
  const { title, content } = req.body;
  const [result] = await pool.query('INSERT INTO memos (title, content) VALUES (?, ?)', [title, content]);
  res.status(201).json({ id: result.insertId, title, content });
});

app.put('/api/memos/:id', async (req, res) => {
  const { title, content } = req.body;
  await pool.query('UPDATE memos SET title=?, content=? WHERE id=?', [title, content, req.params.id]);
  res.json({ id: req.params.id, title, content });
});

app.delete('/api/memos/:id', async (req, res) => {
  await pool.query('DELETE FROM memos WHERE id=?', [req.params.id]);
  res.status(204).send();
});

// UIを兼ねたHTML（単一ページ）
app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
    <head><title>メモアプリ</title></head>
    <body>
      <h1>メモ一覧</h1>
      <form id="memoForm">
        <input type="text" id="title" placeholder="タイトル" required />
        <textarea id="content" placeholder="内容"></textarea>
        <button type="submit">追加</button>
      </form>
      <div id="memoList"></div>
      <script>
        const API = '/api/memos';
        async function loadMemos() {
          const res = await fetch(API);
          const memos = await res.json();
          document.getElementById('memoList').innerHTML = memos.map(m => 
            \`<div>\${m.title} - \${m.content} <button onclick="deleteMemo(\${m.id})">削除</button>\n            <button onclick="editMemo(\${m.id}, '\${m.title}', '\${m.content}')">編集</button></div>\`
          ).join('');
        }
        document.getElementById('memoForm').onsubmit = async (e) => {
          e.preventDefault();
          const title = document.getElementById('title').value;
          const content = document.getElementById('content').value;
          await fetch(API, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({title, content}) });
          document.getElementById('title').value = '';
          document.getElementById('content').value = '';
          loadMemos();
        };
        async function deleteMemo(id) {
          await fetch(API + '/' + id, { method: 'DELETE' });
          loadMemos();
        }
        async function editMemo(id, title, content) {
          const newTitle = prompt('新しいタイトル', title);
          const newContent = prompt('新しい内容', content);
          if (newTitle && newContent) {
            await fetch(API + '/' + id, { method: 'PUT', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({title: newTitle, content: newContent}) });
            loadMemos();
          }
        }
        loadMemos();
      </script>
    </body>
    </html>
  `);
});

app.listen(3000, () => console.log('Server running on port 3000'));

コーディング失敗時にロールバックする楽観的UI更新を実装してください。

良い回答が押さえる点

楽観的UI更新のパターン
APIエラー時のロールバック
状態管理（useState）
非同期処理とエラーハンドリング

サンプル回答を見る

参考コードjavascript

import React, { useState } from 'react';

// 楽観的UI更新とロールバックの例
function CommentList() {
  const [comments, setComments] = useState([
    { id: 1, text: 'いいね！', pending: false }
  ]);
  const [error, setError] = useState(null);

  // API関数（ダミー：50%の確率で失敗）
  const fakeDeleteComment = (id) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve();
        } else {
          reject(new Error('APIエラー'));
        }
      }, 1000);
    });
  };

  const handleDelete = async (id) => {
    // 現在のコメントリストを保存（ロールバック用）
    const prevComments = [...comments];
    
    // 楽観的更新：該当コメントを削除し、pendingフラグを立てる
    setComments(comments.filter(c => c.id !== id).map(c => ({ ...c, pending: true })));
    
    try {
      await fakeDeleteComment(id);
      // 成功時：pendingフラグを解除（既に削除済みなので何もしない）
    } catch (err) {
      // 失敗時：元の状態にロールバック
      setComments(prevComments);
      setError('コメントの削除に失敗しました。');
      setTimeout(() => setError(null), 3000);
    }
  };

  return (
    <div>
      {error && <p style={{color: 'red'}}>{error}</p>}
      {comments.map(comment => (
        <div key={comment.id}>
          {comment.text}
          <button onClick={() => handleDelete(comment.id)} disabled={comment.pending}>
            {comment.pending ? '削除中...' : '削除'}
          </button>
        </div>
      ))}
    </div>
  );
}

export default CommentList;

システム設計リアルタイム更新とモデレーションを備えたコメントシステムを設計してください。

良い回答が押さえる点

WebSocket vs SSEの選択
リアルタイムメッセージブローカー（Redis Pub/Sub）
モデレーションキュー（キーワードフィルター, 人間審査）
データベース設計（コメント, ユーザー, モデレーション状態）
スケーラビリティ（水平スケーリング, キャッシュ）

サンプル回答を見る

リアルタイムコメントシステムの設計は以下の通りです。要件として、低レイテンシのコメント配信、モデレーションによる不適切コンテンツの除去、高トラフィックへの対応が必要です。アーキテクチャは、クライアントとサーバー間のリアルタイム通信にWebSocketを使用します。大規模ではSocket.IOやSockJSが便利です。バックエンドでは、複数サーバー間でメッセージを同期するためにRedis Pub/Subを使用します。コメントデータはPostgreSQLなどのRDBMSに保存し、モデレーション状態（承認待ち、承認済み、拒否）のカラムを追加します。モデレーションは、まず自動キーワードフィルターを通し、ヒットした場合は人間による審査キューに入れます。CDNには静的アセットのみキャッシュし、コメントは動的に配信します。スケーラビリティのために、WebSocketサーバーはステートレスにし、セッションはRedisに保持します。データベースは読み取りレプリカを追加し、コメント取得はキャッシュ（Redis）で高速化します。よくある落とし穴は、WebSocketの再接続処理と、モデレーション遅延によるユーザー体験の悪化です。

行動面接完全に自分一人でリリースした機能について教えてください。

良い回答が押さえる点

STAR法：状況(Situation), 課題(Task), 行動(Action), 結果(Result)
単独で設計からデプロイまで担当
具体的な機能名と技術スタック
計測可能な成果（数値）
苦労した点と学び

サンプル回答を見る

私が一人でリリースした機能は、社内向け社員情報管理システムの「部署異動履歴機能」です。状況：従来は部署異動を手動でメール管理していたため、過去履歴の確認に時間がかかっていました。課題：ユーザーが簡単に履歴を追加・参照でき、権限に応じて編集制限をかける必要がありました。行動：私は要件定義からUI設計、データベース設計、API実装、デプロイまでを単独で実施しました。フロントエンドはReact、バックエンドはNode.js（Express）、データベースはPostgreSQLを使用し、Dockerでコンテナ化してStaging環境にデプロイ後、本番環境にリリースしました。結果：リリース後、人事部門の作業時間が月間約10時間削減され、ユーザーアンケートで満足度90%を得ました。苦労した点は、権限管理を細かく設定するためのデータモデル設計と、レガシーシステムからのデータ移行です。この経験から、一人で責任を持って機能を完成させる力が身につきました。

行動面接スタックのどの部分を深く掘り下げるかをどう決めますか？

良い回答が押さえる点

影響度と優先度（P0/P1）
学習コストと現在のスキルギャップ
プロジェクトの要件とロードマップ
チームメンバーの強みと分担
短期的成果と長期的成長のバランス

サンプル回答を見る

スタックのどの部分を深掘りするかは、影響度、学習効率、プロジェクトニーズの3軸で決めます。まず、現在のプロジェクトで最もボトルネックとなっている部分や、障害発生時の影響が大きい部分（認証基盤、データベースパフォーマンスなど）を優先します。次に、自分のスキルセットと比較して、習得により大きな付加価値が見込める技術（例えば、インフラ経験が少なければKubernetesを学ぶ）を選びます。また、チーム内で誰も担当していない部分をカバーすることで、チーム全体のスキル分布を高めます。短期的な成果を出すために、すぐに活用できる技術を深掘りする一方、長期的には基盤技術（OS、ネットワーク、DB内部構造）を理解することで応用力を高めます。よくある失敗は、好奇心だけで流行の技術に飛びつき、プロジェクトに貢献できないことです。フォローアップとして、深掘りする際の具体的な学習方法（公式ドキュメント読破、OSSコントリビュートなど）も聞かれます。

面接官が評価するポイント

フロントエンドの技術

コンポーネントの状態、レンダリング、レスポンシブでアクセシブルなUI。

バックエンドとAPI

エンドポイント設計、認証、バリデーション、データモデリング。

エンドツーエンドの思考

ロジック・キャッシュの配置、クライアント/サーバーの境界。

データベース

スキーマ設計、クエリ、基本的なパフォーマンスチューニング。

デリバリー

テスト、CI/CD、フラグの背後での安全なリリース。

準備の進め方

深さの分野を選び、明確に示しましょう — どこかで深く掘れるジェネラリストは際立ちます。

リクエストの全ライフサイクルを語り、エンドツーエンドの理解を示しましょう。

テストとデプロイを軽視しないこと。フルスタック面接はコードだけでなく提供も問います。

よくある質問

フルスタック面接は専門職よりも難しいですか？

フルスタック面接で何に注力すべきですか？

スキーマ・API・UIにまたがる小さな機能を作れること、クライアント/サーバーのトレードオフを明確に説明できることです。

フルスタック職でもシステム設計は尋ねられますか？

はい、純粋なインフラよりも、フロントエンドとバックエンドの両方に触れる実用的なプロダクト機能設計が通常です。