2026年6月8日（月）

今日やったこと

• TSUMOO-38 設定画面コーディングに着手し、フェーズ1で扱う範囲を整理
• 設定画面の初回実装範囲を、モックに合わせて以下の構成に決めた
  • アカウント情報
  • 認証方法
  • ログインとセキュリティ
  • ログアウト
  • アカウント削除
• 設計書との差分を確認し、初回実装と後続実装に分けた
  • ログアウト処理自体は後続だが、認証前画面へ戻る導線は作る
  • メールアドレス変更 / パスワード変更は、専用画面ではなく設定画面内のフォームで扱う
  • 退会は、実処理前の確認モーダルまで作る
• /app/settings の設定画面を追加し、サイドバーから遷移できるようにした
• アカウント情報カードを実装
  • 表示名
  • ログイン中のメールアドレス
  • ユーザーアイコン
• 認証方法カードを実装
  • メールアドレス / パスワード
  • メールアドレスとパスワードでログインしている説明
• ログインとセキュリティカードを実装
  • メールアドレス変更フォーム
  • パスワード変更フォーム
• ログアウトカードを実装
  • ログアウトボタン押下で /login へ遷移する
• アカウント削除カードと退会確認モーダルを実装
  • タスク削除モーダルの見た目を参考にした
  • 実際の退会処理や再認証は後続実装で扱う
• 設定画面内のトースト表示を追加
  • 表示名更新
  • メールアドレス更新
  • パスワード更新
  • 退会処理の未実装通知
• 表示名変更を、変更ボタン押下後にインラインフォームが開く形にした
• 設定画面のレスポンシブ表示を確認し、特定幅で大きく崩れないように調整
• npm run lint と tsc --noEmit をDocker環境で確認
• 設定画面を https://tsumoo.local で確認

ロードマップ

フェーズ1: タスク管理MVP

進捗: 19 / 38件

今日対応したタスク

• 完了 TSUMOO-38 設定画面コーディング
• 完了 設定画面のアカウント情報 / 認証方法 / セキュリティ導線実装
• 完了 ログアウト導線と退会確認モーダルの追加
• 完了 設定画面の基本レスポンシブ調整

完了したタスク

• TSUMOO-38 設定画面コーディング
• TSUMOO-37 振り返り画面コーディング
• TSUMOO-36 タスク編集画面コーディング
• TSUMOO-35 タスク一括登録画面コーディング
• TSUMOO-34 タスク一覧画面コーディング
• TSUMOO-33 ダッシュボード画面コーディング
• TSUMOO-32 パスワードリセット画面コーディング
• TSUMOO-31 新規登録画面コーディング
• TSUMOO-30 認証画面コーディング
• TSUMOO-10 公開トップページ実装
• TSUMOO-9 開発環境・基本設定整備
• TSUMOO-8 アプリケーション初期構築
• TSUMOO-7 API設計
• TSUMOO-6 DB設計
• TSUMOO-5 画面詳細設計
• TSUMOO-4 UI方針整理
• TSUMOO-3 フェーズ1基本設計
• TSUMOO-2 フェーズ1要件定義
• TSUMOO-1 Tsumoo構想整理

次に取り組むタスク

• 設定画面のアイコン、ボタン、フォームの細部調整
• 振り返り画面で気になる表示の追加調整
• 画面コーディングで増えたコンポーネントの整理と共通化

考えたこと

今日は、設定画面をただのプロフィール表示ではなく、アカウント管理画面として自然に見えるところまで作りました。

メールアドレス変更、パスワード変更、退会処理はLaravel連携後に実処理を入れるため、今回は画面上の導線、フォーム、確認モーダル、トーストまでを先に用意しました。

設定画面は、ユーザーが自分のアカウント情報を確認する場所なので、他の画面よりも「安心して操作できること」が大事だと感じました。特に退会やログアウトのような操作は、見た目の強弱と文言の置き方で印象が大きく変わります。

決めたこと

• 設定画面は、フェーズ1でもアカウント情報、認証方法、ログインとセキュリティ、ログアウト、退会導線まで表示する
• ログアウトは実処理前でも、認証前画面へ戻る導線として /login へ遷移させる
• メールアドレス変更は、設定画面内のフォームで扱う
• パスワード変更は、現在のパスワード、新しいパスワード、確認用パスワードの3項目にする
• 退会は、タスク削除と同じように確認モーダルを出す
• 画面コーディングが一通り終わったら、Laravel連携前にコンポーネント化と共通化を行う

次にやること

• 設定画面の細部の見た目を確認する
• アイコン、ボタン、フォームの見た目をTsumoo全体の雰囲気にそろえる
• 設定画面、振り返り画面、タスク関連画面のコンポーネント化に入る