AI

Biomeの使い方完全ガイド【インストールから応用まで】

Biomeの使い方完全ガイド【インストールから応用まで】

Web開発の現場では、コードの品質を保つことが非常に重要です。しかし、そこには多くの課題が潜んでいます。

例えば、複数の開発者が異なるフォーマットでコードを書いたとします。インデントのスタイル、引用符の種類、改行の有無。これらは小さな違いですが、コードレビューでは無駄な指摘が増え、本質的な議論の妨げとなります。

また、ESLintとPrettierを併用しているプロジェクトでは、設定の衝突に悩まされることも少なくありません。どちらのルールを優先すべきか、どの設定を無効化すべきか、その調整に多くの時間が費やされます。さらに、それぞれのツールが独立して動作するため、実行速度が遅くなるというパフォーマンスの問題も発生しがちです。

もし、これらの問題を解決し、よりシンプルで高速な開発体験を提供できるツールがあったとしたらどうでしょうか？

今回ご紹介する「Biome」は、まさにそのような開発者の悩みに応えるために誕生しました。LinterとFormatterの機能を一体化させ、設定の複雑さを解消し、圧倒的な速度でコードの品質を向上させます。

Biomeを導入すれば、開発者はコードの品質管理に煩わされることなく、本質的な機能開発に集中できます。チーム全体の生産性は向上し、よりクリーンで保守しやすいコードベースを維持できるでしょう。

Biomeとは

Biomeは、JavaScript、TypeScript、JSON、HTML、CSSなどのWeb関連言語に対応するモダンなツールチェーンです。わずか30秒でその概要を理解できます。

主な機能はLinterとFormatterの一体化です。これにより、ESLintとPrettierが抱えていた設定の衝突やパフォーマンスの問題を根本から解決します。

Biomeは、かつて大きな注目を集めたRome Toolchainの理念を引き継いでいます。Romeは、Linter、Formatter、Bundler、Compiler、Testerなど、フロントエンド開発に必要な機能をすべて一つのツールに統合することを目指していました。

Biomeはその中でも特にLinterとFormatterに焦点を当て、高速性とシンプルな設計を追求しています。開発者は単一のツールで、コードのスタイル統一と潜在的なバグの検出を同時に行えるようになります。

インストール方法

BiomeはNode.jsプロジェクトに簡単に導入できます。OSを問わず、同じコマンドでインストール可能です。

新規プロジェクトにBiomeを導入する場合

新しいプロジェクトを始める際にBiomeを導入するには、以下のコマンドを実行します。これにより、Biomeの基本的な設定ファイルも自動で生成されます。

npm create biome@latest

または

yarn create biome@latest

または

pnpm create biome@latest

既存プロジェクトにBiomeを導入する場合

既存のプロジェクトにBiomeを追加するには、開発依存としてインストールします。

npm install --save-dev @biomejs/biome

または

yarn add --dev @biomejs/biome

または

pnpm add --save-dev @biomejs/biome

インストール後、プロジェクトのルートディレクトリで以下のコマンドを実行し、設定ファイルを生成します。

npx biome init

このコマンドはbiome.jsonというファイルを作成します。このファイルでBiomeの動作を細かく設定できます。

基本的な使い方

Biomeを使い始めるのに必要なコマンドはごくわずかです。ここでは、最低限知っておくべき3〜5個のコマンドを紹介します。

1. 設定ファイルの生成: biome init

これは前述の通り、プロジェクトのルートにbiome.jsonを生成するコマンドです。

npx biome init

これにより、デフォルトの設定が記述されたbiome.jsonが作成されます。

// biome.json (生成されるファイルの例)
{
  "$schema": "./node_modules/@biomejs/biome/schemas/1.8.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "tab", // または "space"
    "indentWidth": 2, // indentStyleがspaceの場合
    "lineWidth": 80
  }
}

2. コードのフォーマット: biome format

プロジェクト内のコードを指定されたスタイルに自動で整形します。

npx biome format .

.は現在のディレクトリ全体を対象とします。特定のファイルやディレクトリを指定することも可能です。

npx biome format src/index.ts

このコマンドは、整形後の内容を標準出力に出力します。ファイルを直接修正するには、--writeオプションを使用します。

npx biome format --write .

3. コードのリンティング: biome lint

潜在的なバグやコードスタイルの問題点を検出します。

npx biome lint .

formatコマンドと同様に、特定のファイルやディレクトリを指定できます。

npx biome lint src/components

リンティングのエラーを自動で修正するには、--applyオプションを使用します。

npx biome lint --apply .

4. フォーマットとリンティングをまとめてチェック: biome check

formatとlintの機能を統合したコマンドです。コードの整形と問題検出を一度に行えます。

npx biome check .

このコマンドは、フォーマットの不一致とリンティングのエラーの両方を報告します。修正するには--applyオプションを追加します。

npx biome check --apply .

このオプションは、フォーマットの修正と、一部のリンティングルールの自動修正を実行します。

5. CI/CD環境でのチェック: biome ci

継続的インテグレーション（CI）環境で利用することを想定したコマンドです。これはbiome checkと似ていますが、コードを変更せずに、エラーのみを検出します。

npx biome ci .

もしフォーマットの不一致やリンティングエラーがあれば、このコマンドは非ゼロの終了コードを返します。これにより、CIパイプラインでビルドを失敗させることができます。

便利な使い方・応用例 3選

Biomeは単体でも強力ですが、他のツールと組み合わせることで開発ワークフローをさらに効率化できます。

応用例1: VS Code拡張機能との連携

多くの開発者が利用するVS Codeでは、Biomeの公式拡張機能が提供されています。これを利用することで、保存時の自動フォーマットやリアルタイムでのエラー表示が可能になります。

1. 拡張機能のインストール VS CodeのExtensionsビューで「Biome」を検索し、インストールします。

2. VS Codeの設定settings.jsonに以下の設定を追加し、JavaScript/TypeScriptファイルのデフォルトフォーマッターとしてBiomeを指定します。

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

これで、ファイルを保存するたびにBiomeがコードを自動でフォーマットし、リンティングエラーを表示するようになります。

応用例2: Gitフックによるコミット前チェック

コミット前にコードの品質をチェックすることで、不良なコードがリポジトリに混入するのを防げます。huskyとlint-stagedを組み合わせることで、ステージングされたファイルのみを対象にBiomeを実行できます。

1. パッケージのインストール

npm install --save-dev husky lint-staged

2. huskyのセットアップ

npx husky init

これにより.huskyディレクトリが作成されます。

3. pre-commitフックの追加.husky/pre-commitファイルを開き、以下の内容を記述します。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

4. package.jsonにlint-stagedの設定を追加package.jsonに以下の設定を追加します。

{
  "name": "my-project",
  "version": "1.0.0",
  // ...
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,html,css}": "biome check --apply"
  },
  "scripts": {
    "prepare": "husky"
  }
}

この設定により、コミット時にステージングされているJavaScript、TypeScript、JSONなどのファイルに対してbiome check --applyが実行されます。これにより、コミットされるコードは常にBiomeのルールに準拠するようになります。

応用例3: CI/CDパイプラインへの組み込み

継続的インテグレーション（CI）環境にBiomeを組み込むことで、チーム全体のコード品質を継続的に保証できます。GitHub Actionsを例に、CIパイプラインでの設定方法を紹介します。

1. GitHub Actionsワークフローの作成.github/workflows/main.ymlのようなファイルを作成します。

name: CI

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm ci

      - name: Run Biome check
        run: npx biome ci .

このワークフローは、mainブランチへのプッシュまたはプルリクエスト時に実行されます。npx biome ci .コマンドが実行され、もしコードにBiomeのルールに違反する箇所があれば、CIが失敗します。これにより、マージ前に問題のあるコードを検出できます。

他ツールとの組み合わせ

Biomeは単体で強力ですが、他の開発ツールと組み合わせることで、より堅牢な開発環境を構築できます。

  • エディタ (VS Code): 前述の通り、公式拡張機能との連携は必須級です。リアルタイムでのフィードバックと自動修正により、開発効率が大幅に向上します。
  • バージョン管理システム (Git): huskyやlint-stagedとの組み合わせで、コミット前にコード品質を保証できます。これにより、リポジトリに不良なコードが混入するのを防ぎます。
  • ビルドツール / フレームワーク (Vite, Next.js, Nuxt.jsなど): Biomeはこれらのツールとは独立して動作します。特別な設定は不要で、プロジェクト内のJavaScript/TypeScript/JSONなどを対象にチェックとフォーマットを行います。
  • テストフレームワーク (Jest, Vitestなど): テストコードもアプリケーションコードと同様に、Biomeでフォーマットおよびリンティングの対象にできます。これにより、テストコードの可読性と保守性も向上します。
  • パッケージマネージャー (npm, yarn, pnpm): Biome自体がNode.jsのパッケージとして提供されるため、これらのパッケージマネージャーを通じてインストール・管理します。

これらのツールはそれぞれ異なる役割を持ちますが、Biomeはコードの品質管理という共通の目的で連携し、開発ワークフロー全体をスムーズにします。

よくある設定・カスタマイズ

biome.jsonファイルは、Biomeの動作を細かく制御するための中心的な設定ファイルです。ここでは、よく利用される設定項目について説明します。

1. 無視するファイル・ディレクトリの設定

files.ignoreプロパティを使って、Biomeがチェック・フォーマットしないファイルやディレクトリを指定できます。これは.gitignoreと同様の形式で記述します。

// biome.json
{
  // ...
  "files": {
    "ignore": [
      "node_modules/",
      "dist/",
      "build/",
      "coverage/",
      "*.min.js"
    ]
  },
  // ...
}

2. フォーマットルールの調整

formatterセクションでは、コードの整形ルールをカスタマイズできます。

// biome.json
{
  // ...
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space", // または "tab"
    "indentWidth": 2,       // indentStyleが "space" の場合
    "lineWidth": 100,       // 1行の最大文字数
    "quoteStyle": "single", // "single" または "double"
    "jsxQuoteStyle": "double" // JSX内の引用符スタイル
  },
  // ...
}
  • indentStyle: インデントの種類 ("space"または"tab")
  • indentWidth: スペースインデントの場合の幅
  • lineWidth: 1行の最大文字数。これを超えると改行されます。
  • quoteStyle: 文字列リテラルの引用符スタイル ("または')
  • jsxQuoteStyle: JSX属性内の引用符スタイル

3. リンティングルールのカスタマイズ

linterセクションでは、リンティングルールの有効/無効や厳格度（severity）を設定できます。

// biome.json
{
  // ...
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true, // Biomeが推奨するルールセットを有効にする
      // 特定のルールを無効化する場合
      "a11y": {
        "noSvgWithoutTitle": "off"
      },
      // 特定のルールの厳格度を変更する場合
      "style": {
        "noNonNullAssertion": "error" // "warn", "error", "off"
      },
      // JavaScript固有のルールを調整する場合
      "javascript": {
        "noConsole": "warn" // console.logを警告にする
      }
    }
  },
  // ...
}
  • recommended: true: Biomeが推奨するすべてのルールを有効にします。
  • 個別のルールは、カテゴリ（a11y, style, javascriptなど）ごとに設定できます。
  • "off": ルールを無効にします。
  • "warn": 警告として表示します（CIでは失敗しないことが多い）。
  • "error": エラーとして表示します（CIで失敗する）。

4. JavaScript/TypeScript固有の設定

javascriptセクションでは、JavaScriptやTypeScriptの解析に関する設定を行えます。

// biome.json
{
  // ...
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "double"
    },
    "parser": {
      "unsafeParameterDecorators": true // TypeScriptの実験的デコレータを許可する場合
    },
    "globals": [ // グローバル変数を定義 (ESLintのglobalsに相当)
      "myGlobalVar",
      "jQuery"
    ]
  },
  // ...
}
  • formatter: JavaScript/TypeScriptファイルに特化したフォーマットルールを設定できます。
  • parser.unsafeParameterDecorators: TypeScriptのデコレーターに関する設定です。
  • globals: コード内で定義されていないグローバル変数をBiomeが認識するように指定します。これにより、noUndeclaredVariablesのようなリンティングルールが誤ってエラーを報告するのを防ぎます。

これらの設定をbiome.jsonに記述することで、プロジェクトの要件に合わせてBiomeの動作を柔軟に調整できます。

今日からできる実行プラン

Biomeの導入は非常に簡単です。以下の3つのステップで、今日からあなたのプロジェクトにBiomeを取り入れられます。

ステップ1: プロジェクトへのBiome導入

まずは、あなたのプロジェクトにBiomeをインストールし、基本的な設定ファイルを作成します。

# 既存プロジェクトの場合
npm install --save-dev @biomejs/biome
npx biome init

# 新規プロジェクトの場合
npm create biome@latest

biome initコマンドを実行すると、biome.jsonファイルが生成されます。このファイルがBiomeのすべての設定を管理します。

ステップ2: VS Code拡張機能の導入と設定

開発体験を最大限に高めるために、VS CodeのBiome拡張機能をインストールしましょう。

  1. VS Codeの拡張機能マーケットプレイスで「Biome」を検索し、インストールします。

  2. VS Codeのsettings.jsonに以下の設定を追加します。

    // .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
  // 他のファイルタイプも必要に応じて追加
}

これで、ファイルを保存するたびに自動でフォーマットされ、リアルタイムでリンティングエラーが表示されるようになります。

ステップ3: 既存コードへの適用とCI/CDの検討

既存のコードベースにBiomeのルールを適用し、継続的な品質管理の仕組みを構築します。

  1. 既存コードの一括修正: プロジェクト全体のコードをBiomeのルールに従って一括で修正します。

    npx biome check --apply .

    このコマンドは、フォーマットの修正と、自動で修正可能なリンティングエラーを適用します。

  2. package.jsonのスクリプト追加: 日々の開発で使いやすいように、package.jsonにスクリプトを追加します。

    // package.json
{
  "name": "my-project",
  // ...
  "scripts": {
    "format": "biome format --write .",
    "lint": "biome lint .",
    "check": "biome check . --apply",
    "ci:check": "biome ci ."
  },
  // ...
}

    これで、npm run formatやnpm run checkなどで簡単にBiomeを実行できます。

  3. CI/CDへの組み込み (任意): 前述の「応用例3」を参考に、GitHub ActionsなどのCI/CDパイプラインにnpm run ci:checkを組み込みます。これにより、コードがマージされる前に必ず品質チェックが行われるようになります。

Biomeは、シンプルさと高性能を両立した次世代のLinter + Formatterです。これらのステップを通じて、あなたの開発ワークフローをより効率的で楽しいものに変革できるでしょう。

参考文献

広告

-AI