Bun で Create React App してみる

## はじめに

界隈で話題のBunが気になったので、簡単に試してみました。
部内のLT会でプレゼンをするのでその忘備録も兼ねています。
今回はBunの基本的な使い方を確認し、`Create React App`することが目的です。

## 環境

- WSL Ubuntu-20.04
- Bun v0.1.2

## Bun とは

可愛らしい肉まん?アイコンのやつ。
コンセプト・目標は以下のような感じです。([公式](https://bun.sh/)より翻訳して抜粋)

### コンセプト

> 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操作/秒

この辺りは専門ではないのであまり言及できないですが、明らかに早い…。

## インストールしてみる

めちゃくちゃ簡単
```bat
curl https://bun.sh/install | bash
```

とりあえずhelpを読む。
```bat
$ 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`に追加しましょう。
```bat
$ 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ファイルも作成されます)
```json:package.json
{ "dependencies": { "react": "^18.2.0" } }
```

もちろんバージョン指定も可能です。

```bat
$ 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]
```
```json:package.json
{ "dependencies": { "react": "17.0.2" } }
```

次に、React Appを作成してみましょう。

```bat
$ 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

```

あとは、誘導に沿って実行するだけ。

```bat
$ 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 にアクセスして…。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544280/7e2b725d-4461-1271-a509-4144b899bde0.png)
無事`Welcome to React`出来ました！

## おわりに
一連の流れを見てもらいましたが、めちゃくちゃ簡単です。Bunさえインストールすればほぼ完了です。
今回は扱っていませんが、DenoのようにTypescriptのトランスパイルもデフォルトでついているので、今度はTS書いてみましょうかね。
あと、Bunは[Zig](https://ziglang.org/)で実装されているそうなのですが、そちらも気になりますね。

## 参考
Bun公式ドキュメント: https://bun.sh/
Create React App docs: https://create-react-app.dev/docs/getting-started
Zig公式ドキュメント: https://ziglang.org/