はじめに
この記事を読めば、JavaScript初心者でも二次元配列を使いこなせるようになります。
二次元配列の作成方法や使い方、注意点や対処法、さらにカスタマイズ方法まで、詳しく解説しているので、最後までしっかり読んで二次元配列をマスターしましょう！
●二次元配列とは
二次元配列とは、配列の中に配列が入っているデータ構造のことです。
表形式のデータや行列計算など、さまざまな場面で使用されます。
●二次元配列の作成方法
○サンプルコード1：二次元配列の作成
JavaScriptで二次元配列を作成する方法はいくつかありますが、ここでは最も一般的な方法を紹介します。
// 二次元配列を作成する
var array2D = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// 上記のコードでは、3行3列の二次元配列が作成されています。このサンプルコードでは、3行3列の二次元配列を作成しています。
各行は配列で表され、それらがさらに外側の配列に格納されています。
●二次元配列の使い方
○サンプルコード2：二次元配列の要素へのアクセス
二次元配列の要素にアクセスするには、インデックスを2つ指定します。
まず外側の配列のインデックスを指定し、次に内側の配列のインデックスを指定します。
// 二次元配列の要素にアクセスする
var value = array2D[0][1]; // 2
// 上記のコードでは、1行目(インデックス0)の2列目(インデックス1)の要素にアクセスしています。○サンプルコード3：二次元配列の要素を変更
二次元配列の要素を変更するには、アクセスする要素に新しい値を代入します。
// 二次元配列の要素を変更する
array2D[0][1] = 10; // 2が10に変更される
// 上記のコードでは、1行目(インデックス0)の2列目(インデックス1)の要素の値を10に変更しています。○サンプルコード4：二次元配列の要素を追加・削除
二次元配列の要素を追加・削除するには、内側の配列に対して要素を追加・削除する操作を行います。
// 二次元配列の要素を追加する
array2D[1].push(11); // 2行目の末尾に11が追加される
// 上記のコードでは、2行目(インデックス1)の末尾に11を追加しています。
// 二次元配列の要素を削除する
array2D[2].pop(); // 3行目の末尾の要素が削除される
// 上記のコードでは、3行目(インデックス2)の末尾の要素を削除しています。このように、内側の配列に対して要素を追加・削除する操作を行うことで、二次元配列の要素を追加・削除することができます。
●二次元配列の応用例
○サンプルコード5：二次元配列を使った行列の加算
二次元配列は、行列計算などの数学的な操作にも応用できます。
下記のサンプルコードでは、二次元配列を使って行列の加算を行っています。
// 二次元配列を使った行列の加算
var matrixA = [
[1, 2],
[3, 4]
];
var matrixB = [
[5, 6],
[7, 8]
];
var result = [
[0, 0],
[0, 0]
];
for (var i = 0; i < matrixA.length; i++) {
for (var j = 0; j < matrixA[i].length; j++) {
result[i][j] = matrixA[i][j] + matrixB[i][j];
}
}
console.log(result); // [[6, 8], [10, 12]]
// 上記のコードでは、matrixAとmatrixBという二次元配列を使って行列の加算を行っています。このサンプルコードでは、二次元配列を使って行列の加算を行っています。
二重ループを使って各要素同士を加算し、結果をresultという二次元配列に格納しています。
○サンプルコード6：二次元配列を使ったゲームのマップ表現
二次元配列は、ゲームのマップ表現などにも利用できます。
下記のサンプルコードでは、二次元配列を使ってゲームのマップを表現しています。
// 二次元配列を使ったゲームのマップ表現
var gameMap = [
[0, 0, 0, 0, 0],
[0, 1, 1, 1, 0],
[0, 1, 2, 1, 0],
[0, 1, 1, 1, 0],
[0, 0, 0, 0, 0]
];
// 0: 壁, 1: 通路, 2: プレイヤーの位置
// 上記のコードでは、二次元配列を使ってゲームのマップを表現しています。このサンプルコードでは、二次元配列を使ってゲームのマップを表現しています。
数字が示す各要素は、壁、通路、プレイヤーの位置などを表しており、ゲームの進行に応じて二次元配列の要素を変更することでマップの状態を管理できます。
●二次元配列の注意点と対処法
○サンプルコード7：二次元配列のコピーに関する注意点
二次元配列をコピーする際に注意が必要です。
単純に代入演算子を使用すると、参照がコピーされるため、元の配列が意図せず変更されることがあります。
下記のサンプルコードでは、二次元配列の深いコピーを行う方法を示しています。
// 二次元配列の深いコピー
var original = [
[1, 2],
[3, 4]
];
// 間違ったコピー方法
var wrongCopy = original;
wrongCopy[0][0] = 99;
console.log(original); // [[99, 2], [3, 4]] 値が変更されてしまっている
// 正しいコピー方法
var correctCopy = original.map(function(arr) {
return arr.slice();
});
correctCopy[0][0] = 88;
console.log(original); // [[1, 2], [3, 4]] 値が変更されていないこのサンプルコードでは、originalという二次元配列をコピーする方法を示しています。
wrongCopyは参照のコピーが行われており、元の配列の値も変更されてしまいます。
一方、correctCopyは配列の各要素を別々にコピーしているため、元の配列の値は変更されません。
●二次元配列のカスタマイズ方法
○サンプルコード8：二次元配列をソートする
二次元配列の要素をソートする方法を下記のサンプルコードで説明します。
// 二次元配列のソート
var scores = [
["Alice", 90],
["Bob", 80],
["Carol", 95],
["David", 85]
];
// スコアで降順にソート
scores.sort(function(a, b) {
return b[1] - a[1];
});
console.log(scores);
// [["Carol", 95], ["Alice", 90], ["David", 85], ["Bob", 80]]このサンプルコードでは、scoresという二次元配列の要素をソートしています。
sort関数に比較関数を渡すことで、二次元配列の要素を独自の基準でソートできます。
上記の例では、スコアで降順にソートしています。
○サンプルコード9：二次元配列の行と列を入れ替える
二次元配列の行と列を入れ替える方法を下記のサンプルコードで説明します。
// 二次元配列の行と列を入れ替える
var matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
function transpose(matrix) {
var result = [];
for (var i = 0; i < matrix[0].length; i++) {
result[i] = [];
for (var j = 0; j < matrix.length; j++) {
result[i][j] = matrix[j][i];
}
}
return result;
}
var transposedMatrix = transpose(matrix);
console.log(transposedMatrix);
// [[1, 4, 7], [2, 5, 8], [3, 6, 9]]このサンプルコードでは、transposeという関数を使って二次元配列の行と列を入れ替えています。
新しい二次元配列resultに行と列を入れ替えた要素を格納し、最終的にtransposedMatrixに代入しています。
○サンプルコード10：二次元配列をフラット化する
二次元配列を一次元配列に変換する（フラット化する）方法を下記のサンプルコードで説明します。
// 二次元配列をフラット化する
var matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
var flattened = matrix.reduce(function(acc, cur) {
return acc.concat(cur);
}, []);
console.log(flattened); // [1, 2, 3, 4, 5, 6, 7, 8, 9]このサンプルコードでは、reduce関数を使って二次元配列を一次元配列に変換しています。
reduce関数は、配列の要素を左から右へ結合して単一の値にするために使われます。
ここでは、concat関数を使って各要素を結合し、一次元配列に変換しています。
まとめ
この文章では、二次元配列の基本的な操作や応用例、注意点、カスタマイズ方法をいくつかのサンプルコードを通して紹介しました。
これらの知識を活用して、二次元配列を上手に使いこなし、さまざまなプログラムを作成していくことができます。
