こちらの続き、railsプロジェクトに当てる前提でいろいろ試しています。
とりあえずハンドブックを読んで、自分なりに纏めてみる（ちなみに書いている人間はWebプログラミング初心者です。間違いなどあればどしどし指摘をよろしくおねがいします1）。
#stimulus、HTML側の三要素ーー【controller】【target】【action】
HTML側で記述する基本的な要素は、
・data-controller
・data-action
・data-target
の３つのはず。
……前回も触れた、ハンドブックの【Hello, Stimulus】を持ち出すと、
<div data-controller="hello">
<input data-target="hello.name" type="text">
<button data-action="click->hello#greet">Greet</button>
</div>
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name" ]
greet() {
console.log(`Hello, ${this.name}!`)
}
get name() {
return this.nameTarget.value
}
}
（ファイルの場所がハンドブックと違うのは、railsプロジェクトに当てているから……前回参照）。
##それぞれ、何をやっているかというとーー
###data-controller
<div data-controller="hello">
〜〜〜〜
</div>
→「div」に当てて、
この「div〜〜/div」の範囲が「data-controller="hello"」の該当範囲だよー
と教えている。
###data-action
<button data-action="click->hello#greet">Greet</button>
→「button」に当てて、
この「button」がドウコウした（今回なら「click」された）時、js側で何らかの動き（今回なら「helloのgreetメソッド」）を発生させるよー
と言っている。
###data-target
<input data-target="hello.name" type="text">
→「input」に当てて、
上記【data-actionで発生するｊｓ側の動き】の中では、このinput要素は「helloのname」として取得される2（あるいはjs側で用意した値を設定する3）よー
と教えている。
#それぞれに対応するjs側の要素は……
###【data-controller】への対応→jsファイルそのもの
『【data-controller】が指定した該当範囲』内で発生した刺激（stimulus）については、『【data-controller名】_controller.js』にあるjs記述が処理を行う。
###【data-action】への対応→jsファイル内の関数
greet() {
console.log(`Hello, ${this.name}!`)
}
『"〜〜〜〜->【data-controller名】#【data-action名】"』の刺激が発生すると、『【data-controller名】_controller.js』にある『【data-action名】と同名のメソッド』が起動する。
###【data-target】への対応→jsファイル内の記述、『static targets = [【target名】]』および『this.【target名】Target(s)』
static targets = [ "name" ]
get name() {
return this.nameTarget.value
}
【data-target】にされた要素は、js内では**this.【target名】Target(s)**としてデータを取得/設定する。この両者は、**static targets = [【target名】]**の記述により関連付けられる。
「Target」「Targets」の違いについては、また今度。
##で、結局つまりどういうこと？
###……たぶん、こういうこと。
①：HTML側でアクション（ボタンのクリックとか）が発生し、それによってjs側の【action名と同じ名称のメソッド】が呼び出される。
②：「HTML側target要素」と「js側のThis."target名"Target(s)」は、「static targets ="target名"」の記述で関連付けられている。
③：「①」によって起動したメソッド内（あるいは、さらにそこから呼び出されたメソッド内）で、
・「This."target名"Target(s)」から値が取得される。
・「This."target名"Target(s)」に値を設定する。
→「②」によって「This."target名"Target(s)」はHTML側の要素と関連付けられているので、この「値設定」「値取得」によりHTML要素の取得，設定が行われる。
とりあえず、概要はつかめたような気がする。
「Target」と「Targets」の違い、具体的な値の取得方法、アクションの種類などは、また追々……書けていけたらいいなぁ。