# Prettier 業務運用マニュアル

## 目次

**【基本操作】**
1. [システム概要](#1-システム概要)
2. [インストール・セットアップ手順](#2-インストールセットアップ手順)
3. [ホームページ（Webサイト）](#3-ホームページwebサイト)

**【業務フローに沿った機能】**
4. [【STEP1】Playgroundでコードを試す](#4-step1playgroundでコードを試す)
5. [【STEP2-3】設定ファイルの作成・カスタマイズ](#5-step2-3設定ファイルの作成カスタマイズ)
6. [【STEP3-4】CLIによるコードフォーマット](#6-step3-4cliによるコードフォーマット)
7. [【STEP4-5】エディタ統合・CI/CD連携](#7-step4-5エディタ統合cicd連携)

**【サポート機能】**
8. [ドキュメント機能](#8-ドキュメント機能)
9. [ヘルプ・サポート機能](#9-ヘルプサポート機能)
10. [ユーザーショーケース機能](#10-ユーザーショーケース機能)

**【運用ガイド】**
11. [日常業務の流れ](#11-日常業務の流れ)
12. [よくある質問と対処法](#12-よくある質問と対処法)
13. [トラブルシューティング](#13-トラブルシューティング)

---

## 1. システム概要

### 1.1 Prettierとは

Prettierは、コードを解析し最大行長を考慮した独自のルールで再フォーマットする、意見のある（opinionated）コードフォーマッターです。チーム開発においてコードスタイルの統一を自動化し、コードレビューの効率化と開発者の生産性向上に貢献します。

### 1.2 本システムで行う主要業務

本システムは、主に以下の業務を支援します：

| 業務カテゴリ | 具体的な業務内容 |
|------------|----------------|
| **コードフォーマット** | JavaScript、TypeScript、CSS、HTML、Markdown等のソースコードを自動整形 |
| **スタイル統一** | チーム全体で一貫したコードスタイルを適用・維持 |
| **開発ワークフロー統合** | エディタ保存時の自動フォーマット、CI/CDパイプラインでの整形チェック |
| **品質管理** | pre-commitフックでのコード品質確保、コードレビュー時の議論削減 |

### 1.3 業務フロー概要

本システムにおける業務は、以下の流れで進行します：

```
+---------------------------------------------------------------------+
|                        Prettier 業務フロー                            |
+---------------------------------------------------------------------+
|                                                                     |
|  【STEP 1】Playgroundで動作確認・オプション検証                        |
|      ↓                                                              |
|  【STEP 2】プロジェクトにPrettierをインストール                        |
|      ↓                                                              |
|  【STEP 3】設定ファイル（.prettierrc）を作成・カスタマイズ             |
|      ↓                                                              |
|  【STEP 4】CLIまたはエディタでコードをフォーマット                     |
|      ↓                                                              |
|  【STEP 5】CI/CD・pre-commitフックで自動化                           |
|                                                                     |
+---------------------------------------------------------------------+
```

**役割別の業務概要：**

| 役割 | 主な業務 |
|------|---------|
| **開発者** | Playgroundでの検証、エディタでのコードフォーマット、設定のカスタマイズ |
| **チームリーダー** | プロジェクト設定の策定、CI/CD統合の設定、コードレビュー |

### 1.4 主な機能

| 機能 | 説明 | 業務フローでの位置 |
|------|------|------------------|
| Playground | ブラウザ上でリアルタイムにコードフォーマットを試用 | STEP 1 |
| CLI（コマンドライン） | コマンドラインからファイルを一括フォーマット | STEP 4 |
| 設定ファイル | .prettierrc等でプロジェクト固有の設定を管理 | STEP 2-3 |
| エディタ統合 | VS Code等で保存時自動フォーマット | STEP 4 |
| pre-commitフック | コミット前の自動フォーマット | STEP 5 |
| CI/CD統合 | パイプラインでのフォーマットチェック | STEP 5 |

### 1.5 対応言語

Prettierは以下の言語をサポートしています：

| カテゴリ | 言語・形式 |
|---------|-----------|
| JavaScript系 | JavaScript、TypeScript、Flow、JSX、JSON |
| スタイルシート | CSS、SCSS、Less |
| マークアップ | HTML、Vue、Angular |
| その他 | GraphQL、Markdown、YAML |
| プラグイン拡張 | 追加言語はプラグインで対応可能 |

### 1.6 対応ブラウザ（Webサイト・Playground）

推奨ブラウザ：
- Google Chrome（最新版）
- Microsoft Edge（最新版）
- Safari（最新版）
- Firefox（最新版）

---

## 2. インストール・セットアップ手順

### 2.1 インストール方法

**必要条件：**
- Node.js 20以上

#### npm でインストール（推奨）

```bash
npm install --save-dev prettier
```

#### yarn でインストール

```bash
yarn add --dev prettier
```

#### pnpm でインストール

```bash
pnpm add --save-dev prettier
```

#### bun でインストール

```bash
bun add --dev prettier
```

### 2.2 設定ファイルの作成

1. プロジェクトルートに `.prettierrc` ファイルを作成します

```bash
echo '{}' > .prettierrc
```

2. 基本設定を記述します

```json
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}
```

### 2.3 無視ファイルの作成

フォーマット対象外のファイルを指定する `.prettierignore` を作成します：

```bash
echo "build/" > .prettierignore
echo "coverage/" >> .prettierignore
```

> **ヒント**: `.gitignore` に記載されているパターンは自動的に無視されます。

### 2.4 初回フォーマットの実行

プロジェクト全体をフォーマットします：

```bash
npx prettier . --write
```

---

## 3. ホームページ（Webサイト）

### 3.1 ホームページの概要

Prettierのホームページ（https://prettier.io/）は、以下の情報を提供します：

- Prettierの概要と価値提案
- 対応言語・エディタの一覧
- 導入企業のロゴ一覧
- ドキュメントへのリンク

### 3.2 主要なボタンと遷移先

| ボタン | 説明 | 遷移先 |
|--------|------|--------|
| 「Try It Online」 | Playgroundを開く | /playground/ |
| 「Install Prettier」 | インストール手順 | /docs/install |
| 「See others」 | 導入企業一覧 | /users |

### 3.3 ナビゲーション

**ヘッダーナビゲーション：**
- Playground
- Docs
- Blog

**フッターナビゲーション：**
- About（ドキュメント）
- Usage（使い方）
- User Showcase（導入事例）
- Blog（更新情報）

---

## 4. 【STEP1】Playgroundでコードを試す

> **業務フローでの位置**: Prettierを導入する前に、ブラウザ上でフォーマット結果を確認するステップです。

### 4.1 Playgroundにアクセスする

1. ブラウザで https://prettier.io/playground/ にアクセスします
2. または、ホームページの「Try It Online」ボタンをクリックします

### 4.2 コードを入力してフォーマットする

1. **入力パネル**（左側）にフォーマットしたいコードを入力します
2. 自動的に**出力パネル**（右側）にフォーマット結果が表示されます
3. リアルタイムでフォーマット結果を確認できます

### 4.3 パーサー（言語）を選択する

1. サイドバーの「Parser」セクションを開きます
2. ドロップダウンから対象言語のパーサーを選択します：
   - `babel` - JavaScript
   - `typescript` - TypeScript
   - `css` - CSS
   - `html` - HTML
   - `markdown` - Markdown
   - `yaml` - YAML

### 4.4 オプションを設定する

サイドバーで各種フォーマットオプションを設定できます：

| オプション | 説明 | デフォルト値 |
|-----------|------|-------------|
| printWidth | 最大行幅 | 80 |
| tabWidth | タブ幅 | 2 |
| useTabs | タブを使用 | false |
| semi | セミコロン出力 | true |
| singleQuote | シングルクォート使用 | false |
| trailingComma | 末尾カンマ | all |

### 4.5 設定を共有する

1. 「Copy link」ボタンをクリックします
2. URLがクリップボードにコピーされます
3. このURLを共有すると、同じコードと設定を他の人と共有できます

### 4.6 設定JSONをコピーする

1. 「Copy config JSON」ボタンをクリックします
2. `.prettierrc` 用のJSON設定がクリップボードにコピーされます
3. プロジェクトの設定ファイルにそのまま貼り付けて使用できます

### 4.7 GitHub Issueを作成する

バグを発見した場合：

1. 問題のあるコードを入力パネルに入力します
2. 「Report issue」ボタンをクリックします
3. GitHub Issue作成ページが開きます（コードと設定が自動入力されます）

---

## 5. 【STEP2-3】設定ファイルの作成・カスタマイズ

> **業務フローでの位置**: プロジェクトにPrettierをインストール後、チームで共有する設定を作成するステップです。

### 5.1 設定ファイルの種類

Prettierは以下の設定ファイル形式をサポートしています（優先順位順）：

| ファイル名 | 形式 |
|-----------|------|
| `.prettierrc` | JSON または YAML |
| `.prettierrc.json` | JSON |
| `.prettierrc.yaml` | YAML |
| `.prettierrc.js` | JavaScript (CommonJS) |
| `prettier.config.js` | JavaScript (ESM) |
| `.prettierrc.toml` | TOML |
| `package.json` の "prettier" キー | JSON |

### 5.2 基本設定の作成

#### JSON形式（推奨）

`.prettierrc` または `.prettierrc.json`:

```json
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}
```

#### JavaScript形式（ESM）

`prettier.config.js`:

```javascript
export default {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: "all",
};
```

#### YAML形式

`.prettierrc.yaml`:

```yaml
printWidth: 80
tabWidth: 2
useTabs: false
semi: true
singleQuote: true
trailingComma: "all"
```

### 5.3 主要なオプション一覧

| オプション | 説明 | デフォルト | CLI |
|-----------|------|-----------|-----|
| printWidth | 最大行幅 | 80 | --print-width |
| tabWidth | タブ幅 | 2 | --tab-width |
| useTabs | タブ使用 | false | --use-tabs |
| semi | セミコロン出力 | true | --no-semi |
| singleQuote | シングルクォート | false | --single-quote |
| trailingComma | 末尾カンマ | "all" | --trailing-comma |
| bracketSpacing | ブラケット内スペース | true | --no-bracket-spacing |
| arrowParens | アロー関数括弧 | "always" | --arrow-parens |
| endOfLine | 改行コード | "lf" | --end-of-line |

### 5.4 ファイル別オーバーライド設定

特定のファイルパターンに異なる設定を適用できます：

```json
{
  "semi": true,
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "tabWidth": 4
      }
    },
    {
      "files": ["*.md", "*.markdown"],
      "options": {
        "proseWrap": "always"
      }
    }
  ]
}
```

### 5.5 EditorConfig統合

`.editorconfig` ファイルがある場合、以下のオプションは自動的に読み込まれます：

- `end_of_line` → endOfLine
- `indent_style` → useTabs
- `indent_size` / `tab_width` → tabWidth
- `max_line_length` → printWidth

---

## 6. 【STEP3-4】CLIによるコードフォーマット

> **業務フローでの位置**: 設定完了後、実際にコードをフォーマットするステップです。

### 6.1 基本的なフォーマットコマンド

#### ファイルを上書きフォーマット

```bash
npx prettier . --write
```

または特定のファイル：

```bash
npx prettier src/index.js --write
```

#### フォーマット結果を確認（上書きしない）

```bash
npx prettier src/index.js
```

### 6.2 フォーマットチェック

CI/CDやコードレビュー前にフォーマット状態をチェックします：

```bash
npx prettier . --check
```

**終了コード：**
- `0`: すべてのファイルがフォーマット済み
- `1`: フォーマットが必要なファイルあり
- `2`: エラー発生

### 6.3 ファイルパターンの指定

```bash
# 特定の拡張子
npx prettier "**/*.{js,jsx,ts,tsx}" --write

# 特定のディレクトリ
npx prettier "src/**/*" --write

# 複数パターン
npx prettier "src/**/*.js" "test/**/*.js" --write
```

> **注意**: ファイルパターンはクォートで囲んでください（クロスプラットフォーム対応）。

### 6.4 標準入力からのフォーマット

```bash
echo "const x={a:1,b:2}" | npx prettier --stdin-filepath example.js
```

### 6.5 キャッシュ機能

大規模プロジェクトでの高速化：

```bash
# キャッシュを有効にしてフォーマット
npx prettier . --write --cache

# キャッシュをクリア
npx prettier . --write --cache --cache-strategy content
```

### 6.6 よく使うCLIオプション

| オプション | 説明 |
|-----------|------|
| `--write` | ファイルを上書き |
| `--check` | フォーマット状態をチェック |
| `--list-different` | 未フォーマットファイル一覧 |
| `--ignore-path` | 無視ファイルのパス指定 |
| `--no-config` | 設定ファイルを無視 |
| `--config` | 設定ファイルを指定 |
| `--cache` | キャッシュを有効化 |
| `--help` | ヘルプ表示 |
| `--version` | バージョン表示 |

---

## 7. 【STEP4-5】エディタ統合・CI/CD連携

> **業務フローでの位置**: 日常の開発ワークフローに組み込み、自動化するステップです。

### 7.1 VS Code統合

1. VS Code拡張機能「Prettier - Code formatter」をインストール
2. 設定で「Format On Save」を有効化：

```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```

### 7.2 その他のエディタ

| エディタ | 統合方法 |
|---------|---------|
| WebStorm | 設定 > Languages & Frameworks > Prettier |
| Vim | prettier.vim プラグイン |
| Emacs | prettier-mode |
| Sublime Text | JsPrettier パッケージ |

### 7.3 pre-commitフック（husky + lint-staged）

#### セットアップ

```bash
npm install --save-dev husky lint-staged
npx husky init
```

#### package.json に追加

```json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,css,md,json}": "prettier --write"
  }
}
```

#### フックを設定

```bash
echo "npx lint-staged" > .husky/pre-commit
```

### 7.4 CI/CDでのチェック

#### GitHub Actions

`.github/workflows/prettier.yml`:

```yaml
name: Prettier Check
on: [push, pull_request]
jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npx prettier --check .
```

### 7.5 ESLintとの統合

ESLintのフォーマットルールとの競合を避けるため、`eslint-config-prettier` を使用：

```bash
npm install --save-dev eslint-config-prettier
```

`eslint.config.js`:

```javascript
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  // ...他の設定
  eslintConfigPrettier,
];
```

---

## 8. ドキュメント機能

### 8.1 ドキュメントにアクセスする

1. ホームページのナビゲーションバーから「Docs」をクリックします
2. または直接 https://prettier.io/docs にアクセスします

### 8.2 ドキュメント構成

| カテゴリ | 内容 |
|---------|------|
| About | Prettierの概要、設計思想、他ツールとの比較 |
| Usage | インストール、CLI、API、ブラウザ使用 |
| Configuring Prettier | オプション、設定ファイル、共有設定 |
| Editors | エディタ統合の設定方法 |
| Misc | 技術詳細、関連プロジェクト |

### 8.3 サイドバーナビゲーション

ドキュメントページでは、左側のサイドバーで関連ページへ移動できます。

---

## 9. ヘルプ・サポート機能

### 9.1 ヘルプページにアクセスする

1. https://prettier.io/help にアクセスします
2. 以下のサポートリソースへのリンクが表示されます：

| カテゴリ | 内容 |
|---------|------|
| Browse Docs | ドキュメントへのリンク |
| Join the community | コミュニティ情報 |
| Stay up to date | 更新情報 |

### 9.2 コマンドラインヘルプ

```bash
# 全オプションの一覧
npx prettier --help

# 特定オプションの詳細
npx prettier --help width
```

---

## 10. ユーザーショーケース機能

### 10.1 ユーザー一覧ページにアクセスする

1. https://prettier.io/users にアクセスします
2. または、ホームページの「See others」ボタンをクリックします

### 10.2 掲載内容

- Prettierを採用している企業・プロジェクトのロゴ一覧
- State of JS調査結果へのリンク
- npm依存パッケージ数の統計情報

---

## 11. 日常業務の流れ

本セクションでは、業務フローに沿った日常業務の流れを説明します。

```
業務フロー概要（再掲）
--------------------------------------------------------------
【STEP 1】Playgroundで動作確認・オプション検証 → 4章参照
    ↓
【STEP 2】プロジェクトにPrettierをインストール → 2章参照
    ↓
【STEP 3】設定ファイル（.prettierrc）を作成 → 5章参照
    ↓
【STEP 4】CLIまたはエディタでコードをフォーマット → 6章参照
    ↓
【STEP 5】CI/CD・pre-commitフックで自動化 → 7章参照
--------------------------------------------------------------
```

### 11.1 【開発者】STEP1: Playgroundで検証

新しいプロジェクトや設定変更時に、Playgroundで動作を確認します。

1. https://prettier.io/playground/ にアクセス
2. サンプルコードを入力
3. オプションを調整してフォーマット結果を確認
4. 「Copy config JSON」で設定をコピー

### 11.2 【開発者】STEP2-3: プロジェクトセットアップ

新規プロジェクトでPrettierを導入します。

1. `npm install --save-dev prettier` でインストール
2. `.prettierrc` に設定を貼り付け
3. `.prettierignore` で除外ファイルを設定

### 11.3 【開発者】STEP4: 日常のコードフォーマット

開発中のコードをフォーマットします。

**エディタ使用時：**
- ファイル保存時に自動フォーマット（設定済みの場合）
- または手動でフォーマットコマンドを実行

**CLI使用時：**
```bash
npx prettier "src/**/*" --write
```

### 11.4 【チームリーダー】STEP5: 自動化の設定

CI/CDパイプラインでフォーマットチェックを設定します。

1. GitHub Actionsワークフローを作成
2. `npx prettier --check .` でチェック
3. pre-commitフック（husky + lint-staged）を設定

---

## 12. よくある質問と対処法

### 12.1 インストールに関するQ&A

**Q: npx prettier コマンドが見つかりません**

A: 以下を確認してください：
- Node.js 20以上がインストールされていること
- `npm install --save-dev prettier` を実行済みであること
- プロジェクトルートでコマンドを実行していること

**Q: グローバルインストールは必要ですか？**

A: いいえ、推奨しません。プロジェクトごとにローカルインストールし、`npx` 経由で実行してください。

### 12.2 設定に関するQ&A

**Q: 設定ファイルが読み込まれません**

A: 以下を確認してください：
- 設定ファイルがプロジェクトルートにあること
- ファイル名が正しいこと（`.prettierrc`、`prettier.config.js` など）
- JSON形式の場合、構文エラーがないこと

**Q: 特定のファイルだけ違う設定にしたい**

A: `.prettierrc` の `overrides` オプションを使用します：
```json
{
  "overrides": [
    { "files": "*.json", "options": { "tabWidth": 4 } }
  ]
}
```

### 12.3 フォーマットに関するQ&A

**Q: 特定のコードをフォーマットしたくない**

A: コメントで無効化できます：
```javascript
// prettier-ignore
const uglyCode = {a:1,b:2};
```

**Q: フォーマット結果が期待と違う**

A: Playgroundで確認し、オプションを調整してください。また、Prettierは「意見のある」フォーマッターのため、すべてのスタイルに対応していない場合があります。

---

## 13. トラブルシューティング

### 13.1 エラーメッセージと対処法

| エラーメッセージ | 原因 | 対処法 |
|----------------|------|--------|
| `No parser could be inferred` | パーサーを特定できない | `--parser` オプションを指定するか、ファイル拡張子を確認 |
| `SyntaxError: Unexpected token` | 入力コードの構文エラー | 入力コードの構文を修正 |
| `Configuration file ... has an error` | 設定ファイルの構文エラー | 設定ファイルのJSON/YAML構文を確認 |
| `File ... was not formatted` | フォーマットが実行されなかった | `.prettierignore` または `--ignore-path` を確認 |

### 13.2 よくあるトラブルと解決方法

**トラブル: ESLintと競合する**

解決方法:
1. `eslint-config-prettier` をインストール
2. ESLint設定の最後に追加

**トラブル: 保存時に自動フォーマットされない**

解決方法:
1. エディタ拡張機能がインストールされているか確認
2. 「Format On Save」設定が有効か確認
3. デフォルトフォーマッターがPrettierに設定されているか確認

**トラブル: CI/CDでフォーマットチェックが失敗する**

解決方法:
1. ローカルで `npx prettier --check .` を実行して確認
2. `.prettierignore` の設定を確認
3. `npx prettier . --write` でフォーマットしてからコミット

### 13.3 サポートへの連絡方法

- **GitHub Issues**: https://github.com/prettier/prettier/issues
- **ドキュメント**: https://prettier.io/docs
- **Stack Overflow**: `prettier` タグを使用

---

## 改訂履歴

| 版数 | 改訂日 | 改訂内容 |
|-----|--------|---------|
| 1.0 | 2026-03-01 | 初版作成 |

---

*本マニュアルは、Prettierのエンドユーザー向け業務運用マニュアルです。*
*システムの更新により、画面や操作方法が変更される場合があります。*
