# 機能設計書 76-HTML/CSS/Webサポート

## 概要

本ドキュメントは、Doom EmacsにおけるHTML、CSS、およびWeb開発全般のサポート機能について記述する。web-modeによるテンプレートエンジン対応、emmet-modeによる高速マークアップ入力、各種CSSプリプロセッササポートなど、モダンなWeb開発環境を提供する。

### 本機能の処理概要

**業務上の目的・背景**：Web開発ではHTML、CSS、JavaScript、各種テンプレートエンジン、CSSプリプロセッサなど多様な技術を組み合わせて使用する。本モジュールはこれらの技術を統合的にサポートし、フロントエンド開発者の生産性向上を目的としている。

**機能の利用シーン**：
- HTMLテンプレートの編集（Jinja2、EJS、ERB、Blade等）
- CSSおよびプリプロセッサ（SCSS、SASS、LESS、Stylus）の編集
- Emmet記法による高速マークアップ入力
- フレームワーク固有設定（Jekyll、Django、WordPress、Angular、React）
- Tree-sitterによる高度な構文解析

**主要な処理内容**：
1. web-modeによるHTML/テンプレート編集
2. emmet-modeによるEmmet展開
3. css-mode/scss-mode/sass-mode/stylus-modeによるスタイルシート編集
4. rainbow-modeによるカラープレビュー
5. プロジェクトモードによるフレームワーク自動検出
6. LSPサポート（HTML、CSS）
7. Tree-sitterサポート（html-ts-mode、css-ts-mode）

**関連システム・外部連携**：
- html-language-server: HTML Language Server
- css-language-server: CSS Language Server
- Emmet: マークアップ展開エンジン

**権限による制御**：特になし。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | HTMLバッファ | 主画面 | HTML/テンプレートの編集 |
| - | CSSバッファ | 主画面 | スタイルシートの編集 |

## 機能種別

言語サポート / Web開発環境

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| +lsp | フラグ | No | LSPサポートを有効化 | doom!ブロックで指定 |
| +tree-sitter | フラグ | No | Tree-sitterサポートを有効化 | doom!ブロックで指定 |

### 入力データソース

- HTMLファイル（*.html, *.phtml）
- テンプレートファイル（*.erb, *.ejs, *.twig, *.jinja2, *.mustache, *.hbs, *.blade.php, *.svelte, *.vue）
- CSSファイル（*.css, *.scss, *.sass, *.less, *.styl）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| Emmet展開結果 | テキスト | Emmet記法の展開 |
| SCSSビルド結果 | ファイル | +css/scss-build による CSS出力 |
| SASSビルド結果 | ファイル | +css/sass-build による CSS出力 |

### 出力先

- エディタバッファ: Emmet展開結果
- CSSファイル: ビルド出力

## 処理フロー

### 処理シーケンス

```
1. Web関連ファイルを開く
   └─ 拡張子に応じたモード起動（web-mode, css-mode等）
2. emmet-mode有効化
   └─ フック対象モードで自動有効化
3. フレームワーク検出
   └─ def-project-mode! による自動検出
4. LSPモード有効時
   └─ lsp! フック実行
```

### フローチャート

```mermaid
flowchart TD
    A[Webファイルを開く] --> B{ファイル種別}
    B -->|HTML/テンプレート| C[web-mode起動]
    B -->|CSS| D[css-mode起動]
    B -->|SCSS| E[scss-mode起動]
    B -->|SASS| F[sass-mode起動]
    C --> G[emmet-mode有効化]
    D --> G
    E --> G
    F --> G
    G --> H{フレームワーク検出}
    H -->|Jekyll| I[+web-jekyll-mode]
    H -->|Django| J[+web-django-mode]
    H -->|WordPress| K[+web-wordpress-mode]
    H -->|Angular| L[+web-angularjs-mode]
    H -->|React| M[+web-react-mode]
    H -->|なし| N[標準モード]
    I --> O{+lsp?}
    J --> O
    K --> O
    L --> O
    M --> O
    N --> O
    O -->|Yes| P[LSPサーバー接続]
    O -->|No| Q[開発作業]
    P --> Q
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-01 | Jekyllプロジェクト検出 | _config.yml または _config.toml と _layouts/ または _posts/ の存在 | プロジェクトオープン時 |
| BR-02 | Djangoプロジェクト検出 | manage.py の存在 | プロジェクトオープン時 |
| BR-03 | WordPressプロジェクト検出 | wp-config.php または wp-config-sample.php の存在 | プロジェクトオープン時 |
| BR-04 | Angularプロジェクト検出 | angular または @angular/core のnpm依存 | +javascript-npm-mode有効時 |
| BR-05 | Reactプロジェクト検出 | react のnpm依存 | +javascript-npm-mode有効時 |
| BR-06 | Emmet展開タブ優先度 | Emmet展開 < YASnippet展開 < 通常インデント | TABキー押下時 |
| BR-07 | JSコメント形式 | web-mode内のJavaScriptは // コメントを使用 | JavaScript部分編集時 |

### 計算ロジック

**CSSコメント継続**:
- `+web-continue-block-comments` 変数でブロックコメント継続を制御
- 改行時に `*` を自動挿入

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

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

データベース操作なし

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | なし | - | - |

### リトライ仕様

リトライ機能なし

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

トランザクション管理なし

## パフォーマンス要件

特になし

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

- 外部フォントや画像のリモートURLは信頼できるソースのみ使用推奨

## 備考

- web-modeは多数のテンプレートエンジンに対応（Jinja2、ERB、EJS、Blade、Twig、Mustache、Handlebar、Svelte、Vue等）
- find-sibling-rules でCSS/SCSS/SASS/LESS/Stylus間のファイル切り替えをサポート

---

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

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

### 推奨読解順序

#### Step 1: モジュール構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | config.el | `modules/lang/web/config.el` | モジュールの構造（+html.el, +css.el のロード） |

**読解のコツ**: config.elは+html.elと+css.elをロードする薄いラッパー。

#### Step 2: HTML/テンプレートサポートを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | +html.el | `modules/lang/web/+html.el` | web-mode設定、smartparens統合 |

**主要処理フロー**:
1. **3-24行目**: web-mode のファイル拡張子設定
2. **26行目**: docsets設定
3. **40-64行目**: smartparens統合、auto-pairs処理
4. **88-152行目**: キーバインド設定
5. **164-169行目**: LSPフック設定

#### Step 3: CSSサポートを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | +css.el | `modules/lang/web/+css.el` | CSS/SCSS/SASS/LESS/Stylus設定 |

**主要処理フロー**:
- **3-9行目**: `+web-continue-block-comments` 変数
- **11-12行目**: find-sibling-rules設定
- **18-24行目**: css-mode-hook設定
- **31-32行目**: rainbow-mode フック
- **69-75行目**: LSPフック設定

#### Step 4: プロジェクトモードを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | config.el | `modules/lang/web/config.el` | def-project-mode!によるフレームワーク検出 |

**主要処理フロー**:
- **24-30行目**: `+web-jekyll-mode`
- **32-37行目**: `+web-django-mode`
- **39-41行目**: `+web-wordpress-mode`
- **44-57行目**: `+web-angularjs-mode`, `+web-react-mode`, `+web-phaser-mode`

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

```
lang/web モジュール
    │
    ├─ config.el
    │      ├─ load! "+html"
    │      ├─ load! "+css"
    │      ├─ emmet-mode設定
    │      └─ def-project-mode!
    │             ├─ +web-jekyll-mode
    │             ├─ +web-django-mode
    │             ├─ +web-wordpress-mode
    │             ├─ +web-angularjs-mode
    │             ├─ +web-react-mode
    │             └─ +web-phaser-mode
    │
    ├─ +html.el
    │      ├─ web-mode
    │      ├─ pug-mode
    │      ├─ slim-mode
    │      ├─ html-ts-mode (+tree-sitter)
    │      └─ mhtml-ts-mode (+tree-sitter)
    │
    └─ +css.el
           ├─ css-mode
           ├─ scss-mode
           ├─ sass-mode
           ├─ stylus-mode
           ├─ less-css-mode
           ├─ rainbow-mode
           └─ css-ts-mode (+tree-sitter)
```

### データフロー図

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

HTMLファイル ──────────▶ web-mode ─────────────────▶ シンタックスハイライト
        │                   │
        │                   ▼
Emmet記法 ─────────────▶ emmet-expand-line ────────▶ 展開されたマークアップ
        │
CSSファイル ───────────▶ css-mode ─────────────────▶ シンタックスハイライト
        │                   │
        │                   ▼
カラー値 ──────────────▶ rainbow-mode ─────────────▶ 背景色プレビュー
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| config.el | `modules/lang/web/config.el` | ソース | モジュール設定、emmet、プロジェクトモード |
| +html.el | `modules/lang/web/+html.el` | ソース | HTML/テンプレート設定 |
| +css.el | `modules/lang/web/+css.el` | ソース | CSS/プリプロセッサ設定 |
| autoload/css.el | `modules/lang/web/autoload/css.el` | ソース | CSSユーティリティ関数 |
| autoload/html.el | `modules/lang/web/autoload/html.el` | ソース | HTMLユーティリティ関数 |
| packages.el | `modules/lang/web/packages.el` | ソース | 依存パッケージ定義 |
