BunでTypeScriptアプリをセットアップする

Node.jsでTypeScriptプロジェクトを管理してきた方なら、その煩雑さをご存知でしょう。ts-nodeやtsxをインストールし、ビルドステップを設定し、スクリプトを配線して、ようやくコードを書き始められます。Bunは、このオーバーヘッドの大部分を取り除きます。BunはTypeScriptファイルを直接実行できる最新のJavaScriptランタイムで、組み込みのパッケージマネージャーを搭載し、タスクランナーとしても機能します—すべてが1つのツールに統合されています。このガイドでは、Bun TypeScriptプロジェクトの完全なセットアップ手順を説明し、ゼロからTypeScriptの実行まで数分で到達できるようにします。

Bunとは何か、なぜTypeScriptに使用するのか?

BunはJavaScriptCore上に構築され、Zigで記述された高速なJavaScriptランタイムです。TypeScript開発において際立っているのは、.tsおよび.tsxファイルを実行時にネイティブにトランスパイルすることです—個別のビルドステップは不要です。Node.js + ts-nodeの組み合わせとは異なり、Bunはトランスパイルを内部で処理するため、起動時間が顕著に速く、開発ワークフローがよりシンプルになります。

ランタイム以外にも、Bunは複数のツールを一度に置き換えます:

• ランタイム – TypeScriptとJavaScriptを直接実行
• パッケージマネージャー – npm、yarn、pnpmの高速な代替
• タスクランナー – package.jsonで定義されたスクリプトを実行

新しいBun TypeScriptプロジェクトの作成

まずBunをインストールし、次に新しいプロジェクトを生成します:

bun init

Bunはエントリーポイントを尋ねてきます。整理された状態を保つためにsrc/index.tsを使用してください:

entry point (index.ts): src/index.ts

これにより、最小限のプロジェクト構造が生成されます:

my-app/
├── src/
│   └── index.ts
├── package.json
├── tsconfig.json
└── bun.lock

bun.lockファイルは、Bunのパッケージマネージャーが一貫したインストールを保証するために使用する依存関係ロックファイルです。

Bun型定義のインストール

プロジェクトに@types/bunがまだ存在しない場合は、Bun固有のAPIに対する適切なIntelliSenseと型チェックを取得するために、開発依存関係としてインストールしてください:

bun add -d @types/bun

これにより、Bun.serve()、Bun.file()、bun:sqliteなどのBunの組み込みAPIに型付きでアクセスできるようになります。詳細については、公式のBun TypeScriptドキュメントを参照してください。

Bunプロジェクト向けの推奨tsconfig.json

Bunはtsconfig.jsonなしでも動作しますが、IDEサポートと型チェックのために設定ファイルが必要です。Bun TypeScript設定の重要な設定は"moduleResolution": "bundler"で、これはBunが内部的にモジュールを解決する方法と一致します。

含めるべきその他の重要なオプション:

• "target": "ESNext"と"lib": ["ESNext"] — 最新のJavaScript機能を使用
• "strict": true — エラーを早期に検出
• "noEmit": true — Bunが実行を処理するため、コンパイル済み出力は不要
• "verbatimModuleSyntax": true — クリーンな型専用インポートを保証
• "allowImportingTsExtensions": true — 拡張子付きで.tsファイルをインポート可能に

完全な例を以下に示します:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "lib": ["ESNext"],
    "strict": true,
    "noEmit": true,
    "verbatimModuleSyntax": true,
    "allowImportingTsExtensions": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

⚠️ 重要: Bunのトランスパイラは速度のために型アノテーションを削除します—実行時に完全な型チェックは実行しません。開発中またはCIで型エラーを検出するには、bunx tsc --noEmitを別途実行してください。

TypeScriptファイルの実行とスクリプト管理

BunでTypeScriptファイルを実行するのは簡単です:

bun run src/index.ts

ファイル変更時の自動再起動を伴う開発には、ウォッチモードを使用します:

bun --watch src/index.ts

一般的なワークフローをpackage.jsonのスクリプトに追加します:

{
  "scripts": {
    "dev": "bun --watch src/index.ts",
    "start": "bun run src/index.ts",
    "typecheck": "bunx tsc --noEmit"
  }
}

Bunはこれらのスクリプトを直接実行します—追加のタスクランナーは不要です。

Bunがカバーするその他の機能

Bun TypeScriptプロジェクトのセットアップが完了すると、依存関係を追加することなく、いくつかの組み込み機能にアクセスできます:

• テストランナー — bun testは標準でJest互換のAPIをサポート
• バンドラー — bun buildはフロントエンドアセットのバンドリングを処理
• SQLite — bun:sqliteはネイティブで型付きのデータベースインターフェースを提供

これらは基本的なセットアップには必須ではありませんが、必要になった瞬間に利用可能です。全機能セットは公式のBunドキュメントで確認できます。

まとめ

BunでTypeScriptを使用する際の主な変化は、ランタイムがトランスパイルを処理し、tscが型安全性を処理するという、それらが別々の関心事であることを受け入れることです。これが理解できれば、ワークフローはクリーンです:プロジェクトを初期化し、必要に応じて@types/bunをインストールし、バンドラースタイルのモジュール解決でtsconfig.jsonを設定し、TypeScriptファイルを直接実行します。維持すべきビルドパイプラインも、インストールすべき追加ツールもありません。

よくある質問

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.