開発の「待ち時間」をゼロにする:Biomeという次世代の選択肢
こんにちは。日々のコードベースと格闘する皆さんに、今日は「開発体験(DX)」を劇的に向上させるための、ちょっと刺激的な話をしましょう。
これまで、JavaScript/TypeScript界隈の標準といえば、ESLint(静的解析)とPrettier(自動整形)の二刀流でした。しかし、プロジェクトが大きくなるにつれ、ファイルを保存するたびに数秒間CPUが唸りを上げ、ターミナルでLint結果が出るのを待つ…そんな経験はありませんか?
今、その状況を根底から覆す「Biome」というツールが注目を集めています。今回は、なぜこれが「次世代」と呼ばれるのか、そして導入すべきか否かの判断基準を、アーキテクトの視点から紐解いていきます。
—
1. なぜ「ESLint + Prettier」から「Biome」なのか
まず、設計思想の違いを理解しましょう。
- ESLint + Prettier: 異なる目的を持つ2つのツールを、プラグインを介して「無理やり」連携させています。設定ファイルが複雑になりがちで、処理がNode.jsのシングルスレッドに依存するため、大規模プロジェクトほど遅延が発生します。
- Biome: Rust製のオールインワンツールです。解析(Lint)と整形(Format)が最初から一つのエンジンとして統合されています。Node.jsを介さない圧倒的な実行速度は、一度体験すると元の環境には戻れなくなるほどの衝撃です。
どちらを選ぶべきか?
- ESLint + Prettier: まだまだ盤石です。コミュニティが巨大で、どんなニッチなプラグインも存在します。
- Biome: 設定を最小限に抑えたい、かつ「爆速」を求めるなら最強です。ただし、ESLintの特定のマイナーなプラグインに依存している場合は、移行前に検証が必要です。
—
2. 現場で即戦力となるセットアップ
まずは、Biomeをインストールし、プロジェクトに組み込む手順を見ていきましょう。今回はモダンなTypeScriptプロジェクトを想定します。
インストールと初期化
ターミナルを開き、以下のコマンドを打ち込んでください。
プロジェクトのルートディレクトリで実行
npm install –save-dev –save-exact @biomejs/biome
設定ファイル (biome.json) を生成する
npx @biomejs/biome init
このコマンドで生成される `biome.json` は、プロジェクトの「掟」を記述する場所です。
—
3. 最も重要な「biome.json」の設定
ここがアーキテクトの腕の見せ所です。単に動かすだけでなく、「何を守らせるか」を定義します。
{
“$schema”: “./node_modules/@biomejs/biome/configuration_schema.json”,
“organizeImports”: { “enabled”: true }, // Import文を自動整列(これだけで管理コスト激減)
“linter”: {
“enabled”: true,
“rules”: {
“recommended”: true // 推奨されるルールを全適用
}
},
“formatter”: {
“enabled”: true,
“formatWithErrors”: false, // エラーがある場合は整形しない(安全第一)
“indentStyle”: “space”, // インデントはスペース派かタブ派か
“indentWidth”: 2 // 2スペースがモダンなデファクト
}
}
この設定の肝は、「自動化できることは人間が手を出さない」という点です。`organizeImports` を有効にするだけで、開発者はImportの並び順を気にする必要がなくなります。
—
4. 精度高い「HelloWorld」的動作確認
設定が正しく効いているか、わざと汚いコードを書いて試してみましょう。
検証用ファイル (`test.ts`)
// わざとインポート順をバラバラにし、余計なスペースを入れる
import { func } from “lib”;
import { app } from “core”;
const x = 10;
if(x){ console.log(“Hello Biome!”) }
この状態で、以下のコマンドを実行します。
フォーマットを実行
npx @biomejs/biome format –write .
Lintを実行
npx @biomejs/biome lint .
実行結果はどうなるか?
一瞬で `test.ts` が書き換わります。
1. `import` の順序が整列される。
2. `if` 文の空白やセミコロンが、Biomeの「美学」に基づいて修正される。
3. Lintの結果が、ESLintよりも遥かに高速に表示される。
—
アーキテクトからのアドバイス
もしあなたが、今から新しいプロジェクトを立ち上げるのであれば、迷わずBiomeを採用してください。 設定の煩わしさから解放され、Node.jsのモジュール依存地獄からも回避できます。
逆に、巨大な既存プロジェクトを移行する場合は、「まずはFormatter(整形)だけBiomeに任せ、Linterは段階的に移行する」というハイブリッド戦略を推奨します。いきなり全てを置き換えるのではなく、まずは「コードの見た目」という一番ストレスのかかる部分から爆速化させるのです。
まとめ:なぜこれを導入するのか
ツールを導入する目的は「ツールを使うこと」ではなく、「コードの品質を担保しつつ、開発者が本来集中すべきロジックの構築に時間を充てること」です。
Biomeは、そのための時間を年間で数十時間単位で創出してくれるはずです。ぜひ、今日から導入して、この軽快な開発体験を楽しんでください。皆さんのコーディングライフが、より快適で創造的なものになることを願っています!