# 画面設計書 37-Annotated Source - Browser

## 概要

本ドキュメントは、CoffeeScript v2のブラウザサポートモジュール（browser.coffee）のソースコード解説ページ「Annotated Source - Browser」の画面設計書です。Doccoツールによって生成された静的HTMLページとして、ブラウザ環境でのCoffeeScriptコンパイル・実行機能の実装詳細を解説しています。

### 本画面の処理概要

本画面は、ブラウザ環境でCoffeeScriptを直接コンパイル・実行するためのbrowser.coffeeのソースコードを、注釈付きで閲覧できるドキュメントページです。

**業務上の目的・背景**：ブラウザ環境でのCoffeeScript動作を理解したい開発者向けに、XHRによるスクリプト読み込み、text/coffeescript型scriptタグの自動コンパイル・実行、インラインソースマップ生成などの実装詳細を提供します。Try CoffeeScriptページやブラウザベースの開発環境構築の技術的基盤となります。

**画面へのアクセス方法**：v2ドキュメントページ（docs/v2/index.html）からAnnotated Sourceセクションへ遷移し、「browser.coffee」リンクをクリックしてアクセスします。または直接 docs/v2/annotated-source/browser.html にアクセスします。

**主要な操作・処理内容**：
1. ソースコードセクション（右側）と注釈セクション（左側）の並列表示を閲覧
2. 「Jump To」メニューから他のソースファイル解説ページへ遷移
3. セクションアンカーリンク（#section-N）によるページ内ナビゲーション
4. ハイライトされたCoffeeScriptコードの閲覧

**画面遷移**：
- 遷移元：v2ドキュメントページ、Annotated Source - Index
- 遷移先：cake.html, coffeescript.html, command.html, grammar.html, helpers.html, index.html, lexer.html, nodes.html, optparse.html, register.html, repl.html, rewriter.html, scope.html, sourcemap.html

**権限による表示制御**：特になし（静的HTMLページのため、すべてのユーザーが同一の内容を閲覧可能）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 51 | ブラウザコンパイラ | 主機能 | ブラウザサポートbrowser.coffeeのソースコード解説表示（v2） |
| 52 | XHRローダー | 補助機能 | load関数の解説を含む（v2） |
| 53 | scriptタグ実行 | 補助機能 | runScriptsの解説を含む（v2） |

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

本画面は静的HTMLページのため、ユーザー入力項目はありません。

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|-----|------|
| - | - | - | - |

## 表示項目

| 項目名 | 説明 | 表示位置 |
|--------|------|----------|
| タイトル | "browser.coffee" | ヘッダー部 |
| Jump Toメニュー | 他ソースファイルへのリンク一覧 | 右上ドロップダウン |
| セクション一覧 | コード解説セクション | メインコンテンツ |
| 注釈部 | 各セクションの解説テキスト | 左カラム |
| コード部 | シンタックスハイライト付きソースコード | 右カラム |

### 主要セクション内容

| セクションNo | 解説内容 |
|-------------|---------|
| 冒頭 | モジュール概要：ブラウザ互換レイヤーの役割 |
| 冒頭 | CoffeeScriptモジュールのインポートとcompile関数の取得 |
| 中盤 | CoffeeScript.eval関数：window.evalでのコード評価 |
| 中盤 | CoffeeScript.run関数：関数ラッピングでのコード実行 |
| 中盤 | ブラウザ環境判定とソースマップ付きcompile関数のオーバーライド |
| 中盤 | CoffeeScript.load関数：XHRによるリモートスクリプト読み込み |
| 終盤 | CoffeeScript.runScripts関数：text/coffeescript scriptタグの処理 |
| 終盤 | DOMContentLoadedイベントリスナーの設定 |

## イベント仕様

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

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

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

各セクションの「#」リンクをクリックすると、そのセクションへのパーマリンクがURLハッシュに設定されます。

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

本画面は静的HTMLページのため、データベース操作はありません。

## メッセージ仕様

本画面にはユーザー操作に対するメッセージ表示機能はありません。

## 例外処理

本画面は静的HTMLページのため、アプリケーションレベルの例外処理はありません。HTTPレベルでの404エラー（ファイルが見つからない場合）はWebサーバーが処理します。

## 備考

- Doccoツールによって自動生成されたドキュメント
- CSSファイル（docco.css）によりスタイリングされている
- シンタックスハイライトはhighlight.jsを使用
- ESモジュール版（browser-es.coffee）とは異なり、ページ読み込み時に自動でrunScriptsを実行

---

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

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

### 推奨読解順序

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

ブラウザ環境でのCoffeeScriptコンパイルオプションを把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | browser.coffee | `src/browser.coffee` | compile関数でのinlineMapオプション自動設定を確認 |

**読解のコツ**: ブラウザ環境ではbtoa/JSONが利用可能な場合、自動でinlineMapが有効になりソースマップがDataURIとして埋め込まれる。

#### Step 2: コア関数を理解する

CoffeeScript.eval/run関数がブラウザでのコード実行の基盤です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | browser.coffee | `src/browser.coffee` | CoffeeScript.eval関数（13-16行） |
| 2-2 | browser.coffee | `src/browser.coffee` | CoffeeScript.run関数（19-22行） |

**主要処理フロー**:
1. **13-16行**: CoffeeScript.eval - bare: onでコンパイルし、window.evalで実行
2. **19-22行**: CoffeeScript.run - bare: on, shiftLine: onでコンパイルし、Functionコンストラクタで実行

#### Step 3: XHRローダーを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | browser.coffee | `src/browser.coffee` | CoffeeScript.load関数（40-56行） |

**主要処理フロー**:
- **40行**: url, callback, options, holdパラメータ
- **42-45行**: XHRオブジェクト生成（ActiveXObject互換）
- **46-47行**: GETリクエスト設定
- **48-56行**: onreadystatechangeでレスポンス処理、holdでない場合は即時実行

#### Step 4: scriptタグ処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | browser.coffee | `src/browser.coffee` | CoffeeScript.runScripts関数（61-96行） |

**主要処理フロー**:
- **62-64行**: script要素の取得とCoffeeScriptタイプのフィルタリング
- **67-72行**: execute関数 - 順次実行用
- **74-94行**: 各scriptタグの処理（外部ソースまたはインライン）
- **76-77行**: literate判定（text/literate-coffeescript）
- **78-85行**: src属性がある場合はload関数で読み込み
- **87-94行**: インラインの場合はinnerHTMLを取得

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

```
[ページ読み込み時]
    |
    +-- DOMContentLoaded / onload
            |
            +-- CoffeeScript.runScripts()
                    |
                    +-- document.getElementsByTagName('script')
                    +-- [text/coffeescript, text/literate-coffeescript]をフィルタ
                    |
                    +-- 各scriptに対して:
                            |
                            +-- [src属性あり] CoffeeScript.load(url, callback, options, hold=true)
                            |       |
                            |       +-- XMLHttpRequest.open('GET', url)
                            |       +-- xhr.onreadystatechange -> callback
                            |
                            +-- [インライン] script.innerHTML取得
                            |
                            +-- execute() -> CoffeeScript.run(code, options)
                                    |
                                    +-- CoffeeScript.compile(code, options)
                                    +-- Function(js)()
```

### データフロー図

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

<script type="text/coffeescript">
    |
    +-- [src属性]
    |       |
    |       v
    |   CoffeeScript.load() -----> XHR GET -----> CoffeeScriptソース
    |                                                   |
    +-- [インライン]                                    |
            |                                           |
            v                                           v
        script.innerHTML -----------------------> CoffeeScriptソース
                                                        |
                                                        v
                                              CoffeeScript.run()
                                                        |
                                                        v
                                              compile -> Function -> 実行
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| browser.coffee | `src/browser.coffee` | ソース | ブラウザサポートモジュール（108行） |
| browser.html | `docs/v2/annotated-source/browser.html` | テンプレート | 本画面のHTMLファイル |
| coffeescript.coffee | `src/coffeescript.coffee` | ソース | コンパイルAPI（browser.coffeeで拡張） |
| try.coffee | `documentation/site/try.coffee` | ソース | Try CoffeeScriptページ（browser.coffee利用） |
| docco.css | `docs/v2/annotated-source/docco.css` | 設定 | スタイルシート |
