# 画面設計書 9-Annotated Source - Index

## 概要

本ドキュメントは、CoffeeScript v1系のソースコード解説インデックスページ（docs/v1/annotated-source/index.html）の画面設計書です。Doccoを使用して生成されたソースコードドキュメントの一覧を表示し、各ファイルの解説ページへのナビゲーションを提供します。

### 本画面の処理概要

**業務上の目的・背景**：
CoffeeScriptコンパイラの内部実装を理解したい開発者やコントリビューターのために、ソースコードの解説ドキュメントを提供します。Doccoによってソースコードとコメントが並列表示され、実装の詳細を学習できます。インデックスページは全ソースファイルへのエントリーポイントとして機能します。

**画面へのアクセス方法**：
v1ドキュメントページからAnnotated Sourceへのリンク、または直接 /v1/annotated-source/ にアクセスすることで表示されます。

**主要な操作・処理内容**：
1. CoffeeScriptソースファイル一覧の閲覧
2. 各ファイルの解説ページへのナビゲーション
3. ファイル間の関連性の把握
4. コンパイラアーキテクチャの概観

**画面遷移**：
- このページに遷移してくる画面: v1ドキュメントページ
- このページから遷移できる画面: 各ソースコード解説ページ（lexer.html, nodes.html, grammar.html等）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 7 | Lexer | 遷移先機能 | Lexerソースコード解説ページへの遷移リンク |
| 14 | Grammar | 遷移先機能 | Grammarソースコード解説ページへの遷移リンク |
| 16 | Nodes | 遷移先機能 | Nodesソースコード解説ページへの遷移リンク |

## 画面種別

インデックス / ナビゲーション画面

## URL/ルーティング

- パス: `/v1/annotated-source/` または `/v1/annotated-source/index.html`
- ファイル: `docs/v1/annotated-source/index.html`（Docco生成）

## 入出力項目

本画面は閲覧専用のため、入力項目はありません。

## 表示項目

| 表示項目 | データソース | 表示形式 | 説明 |
|---------|-------------|---------|------|
| タイトル | 固定 | H1 | "index.coffee" |
| Jump Toメニュー | 静的リスト | ul#jump_to | ソースファイル一覧ドロップダウン |
| ソースコード | index.coffee | div.content | コード表示エリア |
| コメント | index.coffee | div.annotation | コメント/説明表示エリア |
| セクション | 静的 | li.section | コードとコメントのペア |

## イベント仕様

### 1-Jump Toメニュー展開

Jump Toリンクをクリックすると、ソースファイル一覧が表示されます。

- トリガー: "Jump To ..." リンクのクリック
- 処理: #jump_wrapperの表示/非表示切り替え
- 表示内容: 全ソースファイルへのリンク一覧

### 2-ソースファイルへの遷移

ファイル名リンクをクリックすると、対応する解説ページへ遷移します。

- トリガー: ファイル名リンクのクリック
- 処理: 通常のハイパーリンク遷移
- 遷移先: 各ソースコード解説ページ

### 3-セクションアンカー

セクション番号（pilcrow記号）をクリックすると、そのセクションへの直接リンクを取得できます。

- トリガー: pilcrow（¶）記号のクリック
- 処理: URLハッシュを更新（#section-N）

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

該当なし

## メッセージ仕様

該当なし（閲覧専用ページ）

## 例外処理

該当なし

## 備考

- Doccoツールによって自動生成されたドキュメント
- 左側にコメント/説明、右側にソースコードを表示するレイアウト
- docco.cssによるスタイリング
- index.coffeeはCoffeeScriptモジュールのエントリーポイント
- ソースコードはシンタックスハイライト付きで表示

---

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

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

### 推奨読解順序

#### Step 1: Docco出力構造を理解する

Doccoが生成するHTMLの構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.html | `docs/v1/annotated-source/index.html` | Docco生成HTMLの構造 |

**読解のコツ**: Doccoはソースコードのコメントとコードを並列表示するドキュメンテーションツールです。各セクション（li）がコメントとコードのペアを含みます。

#### Step 2: ナビゲーション構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.html | `docs/v1/annotated-source/index.html` | Jump Toメニューのファイル一覧 |

**主要処理フロー**:
- **行14-100**: #jump_to メニュー - 全ソースファイルへのリンク一覧
- **行102-108**: #title - ファイルタイトル表示
- **行112-124**: セクション - コードとコメントのペア

#### Step 3: 対象ソースコードを理解する

index.coffeeの内容を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.html | `docs/v1/annotated-source/index.html` | index.coffeeのエクスポート処理 |

**主要処理フロー**:
- **セクション1**: coffee-scriptモジュールからのエクスポート
- exports[key] = val for key, val of require './coffee-script'

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

```
docs/v1/annotated-source/index.html
    |
    +-- docco.css（スタイル）
    |
    +-- #container
    |       |
    |       +-- #jump_to（ナビゲーションメニュー）
    |       |       +-- browser.coffee リンク
    |       |       +-- cake.coffee リンク
    |       |       +-- coffee-script.coffee リンク
    |       |       +-- command.coffee リンク
    |       |       +-- grammar.coffee リンク
    |       |       +-- helpers.coffee リンク
    |       |       +-- index.coffee リンク（現在のページ）
    |       |       +-- lexer.coffee リンク
    |       |       +-- nodes.coffee リンク
    |       |       +-- optparse.coffee リンク
    |       |       +-- register.coffee リンク
    |       |       +-- repl.coffee リンク
    |       |       +-- rewriter.coffee リンク
    |       |       +-- scope.litcoffee リンク
    |       |       +-- sourcemap.litcoffee リンク
    |       |
    |       +-- ul.sections
    |               +-- li#title（タイトル）
    |               +-- li#section-1（セクション）
    |                       +-- div.annotation（コメント）
    |                       +-- div.content（コード）
```

### データフロー図

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

ソースコード              Docco                           HTML ドキュメント
(*.coffee)     -------->  生成            ------------>   表示
                              |
                              v
                         Markdown解析
                         シンタックスハイライト
                              |
                              v
                         セクション分割
                         HTML出力
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.html | `docs/v1/annotated-source/index.html` | HTML | インデックスページ（Docco生成） |
| docco.css | `docs/v1/annotated-source/docco.css` | CSS | Doccoスタイルシート |
| lexer.html | `docs/v1/annotated-source/lexer.html` | HTML | Lexer解説ページ |
| nodes.html | `docs/v1/annotated-source/nodes.html` | HTML | Nodes解説ページ |
| grammar.html | `docs/v1/annotated-source/grammar.html` | HTML | Grammar解説ページ |
| rewriter.html | `docs/v1/annotated-source/rewriter.html` | HTML | Rewriter解説ページ |
| scope.html | `docs/v1/annotated-source/scope.html` | HTML | Scope解説ページ |
| sourcemap.html | `docs/v1/annotated-source/sourcemap.html` | HTML | SourceMap解説ページ |
| coffee-script.html | `docs/v1/annotated-source/coffee-script.html` | HTML | メインモジュール解説ページ |
| helpers.html | `docs/v1/annotated-source/helpers.html` | HTML | Helpers解説ページ |
| command.html | `docs/v1/annotated-source/command.html` | HTML | Command解説ページ |
| optparse.html | `docs/v1/annotated-source/optparse.html` | HTML | Optparse解説ページ |
| repl.html | `docs/v1/annotated-source/repl.html` | HTML | REPL解説ページ |
| register.html | `docs/v1/annotated-source/register.html` | HTML | Register解説ページ |
| browser.html | `docs/v1/annotated-source/browser.html` | HTML | Browser解説ページ |
| cake.html | `docs/v1/annotated-source/cake.html` | HTML | Cake解説ページ |
