なぜ「キュー（Queue）」を入れると、人間の仕事が減るのか

    flowchart TB
    subgraph Before["❌ キューなし"]
        U1[👤 ユーザー] -->|待機中...| S1[システム]
        S1 -->|待機中...| E1[外部処理]
        E1 -->|やっと完了| S1
        S1 -->|結果| U1
    end

    subgraph After["✅ キューあり"]
        U2[👤 ユーザー] --> S2[システム]
        S2 -->|即座に| R[受付完了✓]
        S2 --> Q[(Queue)]
        Q --> W[バックグラウンド処理]
        W -.->|後で通知| U2
    end

    style Before fill:#ffebee
    style After fill:#e8f5e9
  

    graph TD
    S1[👤 ユーザー] -->|請求書作成| S2[システム]
    S2 -->|顧客データ取得| S3[外部サービス]
    S3 -->|5秒待機...| S4[データ返却]
    S4 -->|PDF生成依頼| S5[外部サービス]
    S5 -->|20秒待機...| S6[PDF完成]
    S6 -->|メール送信| S7[外部サービス]
    S7 -->|3秒待機...| S8[送信完了]
    S8 -->|処理完了| S9[👤 やっと解放]

    style S1 fill:#ffcdd2,stroke:#c62828
    style S9 fill:#ffcdd2,stroke:#c62828
  

    graph TD
    A1[👤 ユーザー] -->|請求書作成| A2[システム]
    A2 -->|キューに登録| A3[(Queue)]
    A2 -->|受付完了 0.1秒| A4[👤 即座に解放]
    A4 -->|別の作業開始| A5[他の200件も登録可能]
    A3 -.->|バックグラウンド| A6[Worker]
    A6 -.->|処理完了後| A7[📧 通知]

    style A1 fill:#c8e6c9,stroke:#2e7d32
    style A4 fill:#4caf50,stroke:#2e7d32,color:#fff
    style A5 fill:#c8e6c9,stroke:#2e7d32
  

    [図のイメージ]
ユーザー → システム → キュー →「受け付けました」→ ユーザーは自由
                       ↓
               バックグラウンド処理
                       ↓
                  完了したら通知
  

    graph TD
    W_Start[200件開始] --> W_Loop[1件ずつ処理]
    W_Loop --> W_Error1[エラー発生<br/>👤 再試行？]
    W_Loop --> W_Error2[タイムアウト<br/>👤 続行？]
    W_Loop --> W_Error3[データ不整合<br/>👤 スキップ？]
    W_Error1 --> W_Next[次の処理へ]
    W_Error2 --> W_Next
    W_Error3 --> W_Next
    W_Next --> W_Loop
    W_Loop --> W_Result[結果: 195件成功<br/>5件失敗]

    style W_Start fill:#ffcdd2,stroke:#c62828
    style W_Error1 fill:#fff3e0,stroke:#f57f17
    style W_Error2 fill:#fff3e0,stroke:#f57f17
    style W_Error3 fill:#fff3e0,stroke:#f57f17
  

    graph TD
    Q_Start[200件をキューに投入] --> Q_Quick[即座に受付完了]
    Q_Quick --> Q_Free[👤 別の作業へ]
    Q_Start -.-> Q_Process[バックグラウンド処理<br/>自動リトライ3回]
    Q_Process -.-> Q_DLQ[致命的エラーのみ<br/>失敗キューへ]
    Q_DLQ -.-> Q_Notify[📧 完了通知:<br/>195件成功 5件要確認]
    Q_Notify --> Q_Review[👤 5件だけ確認]

    style Q_Start fill:#c8e6c9,stroke:#2e7d32
    style Q_Free fill:#4caf50,stroke:#2e7d32,color:#fff
    style Q_Review fill:#c8e6c9,stroke:#2e7d32
  

    flowchart TD
    Start[メッセージ受信]
    Process{処理実行}
    Success[✅ 成功]
    TempError{一時的エラー？}
    RetryCount{リトライ回数}
    Wait[待機<br/>Exponential Backoff]
    Retry[キューに戻す]
    DLQ[(Dead Letter Queue<br/>失敗キュー)]
    Alert[📧 人間に通知<br/>まとめて報告]

    Start --> Process
    Process -->|成功| Success
    Process -->|失敗| TempError
    TempError -->|タイムアウト<br/>接続エラー| RetryCount
    TempError -->|致命的エラー<br/>データ不正| DLQ
    RetryCount -->|1回目| Wait
    RetryCount -->|2回目| Wait
    RetryCount -->|3回目| Wait
    Wait --> Retry
    Retry --> Process
    RetryCount -->|3回超過| DLQ
    DLQ --> Alert

    style Success fill:#4caf50,color:#fff
    style DLQ fill:#ff9800,color:#fff
    style Alert fill:#f44336,color:#fff
    style Wait fill:#2196f3,color:#fff
  

    graph TB
    subgraph NoQueue["❌ キューなし: 2時間拘束"]
        NQ_Start[👤 200件処理開始]
        NQ_Loop[1件ずつ処理]
        NQ_Wait[⏳ 待機...]
        NQ_Error[❌ エラー発生]
        NQ_Human[👤 スキップ？再試行？]
        NQ_Repeat[次の件へ...]
        NQ_Done[完了<br/>195件成功 5件失敗]

        NQ_Start --> NQ_Loop
        NQ_Loop --> NQ_Wait
        NQ_Wait --> NQ_Error
        NQ_Error --> NQ_Human
        NQ_Human --> NQ_Repeat
        NQ_Repeat --> NQ_Loop
        NQ_Loop --> NQ_Done

        NQ_Note["👤 人間: 2時間画面前<br/>😫 判断200回"]
    end

    subgraph WithQueue["✅ キューあり: 10分だけ対応"]
        WQ_Start[👤 200件投入]
        WQ_Quick[✓ 受付完了 0.1秒]
        WQ_Free[👤 別の作業開始]
        WQ_BG[⚙️ バックグラウンド処理<br/>自動リトライ]
        WQ_Notify[📧 通知: 195成功 5失敗]
        WQ_Review[👤 5件だけ確認<br/>10分で完了]

        WQ_Start --> WQ_Quick
        WQ_Quick --> WQ_Free
        WQ_Start -.-> WQ_BG
        WQ_BG -.-> WQ_Notify
        WQ_Notify --> WQ_Review

        WQ_Note["👤 人間: 10分だけ<br/>😊 判断5回"]
    end

    style NoQueue fill:#ffebee,stroke:#c62828
    style WithQueue fill:#e8f5e9,stroke:#2e7d32
    style NQ_Note fill:#fff3e0
    style WQ_Note fill:#c8e6c9
    style WQ_Free fill:#4caf50,color:#fff
  

    graph TB
    subgraph NoQueue["❌ キューなし: 3分間画面の前で待機"]
        NQ1[👤 エクスポートボタン] --> NQ2[データ抽出 1分]
        NQ2 --> NQ3[⏳ 画面固まる...]
        NQ3 --> NQ4[PDF生成 2分]
        NQ4 --> NQ5[⏳ まだ固まってる...]
        NQ5 --> NQ6[ダウンロード開始]
        NQNote["⚠️ ブラウザ閉じたら最初からやり直し<br/>⚠️ タイムアウトしたら最初からやり直し"]
    end

    subgraph WithQueue["✅ キューあり: 0.1秒で解放"]
        WQ1[👤 エクスポートボタン] --> WQ2[システム]
        WQ2 --> WQ3[(Queue)]
        WQ2 --> WQ4[📧 完了したら通知します]
        WQ4 --> WQ5[👤 別の作業開始]
        WQ3 -.-> WQ6[Worker]
        WQ6 -.-> WQ7[データ抽出 1分]
        WQ7 -.-> WQ8[PDF生成 2分]
        WQ8 -.-> WQ9[(ストレージ)]
        WQ9 -.-> WQ10[📧 ダウンロード可能<br/>24時間有効]
        WQNote["✅ いつでもダウンロード可能<br/>✅ 失敗しても自動リトライ"]
    end

    style NoQueue fill:#ffebee,stroke:#c62828
    style WithQueue fill:#e8f5e9,stroke:#2e7d32
    style WQ5 fill:#4caf50,color:#fff
    style NQ3 fill:#ffcdd2
    style NQ5 fill:#ffcdd2
    style NQNote fill:#fff3e0
    style WQNote fill:#c8e6c9
  

    flowchart TD
    Start([処理の設計を検討])
    Q1{処理時間は<br/>3秒以内？}
    Q2{ユーザーは<br/>結果を待つ必要？}
    Q3{エラー発生<br/>頻度は？}
    Q4{大量データ<br/>処理？}
    Q5{外部サービス<br/>連携あり？}

    Sync[同期処理<br/>シンプルでOK]
    Queue[キュー導入<br/>を検討]
    MustQueue[キュー導入<br/>強く推奨]

    Optimize[まず最適化<br/>インデックス追加<br/>N+1解消]

    Examples["具体例:<br/>・請求書一括作成<br/>・PDF/CSV生成<br/>・メール一斉送信<br/>・データ集計<br/>・外部API連携"]

    Start --> Q1
    Q1 -->|Yes| Q2
    Q1 -->|No| Queue

    Q2 -->|Yes<br/>決済確認等| Sync
    Q2 -->|No| Q3

    Q3 -->|高い| MustQueue
    Q3 -->|低い| Q4

    Q4 -->|Yes<br/>100件以上| MustQueue
    Q4 -->|No| Q5

    Q5 -->|Yes| MustQueue
    Q5 -->|No| Optimize

    Queue --> Examples
    MustQueue --> Examples

    style Start fill:#e3f2fd
    style Sync fill:#fff3e0,stroke:#f57c00
    style Queue fill:#e8f5e9,stroke:#388e3c
    style MustQueue fill:#4caf50,stroke:#2e7d32,color:#fff
    style Examples fill:#e1f5fe,stroke:#0277bd
  

    import { Queue, Worker } from 'bullmq';

// キュー作成
const invoiceQueue = new Queue('invoice-generation');

// ジョブ投入（APIエンドポイント）
app.post('/api/invoices/bulk', async (req, res) => {
  const { invoiceIds } = req.body;

  // 200件をまとめてキューに投入
  await invoiceQueue.addBulk(
    invoiceIds.map(id => ({ name: 'generate', data: { id } }))
  );

  res.json({ message: '受け付けました。完了したら通知します' });
});

// ワーカー（バックグラウンド処理）
const worker = new Worker('invoice-generation', async (job) => {
  const { id } = job.data;

  // PDF生成などの重い処理
  await generateInvoicePDF(id);
  await sendEmail(id);

  return { success: true, invoiceId: id };
}, {
  connection: { host: 'localhost', port: 6379 },
  autorun: true,
  concurrency: 5, // 5件並行処理
  limiter: { max: 10, duration: 1000 }, // レート制限
  attempts: 3, // 自動リトライ3回
  backoff: { type: 'exponential', delay: 1000 }
});

// 成功・失敗の処理
worker.on('completed', (job) => {
  console.log(`✅ 完了: ${job.data.id}`);
  notifyUser(job.data.id, 'success');
});

worker.on('failed', (job, err) => {
  console.error(`❌ 失敗: ${job.data.id}`, err);
  saveToDLQ(job.data.id, err);
});