編集はその場で行う

考え方

専用の編集画面を作らず、オブジェクト（もの・こと）が表示されている場所で、その場で編集できるようにする。

「編集」ボタンを押すと別画面に遷移する設計は、コンテキストを失わせることがあります。

なぜこの考え方か

別画面に遷移する設計	その場で編集する設計
編集ボタン → 編集画面 → 保存 → 戻る	編集ボタン → その場で編集 → 保存
コンテキストが失われる	コンテキストが保たれる
戻る操作が必要	戻る操作が不要
他の情報を参照できない	他の情報を見ながら編集できる

ユーザーのゴール達成にどう寄与するか: 関連情報を見ながら編集できるため、整合性のある修正ができる。「素早く正確に情報を更新したい」というゴールに直結する。

避けたい構造

目指す構造

一覧上でのインライン編集

一覧の行で「編集」をクリックすると、その行だけが編集モードになります。他の行は表示されたまま。

従来の設計	インライン編集
一覧 → 行クリック → 編集画面 → 保存 → 一覧に戻る	一覧 → 行の「編集」 → その行で編集 → 保存
画面遷移: 2回	画面遷移: 0回

詳細画面上でのインライン編集

詳細画面で「編集」をクリックすると、参照モードから編集モードに切り替わります。別画面には遷移しません。

従来の設計	インライン編集
詳細画面 → 編集ボタン → 編集画面 → 保存 → 詳細に戻る	詳細画面 → 編集ボタン → 同じ画面で編集 → 保存
画面遷移: 2回	画面遷移: 0回

実践

操作の流れ

1. 通常は参照モード（値の表示のみ）
2. 編集したい箇所の「編集」ボタンをクリック
3. その表示エリア内で編集モードに切り替わる
4. 編集して保存、またはキャンセル
5. 参照モードに戻る

別画面に遷移せず、同じ表示エリア内でモードが切り替わります。

実装上の考慮点

同時編集への対処

複数ユーザーによる同時編集の可能性がある場合、更新直前に「表示中のデータが最新か」をチェックします。

// 更新リクエスト時に updated_at を含める
PUT /items/123
{ "name": "新しい名前", "updated_at": "2025-01-15T10:30:00Z" }

// サーバー側で現在の updated_at と比較
// 一致しなければ「他のユーザーが更新しました」と返す

確認画面を廃止する場合、この仕組みが代替の安全装置になります。

避けたいこと

• 「編集」ボタンで別画面に遷移する
• 編集中に元の一覧や詳細が見えなくなる
• 編集を完了するまで他の操作ができない