キャラメルケースとかスネークケースとか、命名規則には数種類あるが、stimulusで使うべきはどれなんだろう、と考えて調査してみた結果の纏めです（
書いたきっかけ
前回を書いている途中、html側の記述として
【data-controller = "test_test"】
などと書いたところ、動かなかった。
一方でstimulusハンドブックの第五章では
html側記述→【data-controller="content-loader"】
stimulusのファイル名→【src/controllers/content_loader_controller.js】
となっている。
そこんところ、どうなってるんだろう？ と思って調べてみた。
……もしかしたらハンドブックのどこかには書いてあるのかもしれないが、英文を読む気力がなかった（のでこれは、あくまで自分が調べた動作結果。もしちゃんとしたルールなど知っている方がいたら、ご指摘お願いいたします）。
まずは基本、「データコントローラー名＝アルファベット小文字(+数字）」→《結果：○》
（やっていることは前回と同じ、変数名を変えただけです）。
<div data-controller="test1desu">
<input data-target="test1desu.name" type="text">
<input data-target="test1desu.name2" type="text">
<button data-action="click->test1desu#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
}
}
これは、（まあ当然ながら）動いた。
「_」で区切るスネークケース→《結果：☓》
<div data-controller="test_1_desu">
<input data-target="test_1_desu.name" type="text">
<input data-target="test_1_desu.name2" type="text">
<button data-action="click->test_1_desu#greet">Greet</button>
</div>
//ファイル名を変えただけで、jsファイル内の記述は同じ
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name" ]
greet() {
console.log(`Hello, ${this.name}!`)
}
get name() {
return this.nameTarget.value
}
}
jsファイルのファイル名を「-」で区切るケバブケースに（html側は）→《結果：☓》
<div data-controller="test_1_desu">
<input data-target="test_1_desu.name" type="text">
<input data-target="test_1_desu.name2" type="text">
<button data-action="click->test_1_desu#greet">Greet</button>
</div>
//ファイル名を変えただけで、jsファイル内の記述は同じ
import { Controller } from "stimulus"
//同じなので、コードは省略
……あれ、動かない？ ハンドブック通りなのにーーと見返したら、
ハンドブックは逆（html→「-」で区切るケバブケース、js→「_」で区切るスネークケース）でした。
html→「-」で区切るケバブケース、js→「_」で区切るスネークケース→《結果：○》
<div data-controller="test-1-desu">
<input data-target="test-1-desu.name" type="text">
<input data-target="test-1-desu.name2" type="text">
<button data-action="click->test-1-desu#greet">Greet</button>
</div>
//ファイル名を変えただけで、jsファイル内の記述は同じ
import { Controller } from "stimulus"
//同じなので、コードは省略
ハンドブック通りなので当然動く。
html→「-」で区切るケバブケース、js→「-」で区切るケバブケース→《結果：○》
<div data-controller="test-1-desu">
<input data-target="test-1-desu.name" type="text">
<input data-target="test-1-desu.name2" type="text">
<button data-action="click->test-1-desu#greet">Greet</button>
</div>
//ファイル名を変えただけで、jsファイル内の記述は同じ
import { Controller } from "stimulus"
//同じなので、コードは省略
これも問題なく動きます。
……つまり、jsは「-」「_」どちらでもよくて、htmlは「-」である必要がある？
ちなみにキャメルケースってどうなるんだろう？
html→パスカルケース、js→パスカルケース→《結果：○》
<div data-controller="TestDesu">
<input data-target="TestDesu.name" type="text">
<input data-target="TestDesu.name2" type="text">
<button data-action="click->TestDesu#greet">Greet</button>
</div>
//ファイル名を変えただけで、jsファイル内の記述は同じ
import { Controller } from "stimulus"
//同じなので、コードは省略
あ、うごくんだ。
ただし、【html→キャメルケース、js→ケバブ又はスネーク】
逆に【html→ケバブ又はスネーク、js→キャメルケース】は動かない模様。
じゃあ、ターゲットやアクションはどうなるの？
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name-name","name2" ]
greet() {
console.log(`おはよう9_Hello, ${this.name}! bye_${this.name2}`)
}
get name() {
return this.name-nameTarget.value
}
get name2() {
return this.name2Target.value
}
}
自分が使っているatomだと、この「return this.name-nameTarget.value」を書いた時点で
「name」と「-nameTarget」の色が変わる……別の文字として認識されてるっぽい。
実行すると、当然エラー。
またheml→「-」、js→「_」としても、『該当する名称がみつけられない』としてエラー。
一方で「_」で統一すれば、
<div data-controller="test-desu">
<input data-target="test-desu.name_name" type="text">
<input data-target="test-desu.name2" type="text">
<button data-action="click->test-desu#greet_greet">Greet</button>
</div>
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name_name","name2" ]
greet_greet() {
console.log(`おはよう9_Hello, ${this.name}! bye_${this.name2}`)
}
get name() {
return this.name_nameTarget.value
}
get name2() {
return this.name2Target.value
}
}
……ターゲット名：「name_name」、アクション名：「test-desu」とスネークケースで統一。
<div data-controller="test-desu">
<input data-target="test-desu.name_name" type="text">
<input data-target="test-desu.NameTwo" type="text">
<button data-action="click->test-desu#TestDesu">Greet</button>
</div>
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name_name","NameTwo" ]
TestDesu() {
console.log(`おはよう9_Hello, ${this.name}! bye_${this.name2}`)
}
get name() {
return this.name_nameTarget.value
}
get name2() {
return this.NameTwoTarget.value
}
}
……ターゲット名：「NameTwo」、アクション名：「TestDesu」とパスカルケースで統一。
以下、まとめ（ならここだけでいいのでは？）
「data-controller名（＝htmlファイル内＋jsファイル名称)として使えるのは、
●html→「ab-cd」……ハイフンを入れるケバブケース、js→「ab-cd」……ハイフンを入れるケバブケース
●html→「ab-cd」……ハイフンを入れるケバブケース、js→「ab_cd」……アンダーバーを入れるスネークケース
●html→「AbCd」……大文字にするパスカルケース、js→「AbCd」……大文字にするパスカルケース
※html側では、【「ab_cd」……アンダーバーを入れるスネークケース】は使えない。
「data-target名」「data-action」（＝htmlファイル内＋jsファイル内)として使えるのは、
●html→「ab_cd」……アンダーバーを入れるスネークケース、js→「ab_cd」……アンダーバーを入れるスネークケース
●html→「AbCd」……大文字にするパスカルケース、js→「AbCd」……大文字にするパスカルケース
※html側とjs側で一致させる必要があり、また【「ab-cd」……ハイフンを入れるケバブケース】は使えない。
あとまあ、使えることはわかったけど【「AbCd」……大文字にするパスカルケース】を使うのは統一性の面でどうかとも思う。
とすると結局、
・基本は【「ab_cd」……アンダーバーを入れるスネークケース】で統一。
・ただしhtmlで記述する「data-controller="名称"」だけは、【「ab-cd」……ハイフンを入れるケバブケース】で記述する。
とするのが無難かなあ。