はじめに
界隈で話題のBunが気になったので、簡単に試してみました。
部内のLT会でプレゼンをするのでその忘備録も兼ねています。
今回はBunの基本的な使い方を確認し、Create React Appすることが目的です。
環境
- WSL Ubuntu-20.04
- Bun v0.1.2
Bun とは
可愛らしい肉まん?アイコンのやつ。
コンセプト・目標は以下のような感じです。(公式より翻訳して抜粋)
コンセプト
Bunは、NodeやDenoのようなモダンなJavaScriptランタイムです。主に3つのことに重点を置いてゼロから作られました。
- 高速に起動する（エッジを意識している）
- 新しいレベルのパフォーマンス (エンジンである JavaScriptCore を拡張する)
- 偉大で完全なツールであること（バンドル、トランスパイラ、パッケージマネージャ）
目標
Bunの目標は、世界のJavaScriptのほとんどをブラウザの外で実行することで、将来のインフラにパフォーマンスと複雑さの強化をもたらし、より良い、よりシンプルなツールによって開発者の生産性を向上させることです。
何ができる？
- Node.jsのようなランタイム(
bun run) - npmのようなパッケージ管理(
bun add,bun install) - テンプレートから新規プロジェクトの作成(
bun create) -
.ts,.tsx,.jsxなどのファイルのトランスパイル
他にも色々と機能はあるみたいですが、今回の目的とズレるので割愛します。
コンセプトにも書かれていたように、オールインワンなツールって感じですね。
私みたいに別言語がメインの方にとってはありがたいですね。
とても高速
Bunが最近話題になっている理由の多くは、Node.jsやDenoなどの他のランタイムと比べて圧倒的に早い点にあると思います。
Reactのサーバーサイドレンダリング
- bun: 48,936リクエスト/秒
- node: 16,288リクエスト/秒
- deno: 15,786リクエスト/秒
sqliteでの巨大なtableの読込
- bun: 60.24クエリ/秒
- better-sqlite3: 23.28クエリ/秒
- deno: 9.55クエリ/秒
ffiの実行速度
- bun: 115,473,441操作/秒
- node(napi): 43,478,261操作/秒
- deno(fii): 2,891,761操作/秒
この辺りは専門ではないのであまり言及できないですが、明らかに早い…。
インストールしてみる
めちゃくちゃ簡単
curl https://bun.sh/install | bash
とりあえずhelpを読む。
$ bun help 2022-07-11 21:33
bun: a fast bundler, transpiler, JavaScript Runtime and package manager for web software.
dev ./a.ts ./b.jsx Start a bun Dev Server
bun ./a.ts ./b.jsx Bundle dependencies of input files into a .bun
create next ./app Start a new project from a template (bun c)
run test Run JavaScript with bun, a package.json script, or a bin
install Install dependencies for a package.json (bun i)
add tailwindcss Add a dependency to package.json (bun a)
remove jquery Remove a dependency from package.json (bun rm)
upgrade Get the latest version of bun
completions Install shell completions for tab-completion
discord Open bun's Discord server
help Print this help menu
helpがとても読みやすいですね。
Create React App する
公式ドキュメントだと"Welcome to Bun!"する流れですが、今回はReact Appの画面を出すことが目標です。
まず、Reactをpackage.jsonに追加しましょう。
$ bun add react 2022-07-11 21:42
bun add v0.1.2
installed react@18.2.0
3 packages installed [237.00ms]
インストールに成功するとpackage.jsonにreactが追加されます。(bun.lockbというlockファイルも作成されます)
{ "dependencies": { "react": "^18.2.0" } }
もちろんバージョン指定も可能です。
$ bun add react@17.0.2 228ms 2022-07-11 21:48
bun add v0.1.2
installed react@17.0.2
4 packages installed [9.00ms]
{ "dependencies": { "react": "17.0.2" } }
次に、React Appを作成してみましょう。
$ bun create react my-app 2022-07-11 21:48
[package.json] Detected React - added "react-refresh"
$ bun install
bun install v0.1.2
---中略---
[1421.00ms] bun create react
Come hang out in bun's Discord: https://bun.sh/discord
-----
A local git repository was created for you and dependencies were installed automatically.
Created react project successfully
# To get started, run:
cd my-app
bun dev
あとは、誘導に沿って実行するだけ。
$ cd my-app/
$ bun dev 2022-07-11 21:55
[0.08ms] "node_modules.bun" - 13 modules, 5 packages
[2.00ms] bun!! v0.1.2
Link: http://localhost:3000
public/index.html
http://localhost:3000 にアクセスして…。
無事Welcome to React出来ました！
おわりに
一連の流れを見てもらいましたが、めちゃくちゃ簡単です。Bunさえインストールすればほぼ完了です。
今回は扱っていませんが、DenoのようにTypescriptのトランスパイルもデフォルトでついているので、今度はTS書いてみましょうかね。
あと、BunはZigで実装されているそうなのですが、そちらも気になりますね。
参考
Bun公式ドキュメント: https://bun.sh/
Create React App docs: https://create-react-app.dev/docs/getting-started
Zig公式ドキュメント: https://ziglang.org/