話題のBunを使ってみた｜株式会社 idealump

Bunとは？

BunはJarred Summer氏によって開発された高速なオールインワンJavaScriptランタイムです。 Google ChromeのJavascript V8エンジンの代わりに、Apple(Safari, iOS)のJavascriptCoreを使用しています。 Zigという低レベルのプログラミング言語と手動でのメモリ管理により、NodeやDenoよりも高速に動作します。下の画像はその例です。Reactにおいて、競合のNodeやDenoと比較して約3倍早くサーバーサイドレンダリングされるという結果が得られました。注意点としてこの結果は、実行中の関数に依存する可能性があるので、自分で試してみる必要があります。実際試してみて思ったよりスピードが上がらなかったという例も散見されます。しかし、一般的には、このランタイムは他のランタイムより高速です。

レンダリングに時間がかかると続いていた集中が一旦途切れがちなので、スムーズに開発するためにはレンダリング速度はかなり重要です。また、それ以外にも以下のような便利な機能を持っています。 TSトランスパイラを持っているので、tscやts-nodeなどを別途準備する必要がありません(これだけで自分には使う価値があります)。また、yarnやnpmのようなパッケージマネージャとしての利用、タスクランナーとしての利用、デフォルトの.envロード（もはやdotenvを必要としない）、デフォルトのSQliteクライアントなど、様々な機能を備えています。パッケージのインストールにかかる時間も短縮されました。痒いところに手が届く、オールインパッケージといった印象があります。Bunさえあればすぐに開発開始できるのは大きいですね。

もちろん欠点もあります。まず、このランタイムはたった一人（すでに述べたように、Jarred Summer氏）によって開発されています。これは、理想的なものをどんどん作っていけるという意味で、非常に良い選択でもありますが、逆に彼がこのランタイムの開発に対する熱意を失ったら（あるいは違うことに興味を持ったら）、このランタイムは維持されなくなり、開発を中止してしまいます。そのため、プロジェクトごとBunに乗り換えたい場合などには不利になります。プロジェクトが佳境を迎えた時に、Bunが開発中止となって全てを他のランタイムやライブラリに移行しないといけなくなった場合を考えると恐ろしいですね。。

また、このランタイムはDenoと違ってNode.jsとの互換性がありません。最初からBunをプロジェクトで使用している場合には問題ありませんが、現状ではNode.jsを利用するプロジェクトが多いため、Bunを利用する場合はこれを置き換える必要があります。また、このランタイムは初期段階（ベータ版）なので、まだ実装されていない機能があります。公式サイトによるリストを添付しておきます。もし、next.jsやremixなどのフレームワークと組み合わせて使いたい場合は、READ.MEやRoadmapを確認する必要があります。

未実装の機能リスト

コンセプトについての説明は十分だと思いますので、実際に使ってみましょう！

例(Hello world)

ステップ

Bunをインストールします

> curl https://bun.sh/install | bash
Copy

Pathをパスファイルに追加しましょう。私の場合はvimエディタを使って.zshファイルに書き込みましたが、.bashを仕様していたらそちらに適宜読み替えてください。もちろんエディタは何を使っていただいても構いません

> vim ~/.zshrc 


export PATH="/Users/owner/.bun/bin:$PATH" 
=>この行をPathとして追加してください。


> source ~/.zshrc // confirm path


> bun --version
0.1.4
=> 正しくインストールされている場合は、上記のようにバージョンが出ます。
Copy

実際にコードを書いて動かしてみましょう。Nodeを使用する時と同じようにnpmを使用して、"bun run ファイル名"のようにアクセスします。以下のようにサーバーを立てるコードを書いて、"bun run"で動かしてみてください。

// http.js
=>コチラはサンプルのファイル名なので、ファイル名はなんでも構いません。


export default {
  port: 3000,
  fetch(request) {
    return new Response("Welcome to Bun!");
  },
};
Copy

上記のコードでわかる通り、port 3000を使用しています。ですので、localhost:3000にアクセスすると以下のような画面となり、正常にリクエストを投げてレスポンスを得られていることが分かります。

上記はReact以外のコードでも使用できる形ですが、私はReactでも試してみました。以下がその手順となります。

例(ReactでHello world)

ステップ

以下のようにプロジェクトを作成してください。プロジェクト名は自由に設定できます。

bun create react ./app
Copy

以下が作成されたファイルです。create-react-appを作成した時とほぼ同様のファイル構造ですが、体感では10倍以上の速さでプロジェクトを作成することができています。

作成したプロジェクトを動かしてみます。例1ではbun runで動かしていましたが、Reactのプロジェクトの場合では"bun dev"で動くように最初からpackage.jsonファイルで設定されています。便利ですね。

> cd app
> bun dev
Copy

ただ自分の場合ではこの時点では以下のようにエラーになっていました。

こちらのエラー対処のためにdiscordの質問と回答を確認し、以下のようなコマンドを入力することで解消できました。余談ですが、上記画像のWant Help?を押すとdiscordのヘルプページに飛びます。あまりdiscordに馴染みのない人もいるかと思いますが、フォーマットはslackと同じような形で、githubのIssueのように様々なディスカッションやQ and A対応が記載されていて便利なので、インストールしてアカウントを作成しておくことをお勧めします。

bun bun ./src/index.jsx   
Copy

もう一度アプリを動かそうとすると、正常に動きました。画面にもReactのアイコンがちゃんと出ていますね。

bun dev
Copy

まとめ

このJSランタイムに特別新しい機能はありませんが、必要な機能全部入りという感じで非常に使いやすいと思います。将来的には本当にNodeに代わってデファクトスタンダードになっているかもしれませんね。新しく作成されるライブラリは大体新しい機能や構文があって、それゆえに習熟に時間がかかります。しかしこのBunは既存機能のブラッシュアップに焦点を当てているため、学習コストが低くて使い始めやすいのが大きなメリットだと考えています。ぜひ一度使ってみて、そのスピードを体感してみてください。

参考資料

Official website: https://bun.sh/

Github: https://github.com/oven-sh/bun#Reference

Create a react app with Bun: https://dev.to/ashirbadgudu/create-a-react-app-with-bun-125o

速くてAll in OneなJavaScriptランタイム「Bun」: https://dev.classmethod.jp/articles/bun/

ここまでお読みいただきありがとうございました！

エンジニア

きょう

# フロントコーディング

一覧に戻る