🍭

【Rails7】Stimulusを使って入力フォームをクリアにする

2024/08/03に公開

Rails

はじめに

こんにちは。Ruby on Railsを学習しているmockeyと申します。
現在作成中のアプリにはチャットbot機能がありますが、入力フォームから送信した後にフォームから入力内容をクリアにする実装をしたいと思います。

今回は、JavaScriptのフレームワークの一つである「Stimulus」を使用していきます。
どなたかの参考になれば嬉しいです。

前提

この記事ではChatbot機能の実装についての記載はありません。
Chatbot機能はturboを使用しています。

バージョン

Ruby 3.2.3
Rails 7.1.3.4
開発環境　Docker

Stimulusとは？

Stimulusは、JavaScriptフレームワークの一つで、HTML属性を利用して動的なUIを作る事ができます。

ボタンをクリックしたらテキストが変わる
ボタンが押下された時に色が変わる
モーダル画面の表示　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　などが挙げられます。

Rails7では自動的にStimulusが組み込まれていますが、それ以外のバーションや導入されていない場合はgem 'stimulus-rails'を手動でインストールして使います。
プロジェクトの設定情報や依存関係を管理しているpackage.jsonでも確認ができます。

package.json

"@hotwired/stimulus": "^3.2.2"

Stimulusの概念

アクション
アクションは、特定のDOMイベント（例えばクリックや入力など）が発生したときに実行されるメソッドを指定するためのもの。HTMLの要素にdata-action属性を付けて、その中にコントローラー名とメソッド名を指定することで、イベントがトリガーされたときに対応する処理を呼び出すことができる。

<button data-action="click->myController#changeText">Click Me</button>

→ボタンがクリックされた時に、my ControllerのchangeTextメソッドが呼び出される。

ターゲット
ターゲットは、コントローラーが特に操作したいHTML要素を特定するための手段。
ターゲットを定義することで、コントローラー内からその要素にアクセスできる。

<div data-target="myController.output">This is the output</div>

→myController内でoutputという名前のターゲットを使って、このdiv要素にアクセスして内容を変更できる。

データ属性の読み取り・書き込み・監視
コントローラーは、データ属性を使ってHTML要素に保存されている情報を読み取ったり、新しい値を書き込んだりすることができる。
また、特定のデータ属性を監視して、値が変わった時にアクションを起こすことも可能。
これにより、ユーザーの操作に応じて必要な情報をリアルタイムで反映させたりする事ができる。

下記参考記事により分かりやすい説明がありますので、合わせてご覧ください。

Stimulusコントローラーの作成

terminal

bin/rails generate stimulus form_reset

このコマンドにより、

app/javascript/controllers/form_reset_controller.jsというファイルが生成
app/javascript/controllers/index.jsへの追記

が実施されました。

index.jsには、form_reset_controller.jsを読み込む処理が追加されています。

app/javascript/controllers/index.js

// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import FormResetController from "./form_reset_controller"
application.register("form-reset", FormResetController)

import HelloController from "./hello_controller"
application.register("hello", HelloController)

Stimulusコントローラーの設定

app/javascript/controllers/form_reset_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="form-reset"
export default class extends Controller {
  reset() {
    this.element.reset()
  }
}

このコントローラーはフォームをリセットするためのresetメソッドを持っています。

HTMLの設定

Stimulusの属性をフォームタグに追加し、生成したコントローラーを活用して、フォーム送信後に自動的にリセットされるように設定します。

app/views/chatbots/ask.html.erb

~~~~該当箇所のみ~~~~
<%= form_with(model: @chatbot, url: chatbots_answer_path, data: { controller: "form-reset", action: "turbo:submit-end->form-reset#reset", turbo_frame: "chatbot-form" }) do |f| %>

Stimulusのform-resetコントローラーがフォームに適用され、turbo:submit-endイベントが発生したとき（つまり、フォームが送信されたとき）にform-reset#resetアクションが呼び出されます。
これにより、フォームがリセットされました。

[参考動画]

おわりに

TurboやStimulusの理解は難しいですが、複雑な環境構築をせずとも動きのあるアプリを作れる事が分かりました。
アプリ制作を通して引き続き理解を深めていきたいと思います。

ご覧いただきありがとうございました。