では、「多次元配列(配列の中に配列)」をしっかり理解できるように、レベル別(初級 → 中級 → 上級) に演習問題・解答・解説をセットでまとめます。
すべてブラウザの「開発者ツール(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 で表示する練習
がとても良い流れです。
