2026年6月5日（金）

今日やったこと

• TSUMOO-36 タスク編集画面コーディングを実施
• タスク一覧から項目を選択し、画面遷移せずにその場で編集フォームを開ける形に整理
• 一覧カードと編集フォームがつながって見えるように、カード選択状態とインライン編集フォームの見た目を調整
• 編集フォームで扱う項目を整理
  • タイトル
  • ステータス
  • 開始予定 / 終了予定 / 期限
  • 詳細メモ
• ステータス変更は、クイック登録 / 一括登録と近い見た目にそろえた
  • 未着手 / 進行中 / 保留 / 完了
  • 編集時は 完了 も選択可能
• 開始予定 / 終了予定 / 期限は、PCでは横並びで確認しやすい形に調整
• 編集フォームの操作ボタンを整理
  • 更新
  • 削除
  • 閉じるボタンは置かず、別のタスクを選択すると自然に閉じる形にした
• 下の方のタスクを編集した時も、編集フォームが見える位置へ自然にスクロールするように調整
• メモがあるタスクは、一覧カード上でメモを軽く確認できるようにした
  • PCでは hover でプレビュー
  • SPではメモアイコンをタップしてプレビュー
  • 編集中は hover していなくてもメモが見える
• 更新後の完了通知をトーストとして表示
• 削除前の確認モーダルを追加
  • 背景はアプリ全体にかかるようにした
  • 削除対象のタスク情報をモーダル内に表示
  • 削除ボタンは主ボタンより危険操作だと分かる色に調整
• 編集フォームまわりの hover / focus / 選択状態を、ダッシュボードや一括登録画面のUI方針に合わせて微調整
• Chrome DevToolsの label for 警告を確認し、ステータス選択のラベル扱いを修正
• npm run lint を確認

ロードマップ

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

進捗: 17 / 38件

今日対応したタスク

• 完了 TSUMOO-36 タスク編集画面コーディング
• 完了 一覧内インライン編集UIの整理
• 完了 編集時の削除確認モーダル追加
• 完了 メモプレビューと編集時の文脈表示調整

完了したタスク

• 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構想整理

次に取り組むタスク

• TSUMOO-37 振り返り画面コーディング
• TSUMOO-38 設定画面コーディング
• 実データ連携前に、編集機能の設計書反映とPR準備を行う

考えたこと

今日は、タスクの編集を別画面へ遷移させるのではなく、一覧の中で完結させる方向で実装しました。

タスクは、少しだけタイトルを直したり、ステータスや日付を変えたりする操作が多いため、カードの上に現在の表示、下に編集フォームが出ることで、変更前の情報を見ながら直せるのも良い点でした。

削除については、誤操作の影響が大きいため確認モーダルを残す方針にしました。

決めたこと

• タスク編集は専用画面へ遷移せず、タスク一覧内のインライン編集として扱う
• 編集フォームでは 完了 ステータスも選択できるようにする
• 閉じるボタンは置かず、別のタスク選択で自然に閉じる
• 編集フォームは、一覧カードとつながって見える形にする
• メモがあるタスクは、一覧上でも軽く確認できるようにする
• 削除前には確認モーダルを表示する
• 削除モーダルには、削除対象のタスク情報を表示する
• 更新完了はトーストで軽く知らせる

次にやること

• TSUMOO-36の実装内容を設計書へ反映する
• TSUMOO-36のPR文を作成する
• 次の画面実装として、TSUMOO-37 振り返り画面コーディングへ進む
• フェーズ2以降で、検索、並び替え、表示条件保存を検討する