かめ。ブログ

bunについて少しだけ、つまづいたところなど

2023年7月27日
2023年7月31日

目次

NodeとかDenoとかBunについて

下記記事あたりを参考にさせていただきました。
Node.js と Deno と Bun のどれを使えばいいのか
【Bun】新しいJavaScriptランタイムについてふわっとまとめた

インストール

インストールについては下記
https://bun.sh/docs/installation
https://github.com/oven-sh/bun#install
手法は下記

  • curl
  • npm
  • homebrew
  • docker
  • proto


Nextアプリを作る

bunを使ってnext.jsアプリを作ってみましょう
下記のように実行するとnextのアプリを作成することができます。

bun create next ./app_next


下記でアプリを立ち上げる

cd ./app_next
bun dev


なぜかこれを実行すると、下記のようなエラーがでて動きませんでした。。

fallback.development.tsx:1     Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:1     Failed to load resource: the server responded with a status of 500 (ERR)


下記にヒントになりそうな内容がありましたがうまく動きませんでした..
bun devでNext.jsが実行される仕組みを調べる

Bun x Nextだと使えない機能がありそう?

https://github.com/softwarearchitect817/Bun-fast-JavaScript-runtime#using-bun-with-nextjs
少し古いものですが、使えない機能があるかもしれません。

とりあえず動くようにしてみる
package.jsonに下記を追加してnext devで実行する。

  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "build": "next build"
  },


bun run dev


この形で実行すると動作しました。(これでよいのかなぁ。。)

Reactアプリを作る

bun create next ./app_react


cd app_react
bun run dev


reactの場合はすんなり動かすことができました。

bun createを実行して、createできる一覧を表示

Welcome to bun! Create a new project by pasting any of the following:  
bun create apollo-server ./apollo-server-app
bun create bun-bakery ./bun-bakery-app
bun create discord-interactions ./discord-interactions-app
bun create elysia ./elysia-app
bun create elysia-buchta ./elysia-buchta-app
bun create hono ./hono-app
bun create kingworld ./kingworld-appapp
bun create preact ./preact-app
bun create react ./react-app
bun create react-ssr ./react-ssr-app
bun create svelte-kit ./svelte-kit-app
bun create websi ./websi-app


svelte-kitアプリを作る

bun create svelte-kit ./svelte-kit-app


実行すると下記のように言われますが、なぜかこれを実行しても立ち上がりませんでした。

# To get started, run:
  cd svelte-kit-app
  bun run main.ts


bun run dev

と実行すると立ち上げることができました。

bun createについて

https://bun-docs.pages.dev/en/bun_create/
bun createについては、用意されているものに加えて、自分で用意したテンプレートも作ることができるようです。
この辺り自分用にやりやすいようにできるのは便利そうです。

まとめ

bunを使ったら、サクッと実行速度早く、簡単にアプリの実装開始できるのかなーと思ったのですが
まだバージョンが1になっていないというところもあって、不安なところ少しあるかなと思いました。

脳死で開発にすぐ入れる状態が作れたら嬉しいなぁと思いつつ。
今後のバージョンアップにも期待したいですね。

追記

下記をtwitterでつぶやいたところ、開発者の方から返信いただきました。
どうやら非推奨のようです。現在より良い改善を行う予定とのこと!
9月にはどうやら1系のバージョンがでるようなので楽しみにしておこうと思います!
そのときにまたガッツリ触ってみる予定。

https://t.co/RfjJsUv33k

動かないんだけど..

bun create next ./app
で作れるところまではいけるのに
bun devで色々怒られる..

bun create react ./app
bun ./dev.tsxでおいてあるdevファイルを読みに行ったら動いたけども..nextの場合はそれがどこに。。

そもそもbun devの挙動なんなん。。

— kame (@kamem) July 26, 2023

We will do another revision of it that is much better

— Jarred Sumner (@jarredsumner) July 27, 2023


関連する記事