for the win｜フォーザウィン

【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」という属性で紐づけていきます。

<div class=“hello”></div>
↓
<div data-controller="hello"></div>

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

import { Controller } from "stimulus"

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

　　}
}

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

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

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

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

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

＜基本例＞
<div data-controller="hello">
  <input data-target="hello.name" type="text">
  <button data-action="click->hello#greet">Greet</button>
</div>

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

import { Controller } from "stimulus"

export default class extends Controller {
  greet() {
    const name = this.targets.find("name").value
    console.log(`Hello, ${name}!`)
  }
}

◆Stimulusの3つの属性

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

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

◆まとめ

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

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

© 2024 forthewin.co,.ltd.