総合演習 ― 小さなプログラムを組み立てる

導入

ここまでの総まとめです。配列・オブジェクト・関数・クラスを組み合わせて、小さなプログラムを動かします。完成形を動かし、改変してみましょう。

説明

「商品リストから、税込み合計と高額商品を求める」プログラムです。

const TAX = 0.1;

const items = [
  { name: "ノート", price: 300 },
  { name: "ペン", price: 120 },
  { name: "リュック", price: 4800 },
  { name: "消しゴム", price: 80 },
];

function withTax(price) {
  return Math.floor(price * (1 + TAX));
}

function summarize(list) {
  const total = list.reduce((sum, item) => sum + item.price, 0);
  const expensive = list.filter((item) => item.price >= 1000);
  return {
    count: list.length,
    total,
    totalWithTax: withTax(total),
    expensive: expensive.map((i) => i.name),
  };
}

const result = summarize(items);
console.log(`商品数: ${result.count}`);
console.log(`税抜合計: ${result.total}円`);
console.log(`税込合計: ${result.totalWithTax}円`);
console.log(`高額商品: ${result.expensive.join(", ")}`);

クラス版に書き換えると、こうなります。

class Cart {
  constructor(items) {
    this.items = items;
  }
  get total() {
    return this.items.reduce((s, i) => s + i.price, 0);
  }
  add(item) {
    this.items.push(item);
  }
}

const cart = new Cart([
  { name: "本", price: 1500 },
  { name: "雑誌", price: 800 },
]);
cart.add({ name: "DVD", price: 2000 });
console.log(`合計: ${cart.total}円`);

やってみよう

1. items に商品を追加して、合計が変わることを確認する
2. 高額のしきい値を 1000 から 500 に変える
3. Cart に count ゲッター（商品数）を足す

演習

items から price が 200 未満の商品名だけを filter + map で取り出し、表示してください。

まとめ

JavaScript コースの基礎編はここまでです。

ブラウザの DevTools や Node.js、フロントエンド枠組み（React など）へ進む土台になります。HTML/CSS コースと組み合わせると、ページに動きをつける実践にもつながります。繰り返し手を動かして、書き方を体に覚えさせましょう。