Rails7 stimulusを使用してボタンクリックでhello worldを表示する
- 作成日 2024.06.25
- 更新日 2024.06.26
- rails
Ruby on Rails 7で、stimulusを使用してボタンクリックでhello worldを表示するサンプルコードです。
環境
- OS Ubuntu24.04
- rails 7.1.3
Stimulusのインストール
Rails 7では、Stimulusがデフォルトでセットアップされているため、追加のインストールは不要ですが、念のため以下のコマンドで確認します。
$ bundle exec rails stimulus:installStimulusコントローラーの作成と設定
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'
endRailsサーバーの起動
最後に、Railsサーバーを起動して動作を確認します。
※自分の環境は外部からアクセスできるようにして起動してます。
$ rails s -b 0.0.0.0これでボタンをクリックすると「hello world」が表示されます。

-
前の記事
Ubuntu24.04 phpをインストールする 2024.06.25
-
次の記事
PyCharm 任意のビューに移動するショートカットキー 2024.06.26
コメントを書く