はじめに
Biome 使ってますか？
もしあなたが今から新しいプロジェクトを立ち上げようとしているなら、悪いことは言わないので、とりあえず npm create~~ した直後に Biome を入れてください。
それくらい、今のフロントエンド開発において強力で快適なツールなんです。
この記事では、なぜそこまで Biome を推すのか、ESLint/Prettier と何が違うのか、そして少しだけある弱点についてもお話しします。
Biome とは？
Biome は、Web 開発のためのツールチェーンです。もともと Rome という名前で開発されていましたが、いろいろあって Biome として生まれ変わりました。
最大の特徴は Rust で書かれている という点。そして、Linter と Formatter が一体化している という点です。
1. 圧倒的な爆速体験
Rust 製であることの最大の恩恵は、その 速度 です。
ESLint や Prettier も素晴らしいツールですが、プロジェクトが大きくなってくると、保存するたびに一瞬待たされたり、CI での Lint チェックに時間がかかったりした経験はありませんか？
Biome は、それらと比較して 桁違いに速い です。公式のベンチマークでも、Prettier の 25 倍以上の速度が出ているとか…。実際に使ってみると、「保存した瞬間にもう整形が終わっている」という感覚で、体感速度が全く違います。
2. 設定がこれ一つで完結する
これまでのフロントエンド開発では、
- コードの品質チェックには ESLint
- コードの整形には Prettier
この2つを組み合わせて使うのが定石でした。しかし、これらを共存させるためには eslint-config-prettier を入れたり、設定ファイルを行ったり来たりと、環境構築が地味に面倒でしたよね。
Biome なら、これ一つで Linter も Formatter も兼ねています。
設定ファイルも biome.json ひとつだけ。依存関係もスッキリして、node_modules も軽くなります。なんなら、デフォルトの設定だけで十二分に使えるレベルの機能を提供してくれます。最高ですね。
プロジェクト初期化時に導入すべき理由
冒頭でも言いましたが、プロジェクトを作ったらまず Biome を入れるべき です。
後から導入しようとすると、既存のコードスタイルとの競合を直したり、大量の Lint エラーと戦う羽目になったりと、移行コストがかかります。
真っ白なキャンバスの状態から Biome を入れておけば、最初から爆速・快適な開発環境でコーディングに集中できます。まさに「転ばぬ先の杖」ならぬ「転ばぬ先の Biome」です。
導入も超簡単です。
# インストール
npm install --save-dev --save-exact @biomejs/biome
# 初期化
npx @biomejs/biome initこれだけです。あとはVSCodeの拡張機能を入れておけば、もう快適生活の始まりです。
注意点：フレームワークへの対応
手放しで褒めちぎりましたが、現時点で一つだけ注意点があります。それは Vue, Svelte, Astro などの独自構文を持つフレームワークへの対応がまだ完全ではない という点です。
React (JSX/TSX) や純粋な JavaScript/TypeScript プロジェクトであれば全く問題なく使えますし、現状最強の選択肢だと思います。
しかし、.vue や .svelte ファイル内のスクリプト部分などは、まだ Biome だけでは解析しきれない部分があったりします。（日々開発が進んでいるので、将来的には解決されるはずですが！）
なので、Vue や Svelte を使う場合は、現状では ESLint + Prettier を使うか、あるいは「JS/TSファイルだけ Biome に任せて、コンポーネントファイルは別で管理する」といった工夫が必要になるかもしれません。
実際に、このサイトはSvelteで作られていますが、ESLint + Prettierを使っています。
まとめ
- Biome は Rust 製で爆速
- Linter と Formatter がこれ一本
- React や TS プロジェクトなら迷わず採用
- Vue/Svelte などは対応状況を要チェック
とにかく、速さは正義 です。まだ触ったことがない方は、ぜひ一度この爆速体験を味わってみてください。一度味わうと、もう戻れませんよ！