Rails:Stimulusの初期ファイル構成について

記事を書いた理由

Stimulus-Sortableを利用してドラックアンドドロップを実装したのですが、その時Stimulusのファイル構成がどんな感じになっているかわからなかったので、その備忘録です

環境

• Rails 8
• Ruby 3.3.6

stimulusとは何か

Javascriptのフレームワークです

CSSにおけるBootstrap、RubyにおけるRuby on Railsと同じです

何ができるのか

HTML要素にデータ属性を追加して、JavaScriptのコントローラーと関連づけ、HTML要素を良い感じに操作できます
それを簡単に行えちゃうフレームワークです

「 Turbo + Stimulus」の2つを組み合わせてHotwireという技術で使用されています（Stradaもあるので本当は3つ）

説明するファイルについて

Rails7からディフォルトでstimulus-railsgemが入りました
ここではapp/javascript配下にある3つのファイルについてアウトプットします

app/javascript/application.js

• javascriptのエントリーポイント、アプリが読み込まれて最初に動き始める場所
• application.html.erbのjavascript_include_tagで読み込まれる

app/javascript/application.js

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails";
import "./controllers";

Turboとapp/javascript/controller/index.jsのファイルをインポートしています
app/javascript/controller/index.jsに記述されたStimulusコントローラはここで読み込まれるようになります

app/javascript/application.js

• Stimulusアプリケーションの初期化を担当するファイル

app/javascript/application.js

import { Application } from "@hotwired/stimulus";

const application = Application.start();
export { application };

Application.start()を呼び出して、Stimulusアプリケーションを開始、これにより、StimulusがDOM内のコントローラを検出し、管理できるようになります
export { application }でapplicationを他のファイルでインポートできるようにします

app/javascript/controllers/index.js

• Stimulusコントローラを一元的に登録する場所
• このファイルは、各コントローラをインポートし、Stimulusアプリケーションに登録します。これにより、コントローラがDOM内で適切に動作するようになる

app/javascript/controllers/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)

./bin/rails generate stimulus controllerNameコマンドでコントローラを作成するタイミングで、自動生成されるファイルです
基本的に追加したコントローラは、index.jsに自動で追加されます

補足：app/javascript/controllers/hello_controller.js

ディフォルトだとhello_controller.jsというファイルがあります
ただHello World!を返すだけのコントローラです

基本的には削除してしまった問題ありませんが、手動でコントローラを追加する場合はこれを模倣する感じです

app/javascript/controllers/hello_controller.js

import { Controller } from "@hotwired/stimulus"

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

コントローラを追加するとき

基本的には./bin/rails generate stimulus controllerNameコマンドで任意のコントローラ名でファイルを作成します

その後、そのファイル内で使用したいコントローラをimportして、exportしてあげる

自動で追記されたindex.jsが読み込む

という流れでコントローラを追加します

感想

• JSの知見が少なく、ファイル構成をパッと見ただけではなかなか理解できませんでした…

参考