見出し画像
Photo by gifted_poppy953

初心者でもわかるStimulusの使い方

現役君

Stimulusは、JavaScriptの初心者向けのフレームワークです。Stimulusは、Webアプリケーションを構築するための小さなJavaScriptフレームワークで、HTMLのデータ属性を使用して、JavaScriptのコードを簡単に書くことができます。

Stimulusの特徴は、以下の通りです。

  1. 小さくて軽い：Stimulusは、非常に小さなフレームワークで、約2KBのサイズです。

  2. HTML中心：Stimulusは、HTMLのデータ属性を使用して、JavaScriptのコードを書くことができます。

  3. コンポーネントベース：Stimulusは、コンポーネントベースのアーキテクチャを採用しており、各コンポーネントは独立して動作します。

  4. 簡単な学習曲線：Stimulusは、JavaScriptの初心者でも簡単に学習できるように設計されています。

Stimulusの基本的な使い方は、以下の通りです。

  1. HTMLにデータ属性を追加する：HTMLの要素に、`data-controller`、`data-action`、`data-target`などのデータ属性を追加します。

  2. JavaScriptのコードを書く：JavaScriptのコードを書いて、データ属性に応じて、動作を定義します。

  3. Stimulusを初期化する：Stimulusを初期化することで、データ属性とJavaScriptのコードが結びつき、動作が実行されます。

Stimulusの初期化方法は、以下の通りです。

  1. Gitを使用して、Stimulusのスターター・プロジェクトをクローンする：`$ git clone https://github.com/hotwired/stimulus-starter.git`

  2. プロジェクトのディレクトリに移動する：`$ cd stimulus-starter`

  3. Yarnを使用して、依存関係をインストールする：`$ yarn install`

  4. Yarnを使用して、開発サーバーを起動する：`$ yarn start`

以下は、Stimulusのスターター・プロジェクトの`index.html`のコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Stimulus Demo</title>
    <script src="bundle.js" defer></script>
  </head>
  <body>
    <div data-controller="hello">
      <button data-action="click->hello#greet">
        click me
      </button>
    </div>
  </body>
</html>

この`index.html`には、ボタンとテキストを表示する要素が含まれています。ボタンには、`data-controller`と`data-action`のデータ属性が追加されています。`data-controller`は、`hello`コントローラーを指定し、`data-action`は、ボタンをクリックしたときに、`hello`コントローラーの`greet`メソッドを実行することを指定しています。

以下は、`hello_controller.js`のコードです。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("Alert controller connected")
  }

  greet() {
    alert("Hello, world!")
  }
}

この`hello_controller.js`では、`hello`コントローラーを定義し、`greet`メソッドを定義しています。`greet`メソッドは、ボタンをクリックしたときに、テキストを表示する動作を実行します。

Stimulusは、初心者向けのフレームワークですが、実際のアプリケーション開発でも使用できます。Stimulusのドキュメントは、非常に充実しているので、初心者でも簡単に学習できます。

いいなと思ったら応援しよう！