# 機能設計書 8-Markdown/MDX パース

## 概要

本ドキュメントは、PrettierのMarkdown/MDXパース機能の設計について記述する。

### 本機能の処理概要

MarkdownおよびMDXドキュメントをパースし、mdast（Markdown AST）を生成する機能である。unified/remarkエコシステムを基盤として、GFM（GitHub Flavored Markdown）やMDX（JSX in Markdown）をサポートする。

**業務上の目的・背景**：Markdownは技術文書、README、ブログ記事など広く使用されるドキュメントフォーマットである。MDXはMarkdownにJSXコンポーネントを埋め込むことができ、ドキュメントサイトで広く採用されている。これらのフォーマットを適切にパース・フォーマットすることで、ドキュメントの一貫性を維持できる。

**機能の利用シーン**：
- Markdownファイル（.md）のフォーマット
- MDXファイル（.mdx）のフォーマット
- READMEやドキュメントの整形
- Playgroundでのドキュメントプレビュー

**主要な処理内容**：
1. Front Matterの解析（YAML/TOMLヘッダー）
2. unified/remarkによるMarkdownパース
3. GFM拡張（テーブル、タスクリスト等）の処理
4. MDX構文（JSX、import/export）の処理
5. コードブロック、数式などの処理
6. Liquidテンプレートタグの処理

**関連システム・外部連携**：
- unified（テキスト処理フレームワーク）
- remark-parse（Markdownパーサー）
- remark-mdx（MDX拡張）
- micromark（低レベルパーサー）

**権限による制御**：特になし。すべてのユーザーがパーサー機能を利用可能。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 2 | Playground | API連携 | MarkdownおよびMDXをパース |
| 5 | About - Prettier概要 | 補助機能 | 対応言語としてMarkdown/MDXパースを説明 |

## 機能種別

計算処理 / パース処理

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| text | string | Yes | パース対象のMarkdown/MDXテキスト | - |
| options | object | No | パースオプション | - |
| options.parser | string | No | パーサー名（markdown, mdx, remark） | 有効なパーサー名 |
| options.filepath | string | No | ファイルパス（パーサー推論用） | - |

### 入力データソース

- Markdown/MDXテキスト
- ファイルパス情報（パーサー推論用）

### サポートパーサー

| パーサー名 | 説明 | 特徴 |
|-----------|------|------|
| markdown | 標準Markdownパーサー | GFM拡張をサポート |
| mdx | MDXパーサー | JSX、import/exportをサポート |
| remark | markdownのエイリアス | 互換性のため維持 |

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| ast | object | パースされたmdast（Markdown AST） |
| ast.type | string | "root" |
| ast.children | array | 子ノード配列 |

### 出力先

- パース関数の戻り値として返却
- プリンターで使用

## 処理フロー

### 処理シーケンス

```
1. パーサー選択
   └─ markdown/mdx/remarkから選択

2. unifiedプロセッサ構築
   ├─ remark-parse（基本パーサー）
   ├─ GFM拡張
   │    ├─ autolink-literal
   │    ├─ footnote
   │    ├─ strikethrough
   │    ├─ table
   │    └─ tasklist-item
   └─ MDX拡張（MDXパーサー時）
        ├─ mdx-expression
        └─ mdx-jsx

3. 追加のunifiedプラグイン
   ├─ front-matter（YAML/TOML）
   ├─ liquid（Liquidタグ）
   ├─ wiki-link（WikiLinkサポート）
   └─ html-to-jsx（MDX時のHTMLからJSX変換）

4. パース実行
   └─ unified().parse()

5. AST変換
   └─ mdast形式に正規化
```

### フローチャート

```mermaid
flowchart TD
    A[パース開始] --> B{パーサー種類}
    B -->|markdown/remark| C[parseMarkdown]
    B -->|mdx| D[parseMdx]
    C --> E[unifiedプロセッサ構築]
    D --> F[MDXプロセッサ構築]
    E --> G[GFM拡張追加]
    F --> G
    G --> H[Front Matterプラグイン追加]
    H --> I[Liquidプラグイン追加]
    I --> J{MDX?}
    J -->|Yes| K[html-to-jsxプラグイン追加]
    J -->|No| L[パース実行]
    K --> L
    L --> M[AST返却]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-01 | GFMサポート | GitHub Flavored Markdownの拡張構文をサポート | 常時 |
| BR-02 | Front Matter | YAML（---）またはTOML（+++）のFront Matterをサポート | ファイル先頭 |
| BR-03 | Liquidタグ | Jekyll互換のLiquidテンプレートタグをサポート | 常時 |
| BR-04 | WikiLink | [[リンク]]形式のWikiLinkをサポート | 常時 |
| BR-05 | MDX JSX | MDXではJSXコンポーネントをサポート | parser=mdx時 |
| BR-06 | MDX式 | MDXでは{expression}形式の式をサポート | parser=mdx時 |
| BR-07 | remarkエイリアス | remarkパーサーはmarkdownと同じ動作 | parser=remark時 |

### 計算ロジック

**GFM拡張の構成**：
```javascript
const gfmExtensions = [
  gfmAutolinkLiteral,
  gfmFootnote,
  gfmStrikethrough,
  gfmTable,
  gfmTaskListItem
];
```

## データベース操作仕様

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

本機能はデータベース操作を行わない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| SyntaxError | パースエラー | Markdown/MDXの構文エラー | コードを修正 |
| ConfigError | 設定エラー | パーサーが見つからない | パーサー名を確認 |

### リトライ仕様

リトライは行わない。エラー発生時は即座に例外をスロー。

## トランザクション仕様

トランザクション管理は不要（ステートレスな処理）。

## パフォーマンス要件

- 一般的なMarkdownファイル（500行程度）のパースは20ms以内
- MDXの埋め込みJSXも安定した処理時間

## セキュリティ考慮事項

- 入力コードの実行は行わない（静的解析のみ）
- MDXのJSXコンポーネントはパースのみで実行しない

## 備考

- remarkパーサーはmarkdownのレガシーエイリアス
- MDXはMarkdownの上位互換として設計されている
- micromarkは低レベルのトークナイザーとして使用される

---

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

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

### 推奨読解順序

#### Step 1: パーサープラグインの構成を理解する

Markdownパーサーがプラグインとしてどのように構成されているかを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | markdown.js | `src/plugins/markdown.js` | Markdownパーサープラグインのエクスポート |
| 1-2 | index.js | `src/language-markdown/index.js` | 言語モジュールの構成 |

#### Step 2: パーサー定義を理解する

パーサーの定義を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | parsers.js | `src/language-markdown/parsers.js` | パーサー定義 |

**主要処理フロー**:
- **5-14行目**: createParser関数
- **16-17行目**: markdownParser定義
- **19-23行目**: パーサーエクスポート（markdown, mdx, remark）

#### Step 3: パース処理の実装を理解する

パース処理の本体を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.js | `src/language-markdown/parse/index.js` | パースエクスポート |
| 3-2 | parse-markdown.js | `src/language-markdown/parse/parse-markdown.js` | Markdownパース実装 |
| 3-3 | parse-mdx.js | `src/language-markdown/parse/parse-mdx.js` | MDXパース実装 |

**読解のコツ**: unifiedエコシステムの理解が重要。unified().use(plugin)でプラグインをチェーンする。

#### Step 4: unifiedプラグインを理解する

カスタムunifiedプラグインの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | front-matter.js | `src/language-markdown/parse/unified-plugins/front-matter.js` | Front Matterプラグイン |
| 4-2 | liquid.js | `src/language-markdown/parse/unified-plugins/liquid.js` | Liquidプラグイン |
| 4-3 | wiki-link.js | `src/language-markdown/parse/unified-plugins/wiki-link.js` | WikiLinkプラグイン |

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

```
parsers.js (src/language-markdown/parsers.js)
    │
    ├─ markdownParser
    │      └─ createParser(parseMarkdown)
    │             │
    │             └─ parseMarkdown (src/language-markdown/parse/parse-markdown.js)
    │                    │
    │                    ├─ unified()
    │                    ├─ .use(remarkParse)
    │                    ├─ .use(gfmExtensions)
    │                    ├─ .use(frontMatterPlugin)
    │                    ├─ .use(liquidPlugin)
    │                    ├─ .use(wikiLinkPlugin)
    │                    └─ .parse()
    │
    └─ mdxParser
           └─ createParser(parseMdx)
                  │
                  └─ parseMdx (src/language-markdown/parse/parse-mdx.js)
                         │
                         ├─ unified()
                         ├─ .use(remarkParse)
                         ├─ .use(mdxExtensions)
                         ├─ .use(htmlToJsxPlugin)
                         └─ .parse()
```

### データフロー図

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

Markdown/MDX ───────────▶ unified()構築 ───────────────▶ プロセッサ
    │                         │
    │                         ├─ remarkParse
    │                         ├─ GFM拡張
    │                         ├─ MDX拡張（MDX時）
    │                         └─ カスタムプラグイン
    │                                   │
    │                                   ▼
    └─────────────────────▶ .parse() ──────────────────▶ mdast
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| markdown.js | `src/plugins/markdown.js` | ソース | Markdownパーサープラグイン |
| index.js | `src/language-markdown/index.js` | ソース | 言語モジュールエクスポート |
| parsers.js | `src/language-markdown/parsers.js` | ソース | パーサー定義 |
| parse-markdown.js | `src/language-markdown/parse/parse-markdown.js` | ソース | Markdownパース実装 |
| parse-mdx.js | `src/language-markdown/parse/parse-mdx.js` | ソース | MDXパース実装 |
| front-matter.js | `src/language-markdown/parse/unified-plugins/front-matter.js` | ソース | Front Matterプラグイン |
| liquid.js | `src/language-markdown/parse/unified-plugins/liquid.js` | ソース | Liquidプラグイン |
| wiki-link.js | `src/language-markdown/parse/unified-plugins/wiki-link.js` | ソース | WikiLinkプラグイン |
| html-to-jsx.js | `src/language-markdown/parse/unified-plugins/html-to-jsx.js` | ソース | HTML to JSXプラグイン |
| loc.js | `src/language-markdown/loc.js` | ソース | 位置情報関数 |
| pragma.js | `src/language-markdown/pragma.js` | ソース | プラグマ処理 |
