はじめに

本記事は錆びかけたRailsの知識を頑張ってアップデートするアドベントカレンダー24日目です。

自分なりに整理するために、Stimulusの使い始め方についてまとめておきます。

Stimulusとは

Stimulusは、JavaScriptフレームワークでです。Webページに富んだインタラクティブな機能を簡単に追加できます。Railsによって開発されたこのフレームワークは、DOM要素とJavaScriptオブジェクトを「コントローラ」として結びつけることで、ユーザーインターフェースの振る舞いを容易に管理します。StimulusはHTMLマークアップ内で独自の属性を使用し、JavaScriptのコードを宣言的に適用します。これにより、クリーンで保守しやすいコードを書くことが可能になり、特にRailsアプリケーションにおいて効果を発揮します。Stimulusは、非同期通信、フォーム処理、アニメーションなどの複雑なUIの操作を容易に実現できるため、フロントエンド開発の生産性を高めます。

Stimulusの使い方

Stimulusを使用してRails7アプリケーションにインタラクティブな要素を追加する例を紹介します。

ボタンをクリックするとテキストが変わるシンプルな機能を作成します。

Step1 Railsアプリの準備

Rails7で、新規アプリを作ります。rails newしてください。
Rails7では、esbuildを使用している場合、Stimulusはデフォルトで含まれています。

Step2 Stimulusコントローラの作成

app/javascript/controllersディレクトリに新しいStimulusコントローラを作成します。例えばexample_controller.jsという名前でファイルを作成します。

app/javascript/controllers/example_contoller.js

// app/javascript/controllers/example_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["output"]

  changeText() {
    this.outputTarget.textContent = "テキストが変更されました！"
  }
}

このコードにおけるstatic targets = ["output"]は、コントローラが操作するDOM要素を指定します。changeTextメソッドは、ボタンがクリックされたときに実行されるアクションです。

このメソッド名はなんでも良く、後でこのメソッドの名称をHTMLに直接書くことになります。

Step3 ビューを編集

Stimulusコントローラをビューに統合します。例えばapp/views/home/index.html.erbに以下のように記述します。

index.html.erb

<div data-controller="example">
  <button data-action="click->example#changeText">テキストを変更</button>
  <p data-example-target="output">ここが変わります</p>
</div>

<p data-example-target="output">とある部分が、Stimulusのコントローラにあるstatic targets = ["output"]と対応しています。ここが、操作を行うDOMの紐付けです。

また、<button data-action="click->example#changeText">テキストを変更</button>の部分で、「クリックしたらexample_controller.jsにあるchangeTextが動く」ということを指定します。

Stimulusの使い道

Stimulusは、以下のような用途で使用することが考えられます。Turboと組み合わせてさまざまなことに使えます。もっと応用的な使い方もあるかもしれません。今後さらに便利な使い方を見つけていきたいです。

フォームのリアルタイムバリデーション
ユーザーがフォームに入力すると、その場で入力内容の検証を行い、フィードバックを提供します。

非同期によるモーダルウィンドウの表示
サーバーからデータを非同期で取得し、モーダルウィンドウ内に表示します。例えば、ユーザーの詳細情報や画像ギャラリーなどです。

ドロップダウンメニューの動的制御
クリックやマウスオーバーによってドロップダウンメニューを表示・非表示します。

トースト通知
サーバーからのレスポンスやユーザーのアクションに基づいて、画面の一部に短い通知メッセージを表示します。

無限スクロール
ユーザーがページの下部に到達すると、自動的に追加のコンテンツを読み込みます。

タブ切り替え
ページ内の異なるセクション間でのタブベースのナビゲーションを実現します。

スライダーやカルーセル
画像やコンテンツのスライダーを操作して、様々なアイテムを表示します。

自動補完機能
ユーザーがフォームフィールドにタイプすると、関連する提案がリアルタイムで表示されます。

インタラクティブなチャートやグラフ
データの視覚化に役立つ、インタラクティブなチャートやグラフを表示します。

アコーディオンメニュー
クリックでセクションを展開・縮小し、コンテンツを表示・非表示にします。