はじめに
はじめまして、オランダ出身・東京在住のフルスタックエンジニア、ペレスです。今は総合型選抜プラットフォーム「アオマル」のプロダクト開発を担当しています。
本記事では、アオマルの開発で実際に行ったLinter移行についてお話しします。
ESLint v9がリリースされた時に、v9にアップグレードしようと思ったのですが、なかなかうまくいかず、既存のプラグインもv9には使えないケースも多かったです。
また、そもそもv9のFlat Configへの移行、正直かなり面倒ですよね。.eslintrcをeslint.config.jsに書き換えて、プラグインの書き方も変わって、extendsが使えなくなって…。結局、2、3回ぐらいv9へのアップグレードを諦めました。
ただ、うちのプロジェクトではlefthookというコミットフックツールを使っていて、コミットごとにlintとprettierを走らせてましたので、Lintの速度はコミットとプッシュにも影響を与えてしまいます。
コミットがめっきり遅くなった時に、思い切ってESLintをいっそやめてしまおうと思ってBiomeへの移行を決断しました。最初は面倒だなと思ったんですけど、結論から言うとESLint v9への移行より圧倒的に楽でした。しかもLintの実行時間が10倍速くなったおかげで、コミットの速度問題も解決できました！
この記事では、18万行規模のモノレポをBiomeに移行した実体験をもとに、移行の実際と得られた効果を共有します。
TL;DR
- ESLint + Prettier → Biome移行は
biome migrateコマンドで半自動化できる - 18万行モノレポでLint時間が 24秒 → 2.4秒（10倍高速化）
- ESLint v9 Flat Config移行より圧倒的に楽
ちなみにTL;DRって最近よく見かけますが、長すぎて読んでないのことです。英語のドキュメントだと普通ですが、日本語だとあんまり馴染みないですよね。
移行前の環境
まず、移行前の構成を簡単に紹介します。
- プロジェクト構成：モノレポ（複数パッケージ）
- ファイル数：748ファイル
- コード行数：約179,000行
- 使用ツール：ESLint + Prettier + 各種プラグイン
devDependenciesにはESLint本体に加えて、@typescript-eslint/parser、eslint-plugin-react、eslint-plugin-react-hooks、eslint-config-prettierなど、おなじみのパッケージがずらり。設定ファイルも.eslintrc.jsと.prettierrcが各パッケージに散らばっている状態でした。
移行作業の実際
1. Biomeのインストールと設定移行
Biomeには公式の移行コマンドが用意されています。これが本当に優秀でした。
biome migrate eslint --write
biome migrate prettier --write
このコマンドを実行すると、既存のESLintとPrettierの設定を読み取って、biome.jsonに変換してくれます。もちろん完璧ではないので多少の調整は必要ですが、ゼロから書くよりはるかに楽です。
2. 設定ファイルの調整
正直、うちの場合は移行コマンドで生成されたbiome.jsonを調整する必要はあまりなかったのですが、自動生成されたファイルなので、一応確認した方がいいと思います。
ESLint + Prettierでは複数の設定ファイルに分散していた内容が、1つのJSONファイルにまとまります。これだけでもメンテナンス性がかなり向上しました。
3. package.jsonのスクリプト更新
- "lint": "eslint . --fix",
- "format": "prettier --write .",
+ "lint": "biome check --write",
+ "format": "biome format --write .",
lintとformatが別々だったのが、biome check一発で両方できるようになったのも嬉しいポイントですね。
4. CI/CDの更新について
ここが意外だったポイントなんですが、GitHub Actionsのワークフローは一切変更しませんでした。
うちではpackage.jsonにpnpm lintコマンドを定義していて、CIからはそのコマンドを呼び出しているだけです。なので、内部でESLint + PrettierからBiomeに変わっても、ワークフローファイルには影響がなく、この抽象化のおかげで移行がさらに楽になりました。
もしCIで直接eslintコマンドを叩いている場合は修正が必要ですが、npm run lintやpnpm lintのようにスクリプト経由で実行しているなら、そのままで大丈夫なはずです。
移行してみた結果
速度が劇的に改善
一番のインパクトはこれです。
| ESLint + Prettier | Biome | 改善 | |
|---|---|---|---|
| 実行時間 | 24.23秒 | 2.44秒 | 🚀 約10倍高速 |
| 設定ファイル | 複数 | 1つ | シンプル |
| devDependencies | 10個以上 | 1個 | 依存関係激減 |
ESLint + Prettier
移行前: 24.23秒
Biome
移行後: 2.44秒
約10倍の高速化。モノレポで複数パッケージをまとめてチェックしていたので、これまではLintが終わるのをぼんやり待つ時間がありました。それが今では一瞬で終わります。
CIの実行時間も短縮されるので、PRのフィードバックループが速くなったのも嬉しい副作用でした。
設定がシンプルに
- 設定ファイル：複数 → 1つ（
biome.json） - devDependencies：10個以上 → 1個（
@biomejs/biome）
依存関係が減ると、npm installも速くなりますし、パッケージ間の競合に悩むこともなくなります。
「意外と楽だった」ポイント
正直、移行前は「ESLintのルールが足りなくて困るんじゃないか」と心配していました。でも実際には、普段使っているルールのほとんどはBiomeでもカバーされていました。
何より、ESLint v9のFlat Config移行と比べると体感で3倍は楽でした。Flat Configは既存の設定を「理解して書き換える」必要がありますが、Biomeの移行コマンドは「とりあえず動く状態」を自動で作ってくれます。そこから調整していけばいいので、心理的なハードルが全然違いました。
移行時の注意点
- BiomeはまだESLintほどルールが充実していない（対応表）
-
eslint-plugin-importの一部ルールは未対応 - エディタ拡張の設定変更が必要な場合がある
まとめ
18万行のモノレポをBiomeに移行した結果、Lintの実行時間が10倍速くなり、設定もシンプルになりました。そして何より、ESLint v9への移行より圧倒的に楽でした。
「移行大変そう」と思っている方、まずは小さいプロジェクトや新規プロジェクトで試してみてください。思ったよりあっさり移行できて、拍子抜けするかもしれません。
※ 本記事はBiome v2.3.11時点の情報です
Discussion