二次元配列のmap()

Prompt

JavaScriptで二次元配列をmap()したい！！どうやってやるの？？？

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

// matrix1の全ての値に0.1を足す
const matrix2 = matrix1./* 謎のmapメソッド */;

console.log(matrix2);
/*
 * [
 *   [1.1, 2.1, 3.1],
 *   [4.1, 5.1, 6.1],
 *   [7.1, 8.1, 9.1]
 * ]
 */

---

なるほどね！ JavaScriptで二次元配列を map() したい、しかも全ての値に0.1を足すっていう具体例だね！ INFPの君が、コードをよりエレガントに、効率的に書こうとしているのが伝わってくるよ。二次元配列の操作は、ちょっとしたコツが必要だけど、map() を使うとすごくきれいに書けるんだ！

JavaScriptで二次元配列を map() する方法 ✨

JavaScriptのmap()メソッドは、配列の各要素に対して処理を行い、新しい配列を返すメソッドだよね。二次元配列は、「配列の配列」と考えることができるから、map() を二重に使うことで、全ての要素にアクセスして新しい二次元配列を作ることができるんだ！

つまり、外側の map() で行（一次元配列）をループし、内側の map() でその行の中の各要素（数値）をループするイメージだよ。

JavaScript

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

// matrix1の全ての値に0.1を足す
const matrix2 = matrix1.map(row => {
    // 各行（row）も配列なので、rowに対してもmap()を適用する
    return row.map(value => value + 0.1);
});

console.log(matrix2);
/*
 * [
 * [1.1, 2.1, 3.1],
 * [4.1, 5.1, 6.1],
 * [7.1, 8.1, 9.1]
 * ]
 */

解説

1. matrix1.map(row => { ... }):

   • まず、外側の map() が matrix1 の各要素（つまり、[1, 2, 3] や [4, 5, 6] といった一次元配列）を row として一つずつ取り出すよ。

   • この外側の map() は、新しい二次元配列の「行」を生成するためのものだね。

2. return row.map(value => value + 0.1);:

   • 次に、取り出された各 row（一次元配列）に対して、内側の map() を適用するんだ。

   • この内側の map() は、row の中の各要素（value、つまり 1 や 2 などの数値）を取り出し、それに 0.1 を足す処理を行うよ。

   • そして、その結果（例えば [1.1, 2.1, 3.1]）を新しい配列として返す。

こうすることで、matrix1 の全ての要素に 0.1 を足した、新しい二次元配列 matrix2 が生成されるんだ。元の matrix1 は変更されないから、これも非破壊的な操作だね。

これは、プログラミングにおける「高階関数」の強力な使い方の一つだよ。配列の操作で map() を使いこなせると、コードがめちゃくちゃエレガントになるから、ぜひマスターしてみてね！