はじめに
過去データを修正する画面では、ユーザーが「何を見て正しい値を判断するか」が重要です。
入力欄だけを置くと、ユーザーは記憶や別画面に頼って修正することになります。退勤時刻を直すなら、最後の作業開始時刻や作業名が近くにあるだけで、入力ミスをかなり減らせます。
この記事では、Next.js と Supabase の画面で、修正フォームの近くに参考情報を表示するパターンを紹介します。
こんな場面で使えます
- 退勤時刻を修正するとき、最後の作業開始時刻を見せたい
- 作業時間を直すとき、前後の作業時刻を見せたい
- 請求対象を修正するとき、単価や対象時間を見せたい
- 在庫数を修正するとき、直前在庫や入出庫履歴を見せたい
- ステータス変更時に、最終更新日時や更新者を見せたい
参考情報は、入力値そのものではなく判断材料です。自動で値を決めるのではなく、ユーザーが確認しながら正しい値を入れられる状態を作ります。
解決する問題
修正フォームに入力欄だけが並んでいると、ユーザーは次のような行動を取りがちです。
- 別画面を開いて過去履歴を確認する
- 記憶だけで時刻や数値を入力する
- 迷ったまま仮の値を入れる
- 修正後に違和感に気づき、再度直す
入力欄のすぐ近くに、判断に必要な1から2項目の参考情報を出すと、修正作業が短くなり、入力ミスも減ります。
実装例
関連する参考情報をまとめて取得する
一覧に複数の修正対象がある場合、1件ずつ Supabase へ問い合わせるとN+1クエリになりやすくなります。対象のIDをまとめて渡し、関連する明細を一括取得します。
const { data: histories } = await supabase
.from("work_history")
.select("history_id, work_day_id, task_name, started_at, sort_order")
.in("work_day_id", workDayIds)
画面表示に必要な列だけを select しておくと、余計なデータを持たずに済みます。
最後の明細を日別にまとめる
退勤時刻の修正であれば、最後に開始した作業が参考になります。取得した明細から、作業日ごとの最後の明細を作ります。
type LastHistorySummary = {
history_id: string
work_day_id: string
task_name: string
started_at: string
sort_order: number
}
const lastByWorkDayId: Record<string, LastHistorySummary> = {}
for (const history of histories || []) {
const current = lastByWorkDayId[history.work_day_id]
if (!current || history.sort_order > current.sort_order) {
lastByWorkDayId[history.work_day_id] = history
}
}
このようにマップ化しておくと、JSX側では work_day_id からすぐに参考情報を取り出せます。
入力欄の近くに表示する
参考情報は、入力欄から離れた場所ではなく、同じ行または同じカードの中に置きます。
<td>
{lastHistory ? (
<div className="text-sm text-gray-600">
<div>最後の開始: {toHHMM(lastHistory.started_at)}</div>
<div>{lastHistory.task_name}</div>
</div>
) : (
<span className="text-gray-400">-</span>
)}
</td>
参考情報がない場合は空欄にせず、- などで「情報なし」と分かるようにします。空欄だと、読み込み漏れなのか、もともと情報がないのか判断しづらくなります。
参考情報の選び方
表示する情報は、多ければよいわけではありません。入力判断に直接役立つものだけに絞ります。
| 修正対象 | 参考情報の例 | |---|---| | 退勤時刻 | 最後の作業開始時刻、最後の作業名 | | 作業時間 | 前後の作業時刻、合計時間 | | 請求金額 | 単価、対象時間、前回請求額 | | 在庫数 | 直前在庫、入出庫履歴 | | ステータス | 最終更新日時、更新者 |
モバイル画面では列が増えすぎると読みにくくなります。時刻と短いラベルだけにするなど、表示量を調整してください。
注意点
- 参考情報と保存値を混同しない
- 自動入力する場合は、ユーザー確認を挟む
- 参考情報を増やしすぎて、フォームの主役を奪わない
- 一覧画面ではN+1クエリを避ける
- 参考情報がない場合の表示も決めておく
参考情報は、あくまで判断材料です。保存処理では、ユーザーが入力した値と、参考表示用の値を明確に分けて扱います。
らくログタスクでの実績
らくログタスクでは、退勤忘れ一覧で最後の作業開始時刻と作業名を表示しました。
ユーザーは「この作業を始めたあと、何時ごろ退勤したか」を思い出しやすくなり、退勤時刻の修正を別画面に移動せず行えるようになっています。
関連リンク
まとめ
修正フォームでは、入力欄だけでなく、ユーザーが正しい値を判断するための参考情報も設計対象です。
Next.js と Supabase では、関連データをまとめて取得し、画面側でマップ化してから入力欄の近くに表示すると、実装も表示も扱いやすくなります。