「未取得」を未完了に混ぜず、業務画面の誤誘導を止めた話

今日は、Next.jsで作っている土木向け業務システムの「初回運用チェックリスト」を見直した。

現場登録やスタッフ設定など、利用開始に必要な7項目を上から順に確認できる画面を作っていた。最初は、APIから値を取得できなかった項目も「未完了」と同じ扱いにしていたが、これでは本当に未設定なのか、通信や権限の問題で確認できないだけなのか区別できない。

さらに、先頭の項目を確認できないまま後続の作業リンクを表示すると、利用者を本来とは違う手順へ誘導する可能性がある。画面上では便利そうでも、取得失敗を確定情報として扱うのは危険だと判断した。

そこで状態を「完了」「未完了」「未取得」「確認中」に分けた。順序どおりに最初の未完了項目を計算しつつ、その手前に未取得があれば後続リンクは表示しない。代わりに、最新情報へ更新して再確認する案内を出すようにした。初回読み込み中も、行の表示、補助文、読み上げ用ラベルを「確認中」にそろえた。

実装後は、未取得が先頭にある場合と読み込み中の場合のテストを追加した。関連する24件のテスト、lint、型チェック、差分チェックまで通過している。一方で、実際のSupabase接続とPC・スマートフォンでの目視確認は残っていたため、その時点では完了扱いにしなかった。

業務画面では、データが「ない」のか「取れない」のかを分けるだけで、誤操作や問い合わせを減らせる。表示文言より先に、状態の意味を整理することの大切さを改めて感じた。

Next.jsやSupabaseを使った管理画面、業務フロー、既存システムの状態表示・導線改善も対応しています。「どこまで完了しているのか分かりにくい」といった段階からご相談ください。