Prettier

概要（サマリー）

Prettier（プリティアー）とは、プログラムの見た目（インデントや改行、括弧の書き方など）を自動で綺麗に整えてくれる「コードフォーマッター（自動整形ツール）」である。
たとえば、同じ処理を書く場合でも、人によってスペースの開け方や改行の位置がバラバラになりがちである。
たとえるなら、Prettierは原稿の下書きを提出すると、文字の間隔や段落のズレを綺麗に揃えてくれる「校正係（レイアウトデザイナー）」である。
エディタ（VS Codeなど）でファイルを保存した瞬間に、乱れたコードを一定のルールで整えられるため、コードの読みやすさが上がり、複数人で開発を行う際にも記述スタイルの揺れを減らせる。

詳細解説

Prettierの役割と「opinionated（こだわりが強い）」な設計

Prettierは、単にインデントを整えるだけでなく、コードの「見た目（コードスタイル）」に関するほぼすべてのルールを自動的に適用する。
特徴的な設計思想として、Prettierは 「opinionated（意見が強い、こだわりが強い）」 と表現される。これは、「設定項目をあえて少なくし、Prettierが決めた見た目に寄せる」というアプローチである。これにより、チーム内で「スペースは2マスか4マスか」「末尾にセミコロンは必要か」といった見た目の議論を減らしやすくなる。

Prettierが自動で整形する主な内容

• インデント（スペースかタブか、半角何スペースか）: 設定に従ってインデント幅を統一する。
• 改行の自動挿入: printWidth などの設定を参考に、長いコードを読みやすい位置で折り返す。
• 文字列の引用符の統一: シングルクォーテーション（'）とダブルクォーテーション（"）のどちらかに統一する。
• 末尾のセミコロン（;）やカンマ（,）: 行末のセミコロンの有無や、配列・オブジェクトの最後の要素の後ろのカンマを自動で追加・削除する。

Prettierの設定ファイル（.prettierrc）

Prettierの挙動は、プロジェクトのルートディレクトリに配置する .prettierrc というJSON形式の設定ファイルで微調整できる。

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

• "semi": true: 文末にセミコロンを強制する。
• "singleQuote": true: 文字列をシングルクォーテーションで囲む。
• "tabWidth": 2: インデントの幅をスペース2個分にする。

対応するファイル形式

Prettierは、JavaScriptだけのツールではない。
TypeScript、HTML、CSS、JSON、Markdownなど、Web開発でよく使う多くの形式に対応している。プロジェクトによってはプラグインを追加することで、さらに別の言語やフレームワークのファイルも整形できる。

CLI、保存時整形、CIで使える

Prettierはエディタ拡張機能だけでなく、コマンドラインからも実行できる。
たとえば、prettier . --write のように実行すると、対象ファイルをまとめて整形できる。また、package.json のスクリプトやCI/CDに組み込めば、チーム全体で同じフォーマットを保ちやすくなる。

.prettierignoreで整形対象を除外できる

すべてのファイルをPrettierで整形すべきとは限らない。
ビルド成果物、外部ライブラリ、生成されたファイルなどは、.prettierignore に書いて整形対象から外すことができる。Prettierは通常、node_modules のような一部のフォルダを自動的に無視するが、プロジェクト固有の除外対象は明示しておくとよい。

AIコーディングとの関係

AIのコード生成とPrettierの重要性

AIを使ってプログラミングコードを生成させると、AIから出力されたコードのインデントが崩れていたり、スペースの開け方が不規則だったりすることが頻繁に発生する。
また、複数のAI指示を重ねてコードを切り貼りしていくうちに、ファイルの見た目がごちゃごちゃになってしまう。
この時、Prettierを導入しておくと、AIが書いたコードであっても、保存やコマンド実行で一定のレイアウトに整えられるため、AIとペアプログラミングをする際の読みやすさとレビュー効率が上がる。

指示を出す際のポイント

AIにPrettierの設定や導入を依頼する際は、以下のように指示するとよい。

• 「JavaScriptプロジェクトにPrettierを導入したい。npmを使ったインストール手順と、基本の .prettierrc 設定ファイルを出力して」
• 「VS Codeで、ファイルを保存したとき（Format on Save）に自動でPrettierが走るようにするための settings.json の設定方法を教えて」

よくある勘違い

Prettierはプログラムのバグ（バグコード）も修正してくれる？

Prettierは、プログラムの「見た目（構文のレイアウト）」を整えるだけであり、プログラムの「論理的なバグ（動かない原因）」やセキュリティの脆弱性を直すことはできない。
たとえば、変数名のスペルミスがあったり、条件分岐のロジックが間違っていたりしても、Prettierはそのまま見た目を綺麗に整えるだけである。プログラムのバグや構文ルール違反を検知するには、後述の「ESLint（リンター）」という別のツールを組み合わせて使用する必要がある。

Prettierを動かしたら勝手にコードの意味が変わってしまうことはある？

Prettierは基本的に「コードの動作の意味（抽象構文木: AST）」を変えずに、改行やスペースなどの表示を整えるためのツールである。
そのため、Prettierを実行しても、論理的なバグが勝手に解決するわけではない。ただし、整形後の差分が大きくなることはあるため、導入時は一度にフォーマットだけのコミットを分けるとレビューしやすい。

Prettierの設定はパソコン全体で1つしか持てない？

プロジェクトごとに異なる設定ファイル（.prettierrc）を配置して使い分けることができる。
たとえば、「会社Aの仕事用のWebアプリプロジェクトではスペース4マス」「個人開発のプロジェクトではスペース2マス」というように、プロジェクトフォルダの中に設定ファイルを置いておけば、エディタは自動的にそのプロジェクト固有のルールに従ってコードを整形する。

Prettierを入れればESLintはいらない？

PrettierとESLintは役割が違う。
Prettierはコードの見た目を整えるためのフォーマッターであり、ESLintはバグになりやすい書き方やプロジェクトルール違反を検知するリンターである。つまり、見た目はPrettier、バグやルール違反はESLint、という役割分担で併用するのが一般的である。

まとめ

• Prettierは、プログラムのインデントや改行、スペースなどを保存時に自動で統一・整形するコードフォーマッターである。
• 個人のこだわりによるスタイルの揺らぎを減らし、プロジェクト全体で読みやすいコードを維持しやすくなる。
• JavaScript、TypeScript、HTML、CSS、JSON、Markdownなど、多くのファイル形式に対応している。
• AIが生成した乱雑なコードの見た目を整え、読みやすくデバッグしやすい状態にするため、AIコーディングと相性が良い。
• あくまで見た目の整理を行うツールであり、論理的なバグや文法違反の検知にはESLintなどのリンターと併用する。

情報ソース

• Prettier Official Website (prettier.io)
• Prettier Official Documentation: Configuration
• Prettier Docs: What is Prettier?
• Prettier Docs: Prettier vs. Linters
• Prettier Docs: Ignoring Code

より詳しくAIに聞いてみよう

• VS Codeで拡張機能としてのPrettierをインストールし、他のフォーマッターと競合させずに優先的に有効化する手順を教えてください。
• Prettierで自動整形させたくない特定のファイル（ビルド成果物やライブラリフォルダなど）を除外するための「.prettierignore」の書き方を教えてください。
• 「コードフォーマッター（Prettier）」と「静的解析ツール/リンター（ESLint）」の役割の違いを、初心者向けに具体例を挙げて分かりやすく整理してください。
• AIに「PrettierとESLintを併用してエラーを起こさないようにするための設定手順（eslint-config-prettierの導入など）」を解説してもらいましょう。
• プロジェクトのメンバーが共通のフォーマットルールを守れるように、Gitのコミット時に自動でPrettierを走らせる仕組み（huskyとlint-staged）の構築方法を教えてください。