# 画面設計書 26-Annotated Source - Nodes (v2)

## 概要

本ドキュメントは、CoffeeScript v2の構文木ノードクラス(nodes.coffee)のソースコード解説画面の設計仕様を定義する。

### 本画面の処理概要

この画面は、CoffeeScriptコンパイラの`nodes.coffee`モジュールのソースコードを解説形式で表示するドキュメント画面である。Doccoツールによって自動生成された形式で、ソースコードと解説文を2カラムで並べて表示する。nodes.coffeeは構文木（AST）のすべてのノードクラスを定義し、JavaScriptコード生成を担当する。

**業務上の目的・背景**：CoffeeScriptコンパイラの内部実装を理解したい開発者向けに、構文木ノードの構造とコード生成の仕組みを解説する。Grammarルールによって生成されたノードは、compileメソッドを通じてJavaScriptコードに変換される。各ノードクラスはCoffeeScriptの言語構文（関数、クラス、条件分岐等）に対応している。

**画面へのアクセス方法**：v2 Annotated Sourceのインデックスページ(docs/v2/annotated-source/index.html)から「nodes.coffee」リンクをクリック、またはURLを直接指定してアクセスする。

**主要な操作・処理内容**：
1. ソースコードの各セクションと対応する解説文の閲覧
2. 「Jump To」メニューから他のソースコード解説ページへの遷移
3. 各ノードクラス（Base、Block、Literal、Code等）の実装理解
4. CodeFragmentとcompileメソッドの仕組み理解

**画面遷移**：
- 遷移元：v2 Annotated Source Index、他のAnnotated Sourceページ
- 遷移先：browser.coffee、cake.coffee、coffeescript.coffee、command.coffee、grammar.coffee、helpers.coffee、index.coffee、lexer.coffee、optparse.coffee、register.coffee、repl.coffee、rewriter.coffee、scope.litcoffee、sourcemap.litcoffee

**権限による表示制御**：なし（静的ドキュメントのため全ユーザーがアクセス可能）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 16 | Nodes | 主機能 | 構文木ノードクラスnodes.coffeeのソースコード解説表示（v2） |
| 18 | コードフラグメント | 補助機能 | CodeFragmentクラスの解説を含む（v2） |

## 画面種別

詳細（ソースコード解説ドキュメント）

## URL/ルーティング

`docs/v2/annotated-source/nodes.html`

## 入出力項目

本画面は静的HTMLドキュメントのため、ユーザー入力項目はない。

## 表示項目

| 項目名 | 説明 | 表示形式 |
|--------|------|----------|
| タイトル | nodes.coffee | h1テキスト |
| Jump Toメニュー | 他ソースファイルへの遷移リンク一覧 | ドロップダウンリスト |
| セクションリスト | ソースコード解説セクション | 2カラムレイアウト |
| 解説テキスト | 各セクションの解説文 | HTML段落 |
| ソースコード | 対応するCoffeeScriptコード | シンタックスハイライト付きpre |

### 主要ノードクラス

| クラス名 | 説明 | 対応するCoffeeScript構文 |
|----------|------|-------------------------|
| Base | 全ノードの基底クラス | - |
| Block | 文のブロック | インデントされたコードブロック |
| Literal | リテラル値 | 数値、文字列、真偽値 |
| Value | 値とアクセサ | obj.prop、arr[0] |
| Code | 関数定義 | -> / => |
| Class | クラス定義 | class Foo |
| Call | 関数呼び出し | foo() |
| If | 条件分岐 | if/unless |
| For | ループ | for...in/of |
| Op | 演算子 | +, -, *, / 等 |
| Assign | 代入 | = |

## イベント仕様

### 1-Jump Toメニュークリック

ユーザーが「Jump To」メニューをクリックすると、ドロップダウンリストが展開され、他のソースファイル解説ページへのリンクが表示される。

### 2-セクションアンカークリック

各セクションの段落記号をクリックすると、そのセクションへのアンカーリンクがURLに設定される。

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

本画面は静的HTMLドキュメントであり、データベース操作は発生しない。

## メッセージ仕様

本画面は静的ドキュメントのため、動的メッセージは表示されない。

## 例外処理

静的HTMLファイルのため、以下のHTTPエラーのみ発生しうる：
- 404 Not Found: ファイルが見つからない場合
- 500 Internal Server Error: サーバー側の問題

## 備考

- Doccoツールで自動生成されたドキュメント
- CoffeeScript 2.x系のソースコードを対象
- nodes.coffeeはコンパイラで最も大きなファイル
- コード生成の中心的な役割を担う

---

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

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

### 推奨読解順序

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

CodeFragmentとBaseクラスの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | nodes.coffee | `src/nodes.coffee` | CodeFragmentクラスの構造 |
| 1-2 | nodes.coffee | `src/nodes.coffee` | Baseクラスのcompileメソッド |

**読解のコツ**: compileはcompileToFragmentsを呼び、CodeFragment配列を文字列に結合する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | nodes.coffee | `src/nodes.coffee` | Base.compile(o, lvl) |

**主要処理フロー**:
1. **compile**: fragmentsToTextを呼び出し
2. **compileToFragments**: ノードタイプに応じた処理
3. **compileNode**: 各ノード固有のコード生成
4. **makeCode**: CodeFragmentを生成

#### Step 3: 主要ノードクラスを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | nodes.coffee | `src/nodes.coffee` | Block - 文の集合 |
| 3-2 | nodes.coffee | `src/nodes.coffee` | Code - 関数定義 |
| 3-3 | nodes.coffee | `src/nodes.coffee` | Class - クラス定義 |

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

```
CoffeeScript.compile(code)
    |
    +-- parser.parse(tokens)  # AST生成
    |       |
    |       +-- nodes.Root
    |               |
    |               +-- nodes.Block
    |                       |
    |                       +-- 各種ノード
    |
    +-- Root.compile(options)
            |
            +-- Block.compileToFragments()
                    |
                    +-- 各ノード.compileNode()
                            |
                            +-- makeCode() -> CodeFragment
```

### データフロー図

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

トークン配列         parser.parse()               AST (ノードツリー)
                  --------->
                             |
                             v
                    Root.compile()
                             |
                             v
               各ノード.compileNode()
                             |
                             v
                    CodeFragment配列   -----> JavaScript文字列
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| nodes.coffee | `src/nodes.coffee` | ソース | 構文木ノードクラス |
| nodes.html | `docs/v2/annotated-source/nodes.html` | テンプレート | Docco生成HTML |
| grammar.coffee | `src/grammar.coffee` | ソース | 構文規則（ノード生成） |
| scope.litcoffee | `src/scope.litcoffee` | ソース | スコープ管理 |
| docco.css | `docs/v2/annotated-source/docco.css` | スタイル | ドキュメントスタイル |
