※ こちらの記事は、Stimulusの公式ハンドブックを参考に翻訳しつつ、執筆しています。

対象読者
コマンド少しわかる。
yarnがインストールされている。
HTML, JSの初歩がわかる。

Stimulusフレームワークとは

Stimulusフレームワークをご存じでしょうか？
Ruby on Railsを開発していらっしゃるDHHさんがRuby on Railsの発想から得たJavaScriptフレームワークです。Ruby on Rails 7からはデフォルトとして用意してくれています。

StimulusはReact, Vue.js, Angularとは異なったアプローチをとっており、従来のJqueryに秩序をもたらしたような思想になっています。そのため、既存のウェブサービスやHTMLに適用しやすく、小規模に適用していけます。

バックエンドエンジニアをされていたり、JavaScriptが苦手な方にこそ適しているのではないかなと考えています。事実、私もモダンなJSフレームワーク導入ではやりすぎ感がある機能実装で使っています。また、Railsとは相性が良く、Turboという別機能との合わせ技はすばらしいです。

もし興味がわきましたら是非やってみましょう！。

Stimulusを使ってみる

ありがたいことに公式にて体験用の動作環境リポジトリを用意してくれています。
下記コマンドでチェックアウトできます。

$ git clone https://github.com/hotwired/stimulus-starter.git
$ cd stimulus-starter
$ yarn install
$ yarn start

yarn startできましたでしょうか？
できたら、http://localhost:9000/ にアクセスしてみましょう。

アクセス結果

上記のようにIt works!が表示されたら動いています！。
(画像では私の開発環境が特殊で192.168.122.128になっていますが、みなさんはlocalhostでOKです。)

おめでとうございます！。

ソースコードを確認

では、ソースコードを見てみましょう。

まず、HTMLファイルを見てみましょう。publicディレクトリ配下のindex.htmlです。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <script src="bundle.js" async></script>
</head>
<body>
  <h1 data-controller="example"></h1>
</body>
</html>

It works!って書かれていませんね。
そのかわり<h1 data-controller=”example”></h1>という記述があります。

このdata-controller=”example”がstimulusを使う記述になります。
h1タグにexampleというコントローラを接続しています。

じゃあそのexampleというコントローラはどこにあるのか、ということでJSファイルを見てみましょう。
./src/controllers配下のexample_controller.jsが実体になります。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.textContent = "It works!"
  }
}

ファイル名に注意してください。
接頭辞_controller.jsというように記載することがStimulusのルールになっています。
この接頭辞部分がstimulusのコントローラ名になります。
なので先ほどのHTMLファイルではdata-controller=”example”となっていましたね。その場合、example_controller.jsが適用されることになります。

次に中身です。

まず、import { Controller } from “@hotwired/stimulusとしてControllerクラスをインポートしています。
次に、そのControllerクラスを継承して新しいクラスを作っています。この作ったクラスの中にいろいろと処理を記述していきます。Stimulusコントローラのひな形だと思ってもらえれば大丈夫です。

connect()というメソッドを作り、this.element.textContent = “It works!”と実装していますね。connect()メソッドはブラウザに画面が描画されると勝手に実行されます。

なので、HTMLファイルには書かれていなかった”It works!”が表示されたわけです。

ざっくりとstimulusフレームワークの流れをご理解いただけたでしょうか？

次回は、フォームを利用してもう少し動きのある処理をご紹介したいと思います。