【初心者】Stimulus の使い方

Stimulus

Last updated at 2024-11-03Posted at 2021-08-06

概要

Stimulus の簡単な機能を学習したので記載します。
これからStimulusを学習する方の参考になればと思います。

前提条件としてdockerとrails6で実装しています。
他の方法も一応記載しているので、参考になれば嬉しいです！

Stimulusとは

Stimulusは、JavaScriptフレームワークです。
StimulusはHTMLを中心に考え、JavaScirptで書かれたHTMLを呼び出すことができるように設計されています。

基本説明

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

つまり、class属性がHTMLをCSSに接続するブリッジであるように、Stimulusのデータコントローラー属性はHTMLをJavaScriptに接続するものです。

いや、どうゆことやねんって感じなので実際に使っていきます。

使い方

前提として
① 今回はdockerの環境で開発します。
dockerの環境構築がまだの方は
↓こちら↓を参考にして下さい。
【Docker】Quickstart : Compose and Rails やってみた

②webpackerのインストールが必要な為、rails6で開発します。
rails5の方は以下の方法でwebpackerをインストールしなくても開発できます。
【GitHub】 Stimulus-rails

では開発していきます。

javascriptファイルに記述

javascript>controllers>hello_controller.jsファイルに
以下を記述します。

javascript>controllers>hello_controller.js


import { Controller } from "stimulus"

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

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

viewsファイルに記述

views>messages>index.html.erb に以下を記述します。

index.html.erb

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

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

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