React POS アプリ - 注文の作成ページにカテゴリと製品データをロードする (パート 33)

React POS システム シリーズのパート 33 では、データベースから製品カテゴリと製品をロードし、POS 画面に表示することで、コアとなる「新規注文の追加」エクスペリエンスを構築します。まず、Axios を使用して React で fetchCatalog() 関数を作成し、localStorage に保存されている JWT トークンを使用して安全な API を呼び出します。次に、カテゴリをブートストラップ ボタンとしてレンダリングするため、ユーザーは製品グループをすばやく切り替えることができます。次に、 fetchProducts(categoryId = 0) を実装して、利用可能なすべてのアイテムをロードするか、選択したカテゴリによってアイテムをフィルターします。これにより、カテゴリ ボタンをクリックすると製品リストが即座に更新される、クリーンな POS ワークフローが実現します。また、エラー状態も適切に処理するため、データの読み込みに失敗した場合に UI に役立つメッセージが表示されます。バックエンド (Node.js + Express) では、安全な入力検証のための Express Validator と安全な MySQL クエリのための準備されたステートメントを使用して、カテゴリ別に製品を返す POST API を構築します。エンドポイントは利用可能な製品のみを返し、category_id を使用したオプションのフィルタリングをサポートします。このチュートリアルが終了するまでに、POS の「注文の作成」画面には、動的なカテゴリベースの商品の読み込み、応答性の高いグリッド レイアウト、および次のステップであるページ読み込み時のカート データの読み込みに備えたフルスタック構造が完成します。 💡 使用した技術: React.js、Node.js、Express.js、MySQL、REST API、JWT Auth、Axios、Bootstrap 5 ソースコードの場合 - https://www.webslesson.info/2026/01/react-pos-system-nodejs-mysql.html