# 画面設計書 18-Usage-CI

## 概要

本ドキュメントは、Prettierドキュメントサイトの「Usage - CI」画面の設計書です。この画面はCI/CD環境でPrettierを実行するための設定方法を説明するドキュメントページです。

### 本画面の処理概要

この画面はGitHub ActionsなどのCI環境でPrettierを自動実行するための具体的な設定方法を説明する静的ドキュメントページです。autofix.ciを使用したPull Request時の自動フォーマット適用方法を解説しています。

**業務上の目的・背景**：チーム開発において、コードスタイルの一貫性をCI/CDパイプラインで自動的に担保することは重要です。この画面は、開発者やDevOpsエンジニアがGitHub ActionsでPrettierを設定し、コードスタイルチェックやオートフィックスを自動化するための具体的な手順を提供します。

**画面へのアクセス方法**：ユーザーはメインサイトのナビゲーションバーから「Docs」セクションに入り、サイドバーの「Usage」カテゴリ内の「CI」リンクをクリックしてアクセスします。URLは `/docs/ci` です。

**主要な操作・処理内容**：
1. autofix.ci GitHub Appのインストール理解
2. GitHub Actionsワークフローファイルの作成方法の理解
3. `prettier . --write`コマンドの実行設定の理解
4. autofix-ci/actionによる自動コミット設定の理解

**画面遷移**：この画面からはautofix.ciの外部サイトへのリンクが設定されています。

**権限による表示制御**：なし。全ユーザーが同一のコンテンツを閲覧可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 3 | フォーマットチェック（check） | 主機能 | CI環境でのフォーマットチェック実行方法を説明 |
| 18 | フォーマットチェック（--check） | 補助機能 | CI環境での--checkオプション使用方法を説明 |
| 19 | 差分表示（--list-different） | 補助機能 | CI環境での--list-differentオプション使用方法を説明 |

## 画面種別

ドキュメント / 参照

## URL/ルーティング

- **URL**: `/docs/ci`
- **ソースファイル**: `docs/ci.md`
- **生成方式**: Docusaurus docs機能によるMarkdownからの静的HTML生成

## 入出力項目

本画面は静的ドキュメントページのため、ユーザー入力フィールドはありません。

## 表示項目

| セクション | 表示内容 | 説明 |
|-----------|---------|------|
| GitHub Actions | 自動フォーマット設定 | autofix.ciを使用した設定手順 |
| ワークフローファイル | .github/workflows/prettier.yml | YAMLファイルの記載内容 |
| 前提条件 | autofix.ci App、固定バージョン | セットアップの前提条件 |

## イベント仕様

### 1-外部リンククリック

ドキュメント内の外部リンクをクリックすると、対応する外部サイトに遷移します。

- autofix.ci GitHub App → GitHub Apps: autofix-ci
- autofix.ci website → https://autofix.ci/

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

本画面は静的ドキュメントページのため、データベース更新は発生しません。

## メッセージ仕様

本画面は静的ドキュメントページのため、動的メッセージはありません。

## 例外処理

| 状態 | 説明 |
|------|------|
| ページ未発見（404） | URLが誤っている場合、Docusaurus標準の404ページを表示 |
| 外部リンク切れ | 外部サイトのURLが変更された場合、ユーザーに404表示 |

## 備考

- Prettierの固定バージョン（pinned version）のインストールが推奨されている
- ワークフローは`pull_request`と`push`イベントでトリガー
- `permissions: {}`でセキュリティ設定
- autofix-ci/actionのcommit-messageオプションでコミットメッセージをカスタマイズ可能
- 本ドキュメントは比較的短く、autofix.ciの詳細は外部サイトを参照する構成

---

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

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

### 推奨読解順序

#### Step 1: ドキュメントコンテンツを理解する

本画面のコンテンツはMarkdownファイルで管理されています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ci.md | `docs/ci.md` | CI設定の全体像を理解 |

**読解のコツ**: ワークフローファイルのYAML構造を理解することが重要です。

#### Step 2: 関連するCLIオプションを理解する

CI環境で使用される`--write`と`--check`オプションを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | cli.md | `docs/cli.md` | --writeと--checkオプションの仕様 |

**主要処理フロー**:
1. `prettier . --write` - ファイルをフォーマットして上書き
2. `prettier . --check` - フォーマット差分をチェック（CI検証用）

#### Step 3: CLIの実装を理解する

CLIでの--writeと--check処理を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.js | `src/cli/index.js` | --checkと--list-differentの排他チェック |
| 3-2 | format.js | `src/cli/format.js` | formatFiles関数での処理分岐 |

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

```
GitHub Actions Workflow
    │
    ├─ actions/checkout@v4
    │
    ├─ actions/setup-node@v4
    │
    ├─ yarn install
    │
    ├─ yarn prettier . --write
    │      │
    │      └─ CLI: formatFiles()
    │             ├─ format() - 各ファイルをフォーマット
    │             └─ write() - ファイルを上書き
    │
    └─ autofix-ci/action@v1
           └─ git commit & push (if changes)
```

### データフロー図

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

Pull Request / Push
     │
     ▼
GitHub Actions Workflow
     │
     ├─ checkout ─────────▶ ソースコード取得
     │
     ├─ setup-node ───────▶ Node.js環境構築
     │
     ├─ yarn ─────────────▶ 依存関係インストール
     │
     ├─ prettier --write ──▶ ファイルフォーマット
     │                             │
     │                             ▼
     └─ autofix-ci/action ──▶ 変更あり → コミット作成
                                  │
                                  ▼
                             Pull Request更新
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ci.md | `docs/ci.md` | ドキュメント | CIガイド |
| cli.md | `docs/cli.md` | ドキュメント | CLIオプションドキュメント（関連参照） |
| index.js | `src/cli/index.js` | ソース | CLIエントリーポイント |
| format.js | `src/cli/format.js` | ソース | フォーマット処理 |
| precommit.md | `docs/precommit.md` | ドキュメント | pre-commitガイド（関連参照） |
