ReactでuseStateを使ったカート機能の実装方法を徹底解説

ECサイトにおいて、カート機能はユーザー体験を左右する重要な要素です。Reactでは、useStateフックを用いることで、シンプルかつ柔軟にカート機能を実装できます。本記事では、React初心者でも理解しやすいように、useStateを用いた状態管理の基本から、カート機能の具体的な実装方法までを徹底解説します。最終的には、簡単なデモECサイトを構築し、学んだ知識を実践的に活用できるようになります。これにより、ECサイト構築の基礎をマスターする第一歩を踏み出しましょう。

ReactとuseStateの基本概要

Reactは、UI構築のためのJavaScriptライブラリで、コンポーネントベースのアプローチを採用しています。これにより、UIを小さな部品に分割し、それぞれを独立して管理できます。その中で、useStateは状態管理を実現するための基本的なフックとして、動的なデータの管理に使用されます。

Reactの基本概念

Reactでは、UIの状態がデータに依存しており、データが変更されると自動的にUIも更新されます。これは仮想DOMを通じて効率的に実現され、ユーザー操作に応じたリアルタイムなUI更新を可能にします。

useStateとは

useStateはReactのフックの一つで、関数コンポーネントで状態を管理するために使用されます。使い方は以下の通りです：

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0); // 初期値0でカウント状態を定義

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}

コードの解説

useState(0)は、初期値として0を設定した状態変数を作成します。
countは現在の状態、setCountは状態を更新するための関数です。
状態が変わると、対応するUIが再レンダリングされます。

ReactとuseStateを組み合わせることで、動的な状態管理が簡単に実現でき、特にECサイトのカート機能のようなインタラクティブなコンポーネントの構築に役立ちます。

ECサイトに必要なカート機能の要件

ECサイトのカート機能は、ユーザーが商品を購入する際の中核的な役割を果たします。以下に、カート機能を構築する際に必要な基本要件を整理し、それらがどのように実現されるべきかを解説します。

1. 商品の追加

ユーザーが商品をカートに追加できる機能は必須です。これには以下が含まれます：

商品IDや名称、価格などの情報を保存する仕組み
同じ商品を複数回追加した際の数量管理

例: 商品追加データ

商品を追加する際、以下のような形式でデータを管理します：

{
  id: 1,
  name: "Tシャツ",
  price: 1500,
  quantity: 2
}

2. 商品の削除

カートから不要な商品を削除する機能も必要です。これにより、ユーザーはカート内容を自由に調整できます。

3. 数量の変更

商品の購入数を増減できる機能は、多くのECサイトで一般的です。この要件には以下が含まれます：

数量が増えた場合、カートの合計金額が更新される
数量がゼロになる場合、商品が自動的にカートから削除される

4. 合計金額の計算

カートに含まれる商品の総額をリアルタイムで計算し、表示することが求められます。

単価 × 数量を計算し、カート内のすべての商品の合計を算出

5. 状態管理と保存

カートの状態を保持し、ページ更新後もデータが失われないようにする必要があります。

localStorageやsessionStorageを利用したデータの永続化
ログインユーザーの場合、サーバーサイドとの同期

6. UIの簡潔さと操作性

ユーザーが直感的に操作できるUIを提供することも重要な要件です。

商品リストの見やすさ
「購入手続き」ボタンの配置

これらの要件を満たすことで、ユーザーにとって使いやすいカート機能を提供できます。次のセクションでは、useStateを利用してこれらの要件をどのように実装するかを解説します。

useStateを使った状態管理の基礎

カート機能を実装するための第一歩として、useStateを用いた状態管理の基本を理解することが重要です。ここでは、useStateの基本的な使用方法と、カート機能の状態管理への応用方法を説明します。

useStateの基本構文

ReactのuseStateフックを使用することで、関数コンポーネント内で状態を管理できます。以下は基本的な構文です：

const [state, setState] = useState(initialValue);

state：現在の状態の値
setState：状態を更新するための関数
initialValue：状態の初期値

カート機能におけるuseStateの応用

カート機能では、商品のリストや数量、合計金額など、複数の状態を管理する必要があります。例えば、以下のように状態を設定します：

import React, { useState } from 'react';

function ShoppingCart() {
  const [cartItems, setCartItems] = useState([]); // 商品リストを管理する状態
  const [totalAmount, setTotalAmount] = useState(0); // 合計金額を管理する状態

  return <div>カート機能をここに実装します。</div>;
}

状態管理の基本例：商品を追加

商品の追加操作を状態管理する例を見てみましょう：

function addToCart(newItem) {
  setCartItems((prevItems) => {
    // すでに存在する商品を確認
    const existingItem = prevItems.find(item => item.id === newItem.id);
    if (existingItem) {
      // 商品が既に存在する場合は数量を更新
      return prevItems.map(item =>
        item.id === newItem.id ? { ...item, quantity: item.quantity + 1 } : item
      );
    }
    // 新しい商品を追加
    return [...prevItems, { ...newItem, quantity: 1 }];
  });
}

コードのポイント

prevItems：現在のカートの状態（配列）を参照。
商品が存在するかをfindメソッドで確認。
状態を更新する際、mapで既存の商品を変更または新商品を追加。

状態管理をReactに適用する流れ

useStateで状態を定義。
状態を操作する関数を作成（例：商品を追加、削除）。
状態をUIにバインド（例：カート内の商品の表示）。

状態の再レンダリング

状態が変更されると、対応するコンポーネントが再レンダリングされます。これにより、UIが常に最新の状態を反映します。

この基本的な状態管理をもとに、次のセクションでは具体的な商品の追加機能を実装していきます。

商品の追加機能の実装

カート機能の中核となる「商品の追加」機能を実装します。この機能では、useStateを利用して商品データを管理し、ボタンのクリックでカートに商品を追加する処理を行います。

商品のデータ構造

まず、商品データを管理するための基本的な構造を定義します。以下のようなデータ形式を用います：

const product = {
  id: 1,
  name: "Tシャツ",
  price: 1500
};

商品の追加機能のコード例

以下は、カートに商品を追加するためのReactコンポーネントの実装例です：

import React, { useState } from 'react';

function ShoppingCart() {
  // カート内の商品を管理する状態
  const [cartItems, setCartItems] = useState([]);

  // 商品をカートに追加する関数
  function addToCart(product) {
    setCartItems((prevItems) => {
      const existingItem = prevItems.find(item => item.id === product.id);

      if (existingItem) {
        // 既存の商品がある場合は数量を増加
        return prevItems.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }

      // 新しい商品をカートに追加
      return [...prevItems, { ...product, quantity: 1 }];
    });
  }

  // サンプル商品データ
  const sampleProduct = { id: 1, name: "Tシャツ", price: 1500 };

  return (
    <div>
      <h2>商品一覧</h2>
      <div>
        <p>{sampleProduct.name} - {sampleProduct.price}円</p>
        <button onClick={() => addToCart(sampleProduct)}>カートに追加</button>
      </div>

      <h2>カートの内容</h2>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>
            {item.name} - {item.price}円 × {item.quantity}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ShoppingCart;

コードの解説

状態の初期化
useState([])で、カート内の商品リストを空配列として初期化します。
addToCart関数

既存のカート内容をprevItemsとして受け取り、新しい状態を返します。
商品がカートに存在する場合は、数量を増加します。
存在しない場合は、新しい商品をカートに追加します。

UIの構築

サンプル商品をリストとして表示し、各商品に「カートに追加」ボタンを設置。
カート内の商品をリスト表示し、商品名・価格・数量を出力します。

動作確認

このコードを実行すると、以下のように動作します：

「カートに追加」ボタンをクリックすると、該当商品がカートに追加されます。
同じ商品を追加すると、数量が自動的に増加します。

次のセクションでは、商品の数量変更や削除機能を追加し、さらにカート機能を強化していきます。

商品の数量変更と削除機能の実装

カート機能をさらに発展させるために、商品の数量を増減する機能と、不要な商品を削除する機能を実装します。これにより、ユーザーはカート内の商品を柔軟に管理できるようになります。

数量変更機能の実装

数量変更の実装では、商品の数量を増減するためのボタンを提供し、状態を更新します。

import React, { useState } from 'react';

function ShoppingCart() {
  const [cartItems, setCartItems] = useState([]);

  // 商品をカートに追加する関数
  function addToCart(product) {
    setCartItems((prevItems) => {
      const existingItem = prevItems.find(item => item.id === product.id);

      if (existingItem) {
        return prevItems.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }

      return [...prevItems, { ...product, quantity: 1 }];
    });
  }

  // 数量を増加させる関数
  function increaseQuantity(productId) {
    setCartItems((prevItems) =>
      prevItems.map(item =>
        item.id === productId
          ? { ...item, quantity: item.quantity + 1 }
          : item
      )
    );
  }

  // 数量を減少させる関数
  function decreaseQuantity(productId) {
    setCartItems((prevItems) =>
      prevItems
        .map(item =>
          item.id === productId
            ? { ...item, quantity: item.quantity - 1 }
            : item
        )
        .filter(item => item.quantity > 0) // 数量が0の場合は削除
    );
  }

  const sampleProduct = { id: 1, name: "Tシャツ", price: 1500 };

  return (
    <div>
      <h2>商品一覧</h2>
      <div>
        <p>{sampleProduct.name} - {sampleProduct.price}円</p>
        <button onClick={() => addToCart(sampleProduct)}>カートに追加</button>
      </div>

      <h2>カートの内容</h2>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>
            {item.name} - {item.price}円 × {item.quantity}
            <button onClick={() => increaseQuantity(item.id)}>+</button>
            <button onClick={() => decreaseQuantity(item.id)}>-</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ShoppingCart;

コードのポイント

increaseQuantity関数

対象商品のquantityを1増加させます。

decreaseQuantity関数

対象商品のquantityを1減少させます。
数量が0になる場合はカートから削除するようにfilterを使用。

UIへの反映

各商品の隣に「+」と「-」ボタンを設置。クリックすると数量が変更されます。

削除機能の実装

削除機能を追加することで、ユーザーは不要な商品をカートから完全に削除できます。

// 商品を削除する関数
function removeItem(productId) {
  setCartItems((prevItems) =>
    prevItems.filter(item => item.id !== productId)
  );
}

UIの更新

削除ボタンを各商品の横に配置します。

<li key={item.id}>
  {item.name} - {item.price}円 × {item.quantity}
  <button onClick={() => increaseQuantity(item.id)}>+</button>
  <button onClick={() => decreaseQuantity(item.id)}>-</button>
  <button onClick={() => removeItem(item.id)}>削除</button>
</li>

動作確認

「+」ボタン：商品の数量が1増加。
「-」ボタン：商品の数量が1減少し、0になると自動的にカートから削除。
「削除」ボタン：商品の数量に関係なく、完全にカートから削除。

最終結果

このコードにより、カート機能は商品の数量変更や削除に対応できるようになります。次のセクションでは、合計金額の計算を実装し、カート機能を完成させます。

カート内商品の合計金額計算の実装

カート内商品の合計金額をリアルタイムで計算し、ユーザーに表示する機能を実装します。この機能により、購入予定金額を即座に確認でき、ユーザー体験が向上します。

合計金額の計算方法

カート内商品の合計金額は以下の式で計算します：

合計金額 = 各商品の (価格 × 数量) の合計

この計算は、reduceメソッドを使用して簡潔に実現できます。

コード実装

以下は、カートの合計金額を計算して表示するコードです：

import React, { useState } from 'react';

function ShoppingCart() {
  const [cartItems, setCartItems] = useState([]);

  // 商品をカートに追加する関数
  function addToCart(product) {
    setCartItems((prevItems) => {
      const existingItem = prevItems.find(item => item.id === product.id);

      if (existingItem) {
        return prevItems.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }

      return [...prevItems, { ...product, quantity: 1 }];
    });
  }

  // 合計金額を計算する関数
  function calculateTotal() {
    return cartItems.reduce(
      (total, item) => total + item.price * item.quantity,
      0
    );
  }

  const sampleProduct = { id: 1, name: "Tシャツ", price: 1500 };

  return (
    <div>
      <h2>商品一覧</h2>
      <div>
        <p>{sampleProduct.name} - {sampleProduct.price}円</p>
        <button onClick={() => addToCart(sampleProduct)}>カートに追加</button>
      </div>

      <h2>カートの内容</h2>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>
            {item.name} - {item.price}円 × {item.quantity}
          </li>
        ))}
      </ul>

      <h3>合計金額: {calculateTotal()}円</h3>
    </div>
  );
}

export default ShoppingCart;

コードの解説

合計金額の計算

reduceメソッドを使用し、カート内の全商品のpriceとquantityを掛け算し、その合計を返します。

   cartItems.reduce(
     (total, item) => total + item.price * item.quantity,
     0 // 初期値は0
   );

リアルタイムの更新

カートの状態cartItemsが更新されるたびに、calculateTotalが呼び出され、新しい合計金額が表示されます。

UIへの統合

合計金額は<h3>タグで表示。ユーザーが商品の追加・削除を行うと、自動的に更新されます。

動作確認

以下の操作で動作を確認できます：

商品を追加：合計金額が商品価格に応じて増加。
商品を削除：削除された商品の金額分が合計から減少。
商品数量変更：数量に応じて合計金額が動的に変化。

完成したカート機能の効果

ユーザーはリアルタイムで購入予定金額を確認可能。
シンプルなUIで高い操作性を実現。

次のセクションでは、コンポーネント分割を行い、コードをさらに整理していきます。

コンポーネント分割によるコードの整理

Reactでは、コンポーネント分割を行うことでコードをモジュール化し、再利用性と可読性を向上させることができます。このセクションでは、カート機能のコードを分割し、各部分を独立したコンポーネントにする方法を解説します。

分割するコンポーネント

以下のように、カート機能を3つの主要なコンポーネントに分割します：

ProductList：商品一覧の表示と「カートに追加」機能を提供。
CartItemList：カート内商品の一覧表示、数量変更、削除機能を管理。
CartTotal：カート内商品の合計金額を表示。

コード実装

以下に各コンポーネントの実装例を示します。

App.js（親コンポーネント）

親コンポーネントで状態を管理し、各子コンポーネントに必要なデータと関数を渡します。

import React, { useState } from 'react';
import ProductList from './ProductList';
import CartItemList from './CartItemList';
import CartTotal from './CartTotal';

function App() {
  const [cartItems, setCartItems] = useState([]);

  function addToCart(product) {
    setCartItems((prevItems) => {
      const existingItem = prevItems.find(item => item.id === product.id);
      if (existingItem) {
        return prevItems.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }
      return [...prevItems, { ...product, quantity: 1 }];
    });
  }

  function updateQuantity(productId, delta) {
    setCartItems((prevItems) =>
      prevItems
        .map(item =>
          item.id === productId
            ? { ...item, quantity: item.quantity + delta }
            : item
        )
        .filter(item => item.quantity > 0)
    );
  }

  function removeItem(productId) {
    setCartItems((prevItems) =>
      prevItems.filter(item => item.id !== productId)
    );
  }

  return (
    <div>
      <h1>ショッピングカート</h1>
      <ProductList addToCart={addToCart} />
      <CartItemList
        cartItems={cartItems}
        updateQuantity={updateQuantity}
        removeItem={removeItem}
      />
      <CartTotal cartItems={cartItems} />
    </div>
  );
}

export default App;

ProductList.js

商品一覧を表示し、「カートに追加」機能を提供するコンポーネントです。

import React from 'react';

function ProductList({ addToCart }) {
  const products = [
    { id: 1, name: 'Tシャツ', price: 1500 },
    { id: 2, name: '帽子', price: 1200 },
    { id: 3, name: '靴', price: 8000 },
  ];

  return (
    <div>
      <h2>商品一覧</h2>
      {products.map(product => (
        <div key={product.id}>
          <p>{product.name} - {product.price}円</p>
          <button onClick={() => addToCart(product)}>カートに追加</button>
        </div>
      ))}
    </div>
  );
}

export default ProductList;

CartItemList.js

カート内の商品を表示し、数量変更や削除を管理するコンポーネントです。

import React from 'react';

function CartItemList({ cartItems, updateQuantity, removeItem }) {
  return (
    <div>
      <h2>カートの内容</h2>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>
            {item.name} - {item.price}円 × {item.quantity}
            <button onClick={() => updateQuantity(item.id, 1)}>+</button>
            <button onClick={() => updateQuantity(item.id, -1)}>-</button>
            <button onClick={() => removeItem(item.id)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default CartItemList;

CartTotal.js

カート内商品の合計金額を計算して表示するコンポーネントです。

import React from 'react';

function CartTotal({ cartItems }) {
  const total = cartItems.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0
  );

  return (
    <h3>合計金額: {total}円</h3>
  );
}

export default CartTotal;

コードのポイント

状態管理を親コンポーネントに集約

状態cartItemsを親で一元管理し、関数とデータを子コンポーネントに渡します。

各コンポーネントの役割を明確化

ProductListは商品表示、CartItemListはカート管理、CartTotalは合計計算に専念。

再利用性の向上

各コンポーネントは独立しているため、他のプロジェクトでも再利用可能。

完成後の効果

コードの分割により、各コンポーネントがシンプルになり、保守性が向上します。次のセクションでは、このカート機能を統合して、デモサイトを作成します。

実践例：シンプルなECサイトのデモ作成

これまで実装したカート機能を統合して、シンプルなECサイトのデモを作成します。このデモでは、商品一覧の表示、カートへの追加、数量変更、削除、合計金額表示といった一連の機能を確認できます。

統合したプロジェクト構成

以下のようなフォルダ構成でコードを管理します：

src/
├── App.js
├── components/
│   ├── ProductList.js
│   ├── CartItemList.js
│   └── CartTotal.js
└── index.js

全体コードの統合

App.js

親コンポーネントとして、カートの状態管理と各子コンポーネントの連携を担当します。

import React, { useState } from 'react';
import ProductList from './components/ProductList';
import CartItemList from './components/CartItemList';
import CartTotal from './components/CartTotal';

function App() {
  const [cartItems, setCartItems] = useState([]);

  function addToCart(product) {
    setCartItems((prevItems) => {
      const existingItem = prevItems.find(item => item.id === product.id);
      if (existingItem) {
        return prevItems.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }
      return [...prevItems, { ...product, quantity: 1 }];
    });
  }

  function updateQuantity(productId, delta) {
    setCartItems((prevItems) =>
      prevItems
        .map(item =>
          item.id === productId
            ? { ...item, quantity: item.quantity + delta }
            : item
        )
        .filter(item => item.quantity > 0)
    );
  }

  function removeItem(productId) {
    setCartItems((prevItems) =>
      prevItems.filter(item => item.id !== productId)
    );
  }

  return (
    <div>
      <h1>シンプルなECサイト</h1>
      <ProductList addToCart={addToCart} />
      <CartItemList
        cartItems={cartItems}
        updateQuantity={updateQuantity}
        removeItem={removeItem}
      />
      <CartTotal cartItems={cartItems} />
    </div>
  );
}

export default App;

ProductList.js

商品一覧を表示し、各商品に「カートに追加」ボタンを提供します。

import React from 'react';

function ProductList({ addToCart }) {
  const products = [
    { id: 1, name: 'Tシャツ', price: 1500 },
    { id: 2, name: '帽子', price: 1200 },
    { id: 3, name: '靴', price: 8000 },
  ];

  return (
    <div>
      <h2>商品一覧</h2>
      {products.map(product => (
        <div key={product.id}>
          <p>{product.name} - {product.price}円</p>
          <button onClick={() => addToCart(product)}>カートに追加</button>
        </div>
      ))}
    </div>
  );
}

export default ProductList;

CartItemList.js

カート内商品の一覧表示、数量変更、削除機能を提供します。

import React from 'react';

function CartItemList({ cartItems, updateQuantity, removeItem }) {
  return (
    <div>
      <h2>カートの内容</h2>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>
            {item.name} - {item.price}円 × {item.quantity}
            <button onClick={() => updateQuantity(item.id, 1)}>+</button>
            <button onClick={() => updateQuantity(item.id, -1)}>-</button>
            <button onClick={() => removeItem(item.id)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default CartItemList;

CartTotal.js

カート内商品の合計金額を表示します。

import React from 'react';

function CartTotal({ cartItems }) {
  const total = cartItems.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0
  );

  return (
    <h3>合計金額: {total}円</h3>
  );
}

export default CartTotal;

プロジェクトの実行

プロジェクトをセットアップ：

   npx create-react-app ec-site-demo
   cd ec-site-demo

必要なコンポーネントを作成し、コードを配置。
開発サーバーを起動：

   npm start

ブラウザでhttp://localhost:3000にアクセスすると、デモサイトが表示されます。

デモサイトの動作確認

商品一覧：複数の商品が表示され、「カートに追加」ボタンでカートに追加可能。
カート内容：追加された商品の名前、価格、数量が表示され、数量変更や削除が可能。
合計金額：カート内商品の合計金額がリアルタイムで更新される。

これで、シンプルなECサイトが完成しました。次のセクションでは、このプロジェクト全体を振り返り、重要なポイントをまとめます。

まとめ

本記事では、Reactを用いたシンプルなカート機能の実装方法について解説しました。useStateを利用した状態管理の基本から始まり、商品の追加、数量変更、削除、合計金額の計算、そしてコンポーネント分割による効率的なコード設計まで、実践的な内容を一歩ずつ進めてきました。

最終的には、すべての機能を統合して、シンプルなECサイトのデモを構築しました。このプロジェクトを通じて学べた主なポイントは以下の通りです：

useStateの活用：状態管理を簡潔に行う方法を習得。
動的UIの構築：リアルタイムで更新されるインタラクティブなカート機能を実現。
コンポーネント分割：コードを再利用可能かつメンテナンスしやすい形に整理。

これらの知識を応用することで、さらに複雑なECサイトや他のアプリケーションにも対応できるスキルを磨くことができます。次のステップとして、APIとの連携やuseReducerを使った高度な状態管理に挑戦するのも良いでしょう。

今回の学びを活かして、より良いWebアプリケーションを構築してみてください！

ReactでuseStateを使ったカート機能の実装方法を徹底解説

ReactとuseStateの基本概要

Reactの基本概念

useStateとは

コードの解説

ECサイトに必要なカート機能の要件

1. 商品の追加

例: 商品追加データ

2. 商品の削除

3. 数量の変更

4. 合計金額の計算

5. 状態管理と保存

6. UIの簡潔さと操作性

useStateを使った状態管理の基礎

useStateの基本構文

カート機能におけるuseStateの応用

状態管理の基本例：商品を追加

コードのポイント

状態管理をReactに適用する流れ

状態の再レンダリング

商品の追加機能の実装

商品のデータ構造

商品の追加機能のコード例

コードの解説

動作確認

商品の数量変更と削除機能の実装

数量変更機能の実装

コードのポイント

削除機能の実装

UIの更新

動作確認

最終結果

カート内商品の合計金額計算の実装

合計金額の計算方法

コード実装

コードの解説

動作確認

完成したカート機能の効果

コンポーネント分割によるコードの整理

分割するコンポーネント

コード実装

App.js（親コンポーネント）

ProductList.js

CartItemList.js

CartTotal.js

コードのポイント

完成後の効果

実践例：シンプルなECサイトのデモ作成

統合したプロジェクト構成

全体コードの統合

App.js

ProductList.js

CartItemList.js

CartTotal.js

プロジェクトの実行

デモサイトの動作確認

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル