0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@fd_ai_teacher

Biome.js導入で開発環境爆速化！ESLint/Prettier移行手順

0
Posted at

多くのエンジニアが開発環境のセットアップとCI/CDの速度に課題を感じています。特にJavaScript/TypeScriptプロジェクトでは、ESLintとPrettierの導入は必須ですが、それぞれの設定管理や実行速度の遅さが開発体験を損ねる要因となることがあります。

この記事では、Linter、Formatter、Bundler、Testerの機能を統合し、開発環境を爆速化するRust製ツールチェーン Biome.js の導入方法を解説します。既存のESLint/Prettierからの具体的な移行手順から、CI/CDへの組み込み方、そしてよくあるハマりどころとその解決策まで、実務で役立つ情報を提供します。この記事を読めば、あなたのプロジェクトの開発環境最適化と開発生産性向上への道筋が見えるでしょう。

Biome.jsとは？開発環境最適化の切り札

このセクションでは、Biome.jsがどのようなツールで、なぜ今注目されているのかを解説します。ESLintやPrettierとの比較を交えながら、そのメリットと特徴を理解しましょう。

Biome.jsは、JavaScript/TypeScriptプロジェクト向けのモダンなツールチェーンです。ESLintのようなリンター、Prettierのようなフォーマッター、さらにはバンドラーやテスターの機能まで統合することを目指しています。最大の特徴は、Rustで記述されていることによる圧倒的なパフォーマンスです。従来のJavaScriptベースのツールと比較して、約10倍から25倍高速に動作します。

Biome.jsの主な特徴

  • オールインワン: リンティング、フォーマット、診断を単一のツールで提供し、設定ファイルの管理を簡素化します。
  • 超高速: Rust製のため、大規模プロジェクトやCI/CDパイプラインでの実行時間が劇的に短縮されます。
  • 統一された設定: biome.json (または biome.jsonc) という単一の設定ファイルで、プロジェクト全体のコードスタイルと品質を管理できます。
  • 広範な言語サポート: JavaScript, TypeScript, JSX, TSX, JSON, JSONC, CSSをサポートしています。
  • 型認識リンティング: Biome v2.0以降、TypeScriptコンパイラに依存しない型認識リンティングルールが導入され、より高度なバグ検出が可能です。
  • 充実したルールセット: ESLintやTypeScript ESLintからインスパイアされた550以上のリンティングルールを提供しています。

Biome.jsの導入とESLint/Prettierからの移行手順

このセクションでは、実際にBiome.jsをプロジェクトに導入し、既存のESLintやPrettierの設定を移行する具体的な手順を解説します。

1. Biome.jsのインストール

まずはプロジェクトにBiome.jsをインストールします。バージョンを厳密に固定することで、チーム内やCI/CD環境での予期せぬ挙動を防ぎます。

# npmの場合
npm install --save-dev --save-exact @biomejs/biome

# pnpmの場合
pnpm add -D -E @biomejs/biome

# bunの場合
bun add -D -E @biomejs/biome

2. Biome.jsの設定ファイルの初期化

次に、biome.json設定ファイルを生成します。このファイルがBiome.jsのすべての設定を担います。

npx @biomejs/biome init

このコマンドを実行すると、プロジェクトのルートに biome.json ファイルが作成されます。

3. ESLint/Prettierからの移行

Biome.jsは、既存のESLintやPrettierの設定を読み込み、Biomeの設定に変換する便利な移行ツールを提供しています。これにより、手動での設定変換の手間を大幅に削減できます。

既存のESLint設定をBiomeに移行するには、以下のコマンドを使用します。

npx @biomejs/biome migrate eslint

Prettier設定を移行するには、以下のコマンドを使用します。

npx @biomejs/biome migrate prettier --write

--write オプションを付けることで、自動的に biome.json に変更が書き込まれます。

4. biome.json の設定例と主要オプション

biome.json は、フォーマットやリンティングの挙動を詳細に制御できる設定ファイルです。以下に一般的な設定例を示します。

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", // Biomeのバージョンに合わせてスキーマURLを更新
  "formatter": {
    "indentStyle": "space", // インデントスタイルをスペースに設定 (デフォルトは `tab`)
    "lineWidth": 100 // 1行の最大文字数を100に設定 (デフォルトは `80`)
  },
  "linter": {
    "enabled": true, // リンターを有効化
    "rules": {
      "recommended": true, // Biomeが推奨するルールをすべて有効化
      "style": {
        "useBlockStatements": "error", // ブロックスコープの利用を強制 (例: `if (true) return;` ではなく `if (true) { return; }`)
        "useThrowNewError": "error" // `throw new Error()` を強制 (デフォルトは "info")
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single", // JavaScriptファイルの引用符をシングルクォートに
      "jsxQuoteStyle": "double" // JSXファイルの引用符をダブルクォートに
    }
  },
  "files": {
    "include": ["src/**/*.js", "src/**/*.ts"], // 対象ファイルパターン
    "ignore": ["node_modules/", "dist/"] // 除外ファイルパターン
  }
}

この設定例では、インデントスタイル、行幅、引用符のスタイル、そして特定のリンティングルールをカスタマイズしています。$schema プロパティは、VS Codeなどのエディタで自動補完とバリデーションを有効にするために重要です。Biomeのバージョンに合わせて適切なスキーマURLを指定しましょう。

5. コードのフォーマットとリンティングの実行

Biome.jsを導入したら、実際にコードのフォーマットとリンティングを実行してみましょう。

  • コードのフォーマット（変更を適用）: 指定されたファイルのフォーマットルールを適用し、ファイルを上書きします。

    npx @biomejs/biome format --write <files>

  • コードのリンティング（変更を適用）: リンティングルールを適用し、自動修正可能な問題を修正します。

    npx @biomejs/biome lint --apply <files>

  • リンティングとフォーマットを同時に実行（変更を適用）: check コマンドはフォーマット、リンティング、インポートの整理を一度に実行する非常に便利なコマンドです。

    npx @biomejs/biome check --apply <files>

  • CI/CDでの利用（変更を適用せず、エラーがあれば終了コードを返す）: CI/CDパイプラインでは、コードがルールに従っているかを確認し、違反があればビルドを失敗させるべきです。ci コマンドがこれに最適です。

    npx @biomejs/biome ci ./src

    このコマンドは、指定されたパス内のファイルに対してフォーマットとリンティングを実行し、問題があれば終了コード1で終了します。

VS Code連携で開発体験をさらに向上

Biome.jsのVS Code拡張機能を導入することで、保存時の自動フォーマットやリンティング、コードアクションによる修正が利用でき、開発体験が大幅に向上します。

VS Code拡張機能のインストール

Visual Studio CodeのExtensionsビューで「Biome」と検索し、公式の拡張機能をインストールします。

VS Code設定例 (settings.json)

settings.jsonに以下の設定を追加することで、保存時にBiome.jsによる自動フォーマットとクイックフィックスが適用されるようになります。

{
  "editor.formatOnSave": true, // 保存時にフォーマットを有効化
  "editor.defaultFormatter": "biomejs.biome", // デフォルトフォーマッターをBiomeに設定
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit" // 保存時にBiomeのクイックフィックスを適用
  }
}

これにより、手動でコマンドを実行することなく、常にクリーンなコードを維持できるようになります。

よくあるエラー・ハマりどころと回避策

このセクションでは、Biome.js導入時や運用時によく発生する問題と、その解決策について解説します。

ESLintプラグインの互換性

Biome.jsは多くのESLintルールをカバーしていますが、eslint-plugin-cypress、eslint-plugin-storybook、eslint-plugin-securityなどの特定のESLintプラグインには直接対応していません。これは、Biomeがオールインワンツールとして設計されており、ESLintのような広範なプラグインエコシステムを持たないためです。

  • 回避策: 完全に移行できない場合は、Biomeをフォーマッターと基本的なリンターとして使用し、ESLintを特定のプラグインが必要なニッチなルールに限定して併用することを検討します。両者を共存させることで、Biomeのパフォーマンスメリットを享受しつつ、特定の要件を満たすことができます。

Prettierとのフォーマットの差異

Biome.jsはPrettierと97%の互換性がありますが、深くネストされたオブジェクト、複雑なテンプレートリテラル、珍しいコメント配置などのエッジケースでフォーマットの差異が生じる可能性があります。

  • 回避策: 移行後に大規模なコードベースでフォーマットの差異が発生した場合は、git blameの履歴を保持するために、手動で修正するか、段階的に導入することを検討します。まずはフォーマットの差異が少ないファイルから適用し、徐々に範囲を広げていくのが安全です。

設定ファイルの解決とモノレポでの運用

Biome.jsは、コマンドが実行されたディレクトリから親ディレクトリに向かって biome.json または biome.jsonc を検索します。モノレポなど、複数の設定ファイルがある場合に意図しない設定が適用されることがあります。

  • 回避策: 各プロジェクト/パッケージのルートに biome.json を配置し、必要に応じて extends プロパティを使用して共通設定を継承します。これにより、各パッケージで独立した設定を持ちつつ、共通のスタイルを維持できます。

グロブパターンの扱い

Biome.jsのCLIコマンドはグロブパターンを直接サポートしていません。シェルがグロブを展開するため、シェルによっては再帰的なグロブ (**) や代替 ({}) が正しく機能しない場合があります。

  • 回避策: files.include や files.ignore を biome.json で設定し、Biomeにファイル解決を任せるのが最も堅牢な方法です。CLIで直接指定する場合は、シェルが正しく展開できるシンプルなパターンを使用するか、find コマンドなどと組み合わせて使用することを検討します。

設計上のトレードオフとベストプラクティス

このセクションでは、Biome.jsを選択する際の設計上の考慮事項と、プロジェクトに導入する際のベストプラクティスについて解説します。

設計上のトレードオフ

  • オールインワン vs プラグインエコシステム: Biomeはリンティング、フォーマット、インポートの整理を単一ツールで提供することで、設定の複雑さを軽減し、パフォーマンスを向上させます。しかし、ESLintのような広範なプラグインエコシステムは持っていません。
    • 考慮点: 新しいプロジェクトや、TypeScript/JavaScriptが中心で特定のニッチなESLintプラグインに依存しないプロジェクトにはBiomeが最適です。既存のプロジェクトで多くのカスタムルールやプラグインを使用している場合は、移行のメリットとデメリットを慎重に評価する必要があります。
  • 速度 vs 機能網羅性: Rustで書かれたBiomeは非常に高速ですが、ESLintが提供する数千のルールや、Prettierがサポートするすべての言語（HTML, Markdown, SCSSなど）を網羅しているわけではありません。
    • 考慮点: パフォーマンスが最優先される大規模プロジェクトやCI/CDパイプラインではBiomeの恩恵が大きいです。特定の言語やフレームワークに特化した高度なリンティングが必要な場合は、Biomeの機能がニーズを満たしているか確認が必要です。
  • 厳格なオプション哲学: BiomeのフォーマッターはPrettierと同様に意見が強く、設定オプションは最小限に抑えられています。これにより、フォーマットに関する議論を減らし、コードの一貫性を保ちやすくなります。
    • 考慮点: チーム内でコードスタイルに関する合意形成が難しい場合や、一貫したコードベースを維持したい場合に有効です。特定のフォーマットスタイルに強いこだわりがある場合は、オプションの制限がトレードオフとなる可能性があります。

ベストプラクティス

  • 段階的な移行: 大規模な既存プロジェクトでは、一度にESLintとPrettierをBiomeに置き換えるのではなく、まずBiomeをフォーマッターとして導入し、徐々にリンティングルールを移行するなど、段階的なアプローチを検討します。これにより、変更によるリスクを最小限に抑えられます。
  • package.jsonでのバージョン固定: Biomeのバージョンはpackage.jsonで厳密に固定 (--save-exact オプションを使用) し、チームメンバー間やCI環境で常に同じバージョンのBiomeが使用されるようにします。これは、予期せぬ挙動や互換性の問題を避けるために非常に重要です。
  • CI/CDへの統合: Biomeの高速性を最大限に活用するため、CI/CDパイプラインにbiome ciコマンドを組み込み、コミットごとに自動でコード品質チェックを実行します。これにより、常に高品質なコードベースを維持し、早期に問題を検出できます。
  • エディタとの連携: VS Code拡張機能を導入し、保存時の自動フォーマットやリンティング、コードアクションによる修正を活用して開発体験を向上させます。これにより、開発者はコード品質を意識することなく、本質的な開発に集中できます。
  • biome.jsonの活用: プロジェクトのルートにbiome.jsonを配置し、チーム全体で共有される単一の真実のソースとして活用します。モノレポの場合は、各パッケージにbiome.jsonを配置し、extendsで共通設定を継承することで、柔軟性と一貫性を両立させます。

まとめ

この記事では、開発環境の爆速化と最適化を実現するBiome.jsの導入から、ESLint/Prettierからの移行手順、そしてCI/CDへの組み込み方までを解説しました。Biome.jsは、その圧倒的なパフォーマンスとオールインワンの機能により、コード品質管理と開発ワークフローを大きく改善する可能性を秘めています。

特に大規模なプロジェクトや、CI/CDの実行速度に課題を感じているチームにとって、Biome.jsは強力な選択肢となるでしょう。本記事で紹介した手順とベストプラクティスを参考に、ぜひあなたのプロジェクトにBiome.jsを導入し、開発生産性の向上を体感してください。

より詳細な情報や最新の機能については、Biome.jsの公式ドキュメントをご確認ください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?