JavaScript 用のオールインワンツールキット「Bun」を使ってみる

こんにちは、Gaji-Labo フロントエンドエンジニアの石垣です。

今回は、最近話題の JavaScript 用のオールインワンツールキット「Bun」を触ってみたので、概要と基本的な React アプリケーションの作成方法を紹介します。

Bun とは？

Bun は、JavaScript および TypeScript アプリ用のオールインワンツールキットです。

根幹には、Node.js や Deno のように、JavaScript および TypeScript のコードを実行するためのランタイムがあります。

Node.js や Deno と異なるのは、Bun はランタイムだけでなく npm 互換のパッケージマネージャーや Jest 互換のテストランナー、 Webpack 等の代替となるバンドラーなどのツールも含まれている点です。

また、公式ドキュメントによると Bun は高速性を売りにしており、 Bun を利用したサーバーサイドレンダリングは Deno の2倍の表示速度、パッケージインストールは pnpm の17倍の速度を誇るとのことです。

2023年10月11日に v1.0.6 がリリースされており、活発に開発が進められているようです。

Bun のインストール

Bun は curl コマンドを使ってインストールします。

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

React アプリケーションの作成

Bun で Create React App と同様の React アプリケーションを作成してみます。

bun create react-app bun-example-app --template typescript

bun create でテンプレートからアプリケーションを作成することができます。
react-app を指定すると、Create React App と同様のアプリケーションを作成します。

script は yarn や pnpm と同じく bun [script] で実行できます。

bun start

ちなみに bun start は bun run start のアライアスで、bun run を叩くとプロジェクトの script のリストが表示されます。

起動後、 http://localhost:3000 にアクセスすると、見慣れた Create React App の初期画面が表示されます。

パッケージのインストール

Bun は npm 互換のパッケージマネージャーを含んでいるため、ほぼ npm と同じようにパッケージをインストールすることができます。

bun install

パッケージをインストールしたい際は bun add eslint のように add コマンドを使います。devDependencies にインストールしたい場合は -d オプションを付けます。

個人的な感触

npm 互換のパッケージマネージャーが含まれていることでほぼ乗り換えコストを感じることなく使える印象を持ちました。
また、テストランナーやバンドラーがビルトインされていることで環境構築が容易に行えるのもメリットだと感じます。
速度に関しては体感で Node.js と有意な差を感じることはできませんでしたが、Bun に最適化された環境での比較を行っていないため更に検証を行ってみたいと思います。

おわりに

今回は Bun の概要と基本的な React アプリケーションの作成方法を紹介しました。
テストランナーの側面やバンドラーなどまだ掘り下げられていない機能があるので、今後さらに Bun を使ってみてご紹介できればと思います。