Skip to main content

第26章：Biomeという別解（速さで勝つ）⚡

この章は **「ESLint + Prettier」以外の“速い一体型”**として、Biomeを触って「使い分けの判断」ができるようになる回だよ😊🚀 （2026-02-10時点で @biomejs/biome の latest は 2.3.14）(npm)

1) この章のゴール🎯✨​

  • Lint + Format + import整理を、Biomeの 1コマンドで回せるようにする🧹⚡(Biome)
  • VS Codeで 保存したら自動で整う（整形＋安全な修正＋import整理）状態にする💾✨(Biome)
  • 「今のプロジェクトはESLint/Prettierのままが良い？」「Biomeに寄せる？」の判断軸を作る🧭🙂

2) Biomeって何？ざっくり🍱✨​

Biomeは **“Web開発のツールチェーン”**で、formatter / linter / import sorting などをまとめて扱えるよ⚡ CLIとしても biome check / biome ci みたいに「まとめて走らせる」設計が中心になってる🧩(Biome)

3) まず結論：Biomeが刺さる場面🧭⚡​

Biomeが向いてる👍

  • 「設定を分けたくない！」→ LintとFormatを一体でサクッと回したい🧹✨(Biome)
  • 「とにかく軽くしたい！」→ 実行が速い系へ寄せたい🏎️💨
  • 「保存したら勝手に整ってほしい！」→ VS Code連携が気持ちいい💾🌈(Biome)

ESLint/Prettierを残したい（or 併用）🤝

  • 特定のESLintプラグイン依存が強い（フレームワーク固有ルール等）
  • 既存のチーム規約がESLintルールでガッチガチに固まってる
  • Prettierの運用がすでに完全に安定してる（ちなみに Prettier は 2026-01-14 に 3.8 が出てるよ）(prettier.io)
  • ESLintは Flat Config + extends など進化中（最近の方針も押さえたいならここ）(eslint.org)

4) 10分ハンズオン：導入 → 1回で体感🏃‍♂️💨​

4-1. インストール📦✨​

プロジェクト直下（package.json がある場所）で👇

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

(Biome)

4-2. 初期化（biome.jsonを作る）🧩​

npx biome init

Biomeの init は 設定ファイルを作ってくれるよ🛠️(Biome)

4-3. まず“全部まとめて”走らせる✅🧹​

npx biome check --write .

check は formatter + linter + import sorting をまとめて実行するコマンド✨(Biome) --write で ファイルを実際に直すよ✍️

4-4. “CI用（書き換えない）”で走らせる🔒✅​

npx biome ci .

ci は CI向けの読み取り専用（ファイルを書き換えない）なのがポイント！🧯(Biome)

5) biome.json 最小理解🧠✨（ここだけ押さえればOK）​

Biomeの設定は biome.json / biome.jsonc で管理するよ🗂️ モノレポなどでは extends で“親設定を継承”できるのも便利✨(Biome)

まずは超ミニマム例👇（イメージ）

{
  "$schema": "https://biomejs.dev/schemas/2.3.14/schema.json",
  "formatter": { "enabled": true },
  "linter": { "enabled": true },
  "organizeImports": { "enabled": true }
}
  • $schema を置くと 補完が効いて設定ミスが減る🧠✨（スキーマは公式が提供）(Biome)
  • まずは「全部ON」でOK。細かい流儀は後で育てれば大丈夫🙂🌱

6) VS Codeで「保存したら全部」💾✨（ここが超気持ちいい）​

6-1. 拡張機能を入れる🧩​

Biome公式のVS Code拡張があるよ✅ 「Format on save」「Quick fix」などが入る✨(Visual Studio Marketplace)

6-2. 保存時フォーマットON🧹​

Biome拡張は formatter として登録されて、editor.formatOnSave で保存時整形ができるよ💾(Biome)

6-3. 保存時に“安全な修正”もON🛠️​

editor.codeActionsOnSave に source.fixAll.biome を足すと、安全な修正だけを保存時に適用できる👌✨(Biome)

6-4. import整理も保存時にON📚✨​

source.organizeImports.biome を足すと、importの整理も保存時に回るよ🔁(Biome)

.vscode/settings.json の例（この章のゴール形）👇

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "biome.requireConfiguration": true
}
  • biome.requireConfiguration を true にすると、biome.json がある時だけ拡張が有効になって事故りにくい🙆‍♂️(Biome)

7) 速度をさらに上げる小技🚀💨（やりたい人だけ）​

7-1. “変更されたファイルだけ”チェック🧠⚡​

ci には --changed / --since=REF があって、差分だけに絞れるよ（大規模PJで効く！）(Biome)

例👇

npx biome ci --changed --since=origin/main .

7-2. デーモンサーバー（さらに速く）🛰️⚡​

Biomeは daemon server も持ってて、start / stop が用意されてるよ🧩(Biome) 頻繁に叩く環境だと、体感で速くなることがある🚀

8) ESLint/Prettierとどう共存する？🤝🧭​

ここ、超大事☺️✨ “正解は1つじゃない”から、現場でよくある型を置いとくね👇

A. Biome一本化（スッキリ最速）⚡

  • Lint/Format/import整理が全部Biome
  • コマンドも設定も最少で済む🧹✨

B. 段階移行（安全）🪜

  • まずは Biome を入れて check --write を小さい範囲で実行
  • 「気持ちよさ」と「既存ルールの差」を見て、徐々に移す🙂

C. 併用（必要なところだけ）🧰

  • “この領域はESLintプラグインが必須”みたいな場合だけESLintを残す
  • ただし、同じ仕事（整形など）を二重にしないのがコツ😅

9) よくある詰まりポイント🧯😇​

  • 保存しても整形されない

    • Biome拡張が入ってるか確認✅(Visual Studio Marketplace)
    • biome.requireConfiguration: true にしてるなら、biome.json があるか確認🗂️(Biome)
    • 他のformatter（Prettier等）が“デフォルト”になってると、そっちが勝つことがある⚔️ → ワークスペースのformatter設定を見直し🙂

  • モノレポで設定が効かない / 変な設定を拾う

    • biome.configurationPath で明示できる（Biome v2）🧭(Biome)
    • 親子で extends を使うのもアリ✨(Biome)

  • Biome更新で設定が壊れたっぽい

    • biome migrate が “破壊的変更に追従するためのコマンド”として用意されてる🛠️(Biome)

10) ミニ課題🎓✨（手を動かすと一気に身につく）​

課題A：まず成功体験💪

  1. npx biome init
  2. わざとインデント崩し＋不要importを作る😈
  3. npx biome check --write .
  4. 差分が整うのを確認✅✨

課題B：保存だけで自動化💾

  1. .vscode/settings.json を入れる
  2. ファイルを保存して、整形＋安全修正＋import整理が走るか確認🌈(Biome)

課題C：CI想定（書き換えない）🔒

  • npx biome ci . を走らせて、問題があったら CIが落ちるイメージを掴む✅(Biome)

11) AIで時短🤖✨（Copilot/Codex前提の使い方）​

AIは 設定たたき台にめちゃ強いよ👍 ただし「丸呑み」は事故るので、“生成 → 差分確認 → Biomeで検証” の順が安全😊🛡️

おすすめプロンプト例👇

  • 「このプロジェクト構成（src/ 配下TS中心）で、Biomeの biome.json を最小から段階的に強化する案を3つ出して」
  • 「ESLint/Prettierの役割分担を壊さないように、Biome導入の“段階移行手順”をチェックリスト化して」
  • 「VS Codeで保存時に format + safe fixes + import整理 をBiomeで動かす設定を書いて」(Biome)

そして最後に必ず👇で“現実チェック”✅

npx biome check --write .
npx biome ci .

次の第27章（npm scripts設計）に繋げるなら、Biomeのコマンドを lint / format / check / ci みたいに 覚えなくていい名前に固定していくのが気持ちいいよ🧩✨