はじめに
この記事では正式版がリリースされたBunのドキュメントをつまんでみてまとめたものです。
公式ドキュメントの和訳に近い感じです。
注意点
- 要点だけまとめていますが、まだ自分自身理解しきれてないところがあります。
- そのため、ご自身で公式ドキュメントも照らし合わせながらご確認いただければと思います。
- テストとAPIの箇所は実際に触ってみてから追記予定です。
読んでみる
公式に沿ってとりあえず進めます。
インストール
brew tap oven-sh/bun brew install bun
brew listでインストールされていることを確認します。
Bunのアップグレードは以下コマンドで行います。
bun upgrade
Bun is an all-in-one toolkit
こちらのセクションを見ると、JavaScriptのエコシステムをオールインワンで扱うことができます。
ただし後述しますが互換性もあるため、既存のものも使用できるみたいです。
以下のJavaScript周辺のツールが全てBunのみで完結できます。
- Node.js
- BunはNode.jsのドロップインリプレースメントとして機能します。
- Transpilers
- Bunは
.js,.ts,.cjs,.mjs,.jsx,.tsxファイルを直接実行できます。
- Bunは
- Bundlers
- BunはJavaScriptのバンドラーでもあり、esbuildと互換性のあるプラグインAPIがあります。
- Package Managers
- Bunはnpmと互換性のあるパッケージマネージャーであり、package.jsonを読み取り、node_modulesに書き込むことができます。
- Testing Libraries
- BunはJestと互換性のあるテストランナーであり、スナップショットテストやモッキング、コードカバレッジがサポートされています。
「nodeもnpmもWebpack, Vite, esbuild, jestとかたくさんありすぎ！」って感じの、近年のJavaScriptを取り巻く環境が複雑化しているのを踏まえて、シンプルにそして速くするってのがBunの存在意義になってます。
Bun is a JavaScript runtime
Bunは高速なJavaScriptランタイムです。ソフトウェア開発をより速く、煩わしさを減らし、楽しくすることを目的としています。
Node.jsとの互換性
- BunはNode.jsのドロップインリプレースメント（直接代わりになるもの）です。
- 既存のNode.jsアプリケーションやnpmパッケージはBunでも動作します。
- さまざまなNode.jsのAPI（fs、path、netなど）やグローバル変数（__dirnameやprocessなど）がサポートされています。
速度
- BunはNode.jsよりも4倍速く起動します。
- Bunは「hello world」のTypeScriptファイルをesbuildとNode.jsよりも5倍速く実行します。
- GoogleのV8エンジンではなく、AppleのWebKitエンジンを使用しています。
TypeScriptとJSXのサポート
- BunにはJavaScriptトランスパイラが組み込まれているため、依存関係なしでJavaScript、TypeScript、およびJSX/TSXファイルを実行できます。
ESM & CommonJSの互換性
- BunはCommonJSとESモジュールの両方をサポートしています。
Web APIのサポート
- ブラウザで利用可能なWeb標準API（fetch、Request、Responseなど）が組み込まれています。
ホットリローディング
- –hotオプションを使うと、ファイルが変更されたときにアプリケーションがリロードされます。
プラグイン
- Bunは高度にカスタマイズ可能であり、インポートを傍受してカスタムロードロジックを実行するプラグインを定義できます。
- ※ 特定の種類のファイル（.yamlや.pngなど）を読み込む方法を自分で定義することが可能です。
Node.jsとの互換性があるため、npmコマンド自体は使えるみたいです。
また、GoogleのWebブラウザのV8エンジンではなく、Safariなどで使用されているWebKitエンジンを採用しているのも特徴的です。
Bun is a package manager
Bunのパッケージマネージャー機能
- Bunはランタイム（プログラムを実行する環境）としてだけでなく、パッケージマネージャーとしても使えます。
bun install、bun add、bun remove、bun updateなどのコマンドがあり、使い慣れたパッケージマネージャー（npm、yarn、pnpm）と似ています。
インストール速度
- Bunは
npm、yarn、pnpmよりもはるかに高速です。 - グローバルモジュールキャッシュを使用して、
npmレジストリからの冗長なダウンロードを防ぎます。
スクリプトの実行
- ほとんどの人が直接nodeコマンドでスクリプトを実行する代わりに、
npm runのようなパッケージマネージャーのコマンドを使用しています。 bun runを使うと、毎回約150ミリ秒の時間を節約できます。
実行速度の比較
bun runは、npm、yarn、pnpmよりもはるかに高速です。以下は平均実行時間の比較です。npm run: 176msyarn run: 131mspnpm run: 259msbun run: 7ms ?
Bun is a bundler
バンドラー…コードをひとまとめにして、最適化するツール
バンドラー
- BunはJavaScriptとTypeScriptのコードをバンドル（一つにまとめ）し、さらにコードを縮小（minify）できます。これはブラウザ、Node.js、その他のプラットフォーム用のコードに使えます。
コマンドラインインターフェース（CLI）
bun build ./index.tsx --outdir ./buildというようにCLIで使用できます。- esbuildから強く影響を受けており、esbuildと互換性のあるプラグインAPIを提供しています。
プラグインAPI
- BunのプラグインAPIは、バンドラとランタイムの両方で動作します。これにより、例えば以前に紹介された.yamlプラグインをバンドル時にも使用できます。
性能
- esbuildのベンチマークを使用すると、Bunはesbuildよりも1.75倍高速、Parcel 2よりも150倍高速、Rollup + Terserよりも180倍高速、Webpackよりも220倍高速です。
インテグレーションと新しい機能
- Bunのランタイムとバンドラは統合されているため、他のバンドラにはできないこともできます。
- JavaScriptマクロを導入しており、これはバンドル時にJavaScript関数を実行する仕組みです。これらの関数から返される値は、バンドルに直接インライン（埋め込み）されます。
試してみた
速度比較
create-next-appで速度比較
| npx | bunx | |
|---|---|---|
| 1回目 | 31s | 13.61s |
| 2回目 | 3s | 317.00ms |
1回目
npx 31s
bunx 13.61s
2回目
npx 3s
bunx 317.00ms
連チャンでやるとnpxもbunxも速くなるんですね。
どちらも2倍、10倍と差が出ています。
互換性確認
サーバー立ち上げ
bunx create-next-app bunx-demo-1で作成したアプリケーションでbun devとnpm run devを確認したところ、両方起動！すごい！
ライブラリのインストール
bunx create-next-app bunx-demo-1で作成したアプリケーションでnpm install -D @pandacss/devも無事インストールできた！すごい！
終わりに
今回は、Bunが正式リリースされたので調べて試してみました。
Viteが出てから、ReactやVue, Nuxtは速くなりましたが、NextはWebpackのままかTurbopackを使うかという形でした。
ここにBunの登場でバンドルツールだけでなく、オールインワンで全て賄えるのは初学者にとっても少し入りやすい領域になっているのでは？と感じました。
「〇〇の△△って機能があって〜」から「Bunの△△って機能があって〜」ってだけでも存在意義としては十分に果たせているように感じます。
