初心者も分かる！JavaScriptにおける多次元配列の使い方10選

はじめに

この記事を読めば、JavaScriptの多次元配列を使いこなすことができるようになります。

多次元配列の作り方や使い方、対処法、注意点、カスタマイズ方法を初心者向けに徹底解説します。

10個のサンプルコード付きで学べるので、ぜひチャレンジしてみてください。

●多次元配列とは

多次元配列とは、配列の中にさらに配列が入っているデータ構造のことです。

例えば、二次元配列は行と列を持つ表のような形をしており、三次元配列は立体の形を持っています。

多次元配列を使うことで、より複雑なデータ構造を簡潔に表現することができます。

○多次元配列の基本

JavaScriptでは、配列は矩形でなくても構いません。

つまり、各行が異なる数の要素を持つことができます。

このような不規則な形状の多次元配列も扱うことができます。

●多次元配列の作り方

多次元配列は、通常の配列の要素にさらに配列を格納することで作成します。

下記に二次元配列と三次元配列の作成方法を示します。

●JavaScriptにおける多次元配列の作成方法

JavaScriptで多次元配列を作成するには、基本的な配列の概念を拡張して、配列の各要素にさらに配列を格納します。

ここでは、JavaScriptを使用して二次元配列と三次元配列を作成する方法について解説します。

○サンプルコード1：JavaScriptでの二次元配列の生成

多次元配列の基本形として、二次元配列をJavaScriptで作成する方法を見てみましょう。

// 二次元配列の作成例
let array2D = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(array2D);

このコード例では、3行3列の二次元配列を作成しています。

JavaScriptでは、このように簡潔な記述で二次元配列を表現できます。

この配列では、それぞれの行が1〜3、4〜6、7〜9という値を持っています。

○サンプルコード2：JavaScriptでの三次元配列の生成

次に、より複雑な三次元配列の作成方法を見ていきましょう。

// 三次元配列の作成例
let array3D = [
  [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ],
  [
    [10, 11, 12],
    [13, 14, 15],
    [16, 17, 18]
  ]
];
console.log(array3D);

このJavaScriptコードでは、2つの二次元配列を含む三次元配列を作成しています。

形式的には2x3x3の配列であり、このような配列は複数のデータセットを効率的に扱う際に有用です。

●多次元配列の使い方

多次元配列の要素へのアクセスや操作には、インデックスを指定して行います。

ここでは、二次元配列の要素へのアクセス方法と操作方法を見ていきましょう。

○サンプルコード3：JavaScriptにおける二次元配列への要素アクセス方法

JavaScriptで多次元配列を扱う際、特定の要素にアクセスする方法は重要なスキルです。

ここでは、二次元配列内の特定の要素にアクセスする方法を見ていきましょう。

// 二次元配列の特定の要素にアクセス
let value = array2D[1][2];
console.log(value); // 6が出力される

この例では、JavaScriptの多次元配列array2Dから特定の値を取り出しています。

具体的には、配列の2行目（インデックスは1）の3列目（インデックスは2）にある要素にアクセスし、その値6を出力しています。

○サンプルコード4：JavaScriptでの多次元配列の要素操作

JavaScriptでは、多次元配列の要素を簡単に変更することができます。

次に、要素の値を変更する方法を示します。

// 多次元配列の特定の要素を変更
array2D[0][1] = 10;
console.log(array2D);

このコード例では、二次元配列array2Dの1行目（インデックス0）の2列目（インデックス1）にある要素の値を10に更新しています。

このようにJavaScriptを用いて多次元配列の特定の要素を効率的に操作することが可能です。

●JavaScriptにおける多次元配列の実践的活用法

JavaScriptでの多次元配列は、その柔軟性と機能性により、さまざまな応用が可能です。

ここでは、二次元配列を用いた表の作成と、多次元配列を活用した地図情報管理の二つの具体例を紹介します。

○サンプルコード5：JavaScriptで二次元配列を用いた表の生成

表を作成する際に、JavaScriptの二次元配列を効率的に活用する方法を見てみましょう。

// 二次元配列を使った表の作成例
function createTable(array) {
  let table = '<table>';
  for (let i = 0; i < array.length; i++) {
    table += '<tr>';
    for (let j = 0; j < array[i].length; j++) {
      table += '<td>' + array[i][j] + '</td>';
    }
    table += '</tr>';
  }
  table += '</table>';
  return table;
}

let table = createTable(array2D);
console.log(table);

このコードでは、二次元配列を使ってHTMLのtable要素を生成する関数createTableが定義されています。

二次元配列array2Dを利用して表を作成し、その結果をコンソールに出力しています。

○サンプルコード6：JavaScriptでの多次元配列を活用した地図情報管理

JavaScriptでの多次元配列を使った地図情報の管理方法について見てみましょう。

// 多次元配列を活用した地図情報の管理例
let mapData = [
  ['山', '森', '湖'],
  ['川', '平地', '海'],
  ['砂漠', '草原', '丘']
];

function getMapInfo(x, y) {
  return mapData[x][y];
}

console.log(getMapInfo(1, 2)); // "海"が表示される

このコードでは、多次元配列mapDataを使用して地図情報を管理しています。

getMapInfo関数を用いることで、指定した座標にある地形情報を簡単に取得できます。

●注意点と対処法

多次元配列を使用する際の注意点として、下記の点が挙げられます。

1. 配列のサイズが大きくなると、メモリ使用量が増加し、パフォーマンスが低下する可能性があります。適切なサイズの配列を使用することが重要です。
2. 配列のインデックスは0から始まるため、行や列の数とは異なります。インデックスが0から始まることを忘れずに、正しくアクセスしてください。

対処法としては、下記のような方法があります。

1. 必要最小限のサイズの配列を使用し、不要なデータは削除してメモリ使用量を抑えます。
2. 配列のインデックスが0から始まることを意識して、コードを書くことで、誤ったアクセスを防ぎます。

●JavaScriptを使用した多次元配列のカスタマイズテクニック

JavaScriptを用いて多次元配列をより有用に活用するための様々なカスタマイズ方法を見てみましょう。

具体的には、要素の検索やフィルタリング、ソート、変換といった操作を行う方法を紹介します。

○サンプルコード7：多次元配列内の特定要素の検索

多次元配列内の特定要素を効率的に検索する方法をJavaScriptで実装します。

// 多次元配列の要素を検索する関数
function findElement(array, target) {
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array[i].length; j++) {
      if (array[i][j] === target) {
        return [i, j];
      }
    }
  }
  return null;
}

let result = findElement(mapData, '海');
console.log(result); // [1, 2]が表示される

このコードでは、多次元配列から指定された要素（この例では「海」）を検索し、その位置を返しています。

○サンプルコード8：多次元配列内の要素のフィルタリング

条件に基づいて多次元配列の要素をフィルタリングする方法を見ていきましょう。

// 多次元配列の要素をフィルタリングする関数
function filterElements(array, condition) {
  let filtered = [];
  for (let i = 0; i < array.length; i++) {
    let row = [];
    for (let j = 0; j < array[i].length; j++) {
      if (condition(array[i][j])) {
        row.push(array[i][j]);
      }
    }
    filtered.push(row);
  }
  return filtered;
}

let filteredMapData = filterElements(mapData, (element) => element === '海');
console.log(filteredMapData);
// [[''], ['', '海', ''], ['', '', '']]が表示される

この関数では、多次元配列から特定の条件（この例では「海」と等しい要素）に一致する要素のみを抽出しています。

○サンプルコード9：多次元配列の要素のソート

多次元配列の各行をソートするJavaScriptの実装方法を紹介します。

// 多次元配列の要素をソートする関数
function sortElements(array, compareFunction) {
  let sorted = [];
  for (let i = 0; i < array.length; i++) {
    let row = array[i].slice();
    row.sort(compareFunction);
    sorted.push(row);
  }
  return sorted;
}

let sortedMapData = sortElements(mapData, (a, b) => a.localeCompare(b));
console.log(sortedMapData);
// [['湖', '山', '森'], ['川', '平地', '海'], ['丘', '砂漠', '草原']]が表示される

この関数は、指定された比較関数を用いて多次元配列の各行を個別にソートします。

○サンプルコード10：多次元配列の要素の変換

多次元配列の各要素に対して変換処理を適用する方法です。

// 多次元配列の要素を変換する関数
function transformElements(array, transformFunction) {
  let transformed = [];
  for (let i = 0; i < array.length; i++) {
    let row = [];
    for (let j = 0; j < array[i].length; j++) {
      row.push(transformFunction(array[i][j]));
    }
    transformed.push(row);
  }
  return transformed;
}

let transformedMapData = transformElements(mapData, (element) => element.toUpperCase());
console.log(transformedMapData);
// [['山', '森', '湖'], ['川', '平地', '海'], ['砂漠', '草原', '丘']]が表示される

ここでは、多次元配列の各要素を大文字に変換する例を示しています。

まとめ

この記事では、JavaScriptで多次元配列を作成し、扱う方法を10のサンプルコードを通じて解説しました。

多次元配列は、データを表形式や立体的な形で表現する際に非常に便利です。

注意点として、配列の大きさを変更する際や、要素の値を参照する際にインデックスが範囲外にならないように気をつけましょう。

また、多次元配列を使った処理を関数化して再利用することで、コードの可読性や保守性を向上させることができます。

今回紹介したサンプルコードを参考に、JavaScriptで多次元配列を使いこなして、さまざまな問題に対応できるようにしていきましょう。