この用語をシェア
Prettierとは
Prettier（プリティア）は、自動コードフォーマッターです。JavaScript、TypeScript、CSS、HTML、JSON、Markdown、Yamlなど、多くのプログラミング言語とファイル形式に対応し、事前に定義されたルールに基づいてコードを自動的に整形します。「Opinionated（独断的）」なツールとして設計されており、フォーマットに関する議論を排除し、開発者が本質的な作業に集中できる環境を提供します。
2017年にJames Long（当時Facebook）によって開発され、「設定よりも規約」の哲学に基づいて、最小限の設定で美しく一貫したコードフォーマットを実現します。現在ではモダン開発環境の標準ツールとして広く採用されています。
Prettierの主な特徴
1. ゼロ設定・最小設定
複雑な設定ファイルを書く必要がなく、インストールするだけで即座に使用開始できます。重要な設定項目のみが提供され、フォーマットスタイルに関する無駄な議論を排除します。
2. 多言語サポート
JavaScript、TypeScript、JSX、CSS、SCSS、Less、HTML、JSON、Markdown、YAML、GraphQLなど、20以上の言語とファイル形式に対応し、一つのツールで包括的なフォーマットが可能です。
3. エディタとビルドツール統合
VSCode、Sublime Text、Atom、Vim、WebStorm、Webpack、Rollup、Gulpなど、主要なエディタとビルドツールとの統合が標準でサポートされています。
4. 高速で信頼性の高い処理
AST（抽象構文木）ベースの解析により、構文を壊すことなく安全にフォーマットを実行し、大規模なコードベースでも高速に動作します。
利用場面
👥 チーム開発での統一
複数人での開発でコードスタイルを完全統一し、コードレビューでフォーマットに関する指摘を排除し、本質的な議論に集中できます。
⚡ 開発効率の向上
手動でのインデント調整や改行位置の調整が不要になり、ファイル保存時の自動フォーマットで開発スピードが向上します。
🔄 レガシーコードの整備
既存プロジェクトのコードスタイルをまとめて統一し、保守性とコードの可読性を大幅に改善できます。
基本的な使い方
インストール
npmまたはyarnでグローバルまたはローカルにインストール：
npm install --save-dev prettier
# グローバルインストール
npm install -g prettier
基本的なコマンド
npx prettier your-file.js
# ファイルを直接書き換え
npx prettier --write your-file.js
# ディレクトリ全体をフォーマット
npx prettier --write "src/**/*.{js,jsx,ts,tsx,css,md}"
# チェックのみ（CI/CD用）
npx prettier --check "src/**/*.js"
設定ファイル（.prettierrc）
必要に応じて最小限の設定をカスタマイズ：
"semi": false,
"singleQuote": true,
"printWidth": 100,
"tabWidth": 2,
"trailingComma": "es5"
}
VSCodeでの自動実行設定
settings.jsonで保存時の自動フォーマットを有効化：
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
関連技術との関係
- ESLint：eslint-config-prettierでルール競合を解決し、連携利用
- Git hooks：pre-commitフックで自動フォーマット実行
- CI/CD：GitHub ActionsなどでPrettierチェックを自動化
- VSCode：公式拡張でリアルタイムフォーマット機能
- Webpack/Vite：ビルドプロセスに統合して自動実行
学習のポイント
🎯 効率的な学習手順
- 基本コマンドの習得：CLIでの基本的なフォーマット実行をマスター
- エディタ統合：VSCodeなどで保存時自動フォーマット環境を構築
- 設定のカスタマイズ：プロジェクトに適した最小限の設定ファイル作成
- チーム導入：ESLintとの組み合わせとCI/CD統合で完全自動化
Prettierは、「フォーマットのことを考えない」ことを可能にする素晴らしいツールです。一度導入すると、コードの見た目に関する議論や手作業での調整から完全に解放され、より重要な設計やロジックに集中できるようになります。現代の開発チームにとって必須のツールといえるでしょう。
メリット・デメリット
メリット
- コードスタイルに関するチーム内の議論（インデント幅、クォートの種類など）がなくなる
- 保存時の自動フォーマットにより、手作業での整形時間がゼロになる
- AST解析ベースのため、構文を壊さず安全に整形できる
- 主要エディタ・CI/CDとの統合が容易で導入コストが低い
デメリット
- 設定項目が意図的に少なく、細かいスタイルの好みを反映しづらい
- 既存の大規模プロジェクトに後から導入すると、差分が大量に発生しレビューが困難になる
- ESLintのスタイル系ルールと重複・競合する場合、設定調整が必要
- フォーマットのみでコード品質（バグやアンチパターン）はチェックできない
類似技術との違い
| 項目 | Prettier | ESLint | Biome |
|---|---|---|---|
| 主な役割 | コードフォーマット（見た目の整形） | コード品質チェック（Lint） | フォーマット＋Lintの統合ツール |
| 実装言語 | JavaScript | JavaScript | Rust（高速） |
| 設定の自由度 | 意図的に低い（Opinionated） | 高い（ルールを細かく設定可能） | 中程度 |
| 併用関係 | ESLintと組み合わせるのが一般的 | Prettierと役割分担して併用 | 単体でPrettier+ESLintを代替可能 |
実務での活用シーンと導入時の注意点
Prettierはチーム開発において、コードレビューの論点をロジックや設計に集中させるために導入されることが多いツールです。個人開発でも、保存時に自動整形される快適さから広く使われています。
- 既存プロジェクトへの導入：一括フォーマット実行前にコミットを分け、「フォーマットのみのコミット」として履歴を汚さないようにする
- ESLintとの競合解消：
eslint-config-prettierでスタイル系ルールを無効化し、責務を分離する - CI/CDでの強制：
--checkオプションでフォーマット漏れを検知し、マージ前に必須チェックとする - チーム合意：デフォルト設定からの変更は最小限にとどめ、議論の蒸し返しを防ぐ
関連用語
- ESLint - コード品質チェック
- TypeScript
- JavaScript
- Babel - JavaScriptトランスパイラ
外部リンク
よくある質問（FAQ）
Q. Prettierとは？
自己主張型のコードフォーマッターです。多数の言語で統一されたスタイルを自動適用します。
Q. 2025年の最新動向は？
Biome（高速代替）の台頭、ESLintとの設定競合解消が注目です。
Q. PrettierとESLintは両方必要ですか？
役割が異なるため併用が一般的です。Prettierは見た目の整形、ESLintはバグの温床になりうるコードパターンの検出を担当します。eslint-config-prettierで競合ルールを無効化して使い分けます。
Q. 既存プロジェクトに後から導入しても大丈夫ですか？
可能ですが、一括フォーマットで大量の差分が発生するため、フォーマットのみのコミットを分離し、Git blameへの影響を抑える運用が推奨されます。