🏞️
Biomeって何？ESLint / Prettierからの移行先として注目される理由
はじめに
最近、BiomeというツールをNEXT.JSに導入したので、記事に残そうかなと思います。
・これまでは ESLint + Prettier が定番だったので、気になり調べてみました。
・最近「Biome」が話題になっている → 今回はそのBiomeについての記事を記述したいと思います。
Biomeとは？
Lint（コードチェック）、Formatter（コード整形）、一部の型解析を 1つのツール で実現できるのが特徴です。
従来の課題
JS/TS 開発では複数のツールを組み合わせる必要がありました。
- コードチェック → ESLint
- コード整形 → Prettier
- 型チェック → TypeScript
- JSONやCSSなどの解析 → 別のパーサ
→ 設定ファイルが複数になり、依存関係も複雑化がありました。
Biomeの特徴
オールインワン設計
→ Lint + Format + TypeScriptの一部解析を ひとつの設定で管理します。
→ 依存関係がシンプルになります。
Rust製だから速い
→ Node.js製のESLint/Prettierより圧倒的に高速です。
→ 大規模プロジェクトでもサクサク動きます。
Rome Projectがルーツ
→ 元々「Rome」という巨大な統合ツールを目指したプロジェクトがありました。
→ ビジョンが大きすぎて停滞 → コミュニティがフォークして 現実的に進化したのがBiomeです。
Biomeの主な機能まとめ
- Lint: ESLint相当のチェックをします。
- Formatter: Prettier相当のフォーマットです。
- Parser: JS/TS/JSONを高速にパースします。
- 将来的な展望: バンドラーやテストランナーも統合予定です。
ESLint / Prettierとの違い
| 項目 | ESLint + Prettier | Biome |
|---|---|---|
| 速度 | Node.jsベースでやや遅い | Rust製で圧倒的に速い |
| 設定 | 2つの設定ファイル必要 |
.biome.json 1つで完結 |
| 導入 | eslint, prettier, pluginの組合せが必要 | Biome単体で完結 |
| 拡張性 | 豊富なルール・プラグイン | まだ少ないが開発中 |
| エコシステム | 長年の実績あり | 新しいが活発に進化中 |
導入方法（お試し編）
プロジェクトに導入する最小構成を紹介します。
bash
npm install --save-dev @biomejs/biome
npx biome init
npx biome check src
.biome.json が自動生成されます。
まとめ
Biomeは「ESLint + Prettierをまとめた次世代ツール」です。
導入が簡単で速い → 小規模〜中規模プロジェクトに特におすすめです。
ただし、ESLintの細かいルールやプラグインが必要ならまだ併用もありだと思います。
今後のアップデートに注目ですね。
Discussion