カートに商品が入る瞬間にWebで起きていること

「カートに入れる」はページ遷移ではなく通信です

ECサイトで「カートに入れる」を押すと、画面がそのままの状態で
右上のカートアイコンの数字だけが「0 → 1」に変わります。

多くの人がこう思います。

> ページの中にカート機能が組み込まれている

実際に起きていることは違います。
ボタンを押した瞬間、ブラウザがサーバーへリクエストを送っています。

そして、ページを再読み込みせずに結果だけを受け取り、画面を書き換えています。

つまり「表示操作」ではなく「通信処理」です。

まず、ボタンはリンクではない

一見すると普通のボタンですが、実際はサーバー操作の入口です。

<button id="addCart" data-id="101">カートに入れる</button>

ここで重要なのは data-id です。
商品IDが埋め込まれています。

JavaScriptはこのIDを読み取り、サーバーへ送信します。

JavaScriptがしている仕事

ボタンを押すとクリックイベントが発生します。

document.getElementById("addCart").addEventListener("click", addToCart);

async function addToCart(e){
  const id = e.target.dataset.id;

  await fetch("/cart/add", {
    method: "POST",
    headers: {"Content-Type":"application/json"},
    body: JSON.stringify({productId:id})
  });

  updateCartIcon();
}

ここで初めてサーバーと通信しています。
ページは移動していませんが、「購入操作」は既に始まっています。

サーバー側で起きていること

サーバーは受け取った商品IDを使い、
「ユーザーのカート情報」を更新します。

このとき重要なのがセッションです。

サーバーはユーザーを次のように識別しています。

• Cookie
• セッションID

ユーザーごとにカートを別管理しています。
だから別の人のカートが混ざりません。

つまりカートとは、ページの中にある箱ではなく
サーバー上のデータです。

カートの数字が変わる理由

サーバーは処理結果を返します。

{ "count": 1 }

JavaScriptはその結果を受け取り、画面を書き換えます。

function updateCartIcon(count){
  document.getElementById("cartCount").textContent = count;
}

これが「カートの数字が増えた」正体です。
実際に増えたのは画面ではなく、サーバーのデータです。

なぜページ遷移しないのか

昔のECサイトでは、カートに入れるとカートページへ移動しました。
今はそのままです。

理由はユーザー体験です。

• 商品一覧に戻る手間がない
• 複数商品を続けて選べる
• アプリのように感じる

この仕組みを非同期通信（Ajax / fetch）と呼びます。

よくある勘違い

カートはブラウザに保存されている？

半分正しく、半分違います。

一部サイトでは一時的にlocalStorageを使いますが、
正式なカートはサーバーに保存されます。

理由は重要です。

• ログイン後も保持する
• 別端末でも同期する
• 在庫管理と連動する

ブラウザだけでは実現できません。

実務上の注意点

カート機能はトラブルが起きやすい部分です。

連打問題

ボタンを連打すると、同じ商品が複数回登録されます。

対策としてボタンを無効化します。

button.disabled = true;

通信失敗

ネットワークが不安定な場合、サーバー更新に失敗します。
成功したように見えて、実際はカートに入っていない事故が起きます。

そのため本来は、成功レスポンスを確認してから表示更新します。

まとめ：「カートに入れる」は買い物操作の第一歩

「カートに入れる」は単なる画面操作ではありません。

• 商品IDを送信
• サーバーでデータ更新
• 結果を受信
• DOMを書き換え

一連の通信処理です。

ボタンを押した瞬間、
ユーザーはすでに「サイトと会話」しています。

Webページは静的な紙ではありません。
クリック一回が、データベースを動かしているのです。