注記

bun create は Bun を使用するために必須ではありません。設定も全く必要ありません。このコマンドは、開始をより迅速かつ簡単にするために存在します。

---

bun create で新しい Bun プロジェクトをテンプレート化します。これは React コンポーネント、create-<template> npm パッケージ、GitHub リポジトリ、またはローカルテンプレートから新しいプロジェクトを作成するために使用できる柔軟なコマンドです。

真新しい空のプロジェクトを作成したい場合は、bun init を使用してください。

React コンポーネントから

bun create ./MyComponent.tsx は、既存の React コンポーネントをホットリロードとプロダクションビルドを備えた完全な開発環境に 1 つのコマンドで変換します。

$ bun create ./MyComponent.jsx # .tsx もサポートされています

注記

🚀 Create React App の後継 — bun create <component> は、Create React App が提供していたすべてを、モダンなツール、より高速なビルド、バックエンドサポートで提供します。

仕組み

bun create <component> を実行すると、Bun は以下のことを行います。

1. Bun の JavaScript バンドラー を使用してモジュールグラフを解析します。
2. コンポーネントの実行に必要なすべての依存関係を収集します。
3. エントリーポイントのエクスポートをスキャンして React コンポーネントを検出します。
4. コンポーネントを実行するために必要な依存関係とスクリプトを含む package.json ファイルを生成します。
5. bun install --only-missing を使用して不足している依存関係をインストールします。
6. 以下のファイルを生成します。
   • ${component}.html
   • ${component}.client.tsx（フロントエンドのエントリーポイント）
   • ${component}.css（CSS ファイル）
7. フロントエンド開発サーバーを自動的に起動します。

Bun で TailwindCSS を使用する

TailwindCSS は、Web アプリケーションのスタイルを設定するために使用される、非常に人気のあるユーティリティファースト CSS フレームワークです。

bun create <component> を実行すると、Bun は JSX/TSX ファイル内の TailwindCSS クラス名（およびインポートするファイル）をスキャンします。TailwindCSS クラス名を検出すると、以下の依存関係を package.json に追加します。

{
  "dependencies": {
    "tailwindcss": "^4",
    "bun-plugin-tailwind": "latest"
  }
}

また、Bun.serve() で Bun の TailwindCSS プラグインを使用するように bunfig.toml を設定します。

[serve.static]
plugins = ["bun-plugin-tailwind"]

そして、最初に @import "tailwindcss"; を含む ${component}.css ファイルを作成します。

@import "tailwindcss";

Bun で shadcn/ui を使用する

shadcn/ui は、Web アプリケーションを構築するための非常に人気のあるコンポーネントライブラリツールです。

bun create <component> は @/components/ui からインポートされた shadcn/ui コンポーネントをスキャンします。

検出すると、以下を実行します。

# bun が @/components/ui/accordion と @/components/ui/button へのインポートを検出したと仮定
bunx shadcn@canary add accordion button # およびその他のコンポーネント

shadcn/ui 自体が TailwindCSS を使用しているため、bun create は package.json に必要な TailwindCSS 依存関係を追加し、上記のように Bun.serve() で Bun の TailwindCSS プラグインを使用するように bunfig.toml を設定します。

さらに、以下を設定します。

• tsconfig.json で "@/*" を "src/*" または . にエイリアス（src/ ディレクトリがあるかどうかによる）
• shadcn/ui が shadcn/ui プロジェクトであることを認識できるように components.json
• shadcn/ui が期待する Tailwind v4 を設定する styles/globals.css ファイル
• bun-plugin-tailwind を設定してコンポーネントをプロダクション用にビルドする ${component}.build.ts ファイル

bun create ./MyComponent.jsx は、Claude や ChatGPT などの LLM から生成されたコードをローカルで実行する最も簡単な方法の 1 つです。

npm から

bun create <template> [<destination>]

同じ名前の ローカルテンプレート がないと仮定すると、このコマンドは npm から create-<template> パッケージをダウンロードして実行します。以下の 2 つのコマンドは同じように動作します。

bun create remix
bunx create-remix

完全なドキュメントと使用手順については、関連する create-<template> パッケージのドキュメントを参照してください。

GitHub から

これは GitHub リポジトリのコンテンツをディスクにダウンロードします。

bun create <user>/<repo>
bun create github.com/<user>/<repo>

オプションで、宛先フォルダーの名前を指定できます。宛先が指定されていない場合、リポジトリ名が使用されます。

bun create <user>/<repo> mydir
bun create github.com/<user>/<repo> mydir

Bun は以下のステップを実行します。

• テンプレートをダウンロード
• すべてのテンプレートファイルを宛先フォルダーにコピー
• bun install で依存関係をインストール
• 新規 Git リポジトリを初期化。--no-git フラグでオプトアウトできます。
• 定義されている場合、テンプレートの設定された start スクリプトを実行

NOTE

デフォルトで Bun は既存のファイルを上書き _しません_。既存のファイルを上書きするには `--force` フラグを使用してください。

ローカルテンプレートから

警告

リモートテンプレートとは異なり、ローカルテンプレートで bun create を実行すると、宛先フォルダーがすでに存在する場合、そのフォルダー全体が削除されます。注意してください。

Bun のテンプレート機能は、ローカルファイルシステムに定義されたカスタムテンプレートをサポートするように拡張できます。これらのテンプレートは以下のディレクトリの 1 つに存在する必要があります。

• $HOME/.bun-create/<name>: グローバルテンプレート
• <project root>/.bun-create/<name>: プロジェクト固有のテンプレート

注記

BUN_CREATE_DIR 環境変数を設定することで、グローバルテンプレートパスをカスタマイズできます。

ローカルテンプレートを作成するには、$HOME/.bun-create に移動し、テンプレートの名前を付けた新しいディレクトリを作成します。

cd $HOME/.bun-create
mkdir foo
cd foo

次に、そのディレクトリに以下の内容で package.json ファイルを作成します。

{
  "name": "foo"
}

ファイルシステムの他の場所で bun create foo を実行して、Bun がローカルテンプレートを正しく見つけられることを確認できます。

セットアップロジック

ローカルテンプレートの package.json の "bun-create" セクションで、インストール前後のセットアップスクリプトを指定できます。

{
  "name": "@bun-examples/simplereact",
  "version": "0.0.1",
  "main": "index.js",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "bun-create": {
    "preinstall": "echo 'Installing...'", // 単一のコマンド
    "postinstall": ["echo 'Done!'"], // コマンドの配列
    "start": "bun run echo 'Hello world!'"
  }
}

以下のフィールドがサポートされています。これらはそれぞれ文字列または文字列の配列に対応できます。コマンドの配列は順番に実行されます。

フィールド	説明
postinstall	依存関係のインストール後に実行
preinstall	依存関係のインストール前に実行

テンプレートをクローンした後、bun create は package.json を宛先フォルダーに書き込む前に "bun-create" セクションを自動的に削除します。

リファレンス

CLI フラグ

フラグ	説明
--force	既存のファイルを上書き
--no-install	node_modules とタスクのインストールをスキップ
--no-git	git リポジトリを初期化しない
--open	完了後にブラウザで開始・開く

環境変数

名前	説明
GITHUB_API_DOMAIN	GitHub エンタープライズまたはプロキシを使用している場合、Bun がダウンロードに使用する GitHub ドメインをカスタマイズできます
GITHUB_TOKEN (または GITHUB_ACCESS_TOKEN)	これにより bun create がプライベートリポジトリで動作したり、レート制限された場合に役立ちます。両方が存在する場合、GITHUB_ACCESS_TOKEN より GITHUB_TOKEN が優先されます。

bun create の仕組み

bun create ${template} ${destination} を実行すると、以下のことが起こります。

リモートテンプレートの場合

1. registry.npmjs.org/@bun-examples/${template}/latest を GET して解析
2. registry.npmjs.org/@bun-examples/${template}/-/${template}-${latestVersion}.tgz を GET
3. ${template}-${latestVersion}.tgz を ${destination} に解凍・展開
   • 上書きするファイルがある場合、--force が渡されない限り警告して終了

GitHub リポジトリの場合

1. GitHub API から tarball をダウンロード
2. ${destination} に解凍・展開
   • 上書きするファイルがある場合、--force が渡されない限り警告して終了

ローカルテンプレートの場合

1. ローカルテンプレートフォルダーを開く
2. 宛先ディレクトリを再帰的に削除
3. 利用可能な最速のシステムコールを使用してファイルを再帰的にコピー（macOS では fcopyfile、Linux では copy_file_range）。存在する場合、node_modules フォルダーをコピーまたはトラバースしない（これだけで cp よりも高速になります）
4. package.json を（再度）解析し、name を ${basename(destination)} に更新し、package.json から bun-create セクションを削除して、更新された package.json をディスクに保存。
   • Next.js が検出された場合、依存関係リストに bun-framework-next を追加
   • Create React App が検出された場合、/src/index.{js,jsx,ts,tsx} のエントリーポイントを public/index.html に追加
   • Relay が検出された場合、Relay が動作するように bun-macro-relay を追加
5. npm クライアントを自動検出し、pnpm、yarn（v1）、最後に npm を優先
6. npm クライアントで "bun-create": { "preinstall" } で定義されたタスクを実行
7. --no-install が渡されるか、package.json に依存関係がない場合を除き、${npmClient} install を実行
8. npm クライアントで "bun-create": { "postinstall" } で定義されたタスクを実行
9. git init; git add -A .; git commit -am "Initial Commit"; を実行
   • gitignore を .gitignore に名前変更。NPM はパッケージに .gitignore ファイルが表示されないように自動的に削除します。
   • 依存関係がある場合、これは node_modules がインストールされている間に並行して別のスレッドで実行されます
   • 利用可能な場合 libgit2 を使用することはテストされ、マイクロベンチマークで 3 倍遅いパフォーマンスを示しました