Bun 1.0 で SvelteKit アプリを動かしてみた

# はじめに

Bun 1.0 がリリースされました。どうやら SvelteKit も動くらしいのです。

https://bun.sh/guides/ecosystem/sveltekit

開発者体験がどのように変わるのか、簡単に確認してみました。

# 構成

以下のような構成でアプリを作成します。

使用したDocker イメージ: [oven/bun](https://hub.docker.com/r/oven/bun)

```mermaid
flowchart BT
    subgraph Windows
        VSCode
        subgraph wsl
            code
            src[source codes]
            subgraph docker server
              container
            end
        
        end
    
    end

    code --> |起動| VSCode
    VSCode --> |接続| container
    container --> |マウント| src
```

ソースコードの初期ディレクトリ構成。

```
[root]
  |- .devcontainer
  |    |- devcontainer.json
```

```json:.devcontainer/devcontainer.json
{
	"name": "Bun",
	"image": "oven/bun"
}
```


# SvelteKit プロジェクトの作成

手順にならって SvelteKit のデモアプリを作成します。

```bash
root@cd61e9d1ac01:/workspaces/bun# bun create svelte@latest my-app

create-svelte version 5.0.6

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  SvelteKit demo app
│
◇  Add type checking with TypeScript?
│  Yes, using JavaScript with JSDoc comments
│
◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
│
└  Your project is ready!

✔ Type-checked JavaScript
  https://www.typescriptlang.org/tsconfig#checkJs

✔ ESLint
  https://github.com/sveltejs/eslint-plugin-svelte

✔ Prettier
  https://prettier.io/docs/en/options.html
  https://github.com/sveltejs/prettier-plugin-svelte#options

✔ Playwright
  https://playwright.dev

✔ Vitest
  https://vitest.dev

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-add

Next steps:
  1: cd my-app
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat
```

# パッケージのインストール

```
root@cd61e9d1ac01:/workspaces/bun# cd my-app
root@cd61e9d1ac01:/workspaces/bun/my-app# bun install
bun install v1.0.2 (37edd5a6)
 + @fontsource/fira-mono@4.5.10
 + @neoconfetti/svelte@1.0.0
 + @playwright/test@1.38.1
 + @sveltejs/adapter-auto@2.1.0
 + @sveltejs/kit@1.25.0
 + @types/cookie@0.5.2
 + eslint@8.49.0
 + eslint-config-prettier@8.10.0
 + eslint-plugin-svelte@2.33.2
 + prettier@2.8.8
 + prettier-plugin-svelte@2.10.1
 + svelte@4.2.1
 + svelte-check@3.5.2
 + typescript@5.2.2
 + vite@4.4.9
 + vitest@0.32.4

 248 packages installed [63.67s]
```

# SvelteKit のアプリを起動

ではアプリを起動してみます。ちゃんと動くでしょうか？

```bash
root@cd61e9d1ac01:/workspaces/bun/my-app# bun --bun run dev
$ vite dev

Forced re-optimization of dependencies
325 |       family: isIPv6(address) ? "IPv6" : "IPv4",
326 |       port: this.#server.port
327 |     };
328 |   }
329 | 
330 |   listen(port, host, backlog, onListen) {
                   ^
error: Failed to start server. Is port 5173 in use?
      at listen (node:http:330:16)
      at processTicksAndRejections (:55:76)

  VITE v4.4.9  ready in 1718 ms

  ➜  Network: use --host to expose
  ➜  press h to show help
```

# エラーの回避策

`host` に `127.0.0.1` を指定したら動きました。

```sh

root@cd61e9d1ac01:/workspaces/bun/my-app# bun --bun run dev -- --host=127.0.0.1
$ vite dev --host=127.0.0.1


  VITE v4.4.9  ready in 2121 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  press h to show help
```

# アプリの動作確認

ブラウザでアクセスしてみたところ、問題なく動いてくれました。`SVERDLE` で遊ぶこともできました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/f74fbb24-19cd-4640-c0e3-8bdf05c4e36e.png)

# node_modules の再構築が爆速

Node.Js でフロントアプリを作成している場合良くあるのが、パッケージのインストール状態がおかしくなって、`node_modules` ディレクトリを再構築するケースです。

こんなコマンドを実行すると思います。

```bash
rm -rf node_modules
npm install
```

これをやるとかなり時間がかかっちゃうんですよね。

Bun だとどうでしょうか？

```sh
root@cd61e9d1ac01:/workspaces/bun/my-app# rm -rf node_modules/
root@cd61e9d1ac01:/workspaces/bun/my-app# bun install
bun install v1.0.2 (37edd5a6)
 + @playwright/test@1.38.0
 + @sveltejs/adapter-auto@2.1.0
 + @sveltejs/kit@1.25.0
 + eslint@8.49.0
 + eslint-config-prettier@8.10.0
 + eslint-plugin-svelte@2.33.2
 + prettier@2.8.8
 + prettier-plugin-svelte@2.10.1
 + svelte@4.2.0
 + svelte-check@3.5.2
 + typescript@5.2.2
 + vite@4.4.9
 + vitest@0.32.4
 246 packages installed [549.00ms]
```

1秒もかかりませんでした:bangbang:


# まとめ

Bun 1.0 で SvelteKit のデモアプリを動かすことができました。

- 良かった点
  - node_modules の再構築が爆速。
    これは開発者体験に影響が大きいのでは、と思います。
- 悪かった点
  - アプリ起動時に `host` の指定が必要。
    npm は `host` 指定しなくても起動できるので、この人手間がちょっと気になりました。
    ただ、`package.json` の `dev` スクリプトを `"vite dev --host=127.0.0.1"` のように修正すれば気になりません。
   - アプリ起動時のコマンドがちょっと長い。
     Bun で起動するためには `--bun` オプションが必要らしく（デフォルトだと Node.Js が使われるみたいです）、ちょっと手間ですね。


アプリの実行速度について、いまのところは大したことはやってないので Node.Js より速いという印象はありません。むしろ node_modules の再構築のような、開発者体験上での速度アップが期待できるのかなと思いました。:smile: