Bun.js + Docker + VSCodeで爆速ローカル開発環境を構築してみた！

# 🚀 Bun.js + Docker + VSCodeで爆速ローカル開発環境を構築してみた！

<!-- TOC -->

- [はじめに](#はじめに)
- [📦 必要なツール](#-必要なツール)
- [📁 構成とセットアップの概要](#-構成とセットアップの概要)
- [🛠 DevContainer の設定ファイル](#-devcontainer-の設定ファイル)
  - [📄 `.devcontainer/Dockerfile`](#-devcontainerdockerfile)
  - [📄 `.devcontainer/devcontainer.json`（新仕様対応）](#-devcontainerdevcontainerjson新仕様対応)
- [🚀 VSCodeから開発コンテナを起動](#-vscodeから開発コンテナを起動)
- [🛠 Bunプロジェクトの初期化](#-bunプロジェクトの初期化)
- [📂 最終的な構成](#-最終的な構成)
- [🧪 実行してみよう！](#-実行してみよう)
- [🧰 ちょっと便利なポイント](#-ちょっと便利なポイント)
- [✅ まとめ](#-まとめ)
- [🔗 サンプルリポジトリ](#-サンプルリポジトリ)
- [🙏 最後に](#-最後に)

<!-- /TOC -->

---

## はじめに

最近話題のJavaScriptランタイム「Bun.js」。  
Node.js互換かつ、パッケージマネージャ・ビルドツール・ランタイムが統合されていて、**とにかく速い！**

この記事では、**DockerとVSCodeのDevContainer機能を使って、ホスト環境に何もインストールせずにBun.jsの開発を始める方法**を紹介します。

「とにかく早く試したい！」「ホストを汚したくない！」という方に向けたテンプレート形式です。

---

## 📦 必要なツール

以下をインストールしておけば準備OK！

- [Visual Studio Code](https://code.visualstudio.com/)
- [Docker Desktop](https://www.docker.com/products/docker-desktop/)（※Docker Engineを含みます）
- VSCode拡張機能：
  - [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)

---

## 📁 構成とセットアップの概要

まず以下のようなフォルダ構成を用意します：

```
bun-docker-dev/
└── .devcontainer/
	├── Dockerfile
	└── devcontainer.json
```

初期状態ではこれだけでOK！プロジェクト自体はコンテナ内で `bun init` によって生成します。

---

## 🛠 DevContainer の設定ファイル

### 📄 `.devcontainer/Dockerfile`

```Dockerfile
FROM oven/bun:latest

# Gitをインストール（GitHub連携やバージョン管理向け）
RUN apt update && apt install -y git

WORKDIR /app

CMD ["sleep", "infinity"]
```

---

### 📄 `.devcontainer/devcontainer.json`

```json
{
	"name": "bun-dev-env",
	"build": {
		"dockerfile": "Dockerfile"
	},
	"customizations": {
		"vscode": {
			"settings": {
				"terminal.integrated.defaultProfile.linux": "bash"
			},
			"extensions": [
				"esbenp.prettier-vscode"
			]
		}
	},
	"forwardPorts": [],
	"postCreateCommand": ""
}
```

---

## 🚀 VSCodeから開発コンテナを起動

1. `bun-docker-dev/` フォルダをVSCodeで開く
2. コマンドパレット（`Ctrl + Shift + P`）を開く
3. `Dev Containers: Reopen in Container` を実行

数十秒でBun.js入りの開発環境が立ち上がります！

---

## 🛠 Bunプロジェクトの初期化

コンテナ内ターミナルで以下を実行：

```bash
bun init
```

プロンプトに従ってプロジェクト名やエントリーポイントを指定できます。

```
package name (bun-dev-env): bun-dev-env
entry point (index.ts): src/index.ts
```

↓ 実行後、自動で以下のようなファイルが作成されます：

```
+ node_modules/
+ src/index.ts
+ .gitignore
+ tsconfig.json
+ README.md
+ bun.lockb
+ package.json
```
![bun init 実行結果](https://github.com/Mangetu/blogImages/blob/main/Bun.js%20+%20Docker%20%E3%81%A7%E8%B6%85%E9%AB%98%E9%80%9F%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/bunInitFolder.png?raw=true)

---

## 📂 最終的な構成

```
bun-docker-dev/
├── .devcontainer/
│   ├── Dockerfile
│   └── devcontainer.json
├── node_modules/
├── src/
│   └── index.ts
├── .gitignore
├── bun.lockb
├── package.json
├── README.md
└── tsconfig.json
```

---

## 🧪 実行してみよう！

```bash
bun run src/index.ts
```

出力例：
(文言はdocker imageのバージョンによって異なる場合があります)
```
Hello via Bun!
```

---

## 🧰 ちょっと便利なポイント

- このコンテナには Git がインストールされているので、プロジェクトを GitHub で管理したい場合も安心。
- `git init` → `add` → `commit` など基本的な操作はそのまま使えます。

---

## ✅ まとめ

- Bun.js は速くてシンプルな開発環境を構築できる新時代のJavaScriptランタイム！
- Docker + VSCode の Dev Container を活用すれば、**ホスト環境を汚さず数分で準備完了！**
- Git も入っているのでプロジェクトのバージョン管理も即可能！

---

## 🔗 サンプルリポジトリ

テンプレートの `.devcontainer` フォルダや構成一式は以下のGitHubで公開しています👇  
👉 https://github.com/Mangetu/BunDevEnvForBlog

---

## 🙏 最後に

この記事が「ちょっとBun.js試してみたい」「環境構築を簡単にしたい」という方の役に立てば幸いです。  
**いいね・ストック**いただけると励みになります！