rails、importmapの初めの一歩はstimulus #Rails

railsのimportmapについて理解し始めたころ、javasprict/controllersはなんだろうという疑問がでてきました。
これまで、controllersというフォルダは使ってこなかったため、使い方もわからず、色々調べた結果stimulusに行きつきました。
これが、controllersを理解するキーでした。

stimulusとは

stimulusとはjavascriptのフレームワークです。
以下公式参考

Stimulus は、控えめな目標を掲げた JavaScript フレームワークです。他のフロントエンド フレームワークとは異なり、Stimulus は、単純な注釈を使用して JavaScript オブジェクトをページ上の要素に接続することで、静的またはサーバーでレンダリングされたHTML (「既存の HTML」) を強化するように設計されています。

これらの JavaScript オブジェクトはコントローラーと呼ばれ、Stimulus は HTML 属性が表示されるのを待機しながらページを継続的に監視しますdata-controller。各属性について、Stimulus は属性の値を調べて対応するコントローラー クラスを見つけ、そのクラスの新しいインスタンスを作成し、それを要素に接続します。

html属性を使用して、JavaScriptやJQueryのコードを減らして、ビューとロジックの分離を促進するものみたいです。

stimulusの使い方

実際に、使ってみます。
公式を参考にしました。

まず、controllers配下にsample_controller.jsというファイルを作成します。
js,thmlファイルに以下を記載

import { Controller } from "@hotwired/stimulus"

export default class extends Controller { 
  // コントローラーにターゲットを定義
  static targets = [ "name", "output" ]

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}

<div data-controller="sample">
  <input data-sample-target="name" type="text">

  <button data-action="click->sample#greet">
    Greet
  </button>

  <span data-sample-target="output">
  </span>
</div>

コードの説明

js部分

import { Controller } from "@hotwired/stimulus"
StimulusからControllerクラスをインポート

static targets = [ "name", "output" ]
コントローラーにターゲットを定義。この場合、nameターゲットとoutputターゲットが定義

greet()
greetメソッドは、clickイベントがボタンに対して発生したときに呼び出される。
このメソッド内で、nameターゲットから入力された値を取得し、outputターゲットに挨拶メッセージとして設定

html部分

<div data-controller="sample">
このdiv要素は、sampleという名前のStimulusコントローラーを指定

<input data-sample-target="name" type="text">
このinput要素は、sampleコントローラーのnameターゲットとして指定
ユーザーが入力する名前を受け取る

<button data-action="click->sample#greet">
このbutton要素は、クリックイベントが発生したときにsampleコントローラーのgreetアクションを呼び出す

<span data-sample-target="output">
このspan要素は、sampleコントローラーのoutputターゲットとして指定
ここに挨拶のメッセージが表示

動作

では実際に動かしてみます。
文字を入力すると、右側に表示されました。

感想

importmapのjsの使い方がわからず、stimulusに行きつきました。
stimulusを理解して初めて、rails7のjsの使い方がわかった気がします。
誰かの参考になれば幸いです。

参考

【Rails7】Stimulus入門！ | 概要 ~ 使い方まで詳しく解説
 【初心者】Stimulus の使い方
 Stimulusをはじめよう