HTMLCSSは得意だけれど、JavaScriptは苦手…という方は、多いのではないでしょうか。HTMLCSSは書き方がある程度統一されていますが、JavaScriptは数えきれないフレームワークやライブラリがあるので、どれを使えばいいのか迷ってしまいます。

そのような方にこそおすすめしたいのが、StimulusというJavaScriptライブラリです。

今回は、クリーンなコードでHTMLを拡張する「Stimulus」の概要や基本的な操作方法を紹介します。初心者でも比較的簡単に扱えるので、ぜひ利用してみてはいかがでしょうか。

Stimulusとは?

stm.png

Stimulusは、世界的なプロジェクトマネジメントツールBasecamp(旧37シグナルズ)を開発しているメンバーによって開発されているフレームワークです。

JavaScriptフレームワークだけでも、Angular.JSやReact、Vue.jsと、様々なものがあり、特に初心者・中級者にとってはどれを学べばいいのか迷ってしまいます。もちろん、近年流行しているモダンなフレームワークをゼロから勉強するのもよいですが、DOM操作に関してより気軽に使えるのが、今回紹介するStimulusです。

Stimulusは、簡単にいえば、HTMLにある属性を付与することで、HTMLをコンポーネント単位でJavaScriptオブジェクトと連動させることができるフレームワークです。

スライド1.png

コンポーネントとは、「見た目」「振る舞い」をグループ化して部品化したもののことです。たとえば、パスワードの強度を測定するパスワードチェッカーは、HTMLで組み立てるテキストボックスという見た目部分の他に、実際にパスワードの強度を測定する振る舞い(アルゴリズム)が必要です。コンポーネントの考え方では、この「見た目」部分「振る舞い」部分をセットにして開発します。

フロントエンド開発者と違い、デザイナーやディレクターの方はHTMLCSSには詳しくても、JavaScriptの難しい話は倦厭されがちかもしれません。しかし、HTMLと簡単なJavaScriptの知識さえあれば、Stimulusは簡単に扱うことができます。

StimulusはWebpackやBabelのようなビルドシステムを使ってインストールすることができます。以下のURLでもアクセスできるので、src属性に貼り付けて利用してみましょう。

https://unpkg.com/stimulus/dist/stimulus.umd.js

参考:
Installing Stimulus in Your Application

Stimulusの基本の「き」

code.jpg
イメージ画像 / Unsplash

それでは、Stimulusの基本をゼロから解説していきます。

1. HTMLとJavaScriptを紐づける「data-controller」

HTMLCSSについて少しでも勉強したことがある人は、次のコードを理解できると思います。

<div class="hello"></div>

これはHTMLCSSをつなげるもっとも基本的な方法です。divタグのclass属性に「hello」と名付けることによって、CSSでスタイルを操作することができます。

同じように、StimulusではHTMLJavaScriptdata-controllerという属性で紐づけていきます。例えば、以下のようなコードです。

<div data-controller="hello"></div>

この「見た目」の部分に対して、JavaScript側でcontrollerと呼ばれる「振る舞い」部分を作成します。

import { Controller } from "stimulus"

export default class extends Controller {
  greet() {
    document.text.value = "Hello, ferret!";
  }
}

これで、HTMLJavaScriptがつながりました。

2. HTMLからJavaScriptの動作を呼び出す「data-action」

しかし、これだけでは何も起こらないので、HTML側を少し変えてあげましょう。

<div data-controller="hello">
  <input type="text">
  <button data-action="click->hello#greet">挨拶する</button>
</div>

これで、「挨拶する」ボタンが押された時に、テキストボックスに「Hello, ferret!」と表示されるようになります。

このように、「data-action」を指定したボタンは、クリックすることでJavaScript側のgreet関数を呼び出すことができます。

HTMLからJavaScriptに値を渡す「data-target」

もう一つ、別の例を出してみましょう。JavaScript側のコードは省略しますが、以下のHTMLをご覧ください。

<div data-controller="clipboard">
  パスコード:<input data-target="clipboard.source" type="text" value="ferret" readonly>
  <button data-action="clipboard#copy">クリップボードにコピー</button>
</div>

ここでは、「data-controller」「data-action」の他に、「data-target」が指定されているパーツがあることに気づくでしょう。上記のコードでは、「クリップボードにコピー」というボタンを押すことで、「data-target」が指定されているテキストボックスに入っている「ferret」という文字列をクリップボードにコピーします。

Stimulusの3つの「概念」

スライド2.png

Stimulusの基本的な考え方は以上です。まとめると、Stimulusには「controller」「action」「target」の3つの概念があり、これらを組み合わせることで、JavaScriptのDOM操作を簡単にしてくれます。

しかも、重要なのは、HTMLの構造を崩さずに(というよりも、既存のHTMLに属性をくっつけるだけで)操作可能になる、という点です。つまり、デザイナーの方は単純にWebページのデザインをまず作成したあとに、そのまま「振る舞い」を付け加えればいいことになります。

Stimulusと現行の主流なJavaScriptフレームワークとの違い

logo.jpg

Stimulusは、このように何らかのHTML要素を操作するために作られたフレームワークです。

現在主流のフレームワークの多くは、JSONをテンプレートエンジンを経由してDOM要素に変えていきます。フレームワークで空のページを生成し、そこにレンダリングして要素を表示するやり方を取っています。一方、Stimulusは「すでにそこにあるオブジェクト」に対して動作を与えていきます

また、多くのフレームワークJavaScriptに書かれたオブジェクトの「state」(状態)を管理して、stateに基づいてHTMLをレンダリングします。一方、Stimulusでは、stateはHTMLの中にあるので、controllerはページ遷移の間に破棄することができますが、キャッシュされたHTMLが表示されればcontrollerは再起動されます。

少し難しい話が続きましたが、要するにStimulusは現在人気でよく使われているフレームワークが持っている複雑な手続きを、よりシンプルな形にしているということです。敷居が下がって誰でも操作しやすい反面、少し物足りないと感じる人がいるかもしれませんが、そのような方は別のフレームワークと組み合わせて使ってみるといいでしょう。

まとめ:他フレームワークと組み合わせて使ってみよう

Stimulusは用途が限定されている分、初心者・中級者でもカジュアルに使うことができますが、他のフレームワークと組み合わせて使って応用的に使う方法もあります。

最近のモダンなフレームワークとしてReactとReduxをセットにすることが多いですが、Stimulusの場合はTurbolinksと呼ばれる、Ruby利用者の間で人気のフレームワークと抱き合わせで使うことも多いようです。

使い方次第で、色々な応用例に利用できそうです。ぜひ、自分なりの使い方を見つけてみましょう。