【JavaScript初心者必見】Stimulusの基本的な使い方

フォーザウィン社員発のIT業界にまつわる豆知識。
「フォーザウィンアカデミー」

HOMEフォーザウィンアカデミー 〉【JavaScript初心者必見】Stimulusの基本的な使い方

【JavaScript初心者必見】Stimulusの基本的な使い方

shutterstock_1145753966_0000

コーダーやプログラマーの中には、HTMLやCSSは得意だけど、JavaScriptは苦手という方は少なくありません。
書き方がある程度統一されているHTMLやCSSに対して、JavaScriptは数多くのフレームワークやライブラリが存在し、どれを使えばいいのか迷ってしまうこともWeb制作の場面において、多いのではないでしょうか。
そのような時におすすめしたいのが「Stimulus」というJavaScriptライブラリです。

今回は、「Stimulus」の基本的な操作方法についてご紹介します。

もくじ

  1. Stimulusとは
  2. Stimulusの基本
  3. Stimulusの3つの属性
  4. まとめ

 

◆Stimulusとは

Stimulusとは、Basecampを開発しているメンバーによって開発されたフレームワークで、HTMLにある属性を付与することによって、HTMLをコンポーネント単位でJavaScriptオブジェクトに紐づけることができます。
Stimulusは、JavaScriptの数あるフレームワークの中でも、DOM操作に関してより気軽に使えるフレームワークなので、HTMLとJavaScriptの基本的な知識さえあれば簡単に扱うことができます。

 

◆Stimulusの基本

・HTMLとJavaScriptを「data-controller」で紐づける
StimulusではHTMLとJavaScriptを「data-controller」という属性で紐づけていきます。

次に、JavaScriptで「controller」と呼ばれる部分を作成します。

これで、HTMLとJavaScriptがつながります。

・HTMLからJavaScriptの動作を呼び出す
上記だけでは、何も起こらないので、HTMLの一部を変える必要があります。

これで、「挨拶する」ボタンが押された際に、ログに 「Hello, Stimulus!」 と表示されます。

またStimulusでは、たとえばボタンのアクションとしてコントローラの関数を指定することができます。

ボタンのクリック時にコントローラの greet() を実行しています。

 

◆Stimulusの3つの属性

Stimulusには次の3つの属性があります。
これらの属性をHTMLに加えて記述していきます。

・data-controller( コンポーネントの名前)
・data-action: (イベントのトリガ)
・data-target: (コントローラからハンドルする対象)

 

◆まとめ

JavaScriptは、Angular.JSやReact、Vue.jsといった様々なフレームワークがあり、特に初心者・中級者の方はどれを学べばいいのか迷うことも多いでしょう。
もちろん、モダンなフレームワークをゼロから勉強するのも良いですが、StimulusはHTMLに属性をくっつけるだけで操作可能になり、誰でも気軽に使えるのでおすすめです。
また、Stimulusは他のフレームワークと組み合わせて使うこともでき、Ruby利用者の間で人気のフレームワーク「Turbolinks」と抱き合わせて使うことも多いようです。

ぜひ、自分なりの使い方を見つけて、色々な応用例に活用して見てください。

最新記事

2018.11.08
2018.11.06
2018.10.31
2018.10.24
2018.10.17

カテゴリー

TOP