在庫管理アプリ

概要

HTML/CSS/JavaScriptを用いて作成した在庫管理アプリです。
ブラウザ上で動作する業務アプリを想定し、設計・実装力を高めることを目的として作成しました。
商品追加、在庫増減、削除、LocalStorage保存に対応しています。

使用技術

• HTML
• CSS
• JavaScript
• LocalStorage

実装機能

• 商品追加
• 商品一覧表示
• 在庫入庫（+）
• 在庫出庫（-）
• 在庫ゼロ時の赤字表示
• 商品削除
• LocalStorageによるデータ保存
• ページ再読み込み時のデータ復元

工夫した点

• 入力後にフォームを自動でクリアし、連続入力しやすいUIにした。
• 商品追加後、商品名入力欄に自動でフォーカスを戻し、操作性を向上させた。
• LocalStorage復元時に次の採番IDを再計算し、ID重複が起きないようにした。

苦労した点・学んだこと

• 配列に追加した要素を画面へ描画する render() を、どのタイミングで呼び出すべきか理解するのに苦労した。 処理の流れ（追加→再描画）を意識して設計する重要性を学んだ。

• 商品IDの再採番処理で Math.max() を用いた際、空配列に対して実行すると -Infinity が返ることを知った。 配列の要素数を確認してから処理を行うことで、例外を防ぐ「防御的な実装」の考え方を学んだ。

今後の改善案

• 商品検索機能の追加
• 商品情報の編集機能の追加
• UI/デザインの改善