JavaScript | 配列のすべての要素を合計する方法(reduce メソッド)

JavaScript JavaScript
スポンサーリンク

JavaScript の配列の「合計・平均・最大」を、初心者向けにやさしく解説

はじめてのコードって、ちょっと緊張しますよね。ここでは「配列の数字をまとめる」基本ワザを、例題と一緒に一歩ずつ身につけます。考え方がわかると、似た問題も怖くなくなります。


配列ってなに?

  • イメージ: 箱に数字や文字を順番に入れたもの。
  • 例:
let scores = [48, 75, 92]; // 3つの点数が入った配列
JavaScript
  • 取り出し方:
console.log(scores[0]); // 48(0番目)
console.log(scores.length); // 3(要素数)
JavaScript

配列の合計を出すやり方(3通り)

1) まずは素直なやり方(for ループ)

let numbers = [48, 75, 92, 61];
let total = 0;

for (let i = 0; i < numbers.length; i++) {
  total = total + numbers[i];
}

console.log(total); // 276
JavaScript
  • ポイント: ひとつずつ足していく。わかりやすくて失敗しにくい。

2) 読みやすいループ(for…of)

let numbers = [48, 75, 92, 61];
let total = 0;

for (const n of numbers) {
  total += n;
}

console.log(total); // 276
JavaScript
  • ポイント: 要素を1つずつ取り出す書き方。「順番に見る」感じが伝わる。

3) かっこいい時短ワザ(reduce)

let numbers = [48, 75, 92, 61];
let total = numbers.reduce((sum, n) => sum + n, 0);
console.log(total); // 276
JavaScript
  • 言い換え: 「今までの合計(sum)に、今の数字(n)を足す」を、最初は 0 から始める。

reduce を「目で追って」理解する

let numbers = [10, 20, 30];
let total = numbers.reduce((sum, n) => sum + n, 0);
JavaScript
  • 1回目: sum=0, n=10 → 0+10=10
  • 2回目: sum=10, n=20 → 10+20=30
  • 3回目: sum=30, n=30 → 30+30=60
  • 結果: total=60
  • 大事な初期値: 最後の , 0 は「合計のスタートが 0」という意味。これがないと、思わぬ動きになることがあります。

よくある実務パターン

合計のあとに平均

let numbers = [48, 75, 92, 61];
let total = numbers.reduce((sum, n) => sum + n, 0);
let average = total / numbers.length;

console.log(average); // 69
JavaScript
  • ポイント: 平均は「合計 ÷ 個数」。個数は length

最大値・最小値

let numbers = [48, 75, 92, 61];

let max = numbers.reduce((m, n) => (n > m ? n : m), -Infinity);
let min = numbers.reduce((m, n) => (n < m ? n : m), Infinity);

console.log(max); // 92
console.log(min); // 48
JavaScript
  • ポイント: 初期値に「ありえない端っこ(-Infinity/Infinity)」を入れると安全。

オブジェクト配列の合計(点数の合計)

let users = [
  { name: 'Yamada', score: 75 },
  { name: 'Suzuki', score: 91 },
  { name: 'Kudou',  score: 80 }
];

let total = users.reduce((sum, user) => sum + user.score, 0);
console.log(total); // 246
JavaScript
  • ポイント: オブジェクトから欲しい値(user.score)を取り出して足す。

つまづきやすいポイント

  • 初期値を忘れると危険:
    reduce((sum, n) => sum + n) と初期値を省略すると、最初の要素が勝手に初期値になります。数値ならまだしも、空配列やオブジェクトだと意図しない結果になりやすい。基本は「必ず初期値を書く」。
  • 空配列への対処:
    合計なら初期値を 0 にしておけば、空でも 0 が返って安心。
  • 計算対象が数値か確認:
    文字列が混ざると足し算が「連結」になってしまうことがある。入力チェックや Number() で数値化してから計算すると安全。

例題で練習しよう

例題 1: 合計と平均

  • 問題: [12, 34, 56, 78] の合計と平均を出して。
  • 解答:
let arr = [12, 34, 56, 78];
let total = arr.reduce((sum, n) => sum + n, 0);
let avg = total / arr.length;
console.log(total, avg); // 180 45
JavaScript

例題 2: 予算の合計

  • 問題: [{item:'A', price:1200}, {item:'B', price:3400}, {item:'C', price:800}] の合計金額。
  • 解答:
let cart = [
  { item: 'A', price: 1200 },
  { item: 'B', price: 3400 },
  { item: 'C', price: 800 }
];
let total = cart.reduce((sum, it) => sum + it.price, 0);
console.log(total); // 5400
JavaScript

例題 3: 最大値と最小値

  • 問題: [7, 2, 9, 4, 6] の最大と最小。
  • 解答:
let nums = [7, 2, 9, 4, 6];
let max = nums.reduce((m, n) => (n > m ? n : m), -Infinity);
let min = nums.reduce((m, n) => (n < m ? n : m), Infinity);
console.log(max, min); // 9 2
JavaScript

まとめ

  • 配列の合計は reduce が便利: 初期値は必ず書く(合計なら 0)。
  • 平均は合計 ÷ 個数: length を使う。
  • 最大・最小も reduce でいける: 初期値に ±Infinity
  • オブジェクト配列もOK: 欲しいプロパティを足す。
タイトルとURLをコピーしました