Biome: モダンフロントエンドプロジェクトのためのオールインワンツールチェーン

フロントエンド開発者なら、コード品質を管理するために複数のツールを扱う苦労をご存知でしょう。リンティングにはESLint、フォーマッティングにはPrettier、そして特定のフレームワークや機能のために追加のプラグインが必要になることもあります。各ツールには独自の設定が必要で、他のツールと競合する可能性があり、開発ワークフローを遅くしてしまいます。

Biomeは異なるアプローチを提供します：複数のツールを単一のソリューションで置き換える統合された高性能ツールチェーンです。Rustで構築され、速度を重視して設計されたこのbiome js linterは、フォーマッティング、リンティング、インポート整理を一つの統合されたパッケージに組み合わせています。

この記事では、Biomeがモダンフロントエンドプロジェクトにとって魅力的な理由、既存ツールとの比較、そして本番ワークフローに導入する準備ができているかどうかを探ります。

Biomeとは何か、なぜ重要なのか

Biomeは、現在は終了したRomeプロジェクトのフォークとして始まったWeb開発用の高速で統合されたツールチェーンです。3つの主要機能を提供します：

• コードフォーマッティング（Prettierに類似）
• リンティング（ESLintに類似）
• インポート整理（インポートを自動的にソートしてグループ化）

主な違いは、パフォーマンスとシンプルさです。マルチスレッドサポートを持つRustで書かれたBiomeは、最小限の設定でJavaScriptベースの代替ツールよりも大幅に高速にファイルを処理します。

パフォーマンスの優位性

BiomeのRustベースの基盤は、測定可能な速度向上を提供します：

• Prettierより25倍高速なフォーマッティング
• ESLintより15倍高速なリンティング
• 大規模コードベースでのマルチスレッド処理
• 開発時のほぼ瞬時のフィードバック

これらのパフォーマンス向上は、従来のツールが開発やCI/CDプロセスで顕著な遅延を生じさせる大規模プロジェクトで特に顕著になります。

BiomeとESLint、Prettierの比較

フォーマッティング：Biome vs Prettier

Biomeのフォーマッターは、Prettierと大部分で互換性のある出力を生成し、チームが既に期待している馴染みのあるフォーマッティングパターンを維持します。主な違い：

利点：

• 劇的に高速な処理
• 組み込みのインポート整理
• リンティングとの統合設定

制限：

• 限定的な言語サポート（HTML、Markdown、SCSSなし）
• Vue、Astro、Svelteの部分的サポート
• カスタマイズオプションが少ない

リンティング：Biome vs ESLint

biome js linterには、ESLintや他の人気リンターからインスピレーションを得たルールが含まれており、論理的なカテゴリーに整理されています：

{
  "linter": {
    "rules": {
      "correctness": {
        "noUnusedVariables": "error"
      },
      "style": {
        "useConst": "warn"
      },
      "security": {
        "recommended": true
      },
      "a11y": {
        "recommended": true
      }
    }
  }
}

利点：

• より高速な分析とエラー報告
• 明確で実行可能なエラーメッセージ
• 組み込みのセキュリティとアクセシビリティルール
• 安全vs非安全修正の分類

制限：

• ESLintと比較して小さなルールエコシステム
• JSON専用設定（JavaScriptの設定ファイルなし）
• 限定的なプラグインシステム

Biomeの始め方

インストールとセットアップ

Biomeを開発依存関係としてインストール：

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

--save-exactフラグは、特定のバージョンに固定することで、チームメンバー間での一貫した動作を保証します。

プロジェクトでBiomeを初期化：

npx biome init

これにより、適切なデフォルト設定を持つbiome.json設定ファイルが作成されます：

{
  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "tab",
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "organizeImports": {
    "enabled": true
  }
}

基本コマンド

コードのフォーマット：

npx biome format --write ./src

コードのリント：

npx biome lint ./src

フォーマッティングとリンティングの両方を実行：

npx biome check --write ./src

プロジェクト用のBiome設定

重要な設定オプション

ほとんどのプロジェクトでは、以下の主要設定をカスタマイズしたいでしょう：

{
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingComma": "es5",
      "semicolons": "always"
    }
  },
  "files": {
    "ignore": ["dist/**", "build/**", "*.min.js"]
  }
}

既存ツールからの移行

Biomeには既存の設定を移行するためのマイグレーションコマンドが含まれています：

# ESLintから移行
npx biome migrate eslint --write

# Prettierから移行
npx biome migrate prettier --write

これらのコマンドは既存の設定ファイルを読み取り、互換性のある設定をBiomeの形式に変換します。

IDE統合とワークフロー

Visual Studio Code

公式のBiome拡張機能をインストールし、settings.jsonで設定：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit"
  }
}

Gitフックとci/CD

Huskyを使用してプリコミットフックを設定：

{
  "scripts": {
    "lint:staged": "biome check --staged"
  }
}

GitHub Actionsの場合、公式のセットアップアクションを使用：

name: Code Quality
on: [push, pull_request]
jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: biomejs/setup-biome@v2
        with:
          version: latest
      - run: biome ci .

言語とフレームワークサポート

完全サポート

• JavaScript（ES5+）
• TypeScript
• JSX/TSX
• JSON/JSONC
• CSS（基本サポート）

部分サポート

• Vue（テンプレート構文の制限）
• Svelte（コンポーネント固有の問題）
• Astro（混合コンテンツの課題）

未サポート

• HTML
• Markdown
• SCSS/Sass
• YAML

この限定的な言語サポートは、多様なファイルタイプを扱うチームにとってBiomeの最大の制約です。

Biomeを選ぶべき時

理想的な使用例

Biomeが適している場合：

• TypeScript/JavaScript中心のプロジェクト
• パフォーマンスを優先するチーム
• レガシーツールのない新しいプロジェクト
• 一貫したファイルタイプを持つモノレポ
• 簡素化された設定を求めるプロジェクト

代替案を検討すべき場合

ESLint/Prettierを使い続けるべき場合：

• サポートされていないファイルタイプを多用している
• 特定のESLintプラグインに依存している
• 複雑で動的な設定が必要
• レガシーコードベースで作業している

実際のプロジェクトでのパフォーマンス影響

コミュニティベンチマークと実際の使用状況に基づく：

• 小規模プロジェクト（< 1000ファイル）： 開発者体験の違いは最小限
• 中規模プロジェクト（1000-10000ファイル）： 保存時フォーマッティングの顕著な改善
• 大規模プロジェクト（> 10000ファイル）： 大幅なCI/CD時間短縮と高速な開発フィードバック

パフォーマンスの恩恵は、プロジェクトサイズが大きくなるにつれてより顕著になり、大規模アプリケーションでBiomeが特に魅力的になります。

結論

Biomeは、リンティングとフォーマッティングを単一の高性能ソリューションに統合することで、フロントエンドツールの大きな前進を表しています。その速度の優位性と簡素化された設定により、複数のツールの管理に疲れたチームにとって魅力的です。

しかし、限定的な言語サポートと小さなエコシステムは、ESLintやPrettierの万能な代替品にはまだなっていないことを意味します。Biomeを採用する決定は、プロジェクトの特定のニーズとファイルタイプの要件によります。

TypeScript/JavaScript中心のプロジェクトにとって、Biomeはより清潔で高速な開発体験を提供します。多様なファイルタイプを持つプロジェクトの場合、サポートされているファイルにBiomeを使用し、その他には従来のツールを使用するハイブリッドアプローチが最良の戦略かもしれません。

よくある質問

BiomeをESLintやPrettierと併用できますか？

はい、サポートされているファイルタイプにBiomeを使用し、サポートされていない形式にはESLint/Prettierを維持することができます。IDEとスクリプトを設定して、異なるファイル拡張子に対して異なるツールを使用してください。

Biomeは既存のコードスタイルを壊しますか？

Biomeの出力は大部分でPrettierと互換性がありますが、微妙な違いがあります。コミットする前に、まずテストブランチでBiomeを実行し、変更を確認してチームの基準を満たしていることを確認してください。

Biomeは本番使用に十分安定していますか？

Biomeは積極的にメンテナンスされており、多くの本番プロジェクトで使用されています。しかし、より小さなエコシステムと新しいコードベースは、徹底的にテストし、問題に対するフォールバック計画を用意すべきことを意味します。

BiomeはESLintプラグインのようなカスタムルールをサポートしていますか？

BiomeはESLintと比較して拡張性が限定的です。多くの一般的なルールが含まれていますが、カスタムルールやサードパーティプラグインを簡単に追加することはできません。ニーズがカバーされていることを確認するために、ルールドキュメントを確認してください。

既存のESLint/Prettier設定はどうなりますか？

Biomeのmigrateコマンドは多くの設定を自動的に移行できますが、一部の設定は直接変換されない場合があります。移行後、サポートされていないルールや設定は手動で調整する必要があります。