JavaScript | 多次元配列(配列の中に配列)

JavaScript JavaScript
スポンサーリンク

では、「多次元配列(配列の中に配列)」をしっかり理解できるように、レベル別(初級 → 中級 → 上級) に演習問題・解答・解説をセットでまとめます。
すべてブラウザの「開発者ツール(Console)」で動かせます。


初級編:基本のアクセスと理解


🧩 問題1:要素を取り出して表示しよう

次の多次元配列から、
「Suzuki の年齢」と「Honda の居住地」をコンソールに表示してください。

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

✅ 解答

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

💬 解説

  • users[1]['Suzuki', 35, 'Fukuoka'](外側インデックス1番)
  • その中の [1]35(年齢)
  • 同様に users[2][2] で「3番目の行の3番目の値」を取得。
    ➡ インデックスは 0から数える のがポイント!

🧩 問題2:データを変更しよう

上の users 配列で、
'Honda' の居住地を 'Nagoya' に変更してから、配列全体を表示してください。


✅ 解答

users[2][2] = 'Nagoya';
console.log(users);
JavaScript

💬 解説

  • 配列は 上書き可能
  • 「外側 → 内側」の順で場所を特定すれば、ピンポイントで書き換えできます。

中級編:繰り返しと条件分岐


🧩 問題3:すべての要素を順番に表示しよう

下の scores 配列に入っているすべての数値を、1行ずつコンソールに表示してください。

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

✅ 解答

for (let i = 0; i < scores.length; i++) {
  for (let j = 0; j < scores[i].length; j++) {
    console.log(scores[i][j]);
  }
}
JavaScript

💬 解説

  • 外側の for は「行(生徒)」を動かす。
  • 内側の for は「列(各科目)」を動かす。
  • このように「二重ループ」で中まで順番にアクセスします。
scores[0][0], scores[0][1], scores[0][2]
scores[1][0], scores[1][1], scores[1][2]
...

🧩 問題4:平均点を求めよう

次の配列で、各生徒の平均点を求めて表示してください。

let scores = [
  [80, 70, 90],
  [60, 75, 85],
  [95, 80, 100]
];
JavaScript

✅ 解答

for (let i = 0; i < scores.length; i++) {
  let total = 0;
  for (let j = 0; j < scores[i].length; j++) {
    total += scores[i][j];
  }
  let average = total / scores[i].length;
  console.log(`Student ${i + 1} average: ${average}`);
}
JavaScript

💬 解説

  • まず「1人分の合計」を出してから「要素数(3)」で割る。
  • scores[i].length は「内側の配列(科目の数)」を自動で取得します。
    ➡ こうすると科目数が増えても対応可能!

上級編:条件・検索・配列操作の応用


🧩 問題5:条件に合う人だけ取り出そう

次の users から、年齢が30未満の人の名前だけを新しい配列 youngUsers に入れて表示してください。

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

✅ 解答

let youngUsers = [];

for (let i = 0; i < users.length; i++) {
  if (users[i][1] < 30) {
    youngUsers.push(users[i][0]);
  }
}

console.log(youngUsers);
JavaScript

💬 解説

  • users[i][1] → 年齢にアクセス。
  • 30未満なら push() で名前(users[i][0])を youngUsers に追加。
    条件×多次元配列 の組み合わせ練習に最適です。

🧩 問題6:まとめてオブジェクト化しよう(やや難)

次の users を、次のようなオブジェクト配列に変換してください。

// 元の配列
let users = [
  ['Yamada', 28, 'Tokyo'],
  ['Suzuki', 35, 'Fukuoka'],
  ['Honda', 24, 'Sendai']
];

// 変換後にしたい形
[
  { name: 'Yamada', age: 28, city: 'Tokyo' },
  { name: 'Suzuki', age: 35, city: 'Fukuoka' },
  { name: 'Honda',  age: 24, city: 'Sendai' }
]
JavaScript

✅ 解答

let userObjects = [];

for (let i = 0; i < users.length; i++) {
  let u = {
    name: users[i][0],
    age: users[i][1],
    city: users[i][2]
  };
  userObjects.push(u);
}

console.log(userObjects);
JavaScript

💬 解説

  • 「配列の中の配列」→「配列の中のオブジェクト」へ形を変換。
  • オブジェクトにすることで、後で user.name のように読みやすくなります。
  • 実務でもよく使う形です!

🧩 問題7:合計・平均・条件すべて使う総合問題

次の成績表から、平均点が80以上の生徒の番号だけhighScoreStudents 配列に入れて表示してください。

let scores = [
  [78, 82, 90],
  [88, 91, 85],
  [60, 75, 80],
  [95, 90, 98]
];
JavaScript

✅ 解答

let highScoreStudents = [];

for (let i = 0; i < scores.length; i++) {
  let total = 0;
  for (let j = 0; j < scores[i].length; j++) {
    total += scores[i][j];
  }
  let avg = total / scores[i].length;

  if (avg >= 80) {
    highScoreStudents.push(i + 1); // 学生番号(1始まり)
  }
}

console.log(highScoreStudents); // [2, 4]
JavaScript

💬 解説

  • 内側ループで合計 → 外側ループで平均を判定。
  • 条件に合った人だけ新配列に追加。
  • 現実の「成績管理」「アンケート集計」に似た構造です。

まとめ

レベル内容キーとなる力
初級値のアクセス・変更インデックスの仕組み
中級ループ処理・平均計算二重ループの構造理解
上級条件・変換・応用実践的データ処理

次のステップとしては、
✅ 「map」「filter」「forEach」を使って、同じ処理をもっと短く書く練習
✅ 表形式データを HTML で表示する練習
がとても良い流れです。

タイトルとURLをコピーしました