履歴スタック方式のプロフィール遷移｜X/Threads/TikTokの挙動を再現する

SNSで一番イライラする挙動の一つが「プロフィールAから別のプロフィールBに飛んで、戻るボタンを押したらフィードに戻ってしまう」現象。Aに戻ってほしい。これを履歴スタック方式で実装した話です。

やりたかった挙動

• プロフィールA → プロフィールB → プロフィールC → 戻る
• 戻るとB に戻る、もう一度戻るとA、もう一度でフィード
• 一覧からタップして開いたプロフィール → 戻ると一覧に戻る
• X/Threads/TikTok と同じ挙動

Claudeに任せた実装

「プロフィール画面の遷移を履歴スタックで管理して。戻るボタンで前のプロフィールに戻り、一覧から開いた場合は一覧に戻る挙動にして」と指示。

実装の要点：profileHistoryStack

• グローバル変数 profileHistoryStack で履歴管理
• プロフィール表示時に {type:'profile', id:userId} を push
• 一覧から開いた場合は {type:'list', listFilter:...} を push
• 戻るボタンで pop し、type に応じて画面復元

細かい工夫

• 戻り先がフィードの場合は履歴クリア：フィードはルートなので
• 同じプロフィールを連続開かない：A→A→Aを A 1個に圧縮
• ブラウザの戻るボタンとも連動：popstate イベント連携

UX的な設計判断

履歴スタックは「無限に深くできる」のが特徴。50階層深くプロフィールを辿っても、戻るボタン50回で全部戻れる。これをユーザーが意識せずに使えるのが、プロのSNSのUX設計。

Claudeにも仕様検討を相談

「同じユーザーを連続でpushしたら？」「履歴の上限は？」「ブラウザ更新時は？」と仕様の細部を Claude にレビューしてもらいました。仕様検討もバイブコーディングで進められる。

「他SNSの挙動を再現する」のもAI時代の強み

「TikTokのプロフィール遷移と同じ挙動を実装して」と言うだけで、AIは様々な実装パターンを知っている。手で作ろうとすると参照実装を読んで理解するのに数時間かかります。AI時代の個人開発で「他SNS同等のUX」が現実的に作れるのは、ここが理由。

Moeriumをもっと楽しむ