Prettier（プリティア）は、コードのフォーマット（整形）を自動的に行ってくれる「意見の強い（opinionated）」コードフォーマッターです。開発者が書いたコードを、事前に定義された一貫性のあるスタイルに自動で修正し、見た目を統一してくれます。手動でのフォーマット作業から解放され、コードレビューの際にスタイルに関する議論を減らすことができます。🎨
Prettierの主な特徴とメリット 🚀
- 自動フォーマット: ファイル保存時やコミット時など、様々なタイミングでコードを自動的に整形できます。
- 意見が強い (Opinionated): ほとんどの設定が固定されており、ユーザーが細かくカスタマイズできる余地は少ないです。これにより、チームやプロジェクト全体で一貫したスタイルを簡単に適用できます。
- 多様な言語とエコシステムに対応: JavaScript (JSX, Flow, TypeScript), CSS (SCSS, Less), HTML, JSON, Markdown, YAML など、多くの言語をサポートしています。
-
開発効率の向上:
- 手動フォーマットの不要化: コードを書く際にインデントや改行、引用符の種類などを気にしなくてよくなります。
- コードレビューの効率化: スタイルに関する議論が不要になり、本質的なロジックのレビューに集中できます。
- 一貫性の確保: チームメンバー全員が同じスタイルでコードを書くため、可読性が向上し、新しいメンバーもすぐにコードベースに慣れることができます。
- ツールの統合: VS Codeなどのエディタ、ESLintなどのリンター、Git Hooks（コミット時に自動整形）など、様々な開発ツールと連携できます。
Prettierのサンプルコードと使用した場合・使用しなかった場合の比較 📊
ここでは、JavaScriptコードの整形を例に、Prettierを使用した場合と使用しなかった場合の比較を見てみましょう。
📌 サンプルコード (Prettierを使用した場合)
Prettierを適用する前のコード (src/index.js):
const my_array = [ 1, 2, 3 ];
function add( a,b) { return a+b; }
if(true){
console.log("hello" );
}
const obj = {
name: "Alice",
age: 30
};
Prettierを適用するためのコマンド:
prettier --write src/index.js
Prettier適用後のコード (src/index.js):
const my_array = [1, 2, 3];
function add(a, b) {
return a + b;
}
if (true) {
console.log("hello");
}
const obj = {
name: "Alice",
age: 30,
};
✨ 注目ポイント:
- インデントが2スペースに統一され、一貫したスタイルになりました。
- 配列の要素や関数の引数周りの不要なスペースが削除されました。
-
if文の条件式の括弧と中括弧の間にスペースが入りました。 - オブジェクトのプロパティの末尾にカンマが追加されました（trailing comma、設定による）。
📌 Prettierを使用しなかった場合の比較
Prettierのようなフォーマッターを使用しない場合、コードのスタイルは開発者個人の習慣や、プロジェクトで手動で定めたコーディング規約に依存します。
複数の開発者が各自のスタイルでコードを書いた場合:
// 開発者Aが書いたコード
const my_array = [ 1, 2, 3 ];
function add( a,b) { return a+b; }
// 開発者Bが書いたコード
if( true )
{
console.log("world") ;
}
// 開発者Cが書いたコード
const obj = { name: "Bob", age: 25 };
上記のコードは、文法的には全て正しいですが、一貫性がなく、見た目がバラバラです。
Prettierを使用しないと、複数の開発者が関わるプロジェクトでは、コードのフォーマットがばらばらになりがちです。これにより、コードの可読性が低下したり、コードレビューの際にスタイルに関する無駄な指摘が増えたりする可能性があります。Prettierは、このような課題を自動的に解決し、チーム全体の生産性を向上させる強力なツールです。🚨
Prettierを導入することで、開発者はコードの「書き方」ではなく、コードの「内容」に集中できるようになり、より高品質なソフトウェア開発に貢献できます。👍