stimulus

<essential_principles>

Stimulus の仕組み

Stimulus は、データ属性を介して JavaScript の動作を HTML に結び付ける、シンプルな JavaScript フレームワークです。HTML をレンダリングするのではなく、既存の HTML にインタラクティブな機能を追加します。

1. HTML を最優先する考え方

状態は JavaScript ではなく DOM に保持されます。ページの切り替え時にコントローラーを破棄し、キャッシュされた HTML から再初期化できます。データ属性から状態を読み取り、再接続時に自身を復元するようコントローラーを設計してください。

2. 設定より規約

Stimulus では、予測可能な命名規則を使用します。

• コントローラー：data-controller="clipboard"
• ターゲット：data-clipboard-target="source"
• アクション：data-action="click->clipboard#copy"
• 値：data-clipboard-url-value="/api/copy"
• クラス：data-clipboard-supported-class="visible"
• アウトレット：data-clipboard-result-outlet="#result"

3. ライフサイクルを意識する

コントローラーには、次の 3 つのライフサイクルコールバックがあります。

• initialize() - コントローラーがインスタンス化されたときに一度だけ呼び出されます
• connect() - コントローラーが DOM に接続されたときに呼び出されます（Turbo により複数回発生する場合があります）
• disconnect() - コントローラーが DOM から削除されたときに呼び出されます

connect() で設定したもの（タイマー、イベントリスナー、オブザーバー）は、必ず disconnect() でクリーンアップしてください。

4. スコープの分離

各コントローラーが参照できるのは、そのスコープ内（data-controller が設定された要素とその子孫要素）の要素のみです。ターゲットはスコープ内に配置する必要があります。コントローラーの境界を越えて通信するには、アウトレットを使用してください。

5. プログレッシブエンハンスメント

まず、JavaScript がなくても動作する HTML を作成してください。Stimulus は置き換えではなく、機能の拡張に使用します。機能を使用する前に、API がサポートされているか確認してください。

connect() {
  if ("clipboard" in navigator) {
    this.element.classList.add(this.supportedClass)
  }
}

</essential_principles>

**何をしたいですか？**

1. 新しいコントローラーを作成する
2. 既存のコントローラーをデバッグする
3. コントローラーに機能を追加する
4. ベストプラクティスに照らしてコントローラーをレビューする
5. パフォーマンスを最適化する
6. UI パターン（モーダル、ドロップダウン、タブなど）を実装する
7. Turbo と連携する
8. フォームを処理する
9. その他

続行する前に、回答を待ってください。

| 回答 | ワークフロー | |----------|----------| | 1, "new", "create", "build", "start" | `workflows/build-new-controller.md` | | 2, "broken", "fix", "debug", "crash", "bug", "not working" | `workflows/debug-controller.md` | | 3, "add", "feature", "extend", "modify" | `workflows/add-feature.md` | | 4, "review", "audit", "check", "best practices", "patterns" | `workflows/review-controller.md` | | 5, "slow", "optimize", "performance", "fast", "memory" | `workflows/optimize-performance.md` | | 6, "modal", "dropdown", "tabs", "accordion", "toggle", "UI", "pattern" | `workflows/implement-ui-pattern.md` | | 7, "turbo", "frames", "streams", "hotwire" | `workflows/integrate-turbo.md` | | 8, "form", "validation", "submit", "input" | `workflows/handle-forms.md` | | 9, その他 | 詳細を確認してから、ワークフローまたはリファレンスを選択します |

ワークフローを読んだ後は、その手順に正確に従ってください。

<verification_loop>

変更のたびに確認すること

1. 接続されるか？ ブラウザーのコンソールで Stimulus の接続メッセージを確認します
2. ターゲットが解決されるか？ this.hasXxxTarget が true を返すことを確認します
3. アクションが実行されるか？ アクションメソッドに一時的な console.log を追加します
4. クリーンアップされるか？ ページを移動して戻り、エラーやメモリーリークがないことを確認します

// Debug mode - add to application.js
application.debug = true

ユーザーに次の内容を報告してください。

• 「コントローラーの接続：✓」
• 「ターゲットの検出数：X / Y」
• 「アクションの動作：✓/✗」
• 「テストの準備完了」 </verification_loop>

<reference_index>

ドメイン知識

すべて references/ にあります。

コア API： architecture.md、targets.md、values.md、actions.md、outlets.md、classes.md エコシステム： stimulus-use.md、ui-patterns.md 連携： turbo-integration.md 品質： testing-debugging.md、performance.md、anti-patterns.md </reference_index>

<workflows_index>

ワークフロー

すべて workflows/ 内にあります。

ファイル	目的
build-new-controller.md	新しいコントローラーをゼロから作成する
debug-controller.md	バグを見つけて修正する
add-feature.md	既存のコントローラーに機能を追加する
review-controller.md	ベストプラクティスに沿ってコントローラーを監査する
optimize-performance.md	プロファイリングして高速化する
implement-ui-pattern.md	モーダル、ドロップダウン、タブなどを構築する
integrate-turbo.md	Turbo Frames/Streams を扱う
handle-forms.md	フォームの検証と送信を処理する