Biomeミリ知らから完全に理解した

本記事のサマリ

長年PrettierとESLintを組み合わせて使ってきた私が、最近話題のBiomeについて全然知らなかったので調べてみました。結論から言うと、「なんでもっと早く知らなかったんだ！」という感じです。Biomeは単なるフォーマッターやリンターの代替ツールではなく、Rustで書かれた圧倒的なパフォーマンスと、オールインワンの設計思想で開発体験を根本から変えてくれるツールでした。PrettierとESLintの設定に疲れている方、CI/CDのパフォーマンスに悩んでいる方には、ぜひ一度試していただきたいツールです。

Biome誕生秘話 〜「Rome has fallen」からの再生〜

Biomeについて調べていて最初に驚いたのは、その生い立ちでした。実はBiomeは、2023年8月に「Rome」というプロジェクトからフォークして誕生したツールなんですね。

Romeは元々Meta（旧Facebook）のOSSプロジェクトとして始まり、その後Rome Tools Inc.という会社が設立されて開発が続けられていました。しかし、残念ながらこのスタートアップは成功せず、従業員は全員レイオフされてしまったそうです。

そんな中、Romeの元開発者たちが「プロジェクトを継続させたい」という思いで立ち上げたのがBiomeです。公式ブログの発表記事を読むと、プロジェクト名の由来が面白くて、「Bis（第二の）」と「Rome」を組み合わせて「Biome」にしたとのこと。まさに「第二のRome」として再生を果たしたわけですね。

https://biomejs.dev/blog/announcing-biome/

この背景を知ると、Biomeに込められた開発者たちの熱意が伝わってきて、応援したくなります。しかも、元のRomeチームがそのまま開発を続けているので、技術的な継続性もしっかり保たれているんです。

PrettierとESLintユーザーの私が感じたBiomeの衝撃

私はこれまで、JavaScriptプロジェクトではPrettierでコードフォーマットを行い、ESLintでコードの品質チェックを行うという、いわゆる「王道」の組み合わせを使ってきました。設定ファイルは .prettierrc.jsと .eslintrc.jsの2つを管理して、VSCodeの拡張機能も両方インストールして...という感じです。

正直、この組み合わせに特に不満があったわけではありません。でも、Biomeを調べてみて「これはすごい」と思ったポイントがいくつもありました。

圧倒的なパフォーマンス改善

まず何より驚いたのは、そのパフォーマンスです。公式サイトのベンチマーク結果を見ると、フォーマッター機能でPrettierの約35倍高速、リンター機能でESLintの約15倍高速という数字が出ています。

https://biomejs.dev/

具体的には、171,127行のコードを含む2,104ファイルをフォーマットする際に、Prettierだとそれなりに時間がかかるところを、Biomeなら一瞬で完了してしまうレベルです。これはRustで書かれていることによるパフォーマンス向上の恩恵ですね。

普段の開発では「フォーマットが遅い」と感じることはそれほどないかもしれませんが、CI/CDでのビルド時間を考えると、この差は無視できません。特に大規模なプロジェクトや、モノレポ構成の場合は、この高速化による時間短縮効果は相当大きいはずです。

オールインワンの魅力

個人的に最も魅力的に感じたのは、フォーマットとリンティングが一つのツールで完結することです。今まではPrettierとESLintの設定を両方管理する必要がありましたが、Biomeなら biome.json一つで全てが完結します。

しかも、設定の競合を心配する必要がありません。PrettierとESLintを併用していると、たまに「Prettierでフォーマットしたコードに対してESLintがエラーを出す」みたいな問題に遭遇することがあるんですが、Biomeならそういった心配が一切不要です。（めちゃめちゃ辛いポイントですよね！😱）

# 今まで
npm run prettier:check
npm run eslint:check

# Biomeなら
npx @biomejs/biome check

この統合感は、一度体験してしまうともう戻れなくなりそうです。

Prettierとの高い互換性

「新しいフォーマッターに変えるのは不安」という気持ちもあったのですが、BiomeはPrettierとの97%互換性を実現しているそうです。つまり、既存のプロジェクトで使っても、コードの見た目がガラッと変わってしまう心配はほとんどないということですね。

この互換性の高さは、既存プロジェクトへの導入における大きな安心材料だと思います。チーム開発では「フォーマットが変わるとdiffが見にくくなる」という問題もあるので、この配慮は本当にありがたいです。

ゼロ設定で始められる手軽さ

Biomeのもう一つの魅力は、設定なしで始められることです。多くのプロジェクトでは、デフォルトの設定で十分に実用的なフォーマットとリンティングを行うことができます。

PrettierとESLintの場合、最初にある程度設定を作り込む必要がありますが、Biomeならインストールしてすぐに使い始めることができます。新しいプロジェクトを立ち上げる際の手間が格段に減りそうです。

実際にマイグレーションしてみよう

Biomeの魅力は分かったけれど、「既存プロジェクトの移行は大変そう」と思うかもしれません。でも実は、Biomeは既存のPrettierとESLintの設定を自動で移行してくれる機能を提供しているんです。

https://biomejs.dev/guides/migrate-eslint-prettier/

マイグレーションは想像以上に簡単で、基本的には以下のコマンドを実行するだけです：

# ESLintの設定を移行
npx @biomejs/biome migrate eslint --write

# Prettierの設定を移行
npx @biomejs/biome migrate prettier --write

これで既存の .eslintrc.jsや .prettierrc.jsの設定が biome.jsonに自動的に変換されます。もちろん、100%完璧な変換ではない部分もあるので、移行後は設定内容を確認する必要はありますが、手動ですべてを設定し直すよりもはるかに楽です。

パッケージの置き換えも含めて、小規模なプロジェクトなら30分程度で移行が完了するのではないでしょうか。

実際に移行してパフォーマンスを計測してみた

マイグレーション方法を調べているうちに、「実際にどれくらい速くなるんだろう？」という疑問が湧いてきて、弊社のプロダクトで実際にBiomeへの移行を試してみました。

移行前と移行後で、それぞれ10回ずつ実行時間を計測して平均を取ってみたところ、想像以上の結果が出ました。

パフォーマンス比較まとめ

処理内容	移行前	移行後	改善率
フォーマット	Prettier: 3.49秒	Biome format: 1.77秒	49%高速化 (1.97倍)
Lint	ESLint: 17.98秒	Biome lint: 0.79秒	95%高速化 (22.76倍)
合計（format + lint）	21.47秒	Biome check: 0.56秒	97%高速化 (38.34倍)

これ、本当に驚きました。特にLint処理が17.98秒から0.79秒になったのは衝撃的です。約23倍も速くなっています。

さらに注目すべきは、Biomeの checkコマンドを使うと、フォーマットとLintを一度に実行できるのに、わずか0.56秒で完了してしまう点です。移行前はPrettierとESLintを個別に実行して合計21.47秒かかっていたのが、38倍も高速化されました。

パフォーマンス改善のインパクト

この速度改善は、開発体験に大きな影響を与えます。例えば：

• 保存時の自動フォーマットが一瞬で完了するので、待ち時間によるストレスがゼロに
• CIでのチェック時間が大幅に短縮され、フィードバックサイクルが高速化
• プルリクエストのレビュー前チェックが億劫でなくなる

特にチーム開発では、このスピード感は生産性に直結します。「コミット前に一応チェックしておこうかな」という気持ちになれるのは、実行時間が短いからこそですよね。

移行時のポイント

実際に移行してみて気づいたポイントもいくつかありました：

• NestJSプロジェクトの場合、パラメーターデコレーターを使用するため、biome.jsonに unsafeParameterDecoratorsEnabled: trueの設定が必要でした
• lineWidthの調整など、自動移行後に一部設定を微調整する必要がありました
• 削除できたパッケージが意外と多く、prettier、eslint、eslint-config-prettier、eslint-plugin-prettier、@typescript-eslint/eslint-plugin、@typescript-eslint/parserをすべて削除できました

最終的に依存パッケージが減り、設定ファイルも biome.json一つに集約できたのは、メンテナンス性の観点でも大きなメリットだと感じました。

Biomeを導入する前に知っておきたい注意点

とはいえ、Biomeにも現時点での制約があります。実際に導入を検討する前に、これらの点は把握しておいた方が良いでしょう。

まず、ESLintのすべてのルールが実装されているわけではありません。Biomeは現在362以上のルールを提供していますが、ESLintエコシステム全体で見ると、まだカバーされていないルールも存在します。特に特定のフレームワーク向けの専門的なルールや、あまり使われていないルールについては、今後の実装を待つ必要がある場合もあります。

また、言語サポートについても、まだPrettierには及ばない部分があります。例えば、HTMLやMarkdown、SCSSなどの一部の言語については、Prettierの方が対応範囲が広い状況です。プロジェクトで使用している言語がBiomeで対応されているかどうかは、事前に確認しておくことをお勧めします。

さらに、Biomeはまだ比較的新しいツールです（2023年8月にリリース）。そのため、エコシステムの成熟度という点では、PrettierやESLintには劣る部分があります。例えば、エディターの拡張機能やCIツールとの連携などで、まれに想定外の問題に遭遇する可能性もあります。

ただし、これらの制約があっても、Biomeの開発は非常に活発で、頻繁にアップデートがリリースされています。また、AWS、Google、Microsoft、Vercelといった大手企業が既に本番環境で採用しているという実績もあり、安定性についてはそれほど心配する必要はなさそうですね。

https://github.com/biomejs/biome

Biomeは確実にチェックしておくべきツールの一つだと確信しています！
まずは個人プロジェクトや小規模なプロジェクトから試してみて、その良さを実感していただければと思います。