開発効率を数十倍に！Bundler/Test Runner/Package Managerを統合した「Bun」徹底解説

oven-sh/bun

今回は、密室殺人事件ドラマのコントのように、すべての謎を一つで解決してしまうような、オールインワンのJavaScriptツールキット、それが「Bun（ブン）」です。

Bunは、ウェブ開発の現場で日々直面する様々な課題を、一つのツールで高速かつ効率的に解決するために設計された、新しいJavaScriptランタイムです。

(登場人物
開発者のAさん、Bさん、そしてBunの登場)

Aさん
「くっ、またビルドに5分もかかった！この遅さが、まるで容疑者がアリバイを固める時間稼ぎみたいだ！」

Bさん
「パッケージのインストールも遅くてイライラするわね。npmやyarn、pnpm... どれを使っても、何か足りないのよ！まるで、実行犯、凶器の包丁、そして毒薬をそれぞれ別々の場所から持ってくるみたいに、手間がかかってしょうがないわ！」

Aさん
「しかも、テストランナーもバンドラーもそれぞれ別々に設定が必要で、まるで探偵、鑑識、所轄の刑事がバラバラに動いているようだ...」

Bun
「（スッと現れ）皆さま、お困りのようですね。私はランタイム、バンドラー、テストランナー、パッケージマネージャー、すべてをこの身体に内包した、オールインワンの救世主です。」

「速さ」
実行速度がNode.jsやDenoより速く、特にパッケージインストールは数十倍速いことも！開発の待ち時間を大幅に削減し、「アリバイ」を崩します。

「シンプルさ」
TypeScriptやJSXをそのまま実行・ビルドでき、設定が簡単。複雑な設定ファイル（「凶器」や「毒薬」）を隠す必要はありません。

「統一性」
必要なツールが一つにまとまっているため、開発環境がスッキリし、「探偵団」の連携がスムーズになります。

導入は非常に簡単です。

多くのOSで、以下のワンライナーでインストールできます。

# macOS/Linuxの場合
curl -fsSL https://bun.sh/install | bash

インストール後、バージョンを確認してみましょう。

bun --version

新しいプロジェクトを始める際、Node.jsのnpm initのように使えます。

# package.jsonを作成
bun init

npm installやyarn addの代わりに、bun installを使います。これが驚くほど速いです！

# 依存関係（ここではReact）をインストール
bun add react react-dom
# 開発用依存関係（ここではTypeScript）をインストール
bun add -d typescript @types/react

ここでは、Bunの主な機能である「実行」「テスト」「パッケージインストール」に焦点を当てた例を紹介します。

ファイル名
index.ts

// index.ts
interface Person {
  name: string;
  age: number;
}

const detective: Person = {
  name: "名探偵ブン",
  age: 28,
};

console.log(`${detective.name}は、${detective.age}歳で事件を解決します。`);

// Web標準APIのfetchもすぐに使える
const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
const data = await response.json();
console.log("外部データ取得成功:", data.title);

実行

外部のts-nodeや特別な設定なしに、TypeScriptを直接実行できます。

bun run index.ts

出力例

名探偵ブンは、28歳で事件を解決します。
外部データ取得成功: sunt aut facere repellat provident occaecati excepturi optio reprehenderit

Bunには組み込みのテストランナーがあり、Jestのような構文でテストを書けます。

ファイル名
sum.test.ts

// sum.test.ts
function sum(a: number, b: number): number {
  return a + b;
}

// describeやexpectはグローバルに利用可能
test("2つの数字の和を正しく計算できること", () => {
  const result = sum(1, 2);
  // 密室殺人事件の答えは、いつも「3」だ！
  expect(result).toBe(3); 
});

test("負の数も正しく扱えること", () => {
  expect(sum(-1, 5)).toBe(4);
});

実行

bun test

出力例

$ bun test
 bun test v1.1.1 (xxxxxxxx)

 sum.test.ts
  ✓ 2つの数字の和を正しく計算できること (1.23ms)
  ✓ 負の数も正しく扱えること (0.87ms)

 2 tests, 2 pass, 0 fail
Finished in 4.56ms

Bunのバンドラー機能は、設定ファイルがほぼ不要で、とても高速です。

# Reactアプリのテンプレートを使ってプロジェクトを作成
bun create react ./my-bun-app 
# プロジェクトフォルダへ移動
cd my-bun-app
# 開発サーバーを起動
bun dev 

bun devコマンドで、Reactコンポーネントを即座にビルドし、ホットリロード機能付きの開発サーバーを起動できます。これが、バンドラーとランタイムの統合の力です！