【JS入門】ES6から使えるmap / filter / reduceの使い方と活用術

前半は【map / filter / reduce】の基本的な記述方法を紹介します。
後半には実際の開発でどのように活用すればいいのかを紹介します!

【map / filter / reduce】を使うことでfor文の記述をスッキリと書くことができます。

ウェブアプリを開発する際は必須となります。
今のうちにマスターしておきましょう!

とりあえず記述方法

map

// mapの記述方法
const arr = [1, 3, 6, 8, 9];
// 値に2を掛けた配列を作成
const map_arr = arr.map((value, index, array) => value * 2);

console.log(map_arr);  // [2, 6, 12, 16, 18]

filter

// filterの記述方法
const arr = [1, 3, 6, 8, 9];
// 5より大きい数値を抽出する
const filter_arr = arr.filter((value, index, array) => value > 5);

console.log(filter_arr);  // [6, 8, 9]

reduce

// reduceの記述方法
const arr = [1, 3, 6, 8, 9];
// 配列の合計値を取得する
const total = arr.reduce((preValue, value, index, array) => preValue + currentValue);

console.log(total);  // 27

【map / filter / reduce】の使い方

パパっと記述方法を紹介したところで、具体的にどんな処理を行っているのかを解説していきます!
簡単に言うと、それぞれ以下のような処理をしています。

  • map:元の配列を使って何か処理を行った後に新しい配列を作る
  • filter:元の配列から条件に合う値を抽出した配列を返す
  • reduce:配列の値を処理して1つの値を返す

mapの使い方と処理内容

まずは、map!
mapは元の配列を使って何か処理を行った後に新しい配列を作る処理をします。

// mapの記述方法
const arr = [1, 3, 6, 8, 9];
// 値に2を掛けた配列を作成
const map_arr = arr.map((value, index, array) => value * 2);

console.log(map_arr);  // [2, 6, 12, 16, 18]

先ほど紹介した、こちらの例を使いますね。

map内の関数(コールバック関数)には3つの引数を取ることが出来ます。

  • value:配列の中の値
  • index:配列のインデックス番号
  • array:元の配列

一連の処理としては、この2つをしているだけです。

  1. 元の配列の値valueを2倍にする
  2. 値を2倍にした配列map_arrに代入

ちなみに(value, index, array) => value * 2はES6から新しく使えるようになった関数の定義方法です。実際の開発でもよく使うので、今のうちに覚えておくといいですね!
以下の記述と同じになります。

function(value, index, array) {
  return value * 2;
}

filterの使い方と処理内容

次は、filterを紹介します!
filterは元の配列から条件に合う値を抽出した配列を返す処理を行います。

// filterの記述方法
const arr = [1, 3, 6, 8, 9];
// 5より大きい数値を抽出する
const filter_arr = arr.filter((value, index, array) => value > 5);

console.log(filter_arr);  // [6, 8, 9]

filterもmapと同じく、3つの引数を取ることが出来ます。

  • value:配列の中の値
  • index:配列のインデックス番号
  • array:元の配列

mapでは、処理内容を返していましたが、filterでは、条件式を返します。
今回の例では、「配列の値が5より大きい条件」value > 5で設定しています。

仮に、「3より大きい条件」としたい場合は、

const filter_arr = arr.filter((value, index, array) => value > 3);

このようにすればOKですね!

reduceの使い方と処理内容

最後は、reduceの使い方です。
reduceは、配列の値を処理して1つの値を返す処理をします。

// reduceの記述方法
const arr = [1, 3, 6, 8, 9];
// 配列の合計値を取得する
const total = arr.reduce((preValue, value, index, array) => preValue + value);

console.log(total);  // 27

reduceでは、コールバック関数に4の引数を取ることが出来ます。

  • preValue:処理中の値(処理後に返ってくる値)
  • value:配列の中の値
  • index:配列のインデックス番号
  • array:元の配列

新しく、preValueなるものが出てきましたね。
コールバック関数内でreturnを行うと、その値がpreValueに引き継がれます。

例えば、1回目の処理でreturn 1;だった場合、2回目の処理ではpreValueには「1」が代入されています。

極端な例を出すと、次の場合はreduceの返り値は「0」になります。

const arr = [1, 3, 6, 8, 9];
const total = arr.reduce((preValue, value, index, array) => {
preValue = 0;
return preValue;
});

実際の利用シーンで活用例を把握しよう!

前半戦、お疲れさまでした!
一気に説明したので、ここらでコーヒー休憩でもどうぞ(^ω^)☕

後半戦では、実際の利用シーンを想定しつつ、map / filter / reduce の活用方法を紹介します!
せっかく学んでも、それを使えなければ意味ないですからね^^;

活用例に共通することは、データベース(もしくはjsonファイルなど)からデータを取得した際に使うときが多いです。

データベースのデータは、そのまま表に出すことが出来ない場合が多いです。
なので、【map / filter / reduce】で加工してから実際のページに出力する感じですね!

※あくまでも一例なので、他にもたくさん活用パターンはあります!

mapの活用例

mapの使いどころは、こんな感じですね。

価格に税金を掛け算した値を配列を生成

mapは、配列の値を加工して新しい配列を生成することに長けているので、四則演算などで計算する場合に使うことが多いです。

例えば、データベースから食べ物の価格データを取得したとします。
この中にある price の値に税金を加えるのが今回の目標です。

// DBから取得したデータ
const data = [
  { id: 1, name: ‘bread’, price: 100 },
  { id: 2, name: ‘rice’, price: 300 },
  { id: 3, name: ‘soba’, price: 500 },
]

mapを使って、税金を加えた配列データを生成するには以下のようにします。

// 税金
cosnt TAX_RATE = 1.08;
// 税金を加えた配列を取得
const add_tax_data = data.map((value, index, array) => {
  value.price = value.price * TAX_RATE;
  return value;
});

出力結果

ここで、注意したいのが返り値はオブジェクトにする点です。
返り値を計算結果のみにしてしまうと、数値のみの配列になってしまいます。

filterの活用例

filterの使いどころは、こんな感じです!

DBから取得したデータを絞り込む

filterはデータベースなどのデータから目的のデータを絞り込む際に使います。

今回も食べ物のデータベースを使います。
この中から price が 200 を超えるデータを取得してみましょう。

// DBから取得したデータ
const data = [
  { id: 1, name: 'bread', price: 100 },
  { id: 2, name: 'rice', price: 300 },
  { id: 3, name: 'soba', price: 500 },
]

filterを使って絞り込む記述はこうなります。

// priceが200を超えるデータを取得
const filtered_data = data.filter((value, index, array) => value.price > 200);

出力結果

reduceの活用例

reduceは、こんなところですかね?

12か月の売上トータルを取得

reduceは配列の値から1つの値を導き出す点に長けているので、合計値を出す時に使うことが多いですね。

1月~12月までの売上が入った配列を想定します。
年間の売上を取得するのが今回の目標です。

// 売上データ
const data = [12000, 8000, 67100, 10000, 23000, 42000, 9000, 1000, 120000, 8000, 9000, 3000];

合計値を取得するには以下のように書きます。

// 売上の合計値
const total = data.reduce((preValue, value, index, array) => preValue + value);
// 出力結果
312100

はい、というわけで今回は【 map / filter / reduce 】についてやっていきました!
いかがだったでしょうか!?

実は、これら全部は普通のfor文で対応デキたりもします。
いわゆるシュガーシンタックスってやつですね!!
※複雑な記述を簡単にする的なイメージ

とはいえ、実務では使っている人も多いし、記述量が減るとメンテナンス性が向上します!
他人のためにも自分のためにもなるので、ぜひマスターしてくださいね!

それでは、最後までありがとうございました!!