はじめに
フロントエンド開発において、コード品質を保つためのリンターとフォーマッターは必須のツールですよね。長らくESLint + Prettierの組み合わせが定番でしたが、最近「Biome」というツールがかなり話題になってます。
実際にプロジェクトでESLint + PrettierからBiomeに移行してみたところ、その速度と使いやすさに本当に驚きました😲 今回は移行体験を通じて、Biomeの魅力と実際の導入方法をシェアしていきます！
Biomeって何？
Biome（読み方：バイオーム）はRust製のWebツールチェーンで、以下の機能を1つのツールでまとめて提供してくれます：
- リンター（Linter）: コードの問題を検出・修正
- フォーマッター（Formatter）: コードスタイルを統一
- インポートソーター: import文の整理
従来のESLint + Prettierの組み合わせを置き換えることを目的として開発されていて、とにかく高速性と使いやすさがウリです。
なぜBiomeに移行しようと思ったのか
従来の構成が抱えてた問題
今までのプロジェクトでは、こんな感じの構成を使ってました：
{
"devDependencies": {
"eslint": "^8.50.0",
"prettier": "^3.0.3",
"@typescript-eslint/eslint-plugin": "^6.7.4",
"@typescript-eslint/parser": "^6.7.4",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0"
}
}
この構成、正直けっこう面倒くさくて：
- 依存関係多すぎ問題
- 実行遅い問題
- 設定めんどい問題
- 競合するやつ問題
Biomeに期待してたこと
- ワンツール主義
- 爆速
- 設定ラク
- 互換性
実際、Biomeはデフォルト設定で基本的には十分です。
他ツールとの比較
パフォーマンス比較
実際のプロジェクト（TypeScript + React、約200ファイル）で測ってみました：
| ツール | リント時間 | フォーマット時間 | 合計時間 |
|---|---|---|---|
| ESLint + Prettier | 3.2秒 | 1.8秒 | 5.0秒 |
| Biome | 0.8秒 | 0.3秒 | 1.1秒 |
約4.5倍速くなりました！ これはもう戻れませんね...🚀
機能比較
| 機能 | ESLint + Prettier | Biome | 備考 |
|---|---|---|---|
| TypeScript対応 | ✅ | ✅ | |
| React対応 | ✅ | ✅ | |
| カスタムルール | ✅ | ⚠️ | Biomeは組み込みルールのみ |
| プラグイン | ✅ | ❌ | |
| 設定の簡単さ | ⚠️ | ✅ | |
| 実行速度 | ⚠️ | ✅ |
なぜBiomeは速いのか？
Biomeの一番の魅力は「爆速」ですが、その理由を少し掘り下げてみましょう。
-
Rust製の実装
BiomeはRustで書かれており、Node.jsベースのESLintやPrettierに比べて実行速度が格段に速いです。Rustはコンパイル済みのバイナリを実行するため、起動オーバーヘッドが小さく、低レベルでのメモリ管理が可能です。 -
ASTの再利用
従来の構成では、リントとフォーマットでそれぞれコードをパースしていました。Biomeでは一度生成したAST（抽象構文木）を使い回すことで、解析を効率化しています。 -
マルチスレッド処理
Rustの特性を活かし、複数ファイルを並列で解析できる仕組みを持っています。大規模プロジェクトで特に恩恵が大きい部分です。
つまり「Rustの高速性 × ASTの一元化 × 並列処理」という組み合わせが、実際の体感速度につながっています。これが「保存した瞬間に整形される」気持ちよさの裏側です。
カスタムルールについて
Biomeがカスタムルールで「限定的」となってる理由は、設計思想の違いなんです：
- ESLint: プラグインシステムでカスタムルールをガンガン追加できる
- Biome: 組み込みルールのみ、プラグインシステムなし
Biomeは「バッテリー込み（batteries included）」のアプローチで、普通に必要なルールは最初から全部入ってます。設定で悩む時間を減らせるけど、特殊な要件がある場合はちょっと制限になっちゃいますね。
Biomeのインストールと設定
1. Biomeのインストール
# npmの場合
npm install --save-dev @biomejs/biome
# pnpmの場合
pnpm add -D @biomejs/biome
# yarnの場合
yarn add -D @biomejs/biome
2. 設定ファイルを作ってみる
これ一発で設定ファイルができます：
npx @biomejs/biome init
こんな感じの biome.json が生成されます（デフォルトの設定で基本的に十分！）：
{
"$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true // 推奨ルールを有効化
}
},
"formatter": {
"enabled": true,
"indentStyle": "space", // インデントにスペースを使用
"indentWidth": 2 // インデント幅は2
}
}
3. 既存設定からの移行
私のプロジェクトでは、こんな感じの設定を追加しました：
{
"$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
"files": {
"include": ["src/**/*"], // 対象ファイルを指定
"ignore": ["node_modules", "dist", "build"] // 除外ディレクトリ
},
"organizeImports": {
"enabled": true // import文の自動整理を有効化
},
"linter": {
"enabled": true,
"rules": {
"recommended": true, // 推奨ルールを有効化
"complexity": {
"noExcessiveCognitiveComplexity": "error" // 複雑度チェック
},
"style": {
"noNonNullAssertion": "warn", // TypeScriptの!演算子を警告
"useConst": "error" // letの代わりにconstを強制
}
}
},
"formatter": {
"enabled": true,
"indentStyle": "space", // インデントはスペース
"indentWidth": 2, // インデント幅は2
"lineWidth": 100 // 1行の文字数制限
},
"javascript": {
"formatter": {
"quoteStyle": "single", // シングルクォートを使用
"trailingComma": "es5" // ES5形式のtrailing comma
}
}
}
4. package.jsonのスクリプトを更新
npm scriptsも忘れずに更新：
{
"scripts": {
"lint": "biome lint ./src", // リントのみ実行
"lint:fix": "biome lint --write ./src", // リント + 自動修正
"format": "biome format ./src", // フォーマットチェックのみ
"format:fix": "biome format --write ./src", // フォーマット適用
"check": "biome check ./src", // リント + フォーマットチェック
"check:fix": "biome check --write ./src" // 全て実行 + 自動修正
}
}
正直、npm run check:fix これだけ覚えておけば十分です。リント・フォーマット・import整理を全部やってくれるので、基本的にはこれしか使いません。
TypeScriptプロジェクトでの注意点：
Biomeは型チェック（typecheck）は行わないので、TypeScriptの型エラー検出には別途 tsc が必要です：
{
"scripts": {
"check:fix": "biome check --write ./src", // フォーマット・リント・import整理
"typecheck": "tsc --noEmit" // 型チェック
}
}
コミット前には必ずこの2つをやりましょう：
npm run check:fix # コード整形
npm run typecheck # 型チェック（TypeScriptの場合）
5. VSCodeの設定
.vscode/settings.json でエディタとの連携も設定しちゃいましょう：
{
"editor.defaultFormatter": "biomejs.biome", // BiomeをデフォルトFormatterに
"editor.formatOnSave": true, // 保存時に自動フォーマット
"editor.codeActionsOnSave": {
"quickfix.biome": true, // 保存時にクイックフィックス実行
"source.organizeImports.biome": true // 保存時にimport整理
}
}
移行の現実的ステップ
既存のESLint + PrettierからBiomeへ移行する場合、一気に置き換えると大きな差分が出てしまいます。そこで、段階的に導入する方法をおすすめします。
-
フォーマッターだけ導入
まずはPrettierを外して、Biomeのフォーマッターを導入します。フォーマットの統一効果をすぐに体感できます。 -
標準的なESLintルールをBiomeに移行
recommendedルールを有効化し、重複するESLintルールを徐々に削除していきます。 -
特殊なルールは並行運用
プロジェクト独自のカスタムルールがある場合、しばらくはESLintとBiomeを併用しながら調整します。 -
完全移行
Biomeに馴染んだらESLint関連パッケージを削除。依存関係が一気にシンプルになります。
この流れなら、チームへの負担を最小限に抑えつつ、自然にBiomeへ移行できます。
また、初回の大量差分は専用PRにまとめ、git blame --ignore-rev を活用して履歴の可読性を保つと良いです。
実際に使ってみた感想
良かった点
- 圧倒的な速度: ファイル保存時のラグがほぼゼロに！
- 設定の簡潔さ: 1つの設定ファイルだけで完結
- 一貫性: リントとフォーマットが統合されてるのは楽
- 開発体験: VSCodeでサクサク動く
気になった点
- エコシステムの未成熟: プラグインがまだ少ない
- カスタマイズの制限: 細かい設定変更がちょっと難しい
- 移行コスト: 既存プロジェクトだと最初の設定に時間かかる
パフォーマンスの体感
移行前後でのファイル保存時の反応が段違いになりました：
- 移行前: 保存後0.5-1秒くらいのもっさり感
- 移行後: 保存したらほぼ瞬時にフォーマット完了✨
こんなプロジェクトにおすすめ
積極的に導入したい場合
- 新規プロジェクト: 最初からBiomeで始めるのがベスト
- パフォーマンス重視: 大規模プロジェクトで実行速度が気になる
- シンプル好き: 複雑な設定はもういや！って人
- TypeScript + React: 王道スタックなら問題なし
ちょっと慎重に検討した方がいい場合
- 既存の巨大プロジェクト: 移行コストが結構かかりそう
- 特殊なESLintルール愛用者: カスタムルールをヘビーに使ってる
- チーム合意: 新しいツールに対してチーム内の理解と合意が必要
AI時代に必須のツール
現在、AI（ChatGPT、Cursor、GitHub Copilotなど）を使ったコード生成がめちゃくちゃ一般的になってますよね。AIが生成するコードって機能的には正しくても、フォーマットやコーディング規約がバラバラなことが多いんです。
Biomeのような高速なフォーマッター・リンターがあることで、AI生成コードを即座に整形・チェックできるので、開発効率が爆上がりします。特にBiomeの速さは、AI支援開発において本当に大きなメリットです。
さらに面白いのは、AI自体がBiomeの存在を認識してコードを生成する場合なんです。「Biomeを使用しているプロジェクトで...」みたいな文脈を与えると、AI自体がより整理された、シンプルでクリーンなコードを最初から生成してくれるようになります。後から修正する手間も大幅に削減できて一石二鳥ですね！
まとめ
BiomeはESLint + Prettierの良い代替手段になるツールです。特にこの辺りが本当に優秀：
- パフォーマンス: 約4倍の高速化を実現
- 開発体験: シンプルな設定と軽快な動作
- 将来性: 活発な開発とコミュニティの盛り上がり
さらに今回追加したように「なぜ速いのか？」という技術的背景や、「移行ステップ」という実務的観点を知ると、導入判断がより現実的になります。