RailsプロジェクトにおけるBunを使用したJS/CSSビルドのメリットと実装方法

背景

今回、個人開発の小規模アプリにおいて、軽量かつシンプルなビルドツールを求めていました。これまでWebpackerやesbuildを使ってきましたが、設定が複雑でビルド時間が長いことが課題でした。Bunを選んだ理由は、非常に高速で、設定が簡単な点に加え、JSとCSSのビルドが一貫してシンプルに管理できるからです。Bunを使ったビルドプロセスの実装手順について詳しく説明します。

Bunの速度比較

中規模のプロジェクト（約1000行のJSと500行のSassコード）をビルドする場合、Webpackerは約8〜10秒、esbuildは1〜2秒でビルドを完了します。一方、Bunはその中でも最速で、同じビルドタスクをわずか0.5〜1秒未満で処理できます。Bunの高いパフォーマンスは、ランタイムとビルド機能の統合による効率の高さにあります。

※詳細は調べると検証した記事があるため、それを参照してください！

実装手順

手順 1

まず、Homebrewを使ってBunをインストールします。

brew install bun
#bun -v でバージョン確認

手順 2

プロジェクトディレクトリ内でBunを初期化するため、以下のコマンドを実行します。これにより、package.jsonが自動的に生成されます。

bun init

「bun init」コマンドを打ち込むと名前とエントリーポイントの入力を要求されます。

エントリーポイントについては、今回はオリジナルで設定をするために「index.ts」をとりあえず設定をしておけばいいです。このファイルは後ほど使わないので削除するか無視してください。

手順 3

次に Procfile.dev と package.json の設定をします。
Procfile.devでは下記のようにbin/devを行った際に「bun run」コマンドをjsとcssごとに行うよう設定をします。

web: bin/rails server -p 3000
js: bun run build --watch
css: bun run css:build --watch

「bun run build --watch」を実行した場合、Bunは package.json 内の "scripts" セクションに定義された "build" コマンドを実行します。そのため、このコマンドは package.json に定義されている特定のスクリプトをもとにビルド を行います。
※「js: bun run build --watch」はpackage.json 内のjsに関する設定のみビルドを行います。

{
  "name": "shuffle-lunch-app",
  "scripts": {
    "build": "bun build app/javascript/base.js",
    "css:build": "sass app/assets/stylesheets/application.scss:app/assets/builds/application.css --no-source-map"
  },
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  },
  "module": "index.ts",
  "type": "module"
}

「css: bun run css:build --watch」を実行する際には、「gem 'sass-rails'」をインストールして、sassコマンドを実行できるようにしてください。

gem 'sass-rails'
#=> bundle install

まとめ

今回の個人開発では、軽量かつシンプルなビルドツールを求め、Bunを採用しました。Webpackerやesbuildに比べて、Bunは高速で、設定が簡単であり、JSとCSSのビルドを統一して管理できるため、小規模アプリの開発には最適な選択でした。Bunのインストールから初期設定、そしてProcfile.devによる自動ビルドの設定まで、シンプルで効率的なプロセスを実装することができました。Bunは、個人開発においてフロントエンドビルドを簡素化し、開発速度を向上させる優れたツールです。