では「ショッピングカートの合計金額と商品リストをまとめて表示するUI用の文字列」を作ってみましょう。
カートの例
const cart = [
{ name: 'Tシャツ', price: 1500, quantity: 2 },
{ name: 'ジーンズ', price: 5000, quantity: 1 },
{ name: '帽子', price: 2000, quantity: 1 },
{ name: '靴', price: 8000, quantity: 1 },
{ name: 'バッグ', price: 6000, quantity: 1 }
];
まずは「リストを要約する関数」
前に作った関数を再利用します。
function summarizeList(items, max = 3) {
if (items.length === 0) return '商品はありません';
if (items.length <= max) {
return items.join(', ');
} else {
const shown = items.slice(0, max).join(', ');
const remaining = items.length - max;
return `${shown} …他${remaining}件`;
}
}
合計金額と商品リストをまとめる
function cartSummary(cart) {
// 数量がある商品だけ残す
const validItems = cart.filter(item => item.quantity > 0);
// 商品名リスト
const names = validItems.map(item => item.name);
const nameList = summarizeList(names);
// 合計金額
const total = validItems
.map(item => item.price * item.quantity)
.reduce((acc, subtotal) => acc + subtotal, 0);
return `カート: ${nameList} / 合計金額: ${total}円`;
}
// 実行
console.log(cartSummary(cart));
// "カート: Tシャツ, ジーンズ, 帽子 …他2件 / 合計金額: 19500円"
ポイント
- summarizeList を使って商品名を省略表示
- reduce で合計金額を計算
- 1つの関数で「UIにそのまま出せる文字列」を作れる
💡 さらに発展させると、
- 合計金額を「カンマ区切り（19,500円）」にフォーマット
- 消費税を加えて「税込み金額」も表示
- 商品数（合計◯点）を追加
といった実用的なUIにできます。