Bun + Biome + Vite + SWCで爆速JS環境【Node.js完全卒業ガイド2026】

JavaScript開発の現場は常に進化しています。 Node.jsとnpm、ESLint、Prettierの組み合わせは長く標準でした。しかし、これまでの環境にはいくつかの課題がありました。例えば、大規模プロジェクトでのパッケージインストールには時間がかかります。開発サーバーの起動も遅く感じられることがありました。リンティングやフォーマットの実行にも待つ時間が発生しがちです。これらの待ち時間は開発体験を損ねる要因でした。

そこで本記事では、次世代のJavaScript環境を紹介します。 Bun、Biome、Vite、SWCという強力なツール群です。これらを組み合わせることで、開発速度は劇的に向上します。 Node.js環境からのスムーズな移行手順も詳しく解説します。既存のプロジェクトにも段階的に導入できる方法を示します。 2026年を見据えた、最速のJavaScript開発環境を構築しましょう。

このツールの組み合わせが最強な理由

Bun、Biome、Vite、SWCは、それぞれが強力なツールです。しかし、これらを組み合わせることで真価を発揮します。互いの長所が相乗効果を生み、開発体験を大きく向上させます。 Bunはランタイムとパッケージマネージャーの遅延を解消します。 Biomeはコード品質とスタイルを高速に統一します。 Viteは開発サーバーとビルドの速度を劇的に高めます。 SWCはトランスパイルを圧倒的な速さで実行します。この組み合わせは、Node.jsエコシステムが抱える多くの課題を解決します。設定の複雑さを減らし、開発者のストレスを軽減します。結果として、より生産的で快適な開発フローを実現します。

各ツールの役割と担当領域

このセクションでは、各ツールがどのような役割を果たすか説明します。それぞれが開発プロセスの中でどの領域を担当するのか見ていきましょう。

Bun

BunはJavaScriptとTypeScriptのためのオールインワンツールキットです。 Node.jsのドロップイン代替として設計されています。 Zig言語で書かれており、JavaScriptCoreエンジンを搭載しています。これにより、起動時間とメモリ使用量を劇的に削減します。 Bunは単一の実行ファイルbunとして提供されます。ランタイム、パッケージマネージャー、テストランナー、スクリプトランナーを兼ね備えます。例えば、bun installでパッケージをインストールできます。bun run startでスクリプトを実行することも可能です。既存のNode.jsプロジェクトでも、ほとんど変更なく利用できます。開発に必要なnode_modulesの数を大幅に減らすことも可能です。これにより、開発環境のセットアップが高速かつシンプルになります。 BunはTypeScriptやJSXもデフォルトでサポートします。

Biome

BiomeはJavaScript/TypeScriptのためのフォーマッターとリンターです。 ESLintとPrettierの機能を統合したツールとして登場しました。 Rust言語で書かれており、非常に高速な動作が特徴です。コードの整形（フォーマット）と静的解析（リンティング）を同時に行います。これにより、コードベースの一貫性を保ち、品質を向上させます。設定ファイルはシンプルで、JSON形式で記述します。複雑なプラグインの組み合わせや競合に悩まされることが減ります。フォーマットとリンティングのルールを一元管理できます。開発チーム全体のコードスタイルを簡単に統一できます。開発時のフィードバックも高速に得られるため、生産性が向上します。

Vite

Viteは次世代のフロントエンド開発ツールです。開発サーバーとビルドコマンドの二つの主要な部分で構成されます。ネイティブESモジュールを活用し、サーバー起動は瞬時に行われます。 Hot Module Replacement (HMR) も非常に高速です。開発中の変更が即座にブラウザに反映されます。ビルドコマンドはRollupベースで、最適化された静的アセットを出力します。これはプロダクション環境でのパフォーマンス向上に貢献します。 Viteは豊富な機能拡張をプラグインAPI経由で提供します。 TypeScriptやJSX、CSSプリプロセッサーなどを標準でサポートします。既存のプロジェクトへの導入も比較的容易です。開発体験を向上させるための強力な基盤を提供します。

SWC

SWCはTypeScript/JavaScriptのための超高速コンパイラです。 Rust言語で書かれており、非常に高いパフォーマンスを誇ります。 Babelの代替として利用されることが増えています。トランスパイル（コード変換）とミニファイ（コード圧縮）を行います。これにより、開発サーバーの起動やビルド時間を短縮します。 ViteやNext.js、Denoなど、多くのモダンなツールで採用されています。 SWCはJavaScriptのコードを高速に変換できます。例えば、新しいJavaScriptの構文を古い環境向けに変換します。 TypeScriptコードをJavaScriptに変換する際も高速です。 Viteは内部でSWCをトランスパイラとして利用できます。これにより、開発とビルドのさらなる高速化を実現します。パフォーマンスがボトルネックとなる場面で大きな力を発揮します。

実際のワークフロー

ここでは、Bun、Biome、Vite、SWCを使った開発ワークフローを具体的に示します。新規プロジェクトの作成から開発、ビルドまでの手順を追っていきましょう。既存プロジェクトへの段階的導入も視野に入れています。

ステップ1: Bunのインストール

まず、Bunをシステムにインストールします。以下のコマンドで簡単にインストールできます。 macOSやLinuxではcurlを使用するのが推奨です。

curl -fsSL https://bun.com/install | bash

Windowsの場合はPowerShellを使います。

powershell -c "irm bun.sh/install.ps1 | iex"

インストール後、バージョンを確認します。

bun --version

これでBunが利用可能になりました。既存のNode.jsプロジェクトでも、npm installの代わりにbun installを使えます。npm runの代わりにbun runを使用するだけで、移行は簡単です。

ステップ2: Viteプロジェクトの作成

次に、Viteを使って新しいプロジェクトを作成します。 Bunのcreateコマンドはnpm createやyarn createと同様に機能します。 Viteのテンプレートを使ってプロジェクトを初期化します。

bun create vite my-bun-vite-app --template react-ts

このコマンドはmy-bun-vite-appというディレクトリを作成します。react-tsテンプレートでTypeScriptとReactのプロジェクトをセットアップします。もちろん、vue-tsやvanilla-tsなど、他のテンプレートも選択可能です。

プロジェクトディレクトリに移動し、依存関係をインストールします。

cd my-bun-vite-app
bun install

bun installはnpm installよりも圧倒的に高速です。数秒で必要なパッケージのインストールが完了します。

ステップ3: Biomeの導入

プロジェクトにBiomeを導入し、リンティングとフォーマットを設定します。まず、Biomeを開発依存としてインストールします。

bun add -D @biomejs/biome

次に、Biomeの設定ファイルを生成します。

bunx @biomejs/biome init

このコマンドにより、プロジェクトルートにbiome.jsonが生成されます。デフォルト設定のままでもすぐに利用できます。必要に応じて、ルールを追加・変更できます。例えば、インデントのスタイルや引用符の種類などを設定します。

package.jsonにスクリプトを追加すると便利です。リンティングとフォーマットを簡単に実行できるようになります。

// package.json
{
  "name": "my-bun-vite-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "biome lint ./src",
    "format": "biome format --write ./src",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@biomejs/biome": "^1.5.3",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}

これで、以下のコマンドでコードのチェックと整形が可能です。

bun run lint
bun run format

既存プロジェクトに導入する場合、package.jsonのESLint/Prettier関連スクリプトをBiomeに置き換えます。設定ファイルもbiome.jsonに集約することでシンプルになります。

ステップ4: SWCの活用（Viteのデフォルト設定）

ViteはデフォルトでESBuildをトランスパイラとして使用します。しかし、Viteのプラグインを通じてSWCを利用することも可能です。特にReactプロジェクトでは@vitejs/plugin-reactがSWCをサポートしています。vite.config.tsで明示的に設定することで、SWCの高速なトランスパイルを利用できます。

まず、@vitejs/plugin-react-swcをインストールします。

bun add -D @vitejs/plugin-react-swc

そして、vite.config.tsを以下のように変更します。

// vite.config.ts
import { defineConfig } from 'vite';
import reactSWC from '@vitejs/plugin-react-swc'; // SWC版をインポート

export default defineConfig({
  plugins: [reactSWC()], // SWC版プラグインを使用
});

これで、Viteの開発サーバーやビルド時にSWCが利用されます。 TypeScriptやJSXのトランスパイルがさらに高速になります。特に大規模なプロジェクトでその効果を実感できるでしょう。

ステップ5: 開発とビルド

すべての設定が完了しました。開発サーバーを起動して、アプリケーションを開発します。

bun run dev

Viteの高速なHMRにより、コード変更が瞬時にブラウザに反映されます。開発体験が大幅に向上します。

テストを実行したい場合は、Bunの組み込みテストランナーを使います。package.jsonにテストスクリプトを追加します。

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "biome lint ./src",
    "format": "biome format --write ./src",
    "test": "bun test",
    "preview": "vite preview"
  }
}

これで、以下のコマンドでテストを実行できます。

bun test

Bunのテストランナーも非常に高速です。開発サイクルを短縮するのに役立ちます。

アプリケーションをプロダクション用にビルドします。

bun run build

ViteとSWCの組み合わせにより、ビルドも高速に完了します。最適化された静的アセットがdistディレクトリに出力されます。

設定ファイル・dotfilesの例

このセクションでは、主要な設定ファイルの例を示します。コピペで動作する最小構成です。プロジェクトの要件に合わせて適宜変更してください。

`package.json`

Bunのスクリプトと依存関係を定義します。bun runで実行するコマンド群です。

{
  "name": "my-bun-vite-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "biome lint ./src",
    "format": "biome format --write ./src",
    "test": "bun test",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@biomejs/biome": "^1.5.3",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}

`biome.json`

Biomeのリンティングとフォーマットのルールを設定します。bunx @biomejs/biome initで生成されるデフォルト設定をベースにしています。linterとformatterセクションで詳細なルールを定義できます。

{
  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "useSingleVarDeclarator": "off"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "double"
    }
  }
}

`vite.config.ts`

Viteの設定ファイルです。プラグインや開発サーバーのオプションなどを定義します。ここではSWCプラグインを使用するように設定しています。

import { defineConfig } from 'vite';
import reactSWC from '@vitejs/plugin-react-swc';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactSWC()],
  server: {
    open: true, // 開発サーバー起動時にブラウザを自動で開く
    port: 3000, // 開発サーバーのポート番号
  },
  build: {
    outDir: 'dist', // ビルド出力ディレクトリ
    sourcemap: true, // ソースマップを生成
  }
});

`tsconfig.json`

TypeScriptの設定ファイルです。コンパイルオプションや型定義のパスなどを指定します。 ViteとSWCを使用する場合も、基本的な設定は共通です。

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "vite.config.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

よくあるトラブルと解決法

新しいツール群への移行時には、いくつかの問題に直面することがあります。ここでは、よくあるトラブルとその解決策をいくつか紹介します。

1. BunのNode.js互換性問題

トラブル: BunはNode.jsのドロップイン代替ですが、一部のネイティブモジュールや複雑なC++バインディングを持つnpmパッケージでは問題が発生することがあります。解決法:

Bunのバージョンアップ: Bunは急速に進化しており、新しいバージョンで互換性が向上することが多いです。bun upgradeで最新版に更新してください。
代替パッケージの検討: 問題のパッケージにBunネイティブやよりモダンな代替がないか探します。
Node.jsとの併用: どうしても解決できない場合は、その部分だけNode.js環境で実行することも検討します。

2. Biomeと既存のリンター/フォーマッターの競合

トラブル: 既存プロジェクトにBiomeを導入する際、ESLintやPrettierの設定が残っていると競合が発生します。解決法:

段階的な移行: まずPrettierをBiomeに置き換え、次にESLintのルールをBiomeに移行します。
設定の無効化: 既存の.eslintrc.jsや.prettierrcファイルを削除するか、Biome導入中は一時的に無効にします。
Biomeのルール調整: Biomeのbiome.jsonで、既存のプロジェクトスタイルに合うようにルールを調整します。linter.rulesやformatterセクションを確認してください。

3. Viteプラグインの互換性

トラブル: WebpackやRollup向けに作られたプラグインがViteで動作しないことがあります。解決法:

Vite公式プラグインの利用: まずVite公式が提供するプラグインや、Viteエコシステムで広く使われているプラグインを探します。
Vite互換プラグインの探索: コミュニティ製のVite専用プラグインが存在しないか確認します。
代替手段の検討: どうしても互換性のあるプラグインが見つからない場合、その機能を実現する別の方法を検討するか、自分でViteプラグインを開発することも選択肢です。

4. SWC利用時のTypeScript型チェック

トラブル: SWCはTypeScriptのコードを高速にJavaScriptに変換しますが、型チェックは行いません。そのため、型エラーが見過ごされる可能性があります。解決法:

Viteビルドプロセスでの型チェック: package.jsonのbuildスクリプトにtsc --noEmitを追加します。tsc && vite buildのようにすることで、ビルド前に型チェックを強制できます。
IDE連携: VS CodeなどのIDEのTypeScript言語サービスを活用し、開発中にリアルタイムで型エラーを検出します。
CI/CDでの型チェック: CI/CDパイプラインに型チェックステップを組み込み、デプロイ前に型エラーがないことを確認します。

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

この新しいJavaScript環境への移行は、大きなメリットをもたらします。しかし、一度にすべてを置き換えるのは難しいかもしれません。ここでは、段階的に導入するための3つのステップを提案します。

ステップ1: 小規模プロジェクトや個人開発で試す

まず、新しい環境を小さなプロジェクトで試してみましょう。新しいWebサイトや個人ツール、学習用のリポジトリなどが最適です。この記事のワークフローに従って、ゼロからプロジェクトを構築します。 Bun、Biome、Vite、SWCのそれぞれの感触を掴むことが目的です。これにより、ツールの特性やメリットを実際に体験できます。移行への自信を深める第一歩となります。

ステップ2: 既存プロジェクトの一部に段階的に導入する

次に、既存のプロジェクトに部分的に導入を始めます。例えば、まずはBunのパッケージマネージャーだけを試すことができます。 npm installやyarn installの代わりにbun installを使ってみましょう。テストランナーだけをBunに置き換えるのも良い選択です。 bun testを使うことで、テストの実行速度を向上させます。リンターやフォーマッターをBiomeに置き換えることも可能です。 ESLintやPrettierの設定を無効にし、biome.jsonを導入します。これにより、リスクを最小限に抑えつつ、メリットを享受できます。

ステップ3: 全面移行の検討と計画

小規模な導入で手応えを感じたら、全面移行を検討します。大規模なプロジェクトでは、移行計画を慎重に立てる必要があります。チームメンバーとの合意形成も重要です。移行のフェーズごとに目標と期間を設定します。例えば、Viteへの移行、SWCの導入などです。テストカバレッジを確保し、既存機能のデグレードがないか確認します。徐々に新しい環境に移行することで、開発プロセス全体を近代化できます。最終的には、生産性の高い爆速開発環境が手に入ります。

Bun + Biome + Vite + SWCで爆速JS環境【Node.js完全卒業ガイド2026】

Bun + Biome + Vite + SWCで爆速JS環境【Node.js完全卒業ガイド2026】

このツールの組み合わせが最強な理由

各ツールの役割と担当領域

Bun

Biome

Vite

SWC

実際のワークフロー

ステップ1: Bunのインストール

ステップ2: Viteプロジェクトの作成

ステップ3: Biomeの導入

ステップ4: SWCの活用（Viteのデフォルト設定）

ステップ5: 開発とビルド

設定ファイル・dotfilesの例

`package.json`

`biome.json`

`vite.config.ts`

`tsconfig.json`

よくあるトラブルと解決法

1. BunのNode.js互換性問題

2. Biomeと既存のリンター/フォーマッターの競合

3. Viteプラグインの互換性

4. SWC利用時のTypeScript型チェック

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

ステップ1: 小規模プロジェクトや個人開発で試す

ステップ2: 既存プロジェクトの一部に段階的に導入する

ステップ3: 全面移行の検討と計画

関連ページ

参考文献