では「どんな配列でも使えるように、リスト表現を関数化する方法」を紹介します。
ゴール
- 配列を渡すと「最大3つまで表示し、それ以上は『…他◯件』」という文字列を返す関数を作る。
- どんな配列でも再利用できるようにする。
実装例
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}件`;
}
}
// 使用例
const cartItems = ['Tシャツ', 'ジーンズ', '帽子', '靴', 'バッグ'];
console.log(summarizeList(cartItems));
// "Tシャツ, ジーンズ, 帽子 …他2件"
console.log(summarizeList(['リンゴ', 'バナナ']));
// "リンゴ, バナナ"
console.log(summarizeList([]));
// "項目はありません"
ポイント
- max 引数を追加して「最大いくつまで表示するか」を柔軟に変更可能
- items が空配列のときも自然なメッセージを返す
- 再利用性が高いので、ショッピングカート以外にもニュース一覧やタグ表示などに使える
💡 応用すると、
- 「残り件数を英語風に
...and X moreにする」 - 「スマホは2件、PCは3件」など環境に応じて
maxを変える
といった拡張も簡単にできます。