トップ > JavaScript > Stimulus.jsを使って、HTMLにかんたんな動きをつける。

Stimulus.jsを使って、HTMLにかんたんな動きをつける。

JavaScript

Rubyの世界を探訪中に見つけたJavaScriptフレームワークStimulus.js。

控えめなJavaScriptフレームワークと称されるだけあって、最低限動かすところまでの敷居が低くていい感じでした。今日はそんなStimulus.jsさんの紹介です。

出会い

Ruby on Rails７の機能を眺めていたら見つけたのがきっかけ。Railsと連携して使うこともできるし、Stimulus単体でも利用可能とのこと。Rails環境はちょうどいいのがなかったので、まずはStimulus単体で触りごごちを試してみることにしました。


実験台はシンプルなWebサイト

実験台としてちょうど良いサイトということで、以前作ったEasy Password Generatorを改造することにしました。

このサイトは、ラジオボタン、チェックボックスとボタンの簡単なフォームでできていて、制御にvue.jsというJavaScriptフレームワークを使っています。

余談ですが、パスワード文字列生成そのものは、OpalというGemでRubyからJSに変換したコードによって実現しています。これもOpalの実験でおためし実装したものです。


公式ハンドブックを眺めながら実装

以下のサイトからHandBookを読み進めながら、基礎的な動作を学びます。

stimulus.hotwired.dev

最低限、覚えることはざっくり３つ

  • クラスをStimulusにControllerとして登録。
  • 制御したいタグにTargetをくっつける。Target名には「data-クラス名-target」という名前規則がある。
  • ボタン押したときの動作はActionをくっつける。data-action="クラス名#メソッド名"という名前規則がある。

といったところだけ覚えました。もう少し色々ありそうですが、この３つだけ覚えておけばなんとなく操作できそうです。


Stimulusとは無関係に、yarnとはなんぞ？でつまずく

Hello Stimulusのところで、yarn installとか出てきてなんじゃそれは？となったのですが、Node.jsというものをインストールすると一緒についてくるnpmというJavaScriptライブラリをお手軽インストールする仕組みを、さらに便利にしたパッケージ管理システムとのこと。Node.jsを使っていなかったのでここが一番つまずいたポイントでした。

プログラミングって、やはり環境構築というのが大きなつまずきポイントなのではないかなと改めて思うところではあります。


そして、yarnを使わない方法にあとから気づく

一通りの学習を終えたのち、Installing Stimulus in Your Applicationというページをのぞいてました。するとUsing Without a Build Systemという箇所に、yarn使わない方法が載っていました。なんてこった最初からこっちやっておけばよかった！

載せ替えたWebページは、シンプルなこちらの方法を採用することにしました。こちらの方法はNode.jsも不要なので環境構築の手間が省けます。その代わりHTMLに書く量が少し増えるかな？といった感じです。

既存のサイトを書き換えていく

HandBookでは、JavaScriptのソースファイルは別に置いてある前提なのですが、手っ取り早く試したかったのでHTML埋め込みでJavaScriptを書いていきました。書き換え自体は、最初のハンドブックで覚えた内容を置き換える程度だったので、簡単にできた印象です。

できあがったWebサイトは、こちらパスワードジェネレータになります。

コードを一部抜粋して紹介

まずは、scriptタグの中身です。

    <script type="module">
        import {Application, Controller} from "https://unpkg.com/@hotwired/stimulus@3.2.1/dist/stimulus.js"

        window.Stimulus = Application.start()

        Stimulus.register("password", class extends Controller {
            static targets = ["option", "lower", "result"]
            static classes = ["supported"]

            connect() {
                if ("clipboard" in navigator) {
                    this.element.classList.add(this.supportedClass);
                }
            }

            generate() {

                // ラジオボタンのチェックが入っているデータを取得する。
                let words;
                this.optionTargets.forEach(x => {
                    if (x.checked) {
                        words = x.value
                        return
                    }
                })

                // 全て小文字にチェックが入っているか
                const isLower = this.lowerTarget.checked

                // パスワード文字列生成
                const password = Opal.EasyPasswordMaker.$make(parseInt(words, 10), isLower);

                // 結果表示
                this.resultTarget.value = password
            }

            copy() {
                navigator.clipboard.writeText(this.resultTarget.value)
                alert('コピーしました。')
            }
        })
    </script>

CDNからstimulus.jsを拾うようにしているのと、Controllerもここで作成しています。


つづいて、bodyタグの中です。全部書くと長いので、使っているところだけピックアップします。

<div class="container-fluid d-flex align-items-center justify-content-center"
     data-controller="password" data-password-supported-class="clipboard--supported">


<input data-password-target="option"
            class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
            value="8" checked>

<button data-action="click->password#generate" type="submit" class="btn btn-primary btn-sm">
                        パスワード文字を作る

BootStrapの定義もあってごちゃっとしていますが、StimulusのコードはHTMLタグの中にdata-なんとかを書いているところです。

ここで、各タグ内の動作を制御したり、値を書き換えたりができます。既存のHTMLに付け足していくだけなので、このような簡単なWebページであれば、かなりお手軽に実装できるところがお気に入りポイントですね。

コードの完全版はGitHubに置いています。ソースがとっ散らかってる感は否めないですが・・。何か参考になりましたら幸いです。

oki-ppanashi/epg_stimulus.html at master · osio-toshimasa/oki-ppanashi · GitHub

まとめ：学習量は少なくても済むので、Webページに簡単な制御をつけたいときにおすすめです！

HandBookに沿って学習していけば、わりあっさり動くところまで持っていくことができます。作者はBaseCampというWebサービスを作っている会社（Ruby on Railsもこの会社が作っています）なので、仕事として使えるものなのですが、趣味時間のなかで個人制作している身としては、このようなシンプルなフレームワークは使い勝手や時間効率がよく、とても魅力的に感じました。ありがたい！

Webページ作るときはしばらくStimulusを選択肢としてやっていきたいと思います😊