rails7で、Stimulusを使う

はじめに

自分用の学習メモです。
Stimulusを使って、クリックすると色が変わるボタンを実装します。

実装

bootstrapを使って、ボタンを実装します

  <div class="btn btn-primary m-5">ボタン</div>

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

rails generate stimulus btn

これで、app/javascript/controllers/btn_controller.jsというファイルが作成されます。

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="btn"
export default class extends Controller {
  connect() {
      console.log("こんにちは！")
  }
}

　　
HTMLにStimulusコントローラを適用するには、データ属性を使用します。div要素にdata-controller="btn"を追加します。

  <div class="btn btn-primary m-5" data-controller="btn">ボタン</div>

コンソールに、こんにちは！が出力されれば成功です。


data-btn-target="btn"を追加します。

<div class="btn btn-primary m-5" data-controller="btn" data-btn-target="btn">ボタン</div>

この属性により、btnコントローラの中で特定のHTML要素をターゲットとして識別できるようになります。

btn_controller.jsにclassを変更するメソッドを追加します。

export default class extends Controller {
  static targets = ['btn'];

  change_color() {
    const btn = this.btnTarget;
    if (btn.classList.contains('btn-primary')) {
      btn.classList.replace('btn-primary', 'btn-success');
    } else if (btn.classList.contains('btn-success')) {
      btn.classList.replace('btn-success', 'btn-danger');
    } else if (btn.classList.contains('btn-danger')) {
      btn.classList.replace('btn-danger', 'btn-primary');
    }
  }
}

replace(変更前のclass,変更後のclass)ここで、classを変更して色を変えています。

 <div class="btn btn-primary m-5" data-controller="btn" data-btn-target="btn" data-action="click->btn#change_color">ボタン</div>

data-action="click->btn#change_colorを設定し,この要素をクリックすると、btnコントローラのchange_colorメソッドが呼び出されます。

最後に

これで、クリックすると色が変わるボタンを実装できました。