100日チャレンジ day27 (HTTP プロトコル挙動シミュレーター)

# Day 27: HTTP プロトコル挙動シミュレーター

## 1. アプリケーション概要

HTTP/1.1, HTTP/2, HTTP/3 の主要な違い、特にリクエストの多重化と Head-of-line Blocking (HOL Blocking) の影響を、インタラクティブなシミュレーションとアニメーションによって可視化するWebアプリケーションです。ユーザーはプロトコルを選択し、多数のリソース（画像など）を読み込むシナリオを開始することで、各プロトコルの挙動の違いを視覚的に体験できます。

## 2. 目的・学習ポイント

- HTTP/1.1, HTTP/2, HTTP/3 の基本的な仕組みとパフォーマンス特性の違い（特に多重化、HOL Blocking）を理解する。
- ネットワークプロトコルの概念的なシミュレーションを実装する方法を学ぶ。
- フロントエンドでの状態管理とアニメーションによる情報可視化技術を実践する。
- Next.js Route Handlers を用いたシンプルなバックエンド API の実装。

## 3. 主な機能

- **プロトコル選択:** ユーザーはシミュレーション対象のプロトコル (HTTP/1.1, HTTP/2, HTTP/3) を選択できます。
- **リソース読み込みシミュレーション開始:** ボタンクリックで、多数の小さなリソース（例: 20個のアイコン画像）の読み込みを開始します。
- **挙動の可視化:**
    - **共通:** リクエストの発行、サーバーでの処理（擬似遅延）、レスポンスの受信、リソース表示の各ステップをタイムラインや図で視覚的に表示します。
    - **HTTP/1.1 モード:**
        - ブラウザの同時接続数制限（例: 6接続）を表現します。
        - 各TCPコネクション内でのリクエストの直列処理（HOL Blocking）を可視化します。
    - **HTTP/2 モード:**
        - 単一のTCPコネクション上で複数のリクエスト/レスポンス（ストリーム）が並行して処理される様子を可視化します。
        - TCPレイヤのHOL Blockingは発生しうるが、HTTPレイヤでは解消されていることを示します（注釈付き）。
    - **HTTP/3 モード:**
        - QUIC (UDP) をベースとした単一コネクションとストリーム多重化を可視化します。
        - **(オプション) パケットロスシミュレーション:** 意図的に特定のストリームに対応するパケットロスを発生させ、そのストリームのみが遅延し、他のストリームは影響を受けにくい様子を可視化します (TCP HOL Blockingとの対比)。
- **プロトコル解説:** 各プロトコルの特徴やシミュレーションで表現されているポイントについての簡単な解説文を表示します。

## 4. 技術スタック

- フレームワーク: Next.js (App Router)
- 言語: TypeScript
- API実装: Next.js Route Handlers
- スタイリング: Tailwind CSS
- アニメーション: CSS Transitions/Animations, または React Spring/Framer Motion (必要に応じて)
- 状態管理: React Hooks (`useState`, `useEffect`, `useReducer` など)

## 5. バックエンド API 仕様

### `GET /api/resource/{id}`

- **目的:** フロントエンドのシミュレーションがリクエストする個々のリソースを提供する。
- **パスパラメータ:**
    - `{id}`: リソースの識別子 (例: 1, 2, ..., 20)
- **処理:**
    - リクエストを受け付ける。
    - 50ms 〜 200ms 程度のランダムな擬似遅延を入れる (サーバー処理時間やネットワークレイテンシの模倣)。
    - レスポンスを返す。
- **レスポンス:**
    - ステータスコード: `200 OK`
    - ボディ: `{ "resourceId": number, "content": string }` (例: `{ "resourceId": 1, "content": "Icon Data 1" }` )

## 6. UI デザイン

- **全体:** モダンでクリーンなデザインを目指します。今回は **ミニマリスト** スタイルを基調とし、情報（プロトコルの流れ）を分かりやすく伝えることに重点を置きます。
- **カラー:** ダークモードを基本とし、プロトコルモードやリクエスト/レスポンスの状態を表すために **明確なアクセントカラー** を使用します (例: HTTP/1.1は青系、HTTP/2は緑系、HTTP/3は紫系、エラーは赤系など)。
- **レイアウト:**
    - 上部にプロトコル選択ボタン。
    - 中央にシミュレーションアニメーション表示エリア。タイムラインやコネクション/ストリームの状態を図示します。
    - 下部に開始ボタンと、選択中プロトコルの解説エリア。
- **アニメーション:** リクエスト/レスポンスの流れ、コネクションの確立/切断、データの転送などを滑らかなアニメーションで表現します。
- **差別化:** Day26 のダークモードとは異なる配色やレイアウト、コンポーネントスタイルを採用します。

## 7. 実装ステップ（案）

1.  **プロジェクト初期化:** テンプレートコピー、`package.json` 等の設定変更、ディレクトリ移動。
2.  **バックエンド API 実装:** `/api/resource/{id}` ルートハンドラを作成し、擬似遅延とレスポンスを実装。
3.  **フロントエンド UI 骨格:** プロトコル選択ボタン、シミュレーション開始ボタン、アニメーション表示エリア、解説エリアの基本的なレイアウトを `app/page.tsx` に作成。
4.  **状態管理設計:** シミュレーションの状態（リクエスト中、処理中、完了、エラーなど）、各リソースの状態、コネクション/ストリームの状態などを管理するための React State や Reducer を設計。
5.  **HTTP/1.1 シミュレーション実装:** コネクション数制限と直列処理ロジック、対応するアニメーションを実装。
6.  **HTTP/2 シミュレーション実装:** 単一コネクションと並列ストリーム処理ロジック、対応するアニメーションを実装。
7.  **HTTP/3 シミュレーション実装:** HTTP/2 と同様の多重化に加え、(オプションで) パケットロスシミュレーションと影響の可視化を実装。
8.  **解説コンテンツ作成:** 各プロトコルの特徴とシミュレーションで表現されている内容の解説文を作成・表示。
9.  **デバッグと調整:** アニメーションのタイミング、見た目の調整、ロジックのバグ修正。
10. **ドキュメント最終化:** README を清書し、必要に応じて操作方法などを追記。`.cursor/rules/knowledge.mdc` を更新。