【React×Context API】ショッピングカートの作り方を初心者向けに徹底解説｜実装コード付き

「ショッピングカートをReactで作りたいけれど、データの管理が難しい」
「Context APIをどう使えばいいかわからない」
そうお悩みの方も多いのではないでしょうか？

この記事では、ReactのContext APIを使って、誰でも簡単にショッピングカートが作れる方法を丁寧に解説いたします。

小学生でも理解できるように言葉を選び、実際のコードと構成をすべて掲載。
コピペで動かせる完成形コードもご用意しています。

「カートに商品を追加する」「削除する」「合計金額を出す」といった基本機能を、順番にわかりやすく学べる内容です。

Reactでショッピングカートを作る意味
1. ネット通販とReactの相性とは？
Context APIの導入と使い方
1. Context APIとは何かを簡単に説明
2. Context APIの設定手順
商品一覧とカート追加機能の実装
1. 商品一覧ページを作ってみよう
カート画面と削除機能の実装
1. カート内容の表示と削除
ショッピングカート機能のまとめと注意点
1. 実務で使う場合のポイント
完成形のコード一覧
まとめ

Reactでショッピングカートを作る意味

ネット通販とReactの相性とは？

結論：ショッピングカートはWeb開発の登竜門であり、実務でも頻出の機能です。

最近ではオンラインストアやフリマアプリなど、多くのWebサービスが「買い物かご（カート）機能」を持っています。

たとえば：

Amazonや楽天などの大型通販サイト
個人向けのハンドメイド販売サイト
飲食店のオンライン注文システム

このような実例に共通するのが、商品を選んでカートに入れ、合計金額を確認し、購入するという流れです。

Reactは部品ごとに機能を分けられるため、カートの状態管理に非常に適していると言えます。

さらに、Context APIを使えば、どの画面からでもカートの中身にアクセス可能になるため、アプリ全体の整合性が取りやすくなります。

Context APIの導入と使い方

Context APIとは何かを簡単に説明

結論：複数の画面で共通のデータを使うための道具です。

Reactでは通常、親から子へデータを渡します（props）。

ですが、深い階層になると、毎回propsを渡すのは大変です。

そこで使うのがContext APIです。

Context APIの使い方は以下のようになります：

Contextを作る
Providerで全体を囲む
useContextでデータを使う

今回はカートの中身（商品リストや合計金額）をContextで管理します。

Context APIの設定手順

まず、CartContext.jsというファイルを作り、以下のように書きます。

import { createContext, useState, useContext } from 'react';
const CartContext = createContext();
export const CartProvider = ({ children }) => {
  const [cartItems, setCartItems] = useState([]);
  const addToCart = (item) => {
    setCartItems([...cartItems, item]);
  };
  const removeFromCart = (index) => {
    const newCart = [...cartItems];
    newCart.splice(index, 1);
    setCartItems(newCart);
  };
  return (
    <CartContext.Provider value={{ cartItems, addToCart, removeFromCart }}>
      {children}
    </CartContext.Provider>
  );
};
export const useCart = () => useContext(CartContext);

次に、App.jsで全体をこのCartProviderで囲みます。

import { CartProvider } from './CartContext';
function App() {
  return (
    <CartProvider>
      <YourRoutesHere />
    </CartProvider>
  );
}

商品一覧とカート追加機能の実装

商品一覧ページを作ってみよう

結論：商品を一覧で表示し、ボタンでカートに追加できるようにします。

以下は例として簡単な商品一覧です。

import { useCart } from './CartContext';
const products = [
  { name: 'りんご', price: 120 },
  { name: 'バナナ', price: 80 },
  { name: 'みかん', price: 100 }
];
function ProductList() {
  const { addToCart } = useCart();
  return (
    <div>
      <h2>商品一覧</h2>
      {products.map((product, index) => (
        <div key={index}>
          {product.name} - ¥{product.price}
          <button onClick={() => addToCart(product)}>カートに追加</button>
        </div>
      ))}
    </div>
  );
}

この画面で「カートに追加」ボタンを押すと、Contextを通じてカート情報が更新されます。

カート画面と削除機能の実装

カート内容の表示と削除

結論：Contextからカートの中身を取り出して表示すればOKです。

import { useCart } from './CartContext';
function Cart() {
  const { cartItems, removeFromCart } = useCart();
  const total = cartItems.reduce((sum, item) => sum + item.price, 0);
  return (
    <div>
      <h2>カートの中身</h2>
      {cartItems.map((item, index) => (
        <div key={index}>
          {item.name} - ¥{item.price}
          <button onClick={() => removeFromCart(index)}>削除</button>
        </div>
      ))}
      <h3>合計: ¥{total}</h3>
    </div>
  );
}

ショッピングカート機能のまとめと注意点

実務で使う場合のポイント

学習目的としては十分な構成ですが、実務で使う場合には以下の注意が必要です：

商品データはサーバーから取得する
カート内容はブラウザに保存する（localStorage）
数量の管理（同じ商品を複数追加）
金額表示を桁区切りで表示

完成形のコード一覧

App.js

import ProductList from './ProductList';
import Cart from './Cart';
import { CartProvider } from './CartContext';
function App() {
  return (
    <CartProvider>
      <ProductList />
      <Cart />
    </CartProvider>
  );
}
export default App;

ProductList.js

import { useCart } from './CartContext';
const products = [
  { name: 'りんご', price: 120 },
  { name: 'バナナ', price: 80 },
  { name: 'みかん', price: 100 }
];
function ProductList() {
  const { addToCart } = useCart();
  return (
    <div>
      <h2>商品一覧</h2>
      {products.map((product, index) => (
        <div key={index}>
          {product.name} - ¥{product.price}
          <button onClick={() => addToCart(product)}>カートに追加</button>
        </div>
      ))}
    </div>
  );
}

Cart.js

import { useCart } from './CartContext';
function Cart() {
  const { cartItems, removeFromCart } = useCart();
  const total = cartItems.reduce((sum, item) => sum + item.price, 0);
  return (
    <div>
      <h2>カートの中身</h2>
      {cartItems.map((item, index) => (
        <div key={index}>
          {item.name} - ¥{item.price}
          <button onClick={() => removeFromCart(index)}>削除</button>
        </div>
      ))}
      <h3>合計: ¥{total}</h3>
    </div>
  );
}

CartContext.js

import { createContext, useState, useContext } from 'react';
const CartContext = createContext();
export const CartProvider = ({ children }) => {
  const [cartItems, setCartItems] = useState([]);
  const addToCart = (item) => {
    setCartItems([...cartItems, item]);
  };
  const removeFromCart = (index) => {
    const newCart = [...cartItems];
    newCart.splice(index, 1);
    setCartItems(newCart);
  };
  return (
    <CartContext.Provider value={{ cartItems, addToCart, removeFromCart }}>
      {children}
    </CartContext.Provider>
  );
};
export const useCart = () => useContext(CartContext);