# 画面設計書 4-v1ドキュメント

## 概要

本ドキュメントは、CoffeeScript 1.x系のドキュメントページ（docs/v1/index.html）の画面設計書です。レガシーバージョン向けのドキュメントを提供し、v1系のCoffeeScript機能と使い方を説明します。

### 本画面の処理概要

**業務上の目的・背景**：
CoffeeScript 2.xへのメジャーアップデートに伴い、1.x系のドキュメントを別途保持する必要があります。既存の1.x系プロジェクトを維持している開発者や、2.xへの移行を検討している開発者が1.x系の仕様を参照できるようにします。バージョン間の違いを理解し、スムーズな移行を支援します。

**画面へのアクセス方法**：
トップページのサイドバーにある「Version 1.x Documentation」リンクをクリック、または直接 /v1/ にアクセスすることで表示されます。

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

**画面遷移**：
- このページに遷移してくる画面: トップページのサイドバー
- このページから遷移できる画面: v1テストスイート（test.html）、v1 Annotated Source

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

## 関連機能

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

## 画面種別

ドキュメント / リファレンス（シングルページ）

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

| 表示項目 | データソース | 表示形式 | 説明 |
|---------|-------------|---------|------|
| フライバー（ヘッダー） | 固定 | div#flybar | 固定ヘッダーナビゲーション |
| CoffeeScriptロゴ | logo.svg | SVG画像 | ヘッダー左側のロゴ |
| ナビゲーションリンク | 固定 | リンク群 | Try、Overview、Installation等 |
| コンテンツエリア | HTML | div.container | メインドキュメントコンテンツ |
| コード例 | div.code | 2カラム | CoffeeScript/JavaScript並列表示 |
| アンカーリンク | div.anchor | hidden | セクションへのジャンプ用 |

## イベント仕様

### 1-コード例のコンパイル

コード例のCoffeeScriptテキストエリアの内容が変更されると、v1コンパイラでJavaScriptにコンパイルされます。

- トリガー: テキストエリアへの入力
- 処理:
  1. 入力されたCoffeeScriptコードを取得
  2. v1系CoffeeScript.compileでコンパイル
  3. 結果を隣のテキストエリアに表示
- 使用コンパイラ: browser-compiler/coffee-script.js（v1系）

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

Runボタンをクリックすると、コンパイル済みJavaScriptを実行します。

- トリガー: Runボタンクリック
- 処理: eval()でJavaScriptコードを実行
- 結果: コンソールまたはalertで表示

### 3-セクションナビゲーション

ヘッダーのナビゲーションリンクをクリックすると、対応するセクションへスクロールします。

- トリガー: ナビゲーションリンクのクリック
- 処理: アンカーリンクによるページ内スクロール
- セクション: Overview, Installation, Language Reference等

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

本画面は静的ドキュメントページであり、データベースへの更新処理はありません。

### 操作別データベース影響一覧

該当なし

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|---------|
| COMPILE_ERROR | エラー | コンパイルエラーの詳細 | CoffeeScriptコードに構文エラーがある場合 |

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| コンパイルエラー | エラーメッセージを表示 |
| v1コンパイラ読み込み失敗 | ページ機能が制限される |

## 備考

- v1系専用のブラウザコンパイラ（browser-compiler/coffee-script.js）を使用
- v2系のindex.htmlとは異なるレイアウト（旧デザイン）
- 固定ヘッダー（#flybar）による常時ナビゲーション表示
- ビルド済みの静的HTMLファイルとして配布
- 背景にリブパターンのテクスチャを使用

---

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

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

### 推奨読解順序

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

v1系ドキュメントのHTML構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.html | `docs/v1/index.html` | HTML構造、CSSスタイル、スクリプト読み込み |

**読解のコツ**: v1系は独自のスタイルシート（インラインCSS）を使用しており、v2系とは異なるデザインです。

#### Step 2: エントリーポイントを理解する

ページのスクリプト読み込みと初期化を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.html | `docs/v1/index.html` | coffee-script.jsの読み込み位置 |

**主要処理フロー**:
1. スタイルシート（インラインCSS）の定義
2. #flybar ヘッダーの構造
3. .container コンテンツエリアの構造
4. browser-compiler/coffee-script.js の読み込み

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

v1系ブラウザコンパイラの配置を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | coffee-script.js | `docs/v1/browser-compiler/coffee-script.js` | v1系ブラウザコンパイラ |

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

```
docs/v1/index.html
    |
    +-- インラインCSS
    |       +-- フォント設定
    |       +-- レイアウト設定
    |       +-- コードブロックスタイル
    |
    +-- #flybar（ヘッダー）
    |       +-- #logo
    |       +-- .navigation
    |               +-- Try CoffeeScript リンク
    |               +-- セクションナビゲーション
    |
    +-- .container（コンテンツ）
    |       +-- 各セクション
    |       +-- div.code（コード例）
    |               +-- CoffeeScript テキストエリア
    |               +-- JavaScript テキストエリア
    |               +-- Run ボタン
    |
    +-- browser-compiler/coffee-script.js
            +-- CoffeeScript.compile()
            +-- コード例のコンパイル処理
```

### データフロー図

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

ユーザー入力              v1 CoffeeScript                 JavaScriptコード
(CoffeeScript) ------->   .compile()       ------------>  表示
                              |
                              |  coffee-script.js (v1)
                              v
                         コード例エリアに結果表示

Run ボタン                eval()                          alert/console
クリック      -------->   実行             ------------>  実行結果表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.html | `docs/v1/index.html` | HTML | v1ドキュメントページ本体 |
| coffee-script.js | `docs/v1/browser-compiler/coffee-script.js` | 生成コード | v1系ブラウザコンパイラ |
| test.html | `docs/v1/test.html` | HTML | v1テストスイートページ |
| annotated-source/ | `docs/v1/annotated-source/` | HTML群 | v1 Annotated Sourceページ群 |
