Java Scriptの基礎その22　map、filter、reduceメソッドによるデータ変換

イントロダクション

JavaScriptはデータ変換のための強力なメソッドを提供しています。その中でも特に便利なのが、配列に対するmap、filter、およびreduceメソッドです。これらのメソッドを使用することで、複雑なデータ操作をシンプルかつ読みやすく実現できます。この記事では、具体的なコード例を通してこれらのメソッドの使い方を丁寧に解説します。

mapメソッド

mapメソッドの基本

mapメソッドは、配列内のすべての要素に対して指定した関数を実行し、その結果から新しい配列を作成します。元の配列は変更されません。

const euroToUSD = 1.08;
const convertToUSD = moneyTransfer.map((mov) => mov * euroToUSD);

console.log(moneyTransfer);
console.log(convertToUSD);

この例では、moneyTransfer配列内の金額をユーロからドルに変換しています。mapメソッドを使用して、各要素に対して1.08を掛けた新しい配列を作成しています。

• moneyTransfer: 元の金額が入った配列

• convertToUSD: ドルに変換された金額が入った新しい配列

出力結果:

[200, -100, 400, -1500, 2000, 400, -400]
[216, -108, 432, -1620, 2160, 432, -432]

追加の変換と説明の生成

mapメソッドは、単に値を変換するだけでなく、説明文を生成することにも使えます。

const moneyTransferDescriptions = moneyTransfer.map(
  (mov, i) =>
    `Movement ${i + 1}: あなたは${Math.abs(mov)}円を${
      mov > 0 ? "振り込んだ" : "引き出した"
    }`
);

console.log(moneyTransferDescriptions);

• moneyTransferDescriptions: 各取引の説明が入った配列

出力結果:

[
  "Movement 1: あなたは200円を振り込んだ",
  "Movement 2: あなたは100円を引き出した",
  "Movement 3: あなたは400円を振り込んだ",
  "Movement 4: あなたは1500円を引き出した",
  "Movement 5: あなたは2000円を振り込んだ",
  "Movement 6: あなたは400円を振り込んだ",
  "Movement 7: あなたは400円を引き出した"
]

filterメソッド

filterメソッドの基本

filterメソッドは、指定した条件に一致する要素だけを含む新しい配列を作成します。

const depositFilter = moneyTransfer.filter((mov) => mov > 0);
const withdrawFilter = moneyTransfer.filter((mov) => mov < 0);

console.log(depositFilter);
console.log(withdrawFilter);

• depositFilter: 振り込みのみを含む配列

• withdrawFilter: 引き出しのみを含む配列

出力結果:

[200, 400, 2000, 400]
[-100, -1500, -400]

reduceメソッド

reduceメソッドの基本

reduceメソッドは、配列を1つの値にまとめるために使われます。累積結果と現在の要素を引数として受け取る関数を指定します。

const balanceChecker = moneyTransfer.reduce((acc, cur) => acc + cur, 0);
console.log(balanceChecker);

• balanceChecker: すべての取引の合計残高

出力結果:

1000

最大残高の計算

reduceメソッドを使用して、配列内の最大値を計算することもできます。

const maximunBalance = moneyTransfer.reduce((acc, mov) => {
  if (acc > mov) return acc;
  else return mov;
}, moneyTransfer[0]);
console.log(maximunBalance);

• maximunBalance: 配列内の最大金額

出力結果:

2000

まとめ

JavaScriptのmap、filter、reduceメソッドは、配列操作をシンプルかつ強力にするための便利なツールです。これらのメソッドを活用することで、データの変換や集計を効率的に行うことができます。この記事で紹介した例を参考にして、ぜひ実際のコードで試してみてください。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！