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を使用し、その他には従来のツールを使用するハイブリッドアプローチが最良の戦略かもしれません。

よくある質問