React UI Playground

カート

カートの中の商品の数を変えたり、削除したりします。小計・送料・合計は、中身に合わせて自動で計算します。

このコードは 1つのファイルでできています。

CartPage.tsx

カートのページ

使い方（Next.js の場合）

自分のプロジェクトで、この画面を出すまでの3つの手順です

  1. 1

    ターミナルで、使う部品とライブラリを入れる（1回だけ）

    npx shadcn@latest add button
    npm i lucide-react

    shadcn/ui をまだ入れていないプロジェクトでは、先に npx shadcn@latest init を1回打ちます

  2. 2

    ファイルを、この場所に貼る

    my-app/
├─ components/
│   └─ cart/
│       └─ CartPage.tsx   ← 上の窓でコピーしたもの
└─ app/
    └─ cart/
        └─ page.tsx   ← 手順3で作る

    フォルダがなければ作ります。

  3. 3

    ページのファイルで読みこむ

    import CartPage from "@/components/cart/CartPage"

export default function Page() {
  return <CartPage />
}

    app/cart/page.tsx に書きます。npm run dev で開いて、/cart に行くと出ます

ここがポイント

  1. 1

    一覧の中の1つだけを書き換える・消す

    数を変えるときは map で「その商品だけ」数を変えた一覧を作る。削除は filter で「その商品以外」を残した一覧を作る。元の一覧を直接いじらない

  2. 2

    合計は、覚えずに毎回計算する

    小計・送料・合計は state にせず、カートの中身から毎回計算する。中身を変えれば、合計も自動で合う（覚えておくと、ずれる原因になる）

  3. 3

    空っぽのときの表示を用意する

    全部削除したら「カートは空っぽです」と出す。何もない一覧と、0円の合計だけが出ると、壊れたように見える

使った道具

見た目の部品（ボタン）

shadcn/ui →

アイコン（＋・−）

lucide-react →

押すと、第2部のくらべるページへ