概要
コードを自動でフォーマットするツール「Prettier」を導入し、コードを整形する仕組みを構築する。
なぜ必要か
問題: 開発者ごとにコードの書き方が異なる。
例：
// 開発者A
const user={name:"太郎",age:20};
// 開発者B
const user = {
name: "太郎",
age: 20,
};
影響:
- コードレビューでスタイルの議論に時間を取られる
- 統一感のないコードベースになる
- Gitの差分が読みにくくなる
解決: Prettierが自動でコードを整形し、全員が同じスタイルで書いたようになる。
どのように実装するか
実装手順
1. パッケージのインストール（ESLint併用前提）
cd /path/to/your/project
pnpm add -D prettier prettier-plugin-tailwindcss eslint-config-prettier
インストールするもの:
-
prettier: コアツール -
prettier-plugin-tailwindcss: Tailwind CSSのクラス名を推奨順に並び替える -
eslint-config-prettier: ESLintのルールとPrettierの整形が衝突しないように、競合するルールを無効化する(任意)
なぜTailwindプラグインが必要か:
悪い例：
<div className="text-white p-4 bg-blue-600 rounded-md">
良い例（推奨順）:
<div className="rounded-md bg-blue-600 p-4 text-white">
Tailwindの推奨順序に従うことで、クラス名の優先順位が明確になり、意図しないスタイルの上書きを防げる。
2. 設定ファイルの作成
/web/.prettierrc.json を作成：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"arrowParens": "always",
"endOfLine": "lf",
"plugins": ["prettier-plugin-tailwindcss"]
}
各設定の意味:
| 設定 | 値 | 意味 |
|---|---|---|
semi |
true |
文末にセミコロンを付ける |
trailingComma |
"es5" |
ES5で有効な末尾カンマを付ける（配列・オブジェクト） |
singleQuote |
true |
文字列はシングルクォート ' を使う |
printWidth |
80 |
1行の最大文字数（80文字で改行） |
tabWidth |
2 |
インデント幅は2スペース |
useTabs |
false |
タブ文字ではなくスペースを使う |
arrowParens |
"always" |
アロー関数の引数を常に括弧で囲む (x) => x
|
endOfLine |
"lf" |
改行コードはLF |
plugins |
["prettier-plugin-tailwindcss"] |
Tailwindクラス名を並び替える |
trailingCommaの例:
// trailingComma: "es5"
const obj = {
name: 'John',
age: 30, // ← カンマあり（ES5で有効）
};
const arr = [
1,
2,
3, // ← カンマあり
];
なぜ末尾カンマが良いか：
- 新しい行を追加してもGitの差分が少なくなる
- 配列・オブジェクトの最後の要素を削除しやすい
3. 無視ファイルの設定
/web/.prettierignore を作成：
# 依存関係
node_modules
# ビルド成果物
.next
out
build
# ロックファイル（フォーマット不要）
pnpm-lock.yaml
package-lock.json
yarn.lock
# 静的ファイル
public
4. package.jsonにスクリプト追加
/web/package.json の scripts セクションに追加：
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint",
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md,css}\"",
"format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,md,css}\""
}
}
スクリプトの意味:
-
format: すべてのファイルをフォーマット（実際に変更） -
format:check: フォーマットが必要なファイルはあるかチェック（変更しない）
ESLint併用の補足:
-
eslint-config-prettierを導入したら、ESLint設定に組み込む - ESLint設定を触る手順の中で追記する
例: eslint.config.mjs に追加（Flat Config）
import eslintConfigPrettier from 'eslint-config-prettier';
export default [
// 既存の設定
eslintConfigPrettier,
];
なぜ必要か:
ESLintに整形系ルールが残っていると、Prettierが整形した直後でも
ESLintが「改行やインデントが違う」と警告することがあります。
eslint-config-prettier を追加すると、こうした競合を無効化できます。
動作確認
1. コマンドラインでフォーマット
cd /path/to/your/project
pnpm format
出力例：
app/page.tsx 100ms
app/layout.tsx 50ms
2. 実際にテスト
-
/web/app/page.tsxを開く -
わざと崩れたコードを書く：
const user={name:"太郎",age:20} -
フォーマット実行：
pnpm format -
コードが整形される：
const user = { name: '太郎', age: 20 };
Prettierのフォーマット例
Before（手動で書いたコード）
const fetchMembers=async()=>{
const response=await fetch('/api/members')
const data=await response.json()
return data
}
const MemberCard=({member})=>{
return <div className="p-4 bg-white text-gray-900 rounded-md shadow-md">
<h2>{member.name}</h2>
</div>
}
After（Prettierでフォーマット後）
const fetchMembers = async () => {
const response = await fetch('/api/members');
const data = await response.json();
return data;
};
const MemberCard = ({ member }) => {
return (
<div className="rounded-md bg-white p-4 text-gray-900 shadow-md">
<h2>{member.name}</h2>
</div>
);
};
変更点:
- スペースが適切に挿入された
- セミコロンが追加された
- 括弧が適切に配置された
- Tailwindクラスが推奨順に並び替えられた
終わりに
今回はPrettierを使用した、コードフォーマット環境を作成しました。
現時点では手動で pnpm format を実行する必要があるので、。VSCodeの設定を行い、保存時に自動でフォーマットされる試してみたいと思います。