0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

爆速JS環境Bun入門:5分でNode.jsの4倍速を体験しよう

Last updated at Posted at 2024-07-07

Bunは、JavaScriptの実行とパッケージ管理を高速化するランタイムです。Nodeを置き換える可能性を秘めています。

「本当に必要なの?」

そう思った方、ちょっと待ってください。Bunは単なる新顔ではありません。Nodeの4倍以上の速度1で動作し、TypeScriptやJSXをネイティブサポートする、まさに「爆速」な開発環境なのです。

本記事では、Bunのセットアップからhello-worldまでを5分で体験できる方法をご紹介します。Nodeをご存知の方はもちろん、「bunってなんぞや?」と思っている方に読んでいただきたい内容です。

1分でできるBunのセットアップ

Bunのインストールはとても簡単です。ターミナルを開いて、以下のコマンドをコピー&ペーストするだけ。

macOS, Linux

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

windows

powershell -c "irm bun.sh/install.ps1|iex"

これだけで、Bunがインストールできます。インストールが完了したら、さっそく動作確認をしてみましょう。

bun --version

バージョン番号が表示されれば、準備完了です。

Node.jsとの圧倒的な違い

Bunを使って初めてスクリプトを実行したとき、私は目を疑いました。これほどまでに起動が速いのかと。

例えば、簡単なHello Worldプログラムを実行してみましょう。

hello.ts
console.log("Hello, Bun!");

このファイルをNodeで実行すると、ほんの少し(目に見えないくらいの)遅延があります。しかしBunで実行すると...

bun run hello.ts

瞬時に結果が表示されるのです。この差は、大規模なプロジェクトになればなるほど顕著になります。

以下はBunの作者Jarred Sumner氏による、node, denoとの実行スピード比較です。
Benchmark 1がbun、2がnode、3がdenoです。

さらに先ほどのコマンドでお気づきだと思いますが、BunはTypeScriptやJSXをそのまま実行できます。つまり、事前のコンパイルやトランスパイルが不要なのです。いちいちTypescript周りのパッケージをインストールしてくる必要がありません。これは開発効率を大幅に向上させます。

Bunを使って変わる開発ライフ

Bunを日々の開発に取り入れることで、私の開発ライフは大きく変わりました。

  1. プロジェクトの起動時間とホットリロード時間が短縮され、ストレスが激減。
  2. TypeScriptやReactの開発がシームレスに。
  3. ビルトインのパッケージマネージャーにより、voltaなどのパッケージマネージャーを別途導入する必要がない。

特に印象的だったのは、大規模なReactプロジェクトでのホットリロードの速度です。変更を加えてから画面に反映されるまでの時間が、まるで瞬間移動のように感じられました。

Bunを使ったReact, Next.jsの始め方

React

bun create vite my-app

Next.js

bun create next-app

留意点

ここまで良い点ばかり述べてきたので、最後にデメリットというか留意しておくべき点を述べて締めます。

Bunは、Jarred Sumner氏がほとんど一人で開発を手掛けているため、作者がモチベを保てなくなった瞬間にサポートが終了します。これはnodeにはない安定性の欠如を示します。

また、nodeと比較して新しいことができるようになるものではありません。既存の効率を大幅に向上させただけで、Bunにしかできないことは特にないです。

したがって、node、deno以外のランタイムの選択肢が新たにできたという認識が正しいです。

まとめ

Bunは、JavaScriptの実行環境として非常に魅力的な選択肢です。特に、パフォーマンスを重視するプロジェクトや、開発効率の向上を目指すチームにとっては、検討する価値が十分にあるでしょう。

今すぐにでもBunをインストールして、あなたのプロジェクトで試してみてはいかがでしょうか?

それでは良きJavascript開発ライフを!

  1. Bunの公式ベンチマークによる。実際のパフォーマンスは環境やタスクによって異なる場合があります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?