ID:75854さん

■ プロジェクト概要 アンケートサービスのフロントエンド開発およびバックエンドAPI連携 ・技術スタック： - フロントエンド：Next.js, TypeScript, HTML5/CSS3 - バックエンド：Python (FastAPI) - 認証・インフラ：Docker, 【プロジェクト体制・役割】 ・チーム構成：5名（PM 1名、メンバー 4名） ・担当区分：フロントエンド・一部バックエンド対応 ■ 工夫したこと・取り組み 1. セキュリティとパフォーマンスを意識した認証基盤の実装 ・NextAuth.js（Auth.js）を採用し、認証状態のセッションをDBで直接保持せずJWTを用いてCookieで安全に管理する構成を構築。サーバー負荷を軽減しつつ強固なセキュリティを担保しました。 ・カスタムフック（useAuth等）として認証ロジックをモジュール化し、UI層でのエラーハンドリング（ログイン失敗・セッション切れ等）を統一的かつ直感的に実装しました。 2. データ取得の最適化と堅牢なエラーハンドリング ・TanStack Query（React Query / useQuery）を活用し、アンケート詳細情報の非同期取得およびキャッシュ利用を最適化。無駄なAPIリクエストを削減し、表示速度を向上させました。 ・認証エラー（401）やリソース不在（404）といった例外処理・エラーハンドリングを網羅的に実装し、ユーザーが迷わないUI/UX設計を行いました。 3. セキュアかつ状態に応じた動的共有リンク機能の実装 ・公開用ページにはUUID、内部管理用にはIDを使用することで、不適切なリソース推測・アクセス（IDOR対策）を防止するセキュアな設計を適用しました。 ・アンケートのステータス（公開中・終了・下書き等）に応じてアクセス時の表示ロジックを分岐させ、ユーザーの誤操作や非公開データへのアクセスを制御しました。 ・共有リンクコピー時には、トースト通知等で視覚的なフィードバックを返し、操作性を向上させました。 4. モバイル・マルチデバイスを想定した丁寧なUI/UX改善と検証 ・ngrokを活用したローカル環境の実機検証を実施し、PCからスマートフォンまで全画面サイズにおける表示崩れやレスポンシブ動作を微修正しました。 ・フォームの高さ、フォントサイズ、視線誘導、ボタンの押しやすさなど、エンドユーザーの利用体験（UX）を意識した細部調整を念入りに反映しました。 ■ 成果 ・定量成果：ngrokを活用した実機事前検証により、デザインレビュー後の手戻り・修正工数を半減させました。 ・定性成果：IDOR対策やステータス制御によるアクセス制限によりセキュリティリスクを未然に防止。一般ユーザー視点に立ったUI/UX調整により、迷わず直感的に利用できるアンケート操作フローを実現しました。