在庫・出荷管理アプリを作ってます⑪：出荷予定登録を「入力だけ」から「管理できる」システムに改善

2025年10月6日

はじめに

前回までに、出荷予定を登録する機能は完成していました。しかし実際に使い始めると「登録したものが見られない」「確認できない」「間違えても直せない」という問題が次々と見えてきました。

今回は、シンプルな入力フォームから、実用的な出荷予定管理システムへと改善した過程を記録します。

改善前の問題点

問題1：登録したものが確認できない

登録ボタンを押すと「登録しました！」と表示されるだけ。本当に登録されたのか、何を登録したのか、後から確認する方法がありませんでした。

[改善前の画面：シンプルな入力テーブルのみ]

問題2：間違えても修正できない

登録ミスに気づいても、削除や修正ができない。データベースを直接操作するしかありませんでした。

問題3：全体が把握できない

今日出荷する予定は何件？
来週の出荷予定は？
どの出荷先が多い？

こういった情報が一切分からない状態でした。

改善内容

改善1：一覧管理画面の追加

改善後の画面構成

[改善後の画面：統計カード + 検索フィルタ + 一覧表示]

登録した出荷予定を一覧で確認できるようになりました。

追加した要素：

統計カード：総予定数、本日出荷、今後の予定、表示中数量を一目で把握
検索・フィルター機能：出荷先名や注意事項で検索可能
削除機能：誤登録を削除できる（確認ダイアログ付き）

改善2：期間フィルターの追加

「今日」「明日」「今週」「すべて」のボタンで、見たい期間の出荷予定をすぐに表示できます。

実装のポイント：

// 「今日」ボタンが押されたら、今日の出荷予定だけを表示
const todayShipments = shipments.filter(s => s.shipment_date === today);

改善3：モバイル版の表示改善

PC版とモバイル版で異なる表示方法

PC版：テーブル形式で一覧性を重視
[PC版の画面キャプチャ]

モバイル版：日付ごとにグループ化して見やすく
[モバイル版の画面キャプチャ]

モバイル版の工夫：

日付ごとにカード表示
「今日」「過去」のラベルで色分け
タッチしやすいボタンサイズ

改善4：削除確認ダイアログ

改善前： ボタンを押すと即座に削除
改善後： 確認画面が表示される

削除する内容を確認してから実行できるため、誤操作を防げます。

改善5：新規登録画面の改善

動的な行の追加・削除

改善前は5行固定でしたが、改善後は：

必要に応じて行を追加（最大10件）
不要な行は削除可能
モバイルではカード形式で1件ずつ入力

バリデーションの強化：

// 過去の日付は入力できないようにチェック
if (date < today) {
  エラー表示: "過去の日付は指定できません"
}

// 数量は1以上の数値のみ
if (quantity <= 0) {
  エラー表示: "数量は1以上で入力してください"
}

改善の効果

業務面での改善

改善前：

登録したか不安
ミスしても直せない
紙のメモと併用

改善後：

一覧で確認できて安心
間違えても削除できる
システムだけで完結

使いやすさの向上

改善前：

5行しか入力できない
エラーメッセージがわかりにくい
スマホでは使いづらい

改善後：

必要な分だけ入力可能
親切なエラーメッセージ
スマホでも快適に操作

数値での比較

項目	改善前	改善後
画面数	1画面	2画面（管理+登録）
できること	登録のみ	登録・確認・検索・削除
統計情報	なし	4種類
モバイル対応	不十分	完全対応

技術的なポイント（簡易版）

検索・フィルター機能の実装

// 入力された検索キーワードで絞り込む
if (searchTerm) {
  // 出荷先名または注意事項に検索キーワードが含まれるものだけ表示
  filtered = shipments.filter(s => 
    s.destination.includes(searchTerm) || 
    s.note_caution?.includes(searchTerm)
  );
}

モバイル版の日付グループ表示

// 同じ日付の出荷予定をまとめる
const groupedByDate = {};
shipments.forEach(shipment => {
  const date = shipment.shipment_date;
  if (!groupedByDate[date]) {
    groupedByDate[date] = [];
  }
  groupedByDate[date].push(shipment);
});

// 日付ごとにカード表示

統計情報の計算

// 今日の出荷予定を数える
const todayShipments = shipments.filter(s => s.shipment_date === today);

// 表示中の数量を合計
const totalQuantity = filteredShipments.reduce((sum, s) => sum + s.quantity, 0);