JavaScript reduceを使いこなす!7つのサンプルコードで理解を深めよう

JavaScript_reduce_使い方_サンプルコードJS
この記事は約8分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptのreduce関数を使いこなすためには、実践的なサンプルコードを理解することが重要です。

この記事を読むことで、reduce関数を活用した処理が簡単にできるようになります。

JavaScript初心者でもわかりやすく解説しているので、ぜひ最後まで読んでみてください。

●JavaScript reduceとは

reduceは、JavaScriptの配列に対して使える便利なメソッドで、配列の要素を左から右に走査して、単一の値にまとめることができます。

引数には、処理を行うコールバック関数と、初期値を指定することができます。

○reduceの基本

reduceの基本的な構文は次の通りです。

配列.reduce(function(accumulator, currentValue, index, array){}, initialValue);

ここで、accumulatorは累積された値、currentValueは現在の要素、indexは現在の要素のインデックス、arrayは処理対象の配列、initialValueは初期値です。

●JavaScript reduceの使い方

それでは、reduceの使い方を具体的なサンプルコードで見ていきましょう。

○サンプルコード1:配列の要素の合計を求める

このコードでは、reduceを使って配列の要素の合計を求める方法を紹介しています。

この例では、配列の要素を順番に足し合わせて、最終的な合計値を取得しています。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

○サンプルコード2:オブジェクトのプロパティの最大値を求める

このコードでは、オブジェクトのプロパティの最大値を求める方法を紹介しています。

この例では、オブジェクトの配列をreduceで処理し、最大の値を持つプロパティを取得しています。

const objects = [
  { id: 1, value: 10 },
  { id: 2, value: 20 },
  { id: 3, value: 15 },
];

const maxObj = objects.reduce(function (accumulator, currentValue) {
  return accumulator.value > currentValue.value ? accumulator : currentValue;
});

console.log(maxObj); // { id: 2, value: 20 }

○サンプルコード3:配列の要素の出現回数をカウントする

このコードでは、reduceを利用して配列の要素の出現回数をカウントする方法を紹介します。

この例では、要素の出現回数をオブジェクトとしてカウントしています。

const fruits = ['apple', 'banana', 'orange', 'apple', 'banana', 'apple'];
const count = fruits.reduce(function (accumulator, currentValue) {
  if (accumulator[currentValue]) {
    accumulator[currentValue]++;
  } else {
    accumulator[currentValue] = 1;
  }
  return accumulator;
}, {});

console.log(count); // { apple: 3, banana: 2, orange: 1 }

○サンプルコード4:配列の要素をグループ化する

このコードでは、reduceを使って配列の要素をグループ化する方法を紹介しています。

この例では、オブジェクトの配列をカテゴリごとにグループ化しています。

const items = [
  { id: 1, category: 'A', name: 'item1' },
  { id: 2, category: 'B', name: 'item2' },
  { id: 3, category: 'A', name: 'item3' },
  { id: 4, category: 'C', name: 'item4' },
];

const groupedItems = items.reduce(function (accumulator, currentValue) {
  const category = currentValue.category;
  if (!accumulator[category]) {
    accumulator[category] = [];
  }
  accumulator[category].push(currentValue);
  return accumulator;
}, {});

console.log(groupedItems);
// {
//   A: [{ id: 1, category: 'A', name: 'item1' }, { id: 3, category: 'A', name: 'item3' }],
//   B: [{ id: 2, category: 'B', name: 'item2' }],
//   C: [{ id: 4, category: 'C', name: 'item4' }]
// }

●JavaScript reduceの応用例

reduceを使ったさらなる応用例を見ていきましょう。

○サンプルコード5:複数の配列を結合してフラット化する

このコードでは、reduceを使って複数の配列を結合してフラット化する方法を紹介しています。

この例では、ネストされた配列を1次元の配列に変換しています。

const arrays = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

const flattened = arrays.reduce(function (accumulator, currentValue) {
  return accumulator.concat(currentValue);
}, []);

console.log(flattened); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

○サンプルコード6:配列の要素を条件によってフィルタリングする

このコードでは、reduceを用いて配列の要素を条件に応じてフィルタリングする方法を紹介しています。

この例では、数値の配列から偶数だけを抽出して新しい配列を作成しています。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const evenNumbers = numbers.reduce(function (accumulator, currentValue) {
  if (currentValue % 2 === 0) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

console.log(evenNumbers); // [2, 4, 6, 8]

○サンプルコード7:配列の要素を特定の形式に変換する

このコードでは、reduceを使って配列の要素を特定の形式に変換する方法を紹介しています。

この例では、オブジェクトの配列から特定のプロパティを持つ新しいオブジェクトの配列を作成しています。

const users = [
  { id: 1, name: 'Taro', age: 25 },
  { id: 2, name: 'Hanako', age: 30 },
  { id: 3, name: 'Jiro', age: 20 },
];

const userNamesAndAges = users.reduce(function (accumulator, currentValue) {
  const newObj = {
    name: currentValue.name,
    age: currentValue.age,
  };
  accumulator.push(newObj);
  return accumulator;
}, []);

console.log(userNamesAndAges);
// [
//   { name: 'Taro', age: 25 },
//   { name: 'Hanako', age: 30 },
//   { name: 'Jiro', age: 20 }
// ]

●注意点と対処法

reduce関数を使う際の注意点として、初期値を適切に設定することが重要です。

初期値が設定されていない場合、reduce関数は配列の最初の要素を初期値として扱いますが、これが意図した動作でない場合があります。

そのため、初期値を明示的に設定して、意図した動作を確実に行うようにしましょう。

まとめ

この記事では、JavaScriptのreduce関数を使った様々な処理方法をサンプルコードを通じて紹介しました。

reduce関数は非常に便利で、配列の要素を処理して単一の値にまとめることができます。

上記の例を参考に、自分のプロジェクトでreduce関数を活用してみてください。