Reactで商品管理ソフトを作成する際のデータ構造

Reactで商品管理等のソフトを作成する際、商品データをオブジェクトとして管理し、
それらを配列でまとめるのが一般的かつ有効な方法となります。

つまり、JSON形式は、なにかと便利ですと言いたい。
JSONとは「JavaScript Object Notation」の略で、
「JavaScriptのオブジェクトの書き方を元にしたデータ定義方法」のことです。
この形式、データベースのテーブルを表現したり、商品の取り扱われ状態を表現できたり、
はたまた、通信時のデータ形式としても使える。
商品管理システムでのデータは、JSON形式で管理する事がもっとも効率がよいと考えられる。

商品管理ソフト＝JSON形式データと言っても過言ではない。

以下に、効率的かつスケーラブルなデータ構造と処理方法の
ベストプラクティスを紹介します。

ビルドイン関数はこちら

---

🔧 商品データの基本構造

まず、商品（Item/Product）を管理すべき最小単位として、
以下のような形のオブジェクトで定義します：

js

const product = {
  id: 'p001',
  name: 'Tシャツ',
  price: 1980,
  stock: 20,
  category: '衣料品',
  description: '綿100%のTシャツ',
  imageUrl: '/images/tshirt.jpg',
};

これを一括して管理できるように、複数まとめて配列で管理します：

js

const products = [
  { id: 'p001', name: 'Tシャツ', price: 1980, stock: 20, category: '衣料品' },
  { id: 'p002', name: 'ジーンズ', price: 4980, stock: 10, category: '衣料品' },
  // ...
];

この構造はデータベースのテーブルと保存データに類似するので、
そのままデータベースで取り扱えて便利です。

以下にReactでの扱い方をみていきます。

---

📦 データの効率的な管理方法

1. React State 管理

小規模アプリではuseStateで十分：

js

const [products, setProducts] = useState([]);

新しい商品を追加：

js

setProducts(prev => [...prev, newProduct]);

商品を更新：

js

setProducts(prev => prev.map(p => p.id === updatedProduct.id ? updatedProduct : p));

削除：

js

setProducts(prev => prev.filter(p => p.id !== deleteId));

---

2. useReducer の活用

中〜大規模になると状態管理が複雑化するので、
useReducerで明示的に操作を分けると効率的です：

js

const productReducer = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return [...state, action.payload];
    case 'UPDATE':
      return state.map(p =>
        p.id === action.payload.id ? action.payload : p
      );
    case 'DELETE':
      return state.filter(p => p.id !== action.payload);
    default:
      return state;
  }
};

const [products, dispatch] = useReducer(productReducer, []);

---

3. IDで素早くアクセスしたい場合

大量の商品を扱う場合、Mapやオブジェクトのディクショナリ形式で
管理すると高速アクセスが可能になります：

js

const productsById = {
  p001: { id: 'p001', name: 'Tシャツ', price: 1980 },
  p002: { id: 'p002', name: 'ジーンズ', price: 4980 },
};

// アクセス
const product = productsById['p001'];

欠点は、リスト表示や並べ替えなどでは一旦配列化が必要になることです：

js

const productList = Object.values(productsById);

---

4. 状態管理ライブラリとの連携（中・大規模向け）

• Zustand: 軽量でReactと相性がよく、状態の分離がしやすい。
• Redux: グローバルな状態管理、ミドルウェア対応が必要なら。
• Jotai / Recoil: アトム単位でデータを扱いたい場合。

例（Zustand）：

js

import create from 'zustand';

const useStore = create(set => ({
  products: [],
  addProduct: (product) =>
    set(state => ({ products: [...state.products, product] })),
}));

---

✅ おすすめの選定基準

規模	データ構造	状態管理方法
小規模	配列（Array）	useState
中規模	配列＋useReducer	useReducer or Zustand
大規模	Map/Object辞書 + 補助配列	Redux, Zustand, Jotai

色々な商品データを管理する場合は、オブジェクト形式でデータを作れば、
名前付きでデータを管理でき、ビルトインメソッド(built-in:組み込まれている)
のメソッドチェーンで処理も可能です。
また、それらを配列でまとめて管理すれば、
高速な処理をメソッドチェーンで実現できるので、
Javacsriptではベストな管理方法と思われます。

追加で、商品データの管理データを作る事が一般的になります。

const Status = [
  { type: 'all', label: 'すべて' },
  { type: 'active', label: '作業中' },
  { type: 'completed', label: '完了' }
];

商品の管理は、商品情報だけでなく、取り扱い状態など、
複数の管理データが発生するので、その都度オブジェクトを
作成し、その組み合わせで管理する事となります。