Stimulusの名称ルール

バージョン

stimulus-rails 1.3.4

動機

Stimulusの名称ルールがcamelCaseなのかsnake_caseなのかkabab-caseなのか覚えられないので整理する。

まとめ

JavaScript

対象	名称規則	例
ファイル名	snake_case	sum_scores_controller.js
valuesキー名称	camelCase	mathScore: Number
targets名称	camelCase	'sumDisplay'
関数名	camelCase	function displaySum(){

HTML

対象	名称規則	例
コントローラー名	kebab-case	data-controller="sum-scores"
data属性名	kebab-case	data-sum-scores-target="sumDisplay"
actionコントローラー名	kebab-case	data-action="click->sum-scores#displaySum"
actionメソッド名	camelCase	同上

※Railsのヘルパーメソッドではdata属性名はキーワード引数になるのでsnake_caseにする。

<%= form.label :sum, data: { sum_scores_target: "sumDisplay" } %>

具体例

JavaScript

ファイル名はsnake_case。

app/javascript/contollers/sum_scores_controller.js

名称はすべてcamelCase。snake_caseはJavaScript構文ではOKだがStimulusでは使ってはいけない。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { mathScore: Number, scienceScore: Number };
  static targets = [ "sumDisplay" ];

  displaySum() {
    this.sumDisplayTarget.textContent = this.mathScoreValue + this.scienceScoreValue;
  }
}

HTML

コントローラー名はkebab-case。
HTMLの属性名はkebab-caseだが、Railsのヘルパーメソッドではキーワード引数になるのでsnake_caseにする。
属性値とdata-actionに指定するメソッド名はcamelCase（JavaScript内での名称と同じ）。

HTMLの例

<div data-controller="sum-scores" 
  data-sum-scores-math-score-value="82"
  data-sum-scores-science-score-value="85">
  <div data-sum-scores-target="sumDisplay"></div>
  <button type="button" data-action="click->sum-scores#displaySum">計算</button>
</div>

Railsヘルパーメソッドの例

<div data-controller="sum-scores" 
  data-sum-scores-math-score-value="82"
  data-sum-scores-science-score-value="85">
  <%= form.label :sum, data: { sum_scores_target: "sumDisplay" } %>
  <button type="button" data-action="click->sum-scores#displaySum">計算</button>
</div>