JavaScript reduceメソッドの使い方

  • JavaScript
  • メソッド
最終更新日:

この記事のポイント

JavaScriptを学習する上で、配列や文字列の操作は欠かせないスキルです。その中でも特に重要なreduceメソッドについて、初心者の方でも理解できるよう丁寧に解説していきます。

  • 配列の要素をひとつの値にまとめるメソッドの基本概念
  • 実際の開発で役立つさまざまなコード例とその応用パターン
  • エラーを避けるための重要なポイントと効率的な書き方のコツ

これらのポイントを押さえることで、reduceメソッドを自信を持って活用できるようになるでしょう。

目次

reduceメソッドとは？

reduceメソッドは、配列のすべての要素に対して処理を行い、最終的にひとつの値を返すメソッドです。

配列を「減らす」という意味の通り、複数の値をまとめて単一の結果を得ることができます。例えば、数値の合計計算や文字列の結合、オブジェクトの生成など、幅広い用途で活用されています。理解することで、より効率的で読みやすいコードを書けるようになるでしょう。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

reduceメソッドの基本的な構文は以下の通りです。

array.reduce(callback, initialValue)

callbackは各要素に対して実行される関数で、initialValueは初期値を指定します。

以下に基本的な使用例を示します。数値配列の合計を求める例では、各要素を順番に加算していき、最終的な合計値を取得できます。文字列配列の結合例では、すべての文字列をつなげてひとつの文字列として出力することが可能です。これらの基本パターンを覚えることで、さまざまな応用に活用できるでしょう。

const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((acc, num) => acc + num, 0); console.log(sum);







出力結果
15

  
const animals = ['ネコ', 'イヌ', 'ウサギ'];
const result = animals.reduce((acc, animal) => acc + animal, '');
console.log(result);

  


  







出力結果
ネコイヌウサギ
実用例
ここからは、reduceメソッドの実践的な活用例を紹介します。日常の開発でよく遭遇するシチュエーションを想定したサンプルコードを通じて、reduceメソッドの理解を深めてください。
配列から特定の条件に基づいて値を抽出したり、複雑なデータ変換を行ったり、オブジェクトを生成したりと、さまざまな場面で役立つテクニックを学べます。各例では動物をテーマにしたデータを使用し、親しみやすい形で解説していきます。これらのパターンをマスターすることで、実際のプロジェクトでもreduceメソッドを活用できるようになります。
配列内の最大値を見つける
このコードは、数値配列から最も大きな値を見つける例です。reduceメソッドを使って各要素を比較し、より大きな値を保持していきます。

  
const weights = [5, 12, 8, 15, 3];
const heaviest = weights.reduce((max, weight) => {
  return weight > max ? weight : max;
});
console.log(`最も重いペットの体重: ${heaviest}kg`);

  


  







出力結果
最も重いペットの体重: 15kg
特定のプロパティの合計を計算
動物の年齢データから合計年齢を算出します。オブジェクトの特定プロパティにアクセスして数値計算を行う実用的な例となります。

  
const pets = [
  {name: 'タロウ', age: 3},
  {name: 'ハナ', age: 5},
  {name: 'ポチ', age: 2}
];
const totalAge = pets.reduce((sum, pet) => sum + pet.age, 0);
console.log(`ペット全体の年齢: ${totalAge}歳`);

  


  







出力結果
ペット全体の年齢: 10歳
配列要素をグループ化してオブジェクトを作成
動物を種類別にグループ化する例です。reduceメソッドを使って、配列から構造化されたオブジェクトを効率的に生成できます。

  
const animals = ['イヌ', 'ネコ', 'イヌ', 'ウサギ', 'ネコ'];
const grouped = animals.reduce((acc, animal) => {
  acc[animal] = (acc[animal] || 0) + 1;
  return acc;
}, {});
console.log(grouped);

  


  







出力結果
{ 'イヌ': 2, 'ネコ': 2, 'ウサギ': 1 }
条件に基づく要素のフィルタリングと変換
体重が10kg以上のペットの名前だけを抽出し、文字列として結合する例です。フィルタリングと変換を同時に行うテクニックです。

  
const petData = [
  {name: 'ゴン', weight: 15},
  {name: 'ミケ', weight: 4},
  {name: 'ハチ', weight: 12}
];
const heavyPets = petData.reduce((acc, pet) => {
  if (pet.weight >= 10) acc.push(pet.name);
  return acc;
}, []).join('と');
console.log(`重いペット: ${heavyPets}`);

  


  







出力結果
重いペット: ゴンとハチ
多次元配列の平坦化
入れ子になった配列を一次元配列に変換する例です。複雑なデータ構造を単純化したい場合に役立ちます。

  
const animalGroups = [['ライオン', 'トラ'], ['ゾウ'], ['キリン', 'シマウマ', 'サイ']];
const allAnimals = animalGroups.reduce((flat, group) => {
  return flat.concat(group);
}, []);
console.log(allAnimals);

  


  







出力結果
['ライオン', 'トラ', 'ゾウ', 'キリン', 'シマウマ', 'サイ']
重複要素の除去
配列内の重複した動物名を取り除いて、ユニークな要素のみを残す例です。Setを使わずにreduceメソッドだけで重複除去を実現します。

  
const duplicateAnimals = ['パンダ', 'コアラ', 'パンダ', 'カンガルー', 'コアラ'];
const uniqueAnimals = duplicateAnimals.reduce((unique, animal) => {
  if (!unique.includes(animal)) unique.push(animal);
  return unique;
}, []);
console.log(uniqueAnimals);

  


  







出力結果
['パンダ', 'コアラ', 'カンガルー']
文字列の文字数をカウント
動物名の各文字が何回出現するかをカウントします。文字列処理におけるreduceメソッドの活用例として参考になります。

  
const animalName = 'ゴリラ';
const charCount = animalName.split('').reduce((count, char) => {
  count[char] = (count[char] || 0) + 1;
  return count;
}, {});
console.log(charCount);

  


  







出力結果
{ 'ゴ': 1, 'リ': 1, 'ラ': 1 }
複雑な計算処理の実行
動物園の入場料金を年齢に基づいて計算する例です。条件分岐を含む複雑なビジネスロジックもreduceメソッドで効率的に処理できます。

  
const visitors = [
  {name: '子供', age: 8},
  {name: '大人', age: 30},
  {name: '高齢者', age: 70}
];
const totalFee = visitors.reduce((total, visitor) => {
  let fee = visitor.age >= 65 ? 500 : visitor.age >= 18 ? 1000 : 300;
  return total + fee;
}, 0);
console.log(`合計入場料: ${totalFee}円`);

  


  







出力結果
合計入場料: 1800円
まとめ
reduceメソッドは、配列操作における最も強力で柔軟性の高いツールのひとつです。単純な数値計算から複雑なデータ変換まで、さまざまな場面で活躍します。
reduceメソッドの活躍する場面
    

  • 配列要素の合計や平均値計算など数値処理全般
    • 

  • オブジェクトやより複雑なデータ構造への変換処理
    • 

  • 条件に基づくフィルタリングと変換を同時に行う処理
    • 

重要なポイント
    

  • 初期値の設定により予期しないエラーを防ぐことが可能
    • 

  • アキュムレータの概念を理解することで応用の幅が広がる
    • 

  • 他の配列メソッドとの使い分けで効率的なコード作成が実現
    • 

reduceメソッドをマスターすることで、より読みやすく効率的なコードが書けるようになります。最初は複雑に感じるかもしれませんが、基本パターンを繰り返し練習することで必ず身につくでしょう。
実際のプロジェクトでも積極的に活用し、JavaScriptの配列操作スキルを向上させていってください。関数型プログラミングの考え方も自然と身につき、プログラミング全体のスキルアップにもつながるはずです。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript reduceメソッドの使い方