では「商品名一覧をカンマ区切りの文字列に変換する方法」を見てみましょう。
カートの例
const cart = [
{ name: 'Tシャツ', price: 1500, quantity: 2 },
{ name: 'ジーンズ', price: 5000, quantity: 1 },
{ name: '靴', price: 8000, quantity: 0 }, // 数量0 → 除外
{ name: '帽子', price: 2000, quantity: 1 }
];
方法1: map + join
一番シンプルで読みやすい方法です。
const names = cart
.filter(item => item.quantity > 0) // 数量がある商品だけ
.map(item => item.name) // 商品名だけ取り出す
.join(', '); // カンマ区切りに変換
console.log(names); // "Tシャツ, ジーンズ, 帽子"
方法2: reduce でまとめる
少し応用的な書き方。途中で文字列を組み立てます。
const names = cart.reduce((acc, item) => {
if (item.quantity > 0) {
return acc ? acc + ', ' + item.name : item.name;
}
return acc;
}, '');
console.log(names); // "Tシャツ, ジーンズ, 帽子"
ポイント
map + joinが王道：読みやすく、初心者にもおすすめreduceは応用：複雑な処理を一度にまとめたいときに便利
💡 さらに発展させると、
- 「商品名を
/区切りにする」 - 「最後だけ
とにする（例: Tシャツ, ジーンズ と 帽子）」
といった自然な日本語表現も作れます。