hwc-ux-feedback

ユーザー体験とフィードバック

Hotwire で、横断的なフィードバックと体感パフォーマンスのパターンを実装します。

コアワークフロー

1. フィードバックの必要性を特定します：読み込み、送信中の動作、進捗の報告、楽観的な更新、またはトランジション。
2. まずは組み込みの Turbo セマンティクス（busy、プログレスバーのフック、送信／レンダリングのライフサイクルイベント）を優先します。
3. 楽観的な更新は、明確な整合性回復の方針がある場合にのみ追加します。
4. トランジションのロジックは、明示的なライフサイクルイベントと、キャッシュ／プレビューに安全な経路に限定します。
5. ネットワークが遅い場合、戻る／進むのキャッシュ復元時、送信が失敗した場合に、UX の動作を検証します。

ガードレール

• ネットワークやレンダリングの完了を判断する代わりに、固定タイムアウトを使用しないでください。
• プレビューとキャッシュ復元時は、アニメーション／トランジションを制御してください。
• 送信のロックと解除は、開始イベントと終了イベントの間で対称になるようにします。
• UX フィードバックのロジックは、ドメイン固有のフォーム／メディア／ナビゲーションの実装から分離します。

リファレンスを選択して読み込む

現在のリクエストに必要なファイルのみを開きます。

• Turbo プログレスバーの再利用：references/2023-07-18-turbo-drive-progress-bar.md
• フォームの動作インジケーター：references/2023-06-06-turbo-drive-form-activity-indicators.md
• レンダリングのインターセプトとページトランジション：references/2023-04-25-turbo-drive-render-interception.md
• Swiper のようなトランジション動作：references/2024-11-19-turbo-drive-swiper-view-transitions.md
• Frame のビジー状態を示すスピナーのパターン：references/2026-01-20-turbo-frames-loading-spinner.md
• Turbo morph による整合性回復を伴う楽観的 UI：references/2024-03-26-optimistic-ui-with-turbo-8-morphs.md
• ULID ベースの楽観的な ID 戦略：references/2024-08-13-turbo-drive-ulid.md
• フォーム送信中の読み込み状態：references/2026-03-10-turbo-frames-form-loading-states.md
• Frame のエラーバウンダリーと再試行：references/2026-04-28-turbo-frames-error-boundaries.md
• 共有要素のビュートランジション：references/2026-05-12-turbo-drive-shared-element-view-transitions.md
• 自動保存向けの楽観的なトースト通知：references/2026-05-26-stimulus-optimistic-toast-auto-save.md

カタログ全体については references/INDEX.md を使用します。

関連スキルへのエスカレーション

• フォームのバリデーションと送信の正確性に関する懸念：hwc-forms-validation を使用します
• ナビゲーション／履歴／キャッシュのフローに関する懸念：hwc-navigation-content を使用します
• リアルタイムのプッシュ更新とストリームアクション：hwc-realtime-streaming を使用します
• メディア固有の再生／アップロードに関する懸念：hwc-media-content を使用します
• Stimulus API／コントローラーの一般的な基礎：hwc-stimulus-fundamentals を使用します