ここでは、多次元配列を HTML の <table> に変換して表示する方法を、初心者向けにステップで解説します。
ブラウザでそのままコピペして試せます。
1️⃣ HTMLの基本構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>多次元配列を表に表示</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin-top: 20px;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
th {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h2>多次元配列を表で表示する例</h2>
<div id="table-container"></div>
<script>
// JavaScriptはここに書きます
</script>
</body>
</html>
✅ #table-container に作った表を挿入します。
2️⃣ JavaScriptで多次元配列を作る
// 多次元配列（ユーザーの名前・年齢・居住地）
let users = [
['名前', '年齢', '居住地'], // 見出し行
['Yamada', 28, 'Tokyo'],
['Suzuki', 35, 'Fukuoka'],
['Honda', 24, 'Sendai']
];
3️⃣ 配列をループして表を作る
// 表を作る
let table = document.createElement('table');
for (let i = 0; i < users.length; i++) {
let row = document.createElement('tr'); // 行を作る
for (let j = 0; j < users[i].length; j++) {
if (i === 0) {
// 見出し行は<th>
let th = document.createElement('th');
th.textContent = users[i][j];
row.appendChild(th);
} else {
// データ行は<td>
let td = document.createElement('td');
td.textContent = users[i][j];
row.appendChild(td);
}
}
table.appendChild(row); // 表に行を追加
}
// 作った表をHTMLに挿入
document.getElementById('table-container').appendChild(table);
4️⃣ ポイントの解説
- 二重ループ
- 外側ループ：行（配列の1つ分）
- 内側ループ：列（配列の中の各値）
- 見出し行とデータ行を分ける
i===0は見出し行 →<th>- それ以外は
<td>
- DOM操作
document.createElement()でタグを作るappendChild()で親要素に追加する
5️⃣ 応用例：平均年齢を最後に追加
// 平均年齢を計算
let totalAge = 0;
for (let i = 1; i < users.length; i++) { // 見出し行はスキップ
totalAge += users[i][1];
}
let avgAge = (totalAge / (users.length - 1)).toFixed(1);
// 最後の行に平均年齢を追加
let row = document.createElement('tr');
let tdLabel = document.createElement('td');
tdLabel.textContent = '平均年齢';
tdLabel.colSpan = 1;
let tdValue = document.createElement('td');
tdValue.textContent = avgAge;
tdValue.colSpan = 2;
row.appendChild(tdLabel);
row.appendChild(tdValue);
table.appendChild(row);
✅ これで表の下に「平均年齢」の行が追加されます。
6️⃣ 練習問題
- 多次元配列を増やす
- 自分で好きなユーザーを追加してみる
- 列を追加する
- 職業列（例：Engineer, Designer）を追加して表に表示
- 条件付き色分け
- 年齢が30以上ならセルの背景色を変える
💡 この方法を使うと、多次元配列の内容を リアルタイムでHTML表に反映 できるので、アンケート結果や成績表など、実務的な表作成にも応用できます。
See the Pen Interactive multidimensional array by MONO365 -Color your days- (@monoqlo365) on CodePen.
ポイントの解説
- 多次元配列を使う理由
- ユーザー情報の「名前・年齢・居住地」をまとめて管理
- 表示や条件判定に便利
- 条件付き色分け
if (j === 1 && users[i][1] >= 30) {
td.classList.add('age-high');
}
年齢の列（j===1）が 30 以上なら背景色を変える
- インタラクティブな追加
- 入力フォームで値を取得し、
users.push([name, age, city])で配列に追加 renderTable()で表を再描画
- 入力フォームで値を取得し、
- 再描画の工夫
container.innerHTML = ''で古い表を消してから新しい表を作る- これで毎回正しく表を更新できる
練習アレンジ
- 列を増やして職業やメールアドレスを表示
- 削除ボタンを各行に追加してユーザーを削除
- 平均年齢や合計人数を表の下に表示
