Rails 開発者必見！Stimulus で React の useState のような動的 UI 更新を実現する方法

// Stimulusの基本クラスをインポート
import { Controller } from "@hotwired/stimulus";

// Stimulusコントローラーを定義（クラス名は自由だが、ファイル名と対応させる）
export default class extends Controller {
  // HTMLのどの要素をターゲットにするか定義
  // "input"と"counter"という名前のターゲットを設定
  static targets = ["input", "counter"];

  // HTMLから渡される値を定義
  // 最小文字数(min)と最大文字数(max)を数値として受け取る
  static values = { min: Number, max: Number };

  // コントローラーがDOMに接続された時に自動実行
  // Reactの useEffect(() => {}, []) に相当
  connect() {
    this.updateCount(); // 初期表示時に文字数を更新
  }

  // 文字数カウントを更新するメソッド
  // Reactの setState() に相当する処理
  updateCount() {
    // inputTargetから現在のテキストを取得
    const text = this.inputTarget.value;
    const count = text.length;

    // counterTargetに文字数を表示
    // ReactのuseStateで状態を更新するのと同じ効果
    this.counterTarget.textContent = count;

    // 文字数に応じてスタイルを動的に変更
    // 条件によってCSSクラスを切り替え
    if (count < this.minValue) {
      this.counterTarget.className = "text-red-600"; // 文字数不足：赤色
    } else if (count > this.maxValue) {
      this.counterTarget.className = "text-red-600"; // 文字数超過：赤色
    } else {
      this.counterTarget.className = "text-green-600"; // 適切な文字数：緑色
    }
  }
}

<!-- data-controller属性でStimulusコントローラーを指定 -->
<!-- data-*-value属性で値をJavaScriptに渡す -->
<div data-controller="character-counter"
     data-character-counter-min-value="10"
     data-character-counter-max-value="2000">

  <label class="block text-sm font-medium text-gray-700 mb-2">
    面談内容 <span class="text-red-500">*</span>
  </label>

  <!-- textareaをinputターゲットとして指定 -->
  <!-- data-action属性でイベントとメソッドを紐付け -->
  <%= form.text_area :content,
        rows: 12,
        class: "w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none",
        data: {
          character_counter_target: "input",           # inputターゲットとして指定
          action: "input->character-counter#updateCount" # inputイベント時にupdateCountメソッド実行
        } %>

  <p class="mt-2 text-sm text-gray-500">
    10文字以上2000文字以内で入力してください。
    <span class="ml-2">
      <!-- counterターゲットとして指定：ここに文字数が表示される -->
      現在: <span data-character-counter-target="counter">0</span>文字
    </span>
  </p>
</div>

<!-- ① この div要素にStimulusコントローラーを接続 -->
<div data-controller="character-counter">
  <!-- この要素の中で character-counter が有効になる -->
</div>

<div data-controller="character-counter">
  <!-- ② inputターゲットとして textarea を指定 -->
  <textarea data-character-counter-target="input"></textarea>

  <!-- ③ counterターゲットとして span を指定 -->
  <span data-character-counter-target="counter">0</span>
</div>

// JavaScript側で、こうアクセスできるようになる
this.inputTarget; // ← textarea要素を取得
this.counterTarget; // ← span要素を取得

// つまり、getElementById() の代わりに、こんな感じ：
// Before: document.getElementById('my-textarea')
// After:  this.inputTarget

<div data-controller="character-counter">
  <!-- ④ inputイベントが発生したらupdateCountメソッドを実行 -->
  <textarea
    data-character-counter-target="input"
    data-action="input->character-counter#updateCount"
  ></textarea>

  <span data-character-counter-target="counter">0</span>
</div>

<div
  data-controller="character-counter"
  data-character-counter-min-value="10"
  data-character-counter-max-value="2000"
>
  <textarea
    data-character-counter-target="input"
    data-action="input->character-counter#updateCount"
  ></textarea>

  <span data-character-counter-target="counter">0</span>
</div>

// JavaScript側で、こう使える
this.minValue // ← 10 が入る（Number型に自動変換）
this.maxValue // ← 2000 が入る（Number型に自動変換）

// values定義があるから自動で型変換される
static values = { min: Number, max: Number }

<!-- 👍 同じコントローラーを別の場所で再利用 -->
<div data-controller="character-counter" data-character-counter-min-value="5" data-character-counter-max-value="500">
  <!-- コメント用のフォーム -->
</div>

<div data-controller="character-counter" data-character-counter-min-value="10" data-character-counter-max-value="2000">
  <!-- 面談記録用のフォーム -->
</div>

// auto_save_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["form", "status"];
  static values = { url: String, interval: Number };

  connect() {
    this.autoSave = setInterval(() => {
      this.save();
    }, this.intervalValue);
  }

  save() {
    // フォームデータを自動保存
    this.statusTarget.textContent = "保存中...";
    // Ajax処理...
  }
}

// search_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["input", "results"];

  search() {
    const query = this.inputTarget.value;
    if (query.length > 2) {
      // 検索API呼び出し
      this.showResults(results);
    }
  }
}