Zenn
🍣

話題の JavaScriptランタイム Bun を触って見た

2022/10/10に公開
JavaScript
Node.js
Deno
Bun
tech

Bun とは？

https://bun.sh/

Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in.

JavaScript と TypeScript プロジェクトのバンドル、トランスパイル、インストール、実行をすべて Bun で行うことができ、ネイティブバンドラー、トランスパイラー、タスクランナー、npmクライアントが組み込まれた新しい JavaScript ランタイムとのこと
公式ページで明言しているが、とにかく高速らしい
数ヶ月中に安定版のリリースを目指しているとのことで、今後ランタイム環境が置き換わっていくことも視野にいれつつ少し触ってみた

触ってみる

今回は React プロジェクトを立ち上げて、npm パッケージ　をインストールしてみた

インストール

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

React のプロジェクトを開始してみる

以下のコマンド実行

bun create react

今回は react を指定したが、 next, hono などのテンプレートも指定可能
vue や svelte などは今のところ指定できない模様
ロードマップを見ると今後対応しそうではある

続いて作成された react ディレクトリに移動し、サーバーを立ち上げてみる

cd react
bun dev

こんな感じの画面が出ればOK

npm パッケージ のインストールをしてみる

dayjs をインストールしてみる
https://www.npmjs.com/package/dayjs

bun add　dayjs

react/src/App.jsx で以下の変更を行い、 dayjs が問題なく使えるか試してみる

  • dayjs をインポートする
  • Welcome to React! を {dayjs().format('YYYY/MM/DD')} に書き換える
react/src/App.jsx
import logo from "./logo.svg";
import "./App.css";
// 追加
import dayjs from 'dayjs';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {/* Welcome to React! から変更 */}
        <h3>{dayjs().format('YYYY/MM/DD')}</h3>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

現在の年月日が問題なく表示できた

本記事ではここまで
他にも気になる方はREADME 読んでみてください

感想

  • node.js　に比べて、サーバーの立ち上げやパッケージのインストールがとんでもなく爆速で実行できることを体感できた
  • 法人化や資金調達によって開発が開発が加速しているようなので、今後期待できそう
  • deno も npm 対応を最近は行っている模様。今後の動きを注視しておきたい

Discussion