hwc-realtime-streaming

リアルタイムとストリーミング

Turbo Streams と Stimulus を使って、プッシュ駆動型の Hotwire の動作を実装します。

コアワークフロー

1. トランスポートと配信形式を特定します。WebSocket、SSE、インラインのストリームタグ、またはサーバーのレスポンスストリームから選びます。
2. まずデフォルトの Turbo Stream アクションを選びます。デフォルトでは不十分な場合に限り、カスタムアクションを追加します。
3. ストリームアクションは小さく決定的なものにします。ストリームのペイロードに任意のスクリプトを埋め込まないでください。
4. ストリームのオーケストレーションを、フォーム、メディア、ナビゲーションといったドメイン固有の UI 懸念事項から分離します。
5. すべてのリアルタイム更新について、順序、冪等性、複数タブでの動作を検証します。

ガードレール

• カスタムアクションを使う前に、append/prepend/replace/update/remove/before/after/refresh を優先してください。
• タブ間の同期は明示的に（BroadcastChannel/localStorage）行い、同じデバイス内のセマンティクスに限定してください。
• 状態変化を明確に伝えるうえでアニメーションが有意義な場合に限り、ビュー遷移を使用してください。
• メッセージが遅延した場合や順序どおりに届かない場合の動作を検証してください。

必要なリファレンスのみを読み込む

現在のリクエストに必要なファイルだけを開いてください。

• クライアント側のインラインストリームタグ：references/2023-08-01-turbo-streams-inline-stream-tags.md
• カスタム Turbo Stream アクション：references/2023-08-15-turbo-streams-custom-stream-actions.md
• カスタムアクションによる高度なプレイリストのオーケストレーション：references/2023-10-10-turbo-streams-custom-stream-actions-video-playlist-management.md
• LocalStorage によるストリーム状態の管理：references/2024-01-30-turbo-streams-custom-stream-actions-localstorage.md
• View Transitions によるリストのアニメーション：references/2025-06-10-turbo-streams-list-animation-view-transitions.md
• リアルタイムのコンボボックス更新：references/2024-03-12-hotwire-combobox-with-real-time-data.md
• タブ間通信のパターン：references/2023-11-21-stimulus-inter-tab-communication.md

カタログ全体は references/INDEX.md を参照してください。

関連スキルに切り替える

• プル型のナビゲーションや履歴に関する懸念事項：hwc-navigation-content を使用してください
• フォーム検証や送信ライフサイクルに関する懸念事項：hwc-forms-validation を使用してください
• メディアの再生やアップロードに関する操作：hwc-media-content を使用してください
• 汎用的な読み込み、進行状況、トランジションの UX：hwc-ux-feedback を使用してください
• ストリーミング以外の Stimulus 基本 API に関する質問：hwc-stimulus-fundamentals を使用してください