大手カフェチェーンの会員向けWebサービス（リワード・マイページ）と、運営側が会員を管理するCMSを、モダンなフロントエンドへリプレイスするプロジェクトです。元請けと連携し、フロントエンドのコンポーネント開発と本人認証まわりの実装を担当しています。
認証を伴う会員フローと、性質の異なる情報を扱う管理画面
会員向けWebサービスを、再利用可能なコンポーネントで構成されたモダンなフロントエンドへ置き換える必要がありました。会員登録から本人認証、カード登録によるリワード会員化まで、認証を伴う複雑な会員フローが数多くあり、それらを堅牢かつ保守しやすい形で実装することが求められました。
運営側が使うCMSには、別の難しさがありました。一人の会員について、会員情報、リワード情報、多数の履歴を一つの詳細画面で扱います。画面をそのまま一枚岩で作ると、変更のたびにレビューの範囲が広がります。
React + TypeScript + Tailwind CSS のコンポーネント設計
- 認証・会員フロー：会員登録後のリダイレクト・認証処理、カード登録画面、カード登録によるリワード会員化フローを実装しました。
- 会員向け機能：マイページ、会員情報更新フォーム、お気に入り店舗の登録・表示、バーコード検証を整備しました。更新フォームの検索結果表示（固定高さとスクロール、初期表示件数を超える場合のリスト表示）といった細かなUI仕様も作り込みました。
- 新サービス：新たな会員向けサービスのエントリーページを実装し、リリースしました。
会員管理CMSのパネル分割
CMSの会員情報詳細画面は、会員情報、メタ情報、多要素認証などのパネル単位に分割しました。パネルごとにプルリクエストを分けたため、レビューの範囲は一つのパネルに収まります。
更新系は、リワード情報の変更、退会処理、アカウントロックの解除を実装しました。履歴系は、カードの利用履歴、配信履歴、購買履歴などの画面を、同じ型に沿って積み上げています。
複数のパネルで同じ作りが繰り返されるところは、共通のコンポーネントに切り出しました。読み込み中の表示がその例です。名前には使われる場所を含めず、使う側の都合を部品が知らなくてよい形にしています。変数や型の名前は、APIの仕様書のフィールド名をそのまま写さず、クライアントが業務で使う用語に合わせました。APIのエラーは、ステータスコードごとにエラーの型を定義して扱いを揃え、画面にはエラーコードも表示します。
段階的な検証
検証は、全機能の実装後にまとめて行うのではなく、3段階に分けて進めました。クライアントが早めに操作感を確認できるため、フィードバックを実装の途中で取り込めます。受け入れテストで出た指摘への対応と、仕様が確定した箇所の実装は、並行して進めています。
成果
会員Webサービスのフロントエンドをモダンなコンポーネント構成へ刷新し、リワード・マイページ・認証フローを提供しています。CMSはリワード情報の変更、退会処理、アカウントロックの解除、各種履歴の閲覧までを備え、受け入れテストのフィードバック対応を経て、仕上げと機能追加を元請けと連携しながら継続しています。