chocoZAPサービス予約システムをNuxtで内製化した話

■ イベント
2025年10月25日開催
Vue Fes Japan 2025
https://vuefes.jp/2025/

■ セッション情報
2025年10月25日登壇
https://vuefes.jp/2025/timetable

■ 発表者
フロントエンドエンジニア
加藤 かえで

Transcript

2. 2 プロダクト開発統括1部 フロントエンドユニット
3. 3 chocoZAPとは
4. 4 chocoZAPとは 予約システムを Nuxtで内製化しました！
5. 5 技術構成 SPAモードでクライアントレンダリング UX / レスポンス優先
6. 6 工夫ポイント 1 – BFFの役割 – ◼ Rails APIを直接叩かず、Nuxt server / apiを経由 ◼ レスポンスをフロント向けに整形 ◼ Railsエンドポイントを外に晒さずセキュリティ向上
7. 7 工夫ポイント 2 – 認証 (Webの場合) – ◼ Cookieを使用してセッションを確認 セッションがなければログイン画面 に遷移 ◼ ログイン後、アクセストークンを 取得 ◼ RedisとCookieにユーザー識別子を 保存
8. 8 工夫ポイント 2 – 認証 (Webviewの場合) – ◼ アプリから送信されるAuthヘッダー を使用 ◼ ヘッダー内のBearerトークンで認証 ◼ 認証後、RedisとCookieにユーザー 識別子を保存
9. 9 工夫ポイント 3 – Webviewの苦労話 –
10. 10 工夫ポイント 3 – Webviewの苦労話 – iOSの一部端末で、戻るボタンを押すと 直前ではなく最初のページまで 戻ってしまう不具合
11. 11 工夫ポイント 3 – Webviewの苦労話 – ◼ Nuxt内でページ遷移しても、アプリ側からは履歴が存在 しない扱いになっていた ◼ そのため、アプリの「戻る」操作では履歴なしと判断され、 最初のページに戻ってしまった ◼ アプリの戻るボタンをaddEventListener(‘popstate‘)で検知 ◼ Nuxt側で独自履歴スタックを用意 ◼ 履歴スタックを参照し、router.back()ではなくnavigateTo によって正しいページに遷移できるよう修正 原 因 対 応
12. 12 まとめ BFF構成 Nuxt serverがRails APIを呼び出し、レスポンス 整形して返却 認証・ セッション管理 Redisによるセッション管理 Webview特有の 課題対応 戻る操作の不具合を独自履歴スタックで解決