こんにちは。厳しい寒さから解放されたかと思ったら、目鼻が厳しい季節な今日この頃いかがお過ごしでしょうか。
さて、最近は開発ツールまわりをあれこれ試して遊び始めているのですが、少し前に話題になってから手を出してなかったBunを触ってみました。

新しいツールを試すタイミングは、いつも難しいと感じています。
早すぎるとサポートされている機能やツールが少なくてイマイチな印象を持ちやすいですし、継続的にアップデートを追いかけるほど余裕もないのでいつの間にか放置状態になったりと。逆に様子見しすぎるとイケてる技術を速い段階から知ってる人になれないモヤモヤ感があったりと。

余談はさておき、今回はBunを使ってReactのプロジェクトを作成してみるところまで試してみた記事になります。

Bunとは

JavaScriptとTypeScriptのためのツールキットです。Node.jsの代替として設計されており、高速なJavaScriptランタイムと言われています。
ドキュメント上ではZigで書かれており、内部でJavaScript Coreを利用しているため、起動時間とメモリ使用量が大幅に削減されるとこと。

bun CLIには、テストランナーやスクリプトランナー、Node.js互換パッケージマネージャーも実行されており、これらすべては既存のツールよりも大幅に速くなっていると言っています。

Zigって何？

Zigとは、堅牢、最適、および再利用可能なソフトウェアをメンテナンスするための汎用プログラミング言語およびツールチェインみたいです。
現在はまだ開発中であり正式リリースに至っていないので、今後の破壊的変更はあり得る状態ですね。
詳しくは次のサイトを参照してみてください。
(プログラミング言語ってことなので、別の機会にでも試してみようかな？)

Home ⚡ Zig Programming Language

準備

Nodeの実行環境を準備してください。
最近は、今回はVisual Studio Codeのリモート開発機能の一つであるDev Containersを使用して検証しています。
プロジェクト直下に.devcontainer/devcontainer.jsonを作成してから、次の内容を貼り付けて起動することで同じ環境が立ち上がります。

クリックすると詳細が表示されます

{
    "name": "Node.js & TypeScript",
    "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
    "features": {
        "ghcr.io/devcontainers-contrib/features/fish-apt-get:1": {}
    }
}

インストール方法

次のコマンドを実行してCLIツールをインストールします。

curl -fsSL https://bun.sh/install | bash

CLIツールのインストールができたら、次のコマンドを実行してコマンドが有効になっているか確認します。

bun

インストールが正しくできている場合にはヘルプが表示されます。
もし、コマンドが有効ではないメッセージが表示された場合は、次のコマンドを実行してシェルを再起動してください。

exec $SHELL -l

Reactのプロジェクトを作成する

bunコマンドを使用して進める方法として大きく2つの方法があります。 1つ目は、bun initコマンドを実行して空のプロジェクトを作成する方法です。
2つ目は、bun create xxxxコマンドを実行してReactなどのプロジェクトを作成する方法です。
今回は後者の方法を使用してReactのプロジェクトを作成します。

bun createコマンドが参照するテンプレート先にはnpm、GitHub、ローカルテンプレートの3を選択することができます。
今回はnpmから参照する方法で試してみようと思います。

コマンドの構成はbun createの他に2つの引数を渡す必要があります。
1つ目の{template-name}です。これはテンプレート情報を渡す必要があるため、今回使用したいReactなどを指定します。
2つ目の{directly-path}です。これはプロジェクトを作成するディレクトリを指定します。
{directly-path}は省略することができますが、省略した場合にはカレントディレクトリにプロジェクトが作成されます。
省略する場合には、指定したディレクトリ直下に何もないことが前提なることがあるため、1度任意のサブディレクトリに作成してから移動することをお勧めします。

npmの名前を直接指定したらいいみたいなのでreactと入力して実行してみました。

https://www.npmjs.com/package/react

bun create react my-app

すると、次のようなメッセージが表示されました。

The "react" template has been deprecated.
It is recommended to use "react-app" or "vite" instead.

To create a project using Create React App, run

  bun create react-app

To create a React project using Vite, run

  bun create vite

Then select "React" from the list of frameworks.

するとreactは非推奨になっているから、次のいずれかのコマンドを使ってね。というメッセージが表示されました。
react-app or viteのどちらを使用するかは任意ですが、最近Viteを使い始めているのでviteを指定します。
インストール数を基準に判断するのは適切とは言えないと思いますが、参考程度に見てみるとViteの方が多いみたいですね。

https://www.npmjs.com/package/react-app

https://www.npmjs.com/package/vite

ということで、テンプレートを変更して再実行

bun create vite my-app

いくつか質問が聞かれるので答えていきます。

? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

Reactを選択

? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC
    Remix ↗

TypeScriptを選択

次のようなメッセージが表示されたコマンドの実行が無事に完了しました。

✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /workspaces/bun-sandbox/my-app...

Done. Now run:

  cd my-app
  bun install
  bun run dev

メッセージに表示されている指示に従ってディレクトリ移動からアプリケーションの実行まで試してみましょう。
コマンド名の読み替えをするだけで、基本的にはnpmコマンドを実行している時と同じ感覚で実行できると思います。
問題なくアプリケーションが起動できたらこのような画面が表示されます。

おわりに

今回はとりあえずBunを使ってReactのプロジェクトを作成してみるところまで試してみることがゴールでしたのでベンチマーク系のツールを使って厳密に比較したわけではないですが、肌感覚でも軽くて速いように感じました。
何かしらお遊びでアプリケーションを作ることがもう少ししっかりと使って遊んでみたいですね。