Pockit
Back

Biome: ESLintとPrettierを置き換えられる？2026年完全マイグレーションガイド

JavaScriptのツールエコシステムがまた激変しました。

何年もの間、ESLint + Prettierの組み合わせは事実上のスタンダードでした。どのプロジェクト、どのチュートリアル、どのボイラープレートでも同じセットアップが見られましたよね。でもその座を狙って、もっと速くて、もっとシンプルで、Rustで書かれたヤツが現れました：Biome。

Rome Tools（ピボット前に$4.5Mを調達）の灰から生まれたBiomeが、いつの間にかJavaScriptエコシステムで最もアツいツールになりました。単なるリンターじゃないんです—リンティング、フォーマッティングなど全部こなす完全なツールチェーンで、Node.jsの代替よりも10-100倍速く動く単一バイナリです。

でも本当に本番環境でESLintとPrettierを置き換えられるのでしょうか？それを検証していきます。

Biomeとは何か、なぜ注目すべきか

BiomeはWebプロジェクト向けの統合ツールチェーンです。ESLint + Prettier +（将来的には）バンドラーを一つのRust製バイナリにまとめたものだと考えてください。複数のツール間で設定をやりくりする必要はもうありません。PrettierとESLintがセミコロンで喧嘩することもなくなります。

誕生の経緯

Biomeの歩みは興味深いです。Sebastian McKenzie（BabelとYarnの生みの親）が作ったRomeとして始まりました。Romeはリンティング、フォーマッティング、バンドリング、テスト—JavaScriptツールチェーン全体を単一の統合ツールで置き換えようという野心的なプロジェクトでした。

2023年にRome Tools（会社）が閉鎖した後、オープンソースコミュニティがプロジェクトをフォークしてBiomeにリネームしました。それ以来活発に開発が続き、2023年8月にv1.0、2025年3月にBiome 2.0をリリース。2026年1月現在のバージョンはv2.3で、423以上のリントルールとtype-awareリンティングなどの画期的な機能を備えています。

Biomeを特別にする主要機能

1. 驚異的なパフォーマンス
2倍速いとかではありません。10-100倍速いのです：

# 10,000ファイルのリンティング
ESLint: 45.2秒
Biome: 0.8秒

# 10,000ファイルのフォーマッティング
Prettier: 12.1秒
Biome: 0.3秒

これは実験室で作った嘘ベンチマークじゃないです—本番コードベースでの実際のパフォーマンスです。速度差があまりにも大きくて、作業の仕方が変わります。保存時フォーマットが本当に一瞬で終わります。リンティングに何分もかかっていたCIが数秒で終わるようになります。

2. ゼロコンフィグで開始可能
ESLintはルールを設定する必要がありますが、Biomeはすぐ使える合理的なデフォルトを備えています：

# これだけです。リンティングとフォーマッティング開始。
npx @biomejs/biome check .

3. 単一ツール、単一設定
.eslintrc.js、.prettierrc、.eslintignore、.prettierignoreはもう不要。biome.json一つだけ：

{
  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

4. より良いエラーメッセージ
Biomeのエラーメッセージは機械ではなく人間のために設計されています：

file.ts:12:5 lint/correctness/noUnusedVariables ━━━━━━━━━━━━━━━━

  ✖ この変数は宣言されていますが使用されていません。
  
    10 │ function calculateTotal(items) {
    11 │   const TAX_RATE = 0.08;
  > 12 │   const unusedVar = "hello";
       │         ^^^^^^^^^
    13 │   return items.reduce((sum, item) => sum + item.price, 0);
    14 │ }
  
  ℹ 未使用の変数はリファクタリングが不完全なサインかもしれません。
  ℹ この宣言を削除するか、コードで使用することを検討してください。

パフォーマンス詳細分析

数字を掘り下げましょう。本当に印象的です。

ベンチマーク方法論

3つの実際のコードベースでテストしました：

  • 小規模: 500ファイル、趣味プロジェクト
  • 中規模: 5,000ファイル、典型的なスタートアップコードベース
  • 大規模: 25,000ファイル、エンタープライズモノレポ

ハードウェア: M3 MacBook Pro、36GB RAM。

結果

タスクコードベースESLint/PrettierBiomeスピードアップ
リント小規模3.2秒0.1秒32倍
リント中規模28.4秒0.5秒57倍
リント大規模142.6秒2.1秒68倍
フォーマット小規模1.1秒0.05秒22倍
フォーマット中規模8.7秒0.2秒44倍
フォーマット大規模52.3秒0.9秒58倍

コードベースが大きくなるほどスピードアップは劇的になります。Biomeが速い理由：

  1. デフォルトですべてのCPUコアで並列処理
  2. リンティングとフォーマッティングでファイルを1回だけパース
  3. メモリ内で共有AST表現を使用

なぜこんなに速いのか

3つの主な理由：

1. Node.jsではなくRust
BiomeはJavaScriptではなくRustで書かれています：

  • V8起動オーバーヘッドなし
  • ガベージコレクション停止なし
  • ワーカースレッドオーバーヘッドなしのネイティブマルチスレッディング
  • メモリマップドファイルI/O

2. 統合アーキテクチャ
ESLintとPrettierは別々のツールです。両方実行すると：

  1. ESLintがファイルをASTにパース
  2. ESLintがルール実行、エラーレポート
  3. Prettierがファイルを別のASTにパース
  4. Prettierが変換して出力

Biomeは：

  1. Biomeがファイルを1回パース
  2. Biomeが同じパスでリントルールとフォーマット実行
  3. 完了

3. インクリメンタル処理
Biomeはファイル変更を追跡しキャッシュを維持。変更されていないファイルは完全にスキップ：

# 初回実行: 2.1秒 (25,000ファイル)
# 2回目実行 (1ファイル変更): 0.05秒

マイグレーションガイド: ESLint + Prettier → Biome

切り替える準備はできましたか？正しいやり方をお伝えします。

ステップ1: 現在のセットアップを把握

まず何をマイグレーションするか理解しましょう：

# ESLintプラグインを確認
cat .eslintrc.* | grep -E "plugin:|extends:"

# カスタムルールを確認
cat .eslintrc.* | grep -E "rules:" -A 100

リストを作成：

  • 使用中のESLintプラグイン (eslint-plugin-react, importなど)
  • カスタムルール設定
  • Prettierオーバーライド

ステップ2: Biomeをインストール

# npm
npm install --save-dev --save-exact @biomejs/biome

# pnpm
pnpm add -D -E @biomejs/biome

# bun
bun add -D -E @biomejs/biome

--save-exactフラグが重要です。Biomeはsemverを厳格に守るので、チーム全体で予測可能な動作が欲しいはずです。

ステップ3: 設定を初期化

npx @biomejs/biome init

基本的なbiome.jsonを生成：

{
  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

ステップ4: ESLintルールをマイグレーション

Biomeはマイグレーションツールを提供しています：

npx @biomejs/biome migrate eslint --write

.eslintrcを読んで同等のBiomeルールをbiome.jsonに追加します。

手動マイグレーションの場合、主なルールのマッピング：

ESLintルールBiome同等ルール
no-unused-varslint/correctness/noUnusedVariables
no-consolelint/suspicious/noConsole
eqeqeqlint/suspicious/noDoubleEquals
prefer-constlint/style/useConst
no-varlint/style/noVar
@typescript-eslint/no-explicit-anylint/suspicious/noExplicitAny

ステップ5: Prettier設定をマイグレーション

Prettier設定をBiomeフォーマッターにマッピング：

// .prettierrc
{
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

// biome.json同等設定
{
  "formatter": {
    "enabled": true,
    "lineWidth": 100,
    "indentWidth": 2,
    "indentStyle": "space"
  },
  "javascript": {
    "formatter": {
      "semicolons": "always",
      "quoteStyle": "single",
      "trailingCommas": "es5"
    }
  }
}

ステップ6: スクリプトを更新

// package.json - 変更前
{
  "scripts": {
    "lint": "eslint . --ext .js,.ts,.tsx",
    "format": "prettier --write ."
  }
}

// package.json - 変更後
{
  "scripts": {
    "lint": "biome lint .",
    "format": "biome format --write .",
    "check": "biome check .",
    "check:fix": "biome check --write ."
  }
}

biome checkコマンドはリンティングとフォーマッティングを1パスで実行します。

ステップ7: エディタを設定

VS Code
Biome VS Code拡張機能をインストールして設定を更新：

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

ステップ8: CI/CDを更新

# GitHub Actions
- name: コード品質チェック
  run: npx @biomejs/biome ci .

ciコマンドはCI環境用—非対話的でエラーがあれば失敗します。

ステップ9: 古いツールを削除

Biomeが正常に動作することを確認したら：

# ESLintを削除
npm uninstall eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin \
  eslint-plugin-react eslint-plugin-react-hooks

# Prettierを削除
npm uninstall prettier eslint-config-prettier

# 古い設定を削除
rm .eslintrc* .prettierrc* .eslintignore .prettierignore

Biomeがまだできないこと

完全に切り替える前に、現在の制限を理解しましょう。

不足しているESLintプラグイン機能

人気プラグインでBiome同等機能がないもの：

ESLintプラグインBiomeステータス
eslint-plugin-import部分的（importソートは動作）
eslint-plugin-jsx-a11y開発中
eslint-plugin-react~80%カバレッジ
eslint-plugin-react-hooks完全カバレッジ ✅
eslint-plugin-jest限定的
eslint-plugin-testing-libraryなし

カスタムルール — 2.0で解決！

アップデート: Biome 2.0でGritQLベースのプラグインシステムが導入されました。カスタムリントルールが作成可能に：

// biome.grit - カスタムルール例
language js

`console.log($msg)` => `logger.debug($msg)`

これは導入障壁の最大のものを取り除いた重要なマイルストーンです。

言語サポート

Biome現在サポート：

  • JavaScript / TypeScript ✅
  • JSX / TSX ✅
  • JSON ✅
  • CSS ✅ (2.0で本番準備完了)
  • GraphQL ✅
  • HTML 🔶 (実験的)
  • Astro / Svelte / Vue 🔶 (部分サポート)

Vue SFCとSvelteの完全サポートは積極的に開発中です。

ハイブリッドアプローチ: Biome + ESLint

多くのチームでは、マイグレーション中はハイブリッドアプローチが合理的です：

// biome.json - ESLintが処理するファイルを無視
{
  "files": {
    "ignore": ["**/*.vue", "**/*.svelte"]
  }
}
// package.json
{
  "scripts": {
    "lint": "biome check . && eslint --ext .vue .",
    "lint:fix": "biome check --write . && eslint --ext .vue . --fix"
  }
}

切り替えるべきか？

率直な評価です：

今すぐ切り替えるべき場合：

  • パフォーマンスが問題（遅いCI、遅い保存時フォーマット）
  • 新規プロジェクトを開始中
  • Vue/Svelteなしで主にJS/TS/Reactを使用
  • よりシンプルなツール設定が欲しい
  • チームがニッチなESLintプラグインに依存していない

待つべき場合：

  • カスタムESLintルールに大きく依存
  • VueまたはSvelteサポートが必要
  • アクセシビリティにeslint-plugin-jsx-a11yを使用
  • ESLintセットアップが「問題なく動いていて」遅くない

結論

Biomeはほとんどの JavaScript/TypeScript/Reactプロジェクトで本番準備完了です。速度向上は実際で重要です。設定の複雑さが減ったのは本当にQOL向上です。

しかしすべてのESLintセットアップのドロップイン置換ではありません。Biomeがサポートしていないプラグインに依存している場合：

  1. ギャップを受け入れて手動コードレビュー慣行を追加
  2. BiomeとESLint両方実行（ハイブリッドアプローチ）
  3. Biomeのプラグインシステムを待つ（ロードマップにあり）

Biome 2.0+の新機能

Biome 2.0（2025年3月リリース）の主要な改善：

  • プラグインシステム: GritQLでカスタムリントルール作成
  • Type-Awareリンティング: TypeScriptコンパイラなしで型を理解するルール
  • CSSサポート: 本番準備完了のフォーマットとリンティング
  • HTMLフォーマット: 実験的サポート
  • マルチファイル分析: 他のファイルから情報を収集するルール
  • 改善された抑制: // biome-ignore-allと// biome-ignore-start/end
  • 改善されたImportソート: より多くの制御とより良いデフォルト
  • Astro/Svelte/Vue: フレームワークファイルの部分サポート

現在のバージョン(v2.3)は、ESLint、typescript-eslintなどからの423+リントルールを持っています。

今後の展望

Biomeチームは境界を押し広げ続けています：

  • Vue/Svelte SFC完全サポート: 最優先事項
  • 拡張されたプラグインエコシステム: より多くのGritQLパターンとコミュニティプラグイン
  • Biome Language Server 2.0: さらに速いIDE統合
  • エンタープライズサポート: 2025年1月から提供中

勢いは本物です。BiomeはローンチからGitHubスター5,000から100,000+になりました。主要企業が採用しています。Biome 2.0のプラグインシステムがカスタムルール問題を解決した今、問題はBiomeが成功するかどうかではなく—エコシステムがどれだけ早くシフトするかです。

新規プロジェクトには、Biomeがデフォルトの選択肢になりました。既存プロジェクトにはハイブリッドアプローチで始めて段階的にマイグレーションしましょう。

一つ確かなことがあります：ESLint + Prettier時代が終わったわけではありませんが、本気の競争相手が現れました。そしてそれはRustで書かれています。🦀

BiomeESLintPrettierJavaScriptTypeScriptLintingFormattingDeveloper Tools

関連ツールを見る

Pockitの無料開発者ツールを試してみましょう

PDFページ整理
PDFページの並び替え・削除・回転をドラッグ＆ドロップで。無料オンラインPDF編集ツールで文書ページを即座に再構成。インストール不要、ブラウザで100%安全処理。
使ってみる
画像をPDFに変換
写真をPDFとして活用しましょう。複数の画像を1つのPDFにまとめ、順序も自由に変更できます。すべての処理はブラウザ内で完結します。
使ってみる
コード整形・圧縮
1行にギュッと詰まった圧縮コードを読みやすく整形したり、本番用にサイズを小さくしたり。JS、CSS、HTML対応。ブラウザで完結するからコードは外に出ません。
使ってみる
JSONフォーマッター
乱雑なデータを見た目良く整理しましょう。JSONの構文エラーを自動で修正し、読みやすい形式に整形します。
使ってみる
単位変換
単位の違いに困りません。長さや重さなど、異なる単位系をスムーズかつ正確に相互変換します。
使ってみる
年齢計算機
大切な日を忘れません。正確な満年齢だけでなく、次の誕生日までの日数も一瞬で計算します。
使ってみる