手軽に始める！JavaScriptで在庫管理システムを作成する10のステップ

はじめに

JavaScriptを使って簡単に在庫管理システムを作成したいと思いませんか？

この記事では、初心者でも理解できるようにJavaScriptを使った在庫管理システムの作成手順やサンプルコードを紹介します。

これを読めば、あなたも効率的な在庫管理を実現できるでしょう。

●JavaScriptとは

JavaScriptは、ウェブページに動的な要素を追加するためのプログラミング言語です。

HTMLやCSSと組み合わせて使われることが多く、インタラクティブなウェブアプリケーションを作成するのに適しています。

●在庫管理システムの基本構造

在庫管理システムを作るためには、下記の要素が必要です。

データベースの設計
HTMLの構成
CSSの設定

それぞれの要素について解説していきます。

○データベースの設計

在庫管理システムでは、商品情報や在庫数などのデータを保存・管理するためにデータベースが必要です。

この記事では、JavaScriptで扱いやすいローカルストレージをデータベースとして使用します。

ローカルストレージは、ブラウザ上にデータを保存できる機能で、データの永続性があります。

商品情報には、商品名、商品コード、価格、在庫数が含まれます。

これらをJavaScriptオブジェクトで表現し、JSON形式に変換してローカルストレージに保存します。

○HTMLの構成

在庫管理システムの画面構成を決めるために、下記のHTML要素が必要です。

商品登録フォーム
在庫一覧表
検索フォーム

それぞれの要素を作成し、適切なid属性やclass属性を付与しておきます。

○CSSの設定

在庫管理システムの見た目を整えるために、CSSを用いてスタイルを設定します。

フォームやボタン、テーブルなどの要素に対して、適切なスタイルを適用しましょう。

●サンプルコードを用いた実践

それでは、実際にJavaScriptを使って在庫管理システムを作成していきましょう。

下記の機能を実装します。

データの登録
在庫の追加・減少
在庫の一覧表示
在庫の検索
在庫の編集・削除

○データの登録

商品情報を入力し、登録ボタンを押すことでデータがローカルストレージに保存される機能を実装します。

まずは、登録フォームのHTMLを用意しましょう。

<form id="registration-form">
  <label for="product-name">商品名:</label>
  <input type="text" id="product-name" required>
  <label for="product-code">商品コード:</label>
  <input type="text" id="product-code" required>
  <label for="price">価格:</label>
  <input type="number" id="price" required>
  <label for="quantity">在庫数:</label>
  <input type="number" id="quantity" required>
  <button type="submit">登録</button>
</form>

次に、JavaScriptで登録処理を実装します。

下記のコードでは、フォームの送信イベントに対して登録処理を行う関数を登録しています。

// データ登録処理
document.getElementById("registration-form").addEventListener("submit", function (e) {
  e.preventDefault();

  // 入力された商品情報を取得
  const productName = document.getElementById("product-name").value;
  const productCode = document.getElementById("product-code").value;
  const price = document.getElementById("price").value;
  const quantity = document.getElementById("quantity").value;

  // 商品情報をオブジェクトにまとめる
  const product = {
    name: productName,
    code: productCode,
    price: price,
    quantity: quantity
  };

  // ローカルストレージに保存
  localStorage.setItem(productCode, JSON.stringify(product));

  // フォームをクリア
  this.reset();
});

○在庫の追加・減少

在庫を追加または減らす機能を実装します。

この機能には、在庫の増減を行うフォームと、増減処理を行うJavaScriptのコードが必要です。

<form id="stock-update-form">
  <label for="update-product-code">商品コード:</label>
  <input type="text" id="update-product-code" required>
  <label for="update-quantity">増減数:</label>
  <input type="number" id="update-quantity" required>
  <button type="submit">在庫を更新</button>
</form>

在庫の増減処理を行うJavaScriptのコードは次の通りです。

ここでは、入力された商品コードと増減数を取得し、ローカルストレージから商品情報を取得して在庫数を更新しています。

// 在庫増減処理
document.getElementById("stock-update-form").addEventListener("submit", function (e) {
  e.preventDefault();

  // 入力された商品コードと増減数を取得
  const updateProductCode = document.getElementById("update-product-code").value;
  const updateQuantity = document.getElementById("update-quantity").value;

  // 商品情報をローカルストレージから取得
  const product = JSON.parse(localStorage.getItem(updateProductCode));

  // 在庫数を更新
  if (product) {
    product.quantity = parseInt(product.quantity) + parseInt(updateQuantity);

    // 更新された商品情報をローカルストレージに保存
    localStorage.setItem(updateProductCode, JSON.stringify(product));
  } else {
    alert("商品が見つかりませんでした。");
  }

  // フォームをクリア
  this.reset();
});

○在庫の一覧表示

商品の在庫一覧を表示する機能を実装します。

まずは、在庫一覧を表示するHTML要素を用意しましょう。

<table id="inventory-list">
  <thead>
    <tr>
      <th>商品名</th>
      <th>商品コード</th>
      <th>価格</th>
      <th>在庫数</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

次に、在庫一覧を表示するJavaScriptのコードを実装します。

ここでは、ローカルストレージ内のすべての商品情報を取得し、それらをテーブルの要素として追加しています。

// 在庫一覧表示処理
function displayInventoryList() {
  const inventoryList = document.getElementById("inventory-list").getElementsByTagName("tbody")[0];
  inventoryList.innerHTML = ""; // 一覧をクリア

  // ローカルストレージ内の商品情報を取得して表示
  for (let i = 0; i < localStorage.length; i++) {
    const productCode = localStorage.key(i);
    const product = JSON.parse(localStorage.getItem(productCode));

    // テーブルに行を追加
    const newRow = inventoryList.insertRow();

    newRow.insertCell().innerText = product.name;
    newRow.insertCell().innerText = product.code;
    newRow.insertCell().innerText = product.price;
    newRow.insertCell().innerText = product.quantity;
  }
}

// 一覧を初期表示
displayInventoryList();

○在庫の検索

商品の在庫情報を検索する機能を実装します。

まずは、検索フォームのHTML要素を用意しましょう。

<form id="search-form">
  <label for="search-keyword">検索キーワード:</label>
  <input type="text" id="search-keyword" required>
  <button type="submit">検索</button>
</form>

次に、検索処理を行うJavaScriptのコードを実装します。

ここでは、入力されたキーワードと商品名が一致するかどうかを判断し、一致した商品のみを表示します。

// 検索処理
document.getElementById("search-form").addEventListener("submit", function (e) {
  e.preventDefault();

  // 入力されたキーワードを取得
  const keyword = document.getElementById("search-keyword").value;

  // 商品情報をローカルストレージから取得し、キーワードとの一致を確認
  const searchResults = [];
  for (let i = 0; i < localStorage.length; i++) {
    const productCode = localStorage.key(i);
    const product = JSON.parse(localStorage.getItem(productCode));

    if (product.name.includes(keyword)) {
      searchResults.push(product);
    }
  }

  // 検索結果を表示
  displaySearchResults(searchResults);
});

// 検索結果表示処理
function displaySearchResults(results) {
  // ここで検索結果を表示する処理を行います。
  // 例えば、検索結果を表示するHTML要素を作成し、その中に検索結果を表示することができます。
}

○在庫の編集・削除

在庫情報の編集・削除機能を実装します。

まず、編集・削除フォームのHTML要素を作成しましょう。

<form id="edit-delete-form">
  <label for="edit-delete-product-code">商品コード:</label>
  <input type="text" id="edit-delete-product-code" required>
  <button type="submit" id="edit-button">編集</button>
  <button type="button" id="delete-button">削除</button>
</form>

次に、編集・削除処理を行うJavaScriptのコードを実装します。

ここでは、入力された商品コードに対応する商品情報をローカルストレージから取得し、編集または削除を行います。

// 編集処理
document.getElementById("edit-delete-form").addEventListener("submit", function (e) {
  e.preventDefault();

  // 商品コードを取得
  const productCode = document.getElementById("edit-delete-product-code").value;

  // 商品情報をローカルストレージから取得
  const product = JSON.parse(localStorage.getItem(productCode));

  if (product) {
    // ここで編集処理を行い、ローカルストレージに保存します。
    // 例えば、商品名や数量を変更できるようなダイアログを表示し、
    // 編集が完了したら、ローカルストレージのデータを更新します。
  } else {
    alert("指定された商品コードは存在しません。");
  }
});

// 削除処理
document.getElementById("delete-button").addEventListener("click", function () {
  // 商品コードを取得
  const productCode = document.getElementById("edit-delete-product-code").value;

  // 商品情報をローカルストレージから削除
  if (localStorage.getItem(productCode)) {
    localStorage.removeItem(productCode);
    alert("商品情報を削除しました。");
  } else {
    alert("指定された商品コードは存在しません。");
  }
});