Rails7 stimulusを使用してボタンクリックでhello worldを表示する

  • 作成日 2024.06.25
  • 更新日 2024.06.26
  • rails
Rails7 stimulusを使用してボタンクリックでhello worldを表示する

Ruby on Rails 7で、stimulusを使用してボタンクリックでhello worldを表示するサンプルコードです。

環境

  • OS Ubuntu24.04
  • rails 7.1.3

Stimulusのインストール

Rails 7では、Stimulusがデフォルトでセットアップされているため、追加のインストールは不要ですが、念のため以下のコマンドで確認します。

$ bundle exec rails stimulus:install

Stimulusコントローラーの作成と設定

Stimulusコントローラーを生成します。

$ rails generate stimulus Hello

生成されたコントローラーを以下のように編集します。

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("Hello from Stimulus!");
  }

  greet() {
    console.log("Hello, World!");
  }
}

HTMLの設定

ビューファイルでStimulusコントローラーを使用します。

<!-- app/views/welcome/index.html.erb -->
<h1>Stimulus Example</h1>

<div data-controller="hello">
  <button data-action="click->hello#greet">Click me</button>
</div>

ルートの設定

config/routes.rbでルートを設定します。

# config/routes.rb
Rails.application.routes.draw do
  root 'welcome#index'
end

Railsサーバーの起動

最後に、Railsサーバーを起動して動作を確認します。
※自分の環境は外部からアクセスできるようにして起動してます。

$ rails s -b 0.0.0.0

これでボタンをクリックすると「hello world」が表示されます。