チュートリアル
Claude Opus 5.5で戻る操作後の商品フィルターを復元する
Claude Opus 5.5にブラウザー操作と期待状態の列を渡し、フィルター復元を修正してもらいます。値の保存は半分の仕事です。戻る、進む、再読み込み、共有リンクを開く操作の後に、URL、選択コントロール、表示結果が一致する必要があります。
Claude Opus 5.5にブラウザー操作と期待状態の列を渡し、フィルター復元を修正してもらいます。値の保存は半分の仕事です。戻る、進む、再読み込み、共有リンクを開く操作の後に、URL、選択コントロール、表示結果が一致する必要があります。
一回戻ると何が起こるか決める
小さな履歴の約束を先に書きます。仮のカタログで「青」を適用し、商品を開いて戻ったら、無条件の一覧ではなく青の一覧に戻る想定です。検索欄に三文字入力しただけで、特に意図しない三回の戻る操作を増やすべきではありません。
2020年の開発者の質問には逆の不満があります。タブ変更のたびに履歴が増えていました。これは設計課題の証拠であり、常に現在の履歴を置き換えるという推奨ではありません。
| 操作 | 本例の履歴方針 | 期待する結果 |
|---|---|---|
| 未送信の検索入力 | ローカル下書き | 戻る操作が一文字ずつ再生しない |
| 意味のあるフィルター適用 | 一件追加 | 前の適用条件に戻る |
| 意図を変えず既定URLを整える | 現在を置き換え | 重複した一段を作らない |
| 商品を開く | 通常の遷移 | 戻ると適用済み一覧 |
URLだけで状態を再構成できるようにする
カテゴリ、色、並び順など公開してよい値を使います。顧客情報や秘密をURLに入れません。許可リストで値を解析し、既定値と同名キーの扱いを決めます。フィルター変更時に広告パラメーターを消さず、クエリー全体を記憶頼みで作り直さないでください。
次の仮URLでは色と並び順が再現可能な一覧を表します。
/products?color=blue&sort=price-asc&utm_source=newslettercolorをgreenに変更しても、sortとutm_sourceは残します。文字列連結ではなくURLとURLSearchParamsを使いましょう。符号化と解析をそろえ、新しいタブや再読み込みでも前のページのメモリーに依存せず復元します。
MDNのHistory APIガイドはpushStateによる追加とreplaceStateによる更新を区別します。呼ぶだけで画面描画が済むわけではありません。履歴移動時の表示復元と最初の履歴の初期化が必要です。ルーターがあるアプリでは、その対応APIを使い、競合する履歴制御を追加しないでください。
状態遷移を指定する修正プロンプト
提示した商品カタログのフィルター復元を修正してください。入力はルーター版、フィルター部品、URL解析、取得処理、失敗の録画です。最初に状態の正本と重複したストアを整理してください。
期待する列は、条件なし一覧 → 青を適用 → 商品を開く → 戻る → 青一覧 → 戻る → 条件なし一覧 → 進む → 青一覧です。検索下書きの各文字で履歴を増やさず、再読み込みと共有リンクで適用状態を再現してください。
無関係なクエリーパラメーターを残し、色と並び順の許可値、重複キー、不正値の扱いを決めてください。適切なら既存ルーターのAPIを使用します。履歴移動では新規履歴を作らずコントロールと結果を更新してください。
遅い旧応答が新しい条件を上書きしないようにしてください。読み込み中と空結果を分かりやすくし、正しい結果が出てから意図的にスクロールを復元してください。
最小パッチと、各段階のURL、コントロール、結果の識別、履歴位置を含むテスト表を提出してください。未実行のブラウザーテストを合格とせず、不足する実行情報を示してください。これはOpusへの提案タスクでありモデル実測ではありません。公式ガイドは課題整理の資料で、修正の正しさの証明ではありません。URLの読み書きはローカル検証できますが、履歴と通信はブラウザーで確認します。
遅い通信でも復元を確認する
商品を開いた直後と、遅い応答を待った後に戻ります。青から緑へ続けて適用し、青の応答が最後に来ても緑を上書きしないことを確認します。古い要求を中止するか現在の要求IDで応答を除外します。全ナビゲーションを止めて隠す方法は避けます。
**local storageだけで十分ですか。** 好みを記憶できても、各履歴や共有ビューの定義にはなりません。保存された好みで明示URLを上書きしないでください。
**全部replaceStateでよいですか。** 本例で意味のある中間段階まで消します。先に動作方針を決めます。
**広告リンク監査と同じですか。** 広告リンク監査は遷移先とパラメーターを調べ、こちらは操作後の復元を調べます。
Panelly Studioで対応する商品広告を制作し、実際の遷移先で閲覧から戻るまでを確認しましょう。PanellyのOpus統合や、この仮カタログの実装を主張するものではありません。
