JavaScriptのlint/format BiomeとOxcの使いどころ

こんにちは、いっしーです。

Biome と Oxc をご存知でしょうか。

どちらも JavaScript / TypeScript の lint / format 関連で、ESLint や Prettier の代替として名前が挙がるツールです。

Biome とは

Biome は、JavaScript / TypeScript 向けの formatter / linter を含むツールです。

• Biome: https://biomejs.dev/
• GitHub: https://github.com/biomejs/biome

ESLint と Prettier を別々に入れていたところを、Biome でまとめて扱う、というイメージです。 "biome check --write" コマンドで、lint、format、自動修正をまとめて実行できます。

Oxc とは

Oxc は、VoidZero による JavaScript / TypeScript 向けの高速なツール群です。

• Oxc: https://oxc.rs/
• GitHub: https://github.com/oxc-project/oxc

Oxc には、lint を担当する Oxlint、format を担当する Oxfmt があります。 そのほか parser、transformer、resolver、minifier なども含んでいます。

自分は Vite+ を使っていて、それに組み込まれた lint / format として Oxc に触れています。

• Vite+: https://viteplus.dev/

業務では Biome を導入した

業務で触っているのは、既存資産の多い Rails アプリです。

長く運用されてきたアプリなので、古い JavaScript も多く残っています。

もともと ESLint による CI チェックがありましたが、メンテナンスされずに放置されていました。そのチェックが落ちても「これは今は無視でよい」と判断する場面があり、それ自体が認知負荷になっていました。

そこで、チームで合意して Biome を導入しました。 目的は、JavaScript / TypeScript の記述を少しずつ揃えることです。

現状の運用はざっくりこうです。

開発者の手元
  Biome の自動修正を実行
  変更したJS/TSの記述を揃える

CI
  変更差分に対してチェック
  既存コード全体ではなく、変更箇所を見る

この運用だと、新規実装でも既存改修でも、通りがかった JavaScript の記述が少しずつフォーマットされていきます。

一方で、既存実装を壊さないことも重要です。 自動修正できるからといって、既存コード全体を一気に整形するわけではありません。

個人開発では Vite+ 経由で Oxc

個人開発アプリでは Vite+ を使っています。

もともと業務で Webpacker の代替として Vite を検討していたこともあり、個人開発では Vite+ を採用しました。

Vite+ では、開発コマンドの入口を "vp" に寄せられます。

vp dev
vp build
vp check
vp test

この "vp check" の中で、Oxc の lint / format が使われています。

自分の感覚としては「Oxc を選んだ」というより、「Vite+ を使ったら Oxc の lint / format が組み込まれていた」に近いです。

特に印象が強かったのは "vp check --fix" の速さです。

コミット時にフォーマットが走るようにしていますが、実行速度が速すぎて、フォーマットが入っていることをほとんど意識しません。

コードを書く
  ↓
コミットする
  ↓
vp check --fix が走る
  ↓
ほぼ意識しないうちに lint / format が終わる

lint / format は、開発中に意識する時間が短いほどよいと思っています。 その意味で、Vite+ 経由の Oxc lint / format はかなり気持ちがよかったです。

どこで使うべきか

Biome は、既存資産の多いサーバーサイドアプリに入れやすいと感じています。

Biome が合いやすい場面

• 既存プロジェクトに載せたい
• ESLint / Prettier の代替として説明したい
• ローカルで自動修正したい
• CIでは変更差分を見たい
• 既存コードを一気に壊したくない

Rails や Laravel のようなアプリでは、既存のビルド設定、CI、チーム運用、古い JavaScript、部分的なフロントエンド移行などがあります。 そこに、開発体験全体をまとめる思想のツールをそのまま入れるのは重いです。

一方で、Vite+ 経由の Oxc lint / format は、個人開発だからこそ試しやすかったです。

Vite+ 経由の Oxc が試しやすい場面

• 自分だけで導入判断できる
• 新しいツールチェーンを試したい
• 開発コマンドを vp に寄せたい
• lint / format の速さを体感したい
• 失敗しても戻しやすい

JavaScript の lint / format ツールを選ぶときは、ツールそのものだけでなく、誰が合意して、どの既存フローに載せて、どこまで自動修正してよいのかまで考える必要があります。

まとめ

Biome と Oxc はどちらも JavaScript / TypeScript の lint / format まわりで見かけるツールですが、導入しやすい場所は違ってそうです。

既存資産の多いプロダクトには、チームで合意しやすく、少しずつ記述を揃えられる Biome が合っていました。 個人開発では、Vite+ に組み込まれた Oxc の速さを気軽に試せました。業務だとNext.js / Nuxt.js などでの採用になると思います。