
JavaScript初心者にもオススメ!クリーンなコードでHTMLを拡張する「Stimulus」とは?
- 2018年7月20日
- ニュース
HTML や CSS は得意だけれど、 JavaScript は苦手…という方は、多いのではないでしょうか。 HTML や CSS は書き方がある程度統一されていますが、 JavaScript は数えきれない フレームワーク やライブラリがあるので、どれを使えばいいのか迷ってしまいます。
そのような方にこそおすすめしたいのが、Stimulusという JavaScript ライブラリです。
今回は、クリーンなコードで HTML を拡張する「Stimulus」の概要や基本的な操作方法を紹介します。初心者でも比較的簡単に扱えるので、ぜひ利用してみてはいかがでしょうか。
Stimulusとは?
Stimulusは、世界的なプロジェクトマネジメント ツール Basecamp(旧37シグナルズ)を開発しているメンバーによって開発されている フレームワーク です。
JavaScript は フレームワーク だけでも、Angular.JSやReact、Vue.jsと、様々なものがあり、特に初心者・中級者にとってはどれを学べばいいのか迷ってしまいます。もちろん、近年流行しているモダンな フレームワーク をゼロから勉強するのもよいですが、DOM操作に関してより気軽に使えるのが、今回紹介するStimulusです。
Stimulusは、簡単にいえば、 HTML にある属性を付与することで、 HTML をコンポーネント単位で JavaScript オブジェクトと連動させることができる フレームワーク です。
コンポーネントとは、「見た目」と「振る舞い」をグループ化して部品化したもののことです。たとえば、パスワードの強度を測定するパスワードチェッカーは、 HTML で組み立てる テキスト ボックスという見た目部分の他に、実際にパスワードの強度を測定する振る舞い( アルゴリズム )が必要です。コンポーネントの考え方では、この「見た目」部分と「振る舞い」部分をセットにして開発します。
フロントエンド開発者と違い、デザイナーやディレクターの方は HTML や CSS には詳しくても、 JavaScript の難しい話は倦厭されがちかもしれません。しかし、 HTML と簡単な JavaScript の知識さえあれば、Stimulusは簡単に扱うことができます。
StimulusはWebpackやBabelのようなビルドシステムを使ってインストールすることができます。以下の URL でもアクセスできるので、src属性に貼り付けて利用してみましょう。
https://unpkg.com/stimulus/dist/stimulus.umd.js
参考:
Installing Stimulus in Your Application
Stimulusの基本の「き」
イメージ画像 / Unsplash
それでは、Stimulusの基本をゼロから解説していきます。
1. HTML と JavaScript を紐づける「data-controller」
HTML と CSS について少しでも勉強したことがある人は、次のコードを理解できると思います。
<div class="hello"></div>
これは HTML と CSS をつなげるもっとも基本的な方法です。div タグ のclass属性に「hello」と名付けることによって、 CSS でスタイルを操作することができます。
同じように、Stimulusでは HTML と JavaScript をdata-controllerという属性で紐づけていきます。例えば、以下のようなコードです。
<div data-controller="hello"></div>
この「見た目」の部分に対して、 JavaScript 側でcontrollerと呼ばれる「振る舞い」部分を作成します。
import { Controller } from "stimulus"
export default class extends Controller {
greet() {
document.text.value = "Hello, ferret!";
}
}
これで、 HTML と JavaScript がつながりました。
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つの「概念」
Stimulusの基本的な考え方は以上です。まとめると、Stimulusには「controller」「action」「target」の3つの概念があり、これらを組み合わせることで、 JavaScript のDOM操作を簡単にしてくれます。
しかも、重要なのは、 HTML の構造を崩さずに(というよりも、既存の HTML に属性をくっつけるだけで)操作可能になる、という点です。つまり、デザイナーの方は単純にWeb ページ のデザインをまず作成したあとに、そのまま「振る舞い」を付け加えればいいことになります。
Stimulusと現行の主流な JavaScript フレームワーク との違い
Stimulusは、このように何らかの HTML 要素を操作するために作られた フレームワーク です。
現在主流の フレームワーク の多くは、JSONをテンプレートエンジンを経由してDOM要素に変えていきます。 フレームワーク で空のページを生成し、そこにレンダリングして要素を表示するやり方を取っています。一方、Stimulusは「すでにそこにあるオブジェクト」に対して動作を与えていきます。
また、多くの フレームワーク は JavaScript に書かれたオブジェクトの「state」(状態)を管理して、stateに基づいて HTML をレンダリングします。一方、Stimulusでは、stateは HTML の中にあるので、controllerは ページ 遷移の間に破棄することができますが、キャッシュされた HTML が表示されればcontrollerは再起動されます。
少し難しい話が続きましたが、要するにStimulusは現在人気でよく使われている フレームワーク が持っている複雑な手続きを、よりシンプルな形にしているということです。敷居が下がって誰でも操作しやすい反面、少し物足りないと感じる人がいるかもしれませんが、そのような方は別の フレームワーク と組み合わせて使ってみるといいでしょう。
まとめ:他 フレームワーク と組み合わせて使ってみよう
Stimulusは用途が限定されている分、初心者・中級者でもカジュアルに使うことができますが、他の フレームワーク と組み合わせて使って応用的に使う方法もあります。
最近のモダンな フレームワーク としてReactとReduxをセットにすることが多いですが、Stimulusの場合はTurbolinksと呼ばれる、Ruby利用者の間で人気の フレームワーク と抱き合わせで使うことも多いようです。
使い方次第で、色々な応用例に利用できそうです。ぜひ、自分なりの使い方を見つけてみましょう。