# 画面設計書 6-v2ドキュメント

## 概要

本ドキュメントは、CoffeeScript 2.x系のドキュメントページ（docs/v2/index.html）の画面設計書です。v2系のCoffeeScript機能と使い方を説明する、ビルド済みの静的HTMLファイルです。

### 本画面の処理概要

**業務上の目的・背景**：
CoffeeScript 2.xは、ES2015+のJavaScript機能をサポートする最新バージョンです。このドキュメントページでは、v2系の新機能、ES2015構文のサポート、v1からの移行ガイドなどを提供します。開発者がv2系の機能を最大限に活用できるようサポートします。

**画面へのアクセス方法**：
ビルド済みドキュメントとして /v2/ にアクセス、または直接 docs/v2/index.html を開くことで表示されます。

**主要な操作・処理内容**：
1. v2系CoffeeScriptの言語機能リファレンスの参照
2. ES2015+機能のサポート状況の確認
3. ページ内のコード例のリアルタイムコンパイル表示
4. v2 Annotated Sourceへのナビゲーション
5. CoffeeScript 2発表ページへのアクセス

**画面遷移**：
- このページから遷移できる画面: v2テストスイート（test.html）、v2 Annotated Source、CoffeeScript 2発表ページ
- 外部からの遷移: 直接アクセス、検索エンジン

**権限による表示制御**：
特になし。全ユーザーがアクセス可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | CoffeeScript コンパイル | 主機能 | v2系のCoffeeScriptコンパイル機能をドキュメント表示 |
| 51 | ブラウザコンパイラ | 主機能 | ブラウザ上でのコード例のコンパイル表示 |

## 画面種別

ドキュメント / リファレンス（シングルページアプリケーション形式）

## URL/ルーティング

- パス: `/v2/` または `/v2/index.html`
- ファイル: `docs/v2/index.html`（ビルド済み静的HTML）

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|---------|------|------|
| CoffeeScript コード入力 | 入力 | テキスト | - | コード例の編集可能なテキストエリア |
| JavaScript 出力 | 出力 | テキスト | - | コンパイル済みJavaScriptコード |

## 表示項目

| 表示項目 | データソース | 表示形式 | 説明 |
|---------|-------------|---------|------|
| ナビゲーションバー | 固定 | nav.navbar | Bootstrap 4ベースの固定ヘッダー |
| サイドバー | 固定 | nav.sidebar | セクションナビゲーション |
| メインコンテンツ | HTML | main.main | ドキュメント本体 |
| コード例 | code-example | CodeMirror | CoffeeScript/JavaScript並列表示 |
| ロゴ | SVG | CoffeeScriptロゴ | ヘッダー・コンテンツ内 |

## イベント仕様

### 1-コード例のリアルタイムコンパイル

CodeMirrorエディタでコード編集時、リアルタイムでコンパイルします。

- トリガー: テキストエリアへの入力
- 処理:
  1. CoffeeScript.compile() を呼び出し
  2. inlineMap: true でソースマップを生成
  3. JavaScript出力エリアに結果を表示
- 使用コンパイラ: browser-compiler-modern/coffeescript.js または browser-compiler-legacy/coffeescript.js

### 2-コード例の実行

Runボタンでコンパイル済みJavaScriptを実行します。

- トリガー: Runボタンクリック
- 処理: CoffeeScript.run()でコード実行

### 3-サイドバーナビゲーション

サイドバーリンクでセクション間を遷移します。

- トリガー: サイドバーリンクのクリック
- 処理: アンカーリンクによるスムーズスクロール

## データベース更新仕様

該当なし

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|---------|
| COMPILE_ERROR | エラー | コンパイルエラーの詳細 | 構文エラー時 |

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| コンパイルエラー | エラーメッセージを表示 |
| ブラウザ非対応 | nomodule属性でレガシー版にフォールバック |

## 備考

- Bootstrap 4.1.0ベースのレイアウト
- CodeMirror 5.62.3を使用したコードエディタ
- Google Fonts（Alegreya Sans, Lato, Roboto Mono）を使用
- ES Module版とレガシー版のブラウザコンパイラを提供
- ビルド済みの静的HTMLファイルとして配布
- v1系とは異なり、モダンなデザインを採用

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

v2ドキュメントのHTML構造とスタイルを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.html | `docs/v2/index.html` | HTML構造、Bootstrap/CodeMirror連携 |

#### Step 2: スタイルと外部リソースを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.html | `docs/v2/index.html` | CSSスタイル定義（インライン） |

**主要処理フロー**:
- **行16-19**: Bootstrap、Google Fonts、CodeMirror CSSの読み込み
- **行20-200+**: カスタムスタイル定義（CodeMirrorテーマ、レイアウト等）

#### Step 3: コンパイラ連携を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.html | `docs/v2/index.html` | スクリプト読み込みとコンパイラ初期化 |

### プログラム呼び出し階層図

```
docs/v2/index.html
    |
    +-- CSS読み込み
    |       +-- Bootstrap 4.1.0
    |       +-- Google Fonts
    |       +-- CodeMirror 5.62.3
    |       +-- カスタムスタイル（インライン）
    |
    +-- nav.navbar（ヘッダー）
    |       +-- ロゴ
    |       +-- ナビゲーションリンク
    |
    +-- nav.sidebar（サイドバー）
    |       +-- セクションリンク群
    |
    +-- main.main（コンテンツ）
    |       +-- 各セクション
    |       +-- コード例（CodeMirror）
    |
    +-- スクリプト
            +-- browser-compiler-modern/coffeescript.js (ES Module)
            +-- browser-compiler-legacy/coffeescript.js (nomodule)
            +-- ドキュメント初期化スクリプト
```

### データフロー図

```
[入力]                    [処理]                          [出力]

ユーザー入力              CoffeeScript                    JavaScriptコード
(CodeMirror)   -------->  .compile()       ------------>  表示
                              |
                              |  inlineMap: true
                              v
                         ソースマップ埋め込み

Run ボタン                CoffeeScript                    実行結果
クリック      -------->   .run()           ------------>  表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.html | `docs/v2/index.html` | HTML | v2ドキュメントページ本体 |
| coffeescript.js | `docs/v2/browser-compiler-modern/coffeescript.js` | 生成コード | ES Module版ブラウザコンパイラ |
| coffeescript.js | `docs/v2/browser-compiler-legacy/coffeescript.js` | 生成コード | レガシー版ブラウザコンパイラ |
| test.html | `docs/v2/test.html` | HTML | v2テストスイートページ |
| annotated-source/ | `docs/v2/annotated-source/` | HTML群 | v2 Annotated Sourceページ群 |
| announcing-coffeescript-2/ | `docs/v2/announcing-coffeescript-2/` | HTML | CoffeeScript 2発表ページ |
