【初心者】Stimulus の使い方 #Stimulus

#概要
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>

これで準備完了です。
dockerを動かしていきます。

% docker compose up

dockerが動いているのを確認したのでローカルで確認してみます。
http://localhost:3000/

以下のようにテキストを入力できるフォームが表示されました。

実際に使ってみます。

上記のように入力して**「Greet」**ボタンを押します。

右側に**Qiita！**と表示されるようになりました。

これで完了です。
この機能を活用して様々なJavaScriptの動きをHTML上で表示することができます。

今後、他にも様々な機能を実装していこうと思います。

#最後に

stimulusは最近私も知ったJavaScriptのフレームワークです。
使用方法もコントローラーで接続するので比較的簡単です。

前提条件がdocker・rails6だったので、やりづらいかも知れません。
なので、まずは公式ドキュメントを確認してみて下さい。
「STIMULUS 公式ドキュメント」

私もこれから学習していきます。
頑張りましょう！！