JavaScript | 多次元配列（配列の中に配列）

JavaScript JavaScript
2020.07.25
スポンサーリンク

多次元配列（配列の中に配列）を超かんたんに理解する

わかりやすく、ゆっくり噛み砕いて説明して、練習用の例題（解答付き）も付けます。実際にブラウザの開発者ツール（Console）でコピペして動かしてみてください。

1. イメージでつかむ

多次元配列は「箱の中に小さな箱がたくさん入っている」イメージです。
外側の箱（配列）には「小箱（配列）」が要素として入っていて、さらに小箱の中に値があります。

例えば：

[  [A, B, C],   ← 外側配列の0番目（小箱）
   [D, E, F],   ← 外側配列の1番目
   [G, H, I]    ← 外側配列の2番目
]
JavaScript

外側のインデックス → 小箱、内側のインデックス → 小箱の中の要素、という順で考えます。

2. 基本の作り方（例）

// 人のデータを1行ずつ配列にして、それらをまとめた多次元配列
let users = [
  ['Yamada', 28, 'Tokyo'],
  ['Suzuki', 36, 'Fukuoka'],
  ['Tanaka', 22, 'Osaka']
];
JavaScript

ここで users[0] は ['Yamada', 28, 'Tokyo'] を返します。
users[0][0] は 'Yamada'、users[1][2] は 'Fukuoka' です。

3. 要素にアクセスする（順を追って）

  • 外側の配列から「小箱」を取り出す： 
let firstUser = users[0];
console.log(firstUser); // ['Yamada', 28, 'Tokyo']
JavaScript
  • その小箱の中から値を取り出す： 
console.log(firstUser[1]); // 28
JavaScript
  • 1行で直接取り出す： 
console.log(users[2][2]); // 'Osaka'
JavaScript

4. 中身を変更する

// 2番目のユーザーの年齢を36にする（indexは0から）
users[1][1] = 36;
console.log(users[1]); // ['Suzuki', 36, 'Fukuoka']
JavaScript

新しい小箱（行）を追加する：

users.push(['Sato', 30, 'Nagoya']);
JavaScript

小箱の中身を追加・削除（通常の配列操作と同じ）：

users[0].push('Engineer'); // Yamadaの配列に職業を追加
users[2].pop();            // Tanakaの配列の最後の要素を削除
JavaScript

5. ループで全部読む（初心者に重要）

多次元配列は「二重ループ」で扱うことが多いです。

for（基本の書き方）

for (let i = 0; i < users.length; i++) {
  // i は外側のインデックス（行）
  for (let j = 0; j < users[i].length; j++) {
    // j は内側のインデックス（列）
    console.log(`users[${i}][${j}] = ${users[i][j]}`);
  }
}
JavaScript

forEach（読みやすい）

users.forEach(function(row, i) {
  // row が小箱（配列）そのもの
  row.forEach(function(value, j) {
    console.log(`row ${i} col ${j} -> ${value}`);
  });
});
JavaScript

for…of（簡潔）

for (const row of users) {
  for (const value of row) {
    console.log(value);
  }
}
JavaScript

6. よくあるパターン（例：表データ）

例えば成績表（各行が生徒、各列が点数）のとき：

let scores = [
  [78, 69, 84], // Aさんの3科目
  [88, 91, 76], // Bさん
  [65, 70, 71]  // Cさん
];

// 各生徒の合計を出す
for (let i = 0; i < scores.length; i++) {
  let total = 0;
  for (let j = 0; j < scores[i].length; j++) {
    total += scores[i][j];
  }
  console.log(`student ${i} total = ${total}`);
}
JavaScript

7. 注意点・落とし穴

  • 内側の配列の長さは必ずしも同じとは限りません（ジャグ配列と呼ぶ）。users[0][3] が存在しないと undefined になります。
  • インデックスは 0 から始まる点を忘れない。
  • 途中で users[1] が undefined の場合、users[1][0] にアクセスするとエラーになる（存在確認をしてからアクセスすると安全）。

例（安全にアクセスする方法）：

if (users[1] && users[1][0] !== undefined) {
  console.log(users[1][0]);
}
JavaScript

8. 初心者向けの小さな練習問題（まずは手で考えてからコードを動かすと理解が深まります）

問題1

次の配列から「Suzuki の居住地」を取り出して表示してください。

let users = [
  ['Yamada', 28, 'Tokyo'],
  ['Suzuki', 35, 'Fukuoka'],
  ['Tanaka', 22, 'Osaka']
];
JavaScript

解答1

console.log(users[1][2]); // 'Fukuoka'
JavaScript

問題2

下の scores 配列で各生徒の平均点を計算して、averages 配列に格納してください。

let scores = [
  [78, 69, 84],
  [88, 91, 76],
  [65, 70, 71]
];
JavaScript

解答2

let averages = [];
for (let i = 0; i < scores.length; i++) {
  let sum = 0;
  for (let j = 0; j < scores[i].length; j++) {
    sum += scores[i][j];
  }
  averages.push(sum / scores[i].length);
}
console.log(averages); // 例: [77, 85, 68.666...]
JavaScript

問題3（ややチャレンジ）

users 配列の中で年齢が 30 未満の人の名前だけを取り出して、新しい配列 young に入れてください。

let users = [
  ['Yamada', 28, 'Tokyo'],
  ['Suzuki', 35, 'Fukuoka'],
  ['Honda', 24, 'Sendai'],
  ['Tanaka', 31, 'Osaka']
];
JavaScript

解答3

let young = [];
for (let i = 0; i < users.length; i++) {
  if (users[i][1] < 30) {
    young.push(users[i][0]);
  }
}
console.log(young); // ['Yamada', 'Honda']
JavaScript

（filter や map を使ってもっとモダンに書けますが、まずはループで流れを理解しましょう。）

9. 次のステップ（あなたがやると良いこと）

  1. 上の例をコピーしてブラウザのコンソールで実行してみる。
  2. users.push(['YourName', 20, 'YourCity']) を試してデータを増やす。
  3. 二重ループの代わりに forEach / map / filter に挑戦してみる（慣れてきたら説明します）。
前へ次へ
12345
スポンサーリンク
タイトルとURLをコピーしました