rails-hotwire について
Hotwire を使ったインタラクティブな Rails アプリ開発のためのリファレンススキルで、Turbo と Stimulus の実践方法を扱います。優先度付きのルールで、ナビゲーション、リアルタイム更新、設計、性能、テストを案内します。
主な機能
- 019 カテゴリーにわたる 53 のルール
- 02Turbo Drive、Frames、Streams の指針
- 03ブロードキャストとページモーフィングの実践
- 04Stimulus、設計、テストの助言
活用シーン
- 01Turbo のナビゲーションとキャッシュを設定
- 02部分更新と遅延読み込み Frame を追加
- 03ActionCable でリアルタイム更新を配信
- 04Hotwire の動作をテスト
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/rails-hotwireを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
metadata.jsonassets/templates/_template.mdreferences/_sections.mdarch-avoid-client-state.mdarch-frame-vs-stream-decision.mdarch-importmap-management.mdarch-progressive-enhancement.mdarch-stimulus-boundaries.mdbcast-avoid-view-logic-in-models.mdbcast-debounce-n1.mdbcast-model-broadcasts.mdbcast-reconnect-handling.mdbcast-refresh-over-replace.mdbcast-scope-streams.mdbcast-signed-stream-names.mddrive-cache-control.mddrive-confirm-dialog.mddrive-error-recovery.mddrive-form-submissions.mddrive-prefetch-links.mddrive-progress-bar.mddrive-selective-disable.mddrive-visit-actions.mdframe-break-out.mdframe-dom-id.mdframe-empty-state.mdframe-lazy-loading.mdframe-promote-visits.mdframe-scope-navigation.mdframe-src-navigation.md詳細
Community Rails Hotwire のベストプラクティス
Hotwire（Turbo + Stimulus）を使用してインタラクティブな Rails アプリケーションを構築するための包括的なガイドです。Community によってメンテナンスされています。影響度に基づいて優先順位付けされた 9 つのカテゴリーに、53 のルールが含まれており、自動リファクタリングとコード生成を支援します。DHH の「One Person Framework」の理念に従い、サーバーが HTML をレンダリングし、Turbo が SPA のような操作感を実現し、必要に応じて Stimulus が JavaScript を少し加えます。
適用する場面
以下の場合に、これらのガイドラインを参照してください。
- Turbo Drive のナビゲーション、プリフェッチ、キャッシュ動作を設定するとき
- 部分的なページ更新や遅延読み込みのために Turbo Frames を追加するとき
- DOM をピンポイントで変更するために Turbo Streams を配信するとき
- ActionCable 経由でリアルタイム更新をブロードキャストするとき
- ページのリフレッシュで Turbo 8 のモーフィングを有効にするとき
- クライアント側の動作を制御する Stimulus コントローラーを書くとき
- Turbo のナビゲーション、フレーム、WebSocket 接続でエラーを処理するとき
- Drive、Frames、Streams、Morphing、Stimulus のどれを使うか選ぶとき
- システムテストや統合テストで Hotwire のインタラクションをテストするとき
優先度別のルールカテゴリー
| 優先度 | カテゴリー | 影響度 | プレフィックス |
|---|---|---|---|
| 1 | ナビゲーションと Drive | CRITICAL | drive- |
| 2 | Turbo Frames | CRITICAL | frame- |
| 3 | Turbo Streams | HIGH | stream- |
| 4 | ブロードキャストとリアルタイム | HIGH | bcast- |
| 5 | モーフィングとページのリフレッシュ | HIGH | morph- |
| 6 | パフォーマンス最適化 | MEDIUM-HIGH | perf- |
| 7 | Stimulus のパターン | MEDIUM-HIGH | stim- |
| 8 | アーキテクチャの判断 | MEDIUM | arch- |
| 9 | Hotwire のテスト | MEDIUM | test- |
クイックリファレンス
1. ナビゲーションと Drive（CRITICAL）
drive-prefetch-links- リンクのプリフェッチを有効にして、即座にナビゲーションできるようにしますdrive-form-submissions- フォーム送信に Turbo Drive を使用しますdrive-visit-actions- visit アクションで履歴を制御しますdrive-cache-control- プレビューページ用に Turbo キャッシュを設定しますdrive-selective-disable- 互換性のないページでは Turbo Drive を無効にしますdrive-progress-bar- Turbo のプログレスバーをカスタマイズしますdrive-confirm-dialog- 破壊的な操作には data-turbo-confirm を使用しますdrive-error-recovery- Turbo のナビゲーションとフェッチのエラーを適切に処理します
2. Turbo Frames（CRITICAL）
frame-lazy-loading- ビューポートに入るまでフレームの読み込みを遅らせますframe-scope-navigation- フレーム内にナビゲーションの範囲を限定しますframe-src-navigation- 動的なフレームコンテンツには src を使用しますframe-break-out- リダイレクト時のフレームからの脱出を処理しますframe-promote-visits- フレームのナビゲーションをページ訪問に昇格させますframe-dom-id- フレームの識別に dom_id を使用しますframe-empty-state- 意味のあるフレーム読み込み状態を表示します
3. Turbo Streams（HIGH）
stream-progressive-enhance- Streams には必ず HTML のフォールバックを用意しますstream-action-selection- DOM の変更に適した Stream アクションを選択しますstream-multi-target- 複数要素の更新には targets を使用しますstream-http-delivery- フォームへの応答には HTTP 経由で Streams を配信しますstream-websocket-source- body 内で WebSocket ソースに接続しますstream-custom-actions- 複雑な DOM の更新にはカスタム Stream アクションを登録します
4. ブロードキャストとリアルタイム処理（HIGH）
bcast-model-broadcasts- シンプルなモデル更新には broadcasts_refreshes を使用しますbcast-debounce-n1- ブロードキャストをデバウンスして、N+1 のブロードキャストストームを防ぎますbcast-scope-streams- ブロードキャストストリームをアカウントまたはユーザーに限定しますbcast-refresh-over-replace- 個別のストリーム更新よりもブロードキャストリフレッシュを優先しますbcast-avoid-view-logic-in-models- ブロードキャストのロジックをモデルから分離しますbcast-signed-stream-names- セキュリティのため、署名付きストリーム名を使用しますbcast-reconnect-handling- WebSocket の切断と再接続を処理します
5. モーフィングとページのリフレッシュ（HIGH）
morph-enable-page-refresh- ページのリフレッシュでモーフィングを有効にしますmorph-permanent-elements- 状態を持つ要素を永続要素として指定しますmorph-scroll-preservation- モーフィング中にスクロール位置を保持しますmorph-stimulus-reconnect- モーフィング後の Stimulus コントローラーの再接続を処理しますmorph-frame-refresh- コンテンツを追加するには、フレームで refresh='morph' を使用しますmorph-vs-streams- 複雑なストリームのオーケストレーションよりもモーフィングを選択します
6. パフォーマンスの最適化（MEDIUM-HIGH）
perf-optimistic-ui- サーバーの確認前に楽観的な UI 更新を実装しますperf-batch-streams- 複数のストリーム更新を単一のレスポンスにまとめますperf-frame-caching- フラグメントキャッシュで Turbo Frame のレスポンスをキャッシュしますperf-prefetch-strategic- コストの高いエンドポイントではプリフェッチを無効にしますperf-memory-leak-prevention- サブスクリプションとイベントリスナーをクリーンアップします
7. Stimulus のパターン（MEDIUM-HIGH）
stim-outlets-communication- コントローラー間の通信にはアウトレットを使用しますstim-values-reactive-state- リアクティブなコントローラーの状態には Values API を使用しますstim-action-descriptors- addEventListener よりも宣言的なアクション記述子を使用しますstim-small-reusable-controllers- Stimulus コントローラーを小さく、再利用可能に保ちます
8. アーキテクチャの決定（MEDIUM）
arch-progressive-enhancement- プログレッシブエンハンスメントの階層に従いますarch-frame-vs-stream-decision- スコープを限定したナビゲーションにはフレームを、複数ターゲットの更新にはストリームを使用しますarch-importmap-management- import maps で JavaScript の依存関係をピン留めしますarch-avoid-client-state- 状態はクライアントではなくサーバーに保持しますarch-stimulus-boundaries- クライアント側の動作にのみ Stimulus を使用します
9. Hotwire のテスト（MEDIUM）
test-system-test-async- システムテストで Turbo の更新を待機しますtest-stream-assertions- 結合テストで Turbo Stream のテストヘルパーを使用しますtest-broadcast-assertions- Turbo のテストヘルパーでブロードキャストをアサートしますtest-frame-navigation- スコープを指定したアサーションでフレームのナビゲーションをテストしますtest-websocket-timing- システムテストで WebSocket 接続のタイミングを処理します
使用方法
詳しい説明とコード例については、各リファレンスファイルをお読みください。
- セクションの定義 - カテゴリー構成と影響レベル
- ルールのテンプレート - 新しいルールを追加するためのテンプレート
リファレンスファイル
| ファイル | 説明 |
|---|---|
| references/_sections.md | カテゴリーの定義と順序 |
| assets/templates/_template.md | 新しいルール用のテンプレート |
| metadata.json | バージョンとリファレンス情報 |
コメント
Markdown 対応