# 画面設計書 10-Annotated Source - Lexer

## 概要

本ドキュメントは、CoffeeScript v1系の字句解析器（Lexer）ソースコード解説ページ（docs/v1/annotated-source/lexer.html）の画面設計書です。Doccoを使用して生成されたlexer.coffeeの詳細なドキュメントを提供し、CoffeeScriptの字句解析プロセスを解説します。

### 本画面の処理概要

**業務上の目的・背景**：
CoffeeScriptコンパイラの字句解析（Lexer）の実装を理解したい開発者やコントリビューターのために、lexer.coffeeのソースコードと詳細なコメントを並列表示します。トークン化のアルゴリズム、正規表現パターン、文字列補間処理など、字句解析の核心部分を学習できます。

**画面へのアクセス方法**：
Annotated Sourceインデックスページからlexer.coffeeへのリンク、または直接 /v1/annotated-source/lexer.html にアクセスすることで表示されます。

**主要な操作・処理内容**：
1. Lexerクラスの実装詳細の閲覧
2. トークン化アルゴリズムの理解
3. 正規表現パターンの確認
4. 文字列補間処理（matchWithInterpolations）の学習
5. JSXトークン処理の理解
6. 他のソースファイルへのナビゲーション

**画面遷移**：
- このページに遷移してくる画面: Annotated Sourceインデックスページ、他のAnnotated Sourceページ
- このページから遷移できる画面: 他のソースコード解説ページ（nodes.html, rewriter.html等）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 7 | Lexer | 主機能 | 字句解析器lexer.coffeeのソースコード解説表示 |
| 9 | 文字列補間処理 | 補助機能 | matchWithInterpolationsの解説を含む |
| 10 | JSXトークン処理 | 補助機能 | jsxTokenの解説を含む |

## 画面種別

ドキュメント / ソースコード解説

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

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

## イベント仕様

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

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

- トリガー: "Jump To ..." リンクのクリック
- 処理: #jump_wrapperの表示/非表示切り替え

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

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

- トリガー: ファイル名リンクのクリック
- 処理: 通常のハイパーリンク遷移

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

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

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

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

該当なし

## メッセージ仕様

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

## 例外処理

該当なし

## 備考

- Doccoツールによって自動生成されたドキュメント
- 左側にコメント/説明、右側にソースコードを表示
- lexer.coffeeはCoffeeScriptコンパイラの字句解析フェーズを担当
- トークンの形式は [tag, value, locationData]
- Rewriterクラスとの連携について説明
- 主要なメソッド: tokenize, identifierToken, commentToken, stringToken, numberToken等
- 正規表現パターンが多数定義されている

---

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

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

### 推奨読解順序

#### Step 1: Lexerクラスの概要を理解する

lexer.coffeeの全体構造と役割を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | lexer.html | `docs/v1/annotated-source/lexer.html` | セクション1-2のイントロダクション |

**読解のコツ**: Lexerはソースコードをトークンストリームに変換します。トークンは [tag, value, locationData] の形式です。

#### Step 2: トークン化メソッドを理解する

主要なトークン化メソッドを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | lexer.html | `docs/v1/annotated-source/lexer.html` | tokenize メソッドのセクション |
| 2-2 | lexer.html | `docs/v1/annotated-source/lexer.html` | identifierToken メソッドのセクション |

**主要処理フロー**:
- **セクション1**: Lexerの概要説明
- **セクション2**: Rewriter、helpersのインポート
- **tokenize**: メインのトークン化処理
- **identifierToken**: 識別子（変数、キーワード）のトークン化
- **stringToken**: 文字列リテラルのトークン化
- **numberToken**: 数値リテラルのトークン化

#### Step 3: 特殊処理を理解する

文字列補間やJSXなど特殊な処理を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | lexer.html | `docs/v1/annotated-source/lexer.html` | matchWithInterpolations のセクション |
| 3-2 | lexer.html | `docs/v1/annotated-source/lexer.html` | jsxToken のセクション |

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

```
docs/v1/annotated-source/lexer.html
    |
    +-- docco.css（スタイル）
    |
    +-- #container
    |       |
    |       +-- #jump_to（ナビゲーションメニュー）
    |       |       +-- 各ソースファイルへのリンク
    |       |
    |       +-- ul.sections
    |               +-- li#title（タイトル: lexer.coffee）
    |               +-- li#section-1（イントロダクション）
    |               |       +-- トークン形式の説明
    |               |       +-- locationDataの説明
    |               +-- li#section-2（インポート）
    |               |       +-- Rewriter, INVERSES
    |               |       +-- helpers関数群
    |               +-- li#section-N（各メソッド解説）
    |                       +-- tokenize
    |                       +-- identifierToken
    |                       +-- commentToken
    |                       +-- stringToken
    |                       +-- numberToken
    |                       +-- jsxToken
    |                       +-- matchWithInterpolations
    |                       +-- 正規表現パターン定義
```

### データフロー図

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

CoffeeScript              Lexer                           トークンストリーム
ソースコード    -------->  .tokenize()    ------------>   [tag, value, loc][]
                              |
                              v
                         各トークン化メソッド
                         ・identifierToken()
                         ・commentToken()
                         ・stringToken()
                         ・numberToken()
                         ・jsxToken()
                              |
                              v
                         Rewriter
                         .rewrite()
                              |
                              v
                         最終トークンストリーム
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| lexer.html | `docs/v1/annotated-source/lexer.html` | HTML | Lexer解説ページ（Docco生成） |
| docco.css | `docs/v1/annotated-source/docco.css` | CSS | Doccoスタイルシート |
| index.html | `docs/v1/annotated-source/index.html` | HTML | インデックスページ |
| rewriter.html | `docs/v1/annotated-source/rewriter.html` | HTML | Rewriter解説ページ（関連） |
| helpers.html | `docs/v1/annotated-source/helpers.html` | HTML | Helpers解説ページ（関連） |
| coffee-script.html | `docs/v1/annotated-source/coffee-script.html` | HTML | メインモジュール解説（関連） |
| lexer.coffee | `src/lexer.coffee` | ソース | 元のLexerソースコード |
