Biome完全ガイド2025 - Rust製モダンリンター・フォーマッター

Biome（旧 Rome）は、JavaScript・TypeScriptエコシステムに革命をもたらす Rust製の高速ツールチェーンです。ESLint、Prettier、その他多くのツールを単一のバイナリで置き換え、開発体験を劇的に向上させます。

この記事で学べること

Biome の基本概念と高速化の仕組み
インストールから設定まで完全ガイド
ESLint・Prettierからの移行方法
CI/CD 統合とパフォーマンス最適化
大規模プロジェクトでの実践的な活用法

Biomeとは何か

革命的な統合ツールチェーン

Biome は、Web 開発に必要な複数のツールを 1 つに統合した画期的なソリューションです：

フォーマッター: Prettierとの 97%互換性
リンター: 325 以上のルール
インポート整理: 自動ソートと最適化
型チェック: TypeScript完全対応

なぜBiomeが必要か

従来の JavaScript開発環境では、複数のツールの組み合わせが必要でした：

従来ツールとBiomeの比較
ツール	目的	設定ファイル	実行時間
ESLint	コード品質チェック	.eslintrc	遅い
Prettier	コードフォーマット	.prettierrc	中程度
TypeScript	型チェック	tsconfig.json	遅い
Biome	全機能統合	biome.json	高速

インストールと環境構築

基本インストール

# npmでのインストール
npm install --save-dev --save-exact @biomejs/biome

# yarnでのインストール
yarn add --dev --exact @biomejs/biome

# pnpmでのインストール
pnpm add --save-dev --save-exact @biomejs/biome

# bunでのインストール
bun add --dev --exact @biomejs/biome

初期設定

# 設定ファイルの生成
npx @biomejs/biome init

生成される biome.json の基本構成：

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

基本的な使用方法

フォーマット機能

Biome のフォーマッターは、Prettierとの高い互換性を誇ります：

function HelloWorld({greeting="hello",greeted='"World"',silent=false,onMouseOver,}){
if(!greeting){return null};

// TODO: Don't use random in render
let num = Math.floor(Math.random()*1E+7).toString().replace(/.d+/ig,"");

return <div className='HelloWorld' title={`You are visitor number ${num}`} onMouseOver={onMouseOver}>
<strong>{greeting.slice(0,1).toUpperCase()+greeting.slice(1).toLowerCase()}</strong>
{greeting.endsWith(",") ? "" : <span style={{color:'grey'}}>", "</span>}
<em>{greeted}</em>
{(silent) ? "." : "!"}
</div>;
}

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/.d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        ""
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}

フォーマット前

function HelloWorld({greeting="hello",greeted='"World"',silent=false,onMouseOver,}){
if(!greeting){return null};

// TODO: Don't use random in render
let num = Math.floor(Math.random()*1E+7).toString().replace(/.d+/ig,"");

return <div className='HelloWorld' title={`You are visitor number ${num}`} onMouseOver={onMouseOver}>
<strong>{greeting.slice(0,1).toUpperCase()+greeting.slice(1).toLowerCase()}</strong>
{greeting.endsWith(",") ? "" : <span style={{color:'grey'}}>", "</span>}
<em>{greeted}</em>
{(silent) ? "." : "!"}
</div>;
}

フォーマット後

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/.d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        ""
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}

リンター機能

Biome は 325 以上のルールを提供し、詳細な診断情報を表示します：

# リント実行
npx @biomejs/biome lint ./src

# 自動修正可能な問題を修正
npx @biomejs/biome lint --write ./src

全機能統合実行

# フォーマット、リント、インポート整理を一括実行
npx @biomejs/biome check --write ./src

高度な設定とカスタマイズ

ルールの詳細設定

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": {
        "noBannedTypes": "error",
        "noUselessTypeConstraint": "error"
      },
      "correctness": {
        "noUnusedVariables": "error",
        "useExhaustiveDependencies": "warn"
      },
      "style": {
        "noNonNullAssertion": "off",
        "useImportType": "error"
      }
    }
  }
}

ファイル除外設定

{
  "files": {
    "ignore": [
      "node_modules",
      "dist",
      "coverage",
      "*.min.js"
    ]
  },
  "formatter": {
    "ignore": [
      "public/vendor/**"
    ]
  }
}

ESLint・Prettierからの移行

移行手順

Step 1

Biomeインストール

プロジェクトにBiomeを追加

Step 2

設定ファイル作成

biome.jsonで既存ルールを再現

Step 3

スクリプト更新

package.jsonのスクリプトを変更

Step 4

旧ツール削除

ESLint・Prettierを段階的に削除

package.jsonスクリプトの更新

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.tsx",
    "lint:fix": "eslint src --ext .js,.ts,.tsx --fix",
    "format": "prettier --write src/**/*.{js,ts,tsx}",
    "format:check": "prettier --check src/**/*.{js,ts,tsx}"
  }
}

{
  "scripts": {
    "lint": "biome lint ./src",
    "lint:fix": "biome lint --write ./src",
    "format": "biome format --write ./src",
    "format:check": "biome format ./src",
    "check": "biome check --write ./src"
  }
}

移行前

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.tsx",
    "lint:fix": "eslint src --ext .js,.ts,.tsx --fix",
    "format": "prettier --write src/**/*.{js,ts,tsx}",
    "format:check": "prettier --check src/**/*.{js,ts,tsx}"
  }
}

移行後

{
  "scripts": {
    "lint": "biome lint ./src",
    "lint:fix": "biome lint --write ./src",
    "format": "biome format --write ./src",
    "format:check": "biome format ./src",
    "check": "biome check --write ./src"
  }
}

パフォーマンス比較

実行速度ベンチマーク

Biome の圧倒的な高速性を示すデータ：

Biome 100 %

完了

Prettier 3 %

ESLint 2 %

パフォーマンス数値

Intel Core i7 1270P で 171,127 行のコード（2,104 ファイル）をフォーマットした場合、Biome は Prettierより約 35 倍高速に動作します。

大規模プロジェクトでの効果

# 10万行規模のプロジェクトでの実測値
# Prettier: 8.2秒
# Biome: 0.23秒（約35倍高速）

time npx prettier --write src/
time npx biome format --write src/

CI/CD統合

GitHub Actions設定

name: Code Quality

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      - run: npx @biomejs/biome ci

pre-commit hooks

# huskyのインストール
npm install --save-dev husky lint-staged

# .huskyrc設定
echo 'npx lint-staged' > .husky/pre-commit

package.json に追加：

{
  "lint-staged": {
    "*.{js,ts,tsx,json}": [
      "biome check --write --no-errors-on-unmatched"
    ]
  }
}

VS Code統合

拡張機能インストール

VS Code Marketplace から「Biome」拡張機能をインストール
設定で Biome をデフォルトフォーマッターに設定

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

実践的な活用例

モノレポでの設定

{
  "extends": ["@company/biome-config"],
  "files": {
    "include": ["packages/*/src/**/*"]
  },
  "overrides": [
    {
      "include": ["packages/ui/**/*"],
      "linter": {
        "rules": {
          "style": {
            "noImplicitBoolean": "off"
          }
        }
      }
    }
  ]
}

カスタムルール作成

{
  "linter": {
    "rules": {
      "suspicious": {
        "noExplicitAny": "error",
        "noArrayIndexKey": "warn"
      },
      "nursery": {
        "useSortedClasses": "error"
      }
    }
  }
}

トラブルシューティング

よくある問題と解決法

移行時の注意点

Prettierとの完全互換性は 97%のため、一部のフォーマットが異なる場合があります
ESLintの一部プラグインは Biome でサポートされていない可能性があります
大規模プロジェクトでは段階的な移行を推奨します

パフォーマンス最適化

{
  "files": {
    "maxSize": 1048576,
    "ignore": [
      "**/*.min.js",
      "**/vendor/**",
      "**/node_modules/**"
    ]
  }
}

将来の展望とロードマップ

Biome の開発チームは以下の機能追加を計画しています：

CSS/SCSS対応: スタイルシートの完全サポート
バンドラー機能: webpack/Vite代替
テストランナー: Jest/Vitest 統合
パッケージ管理: npm/yarn 代替機能

まとめ

Biome は、JavaScript・TypeScript開発の複雑さを解消する革命的なツールです：

圧倒的な高速性: 従来ツールの 35 倍の処理速度
統合環境: 複数ツールを 1 つに集約
簡単な設定: 最小限の設定で最大の効果
エコシステム対応: 既存プロジェクトへの段階的導入

開発チームの生産性向上と、コード品質の向上を同時に実現する Biome を、ぜひ次のプロジェクトで試してみてください。

メニュー

メインメニュー

人気のタグ