【Rails + Bun】Rails 7.1.0.beta1でJSのビルドにBunを試してみる #Rails

Rails 7.1.0.beta1で導入された新機能の一つに、JavaScriptのビルドツールとしてBunが追加されました。

Rails 7.0のオプションに関して以前別記事にてまとめましたが、今回はこのBunを選択して試してみます。
よければこちらの記事も読んでみてください。

執筆時点でv7.1.0はまだベータ版となっています

$ rails -v
Rails 7.1.0.beta1

Bunについて

Bunは先日バージョン1.0がリリースされたばかりの、新しいJavaScriptランタイムです。
Node.jsやDenoと比較しても速いことを推しています。
このBunですが、JavaScriptランタイムだけでなく、bundlerやパッケージマネージャー、テストといった様々な機能を持っています。

bunのインストール方法は以下を参考にします。

Rails newをする

Rails v7.0.1.beta1をインストールし、 rails new のオプションを確認してみると、 bun が追加されていることがわかります。

$ rails new -h | grep javascript
  -j, --js,      [--javascript=JAVASCRIPT]
    # Choose JavaScript approach [options: importmap (default), bun, webpack, esbuild, rollup]

とにかくアプリケーションを作成します。

rails new -j bun sample_app

一部略

一部略

bun.config.jsが作成されました。

パッケージの管理もbunを使いたいのですが、yarn installが実行され、yarn.lockが生成されてしまったので、yarn.lock、node_modulesを一旦消して、bunを使ってインストールします。

bun install

また、Rails newの際にforemanのインストールも行われおり、bin/dev を実行すると、railsが起動し、bunによるbuildも実行されます。

bin/dev

tsxを使ってみる

Bunは自分でTypeScriptをJavaScriptにトランスパイルしたりせずに、TypeScriptをそのまま実行することができます。
またJSXもサポートしており、Bun内部でJSXの構文をJavaScriptに変換して実行してくれます。

なので、とにかく動かしてみます。

まずはReactをインストールします。

bun add react react-dom

devDependenciesは -dをつけます。

bun add -d @types/react @types/react-dom

そして適当なcontroller, viewファイルを作成し

app/views/home/index.html.erb

<div id="root"></div>

JSを実装していきます。

app/javascript/controllers/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import { App } from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

app/javascript/controllers/App.tsx

import { useState } from 'react'

export const App = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Hello Bun!</p>
      <p>
        <button type='button' onClick={() => setCount((count) => count + 1)}>
          count is: {count}
        </button>
      </p>
    </div>
  )
}

何も設定を書き換えずに、TSXを動かすことができました。

おわりに

assets:precompileでBunを組み合わせられることがわかりました。

またRails 7.1からは、Dockerを使って手軽にRailsアプリをデプロイできるツール Kamal を使ってデプロイできるように、Dockerfileをgenerateするようになっています。
このDockerfileにもbunのインストールがされるようになっていました。

個人的には、現時点ではRailsでBunを使う必要性をあまり感じていないので、使う機会はやってくるのだろうか?と感じています。

【Rails + Bun】Rails 7.1.0.beta1でJSのビルドにBunを試してみる

Bunについて

Rails newをする

tsxを使ってみる

おわりに

Ref