この記事はGoogle翻訳の結果を編集したものです。

Stimulusがどのように機能するかを学ぶ最良の方法は単純なコントローラーを作成することです。この章ではその方法を説明します。

前提条件

先に進むにはStimulusを探索するための事前構成済みの空白の状態であるstimulus-starterプロジェクトの実行中のコピーが必要です。

Glitchでstimulus-starterをリミックスして、何もインストールせずにブラウザーで完全に作業できるようにすることをお勧めします。

または、自分のテキストエディターで快適に作業したい場合は、stimulus-starterを複製してセットアップする必要があります。

$ git clone https://github.com/hotwired/stimulus-starter.git
$ cd stimulus-starter
$ yarn install
$ yarn start

次にブラウザーで http://localhost:9000/ にアクセスします。

（stimulus-starterプロジェクトは、依存関係の管理にYarnパッケージマネージャーを使用することに注意してください。そのため、最初にそれがインストールされていることを確認してください。）

すべてはHTMLから始まる

テキストフィールドとボタンを使った簡単な練習から始めましょう。ボタンをクリックするとテキストフィールドの値がコンソールに表示されます。

すべてのStimulusプロジェクトはHTMLから始まります。public/index.htmlを開き、<body>開始タグの直後に次のマークアップを追加します。

<div>
  <input type="text">
  <button>Greet</button>
</div>

ブラウザーでページをリロードすると、テキストフィールドとボタンが表示されます。

コントローラーはHTMLに命を吹き込みます

Stimulusの本質的な目的はDOM要素をJavaScriptオブジェクトに自動的に接続することです。これらのオブジェクトはコントローラーと呼ばれます。

フレームワークの組み込みControllerクラスを拡張して、最初のコントローラーを作成しましょう。src/controllers/フォルダーにhello_controller.jsという名前の新しいファイルを作成します。次に以下のコードを内部に配置します。

// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
}

識別子はコントローラーをDOMにリンクする

次にこのコントローラーをHTMLに接続する方法をStimulusに伝える必要があります。<div>のdata-controller属性に識別子を配置することでこれを行います。

<div data-controller="hello">
  <input type="text">
  <button>Greet</button>
</div>

識別子は要素とコントローラーの間のリンクとして機能します。この場合、識別子helloはhello_controller.jsでコントローラークラスのインスタンスを作成するようにStimulusに指示します。インストールガイドでコントローラーの自動ロードがどのように機能するかについて詳しく知ることができます。

動いていますか？

ブラウザーでページをリロードすると何も変わっていないことがわかります。コントローラーが機能しているかどうかは、どうすればわかりますか?

1つの方法はconnect()メソッドにログステートメントを配置することです。このメソッドはコントローラーがドキュメントに接続されるたびにStimulusが呼び出します。

次のようにhello_controller.jsにconnect()メソッドを実装します。

// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("Hello, Stimulus!", this.element)
  }
}

ページを再度リロードし、開発者コンソールを開きます。Hello, Stimulus!が表示されるはずです。<div>の表現が続きます。

ActionsはDOMイベントに応答します

次にコードを変更して、"Greet"ボタンをクリックしたときにログメッセージが表示されるようにする方法を見てみましょう。

connect()の名前をgreeting()に変更することから始めます。

// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  greet() {
    console.log("Hello, Stimulus!", this.element)
  }
}

ボタンのクリックイベントがトリガーされたときにgreet()メソッドを呼び出します。Stimulusではイベントを処理するコントローラーメソッドをアクションメソッドと呼びます。

アクションメソッドをボタンのクリックイベントに接続するにはpublic/index.htmlを開いてボタンにdata-action属性を追加します。

<div data-controller="hello">
  <input type="text">
  <button data-action="click->hello#greet">Greet</button>
</div>

アクション記述子の説明

data-action値のclick->hello#greetはアクション記述子と呼ばれます。この特定の記述子は次のように述べています。

clickはイベント名です
helloはコントローラーの識別子です
greetは呼び出すメソッドの名前です

ブラウザーにページをロードして開発者コンソールを開きます。"Greet"ボタンをクリックするとログメッセージが表示されるはずです。

ターゲットは重要な要素をコントローラーのプロパティにマップする

テキストフィールドに入力した名前に挨拶するようにアクションを変更して演習を終了します。

そのためには、まずコントローラー内の入力要素への参照が必要です。次に値プロパティを読み取ってその内容を取得できます。

Stimulusを使用すると重要な要素をターゲットとしてマークできるため、対応するプロパティを介してコントローラーで簡単に参照できます。public/index.htmlを開きdata-hello-target属性を入力要素に追加します。

<div data-controller="hello">
  <input data-hello-target="name" type="text">
  <button data-action="click->hello#greet">Greet</button>
</div>

次にコントローラーのターゲット定義のリストにnameを追加してターゲットのプロパティを作成します。Stimulusは最初に一致するターゲット要素を返すthis.nameTargetプロパティを自動的に作成します。このプロパティを使用して要素の値を読み取り、挨拶文字列を作成できます。

試してみましょう。hello_controller.jsを開き、次のように更新します。

// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "name" ]

  greet() {
    const element = this.nameTarget
    const name = element.value
    console.log(`Hello, ${name}!`)
  }
}

次にブラウザーでページをリロードし、開発者コンソールを開きます。入力欄にお名前を入力し、"Greet"ボタンをクリックしてください。こんにちは世界！

コントローラーはリファクタリングを簡素化します

Stimulusコントローラーはメソッドがイベントハンドラーとして機能するJavaScriptクラスのインスタンスであることがわかりました。

つまり、標準的なリファクタリング手法を自由に使用できるということです。たとえば、namegetterを抽出することでgreet()メソッドをクリーンアップできます。

// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "name" ]

  greet() {
    console.log(`Hello, ${this.name}!`)
  }

  get name() {
    return this.nameTarget.value
  }
}

まとめと次のステップ

おめでとうございます。これで最初のStimulusコントローラーが作成されました。

フレームワークの最も重要な概念であるコントローラー、アクション、およびターゲットについて説明しました。次の章ではこれらを組み合わせてBasecampから直接取得した実際のコントローラーを構築する方法について説明します。

Stimulus 2: こんにちは、Stimulus