BunとHotwire Turboのセットアップ | Railsアプリケーションの構築方法

背景

今回のプロジェクトでは、Bun を使用してJavaScriptのビルドと管理を行っているため、Railsのデフォルト設定である Turbo の自動セットアップが行われませんでした。そのため、Hotwire の主要な機能である Turbo と Stimulus をBun環境に合わせて手動でセットアップする必要がありました。

turboとは

Turboは、ページの切り替えや部分的なページ更新を速く行えるツールで、Stimulusはボタンのクリックや入力など、動的なユーザーインターフェースを簡単に作るための軽量なフレームワークです。これらのツールを手動で設定することで、Bunの高速な処理能力とRailsの効率的な開発環境をうまく組み合わせ、よりスムーズで快適なウェブアプリケーションを構築することが可能になります。

実装手順

では早速実装の手順を説明していきます。

[前提条件]
・Bun がインストールされていること。
※Bunの設定ではRailsプロジェクトにおけるBunを使用したJS/CSSビルドのメリットと実装方法を参照してください。
・Railsプロジェクト がすでに作成されていること。

手順 1

BunでTurboとStimulusをインストールします。

#Turboのインストール
bun add @hotwired/turbo-rails

#Stimulusのインストール
bun add @hotwired/stimulus

※node_modulesに「@hotwired」が作成されて中に「stimulus」「turbo」「turbo-rails」というフォルダが作成されていると思います。

手順 2

application.js を作成し、TurboとStimulusを設定します。

app/javascript/application.js ファイルを作成コマンド
※今回はassetsの外にjavascriptフォルダを作成します。assetsの中にあるjavascriptフォルダを使用する場合は飛ばしてください。

touch app/javascript/application.js

しかし、このままではマニュフェストファイルで設定している「= javascript_include_tag "application", "data-turbo-track": "reload", defer: true」では「app/assets/javascript」を参照しにいってしまい、エラーが出てしまいます。

そのため、「app/assets/config/manifest.js」に下記の記述してRailsがapplication.jsを認識するように設定をします。

//= link application.js

手順 3

app/javascript/controllersの中身のjsファイルを作成します。
本来であれば「application.js」「hello_controller.js」「index.js」という3つのファイルが作成されるのですが、作成されないので手動で作成をします。

application.js：

import { Application } from "@hotwired/stimulus"

const application = Application.start()

// Configure Stimulus development experience
application.debug = false
window.Stimulus   = application

export { application }

hello_controller.js：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.textContent = "Hello World!"
  }
}

index.js：

// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import HelloController from "./hello_controller"
application.register("hello", HelloController)

手順 4

application.js ファイル内で、TurboとStimulusをインポートします。

import "@hotwired/turbo-rails"
import "./controllers"

手順 5

最後にレイアウトファイル（app/views/layouts/application.html.slim）で、javascript_include_tag "application" を使用していることを確認します。

= javascript_include_tag "application", "data-turbo-track": "reload", defer: true

まとめ

この手順では、Bunを使ってTurboとStimulusをRailsプロジェクトに手動で設定する方法を紹介しました。Bunで必要なパッケージをインストールし、application.js やコントローラを適切に設定することで、Railsのアセットパイプラインと連携させました。これにより、Turboによる高速なページ遷移や部分更新、Stimulusを使ったインタラクティブな機能を簡単に実装できるようになります。結果として、Bunの高速なビルドとRailsの効率的な開発環境を最大限に活用することが可能になります。