多次元配列のデータを使って、いわゆる表の形でデータを表示してみます。
1 多次元配列の要素をテーブル形式で表示
まずは HTML におけるテーブルの書式を再確認します。
書式
<table border = "1">
<tr>
<th>項目名</th>・・・<th>項目名</th>
</tr>
<tr>
<td>内容</td>・・・<td>内容</td>
</tr>
・
・
・
<tr>
<td>内容</td>・・・<td>内容</td>
</tr>
</table>
表の「行」にあたる部分は、先頭に <tr>、末尾に </tr> を置いて囲う必要があるのでしたね。
また、border = “1” の部分は、表の線の太さを指示しています。
まず全文を示します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>多次元配列の要素をテーブル形式で表示</title>
<meta charset="UTF-8">
<style type="text/css">
td { text-align: center; }
</style>
</head>
<body>
<table border = "1">
<tr>
<th>〔順位〕</th><th>市・区</th><th>人口(万人)</th><th>都道府県</th>
</tr>
<script>
let ppl = [
["特別区", 979, "東京都"],
["横浜市", 376, "神奈川県"],
["大阪市", 277, "大阪府"],
["名古屋市", 232, "愛知県"],
["札幌市", 195, "北海道"],
["福岡市", 164, "福岡県"],
["川崎市", 154, "神奈川県"],
["神戸市", 149, "兵庫県"],
["京都市", 143, "京都府"],
["さいたま市", 134, "埼玉県"]
];
for(let i = 0; i < ppl.length; i++){
document.write("<tr>");
document.write("<td>〔" + (i + 1) + "〕</td>");
for(let j = 0; j < ppl[i].length; j++){
document.write("<td>" + ppl[i][j] + "</td>");
}
document.write("</tr>");
}
</script>
</table>
</body>
</html>
ブラウザ
〔順位〕 | 市・区 | 人口(万人) | 都道府県 |
---|
生データよりも格段に見やすい表ができあがりました。
しかも、順位が付いています。(あらかじめ人口が多い順番にデータが並んでいます。)
項目名の部分はそのまま HTML 形式のままですが、データの部分は繰り返し処理を使っています。
このコードを上から順にみていきましょう。
その前に HTML の <head> 内のコードを説明しておきます。
HTML
<style type="text/css">
td { text-align: center; }
</style>
この部分は表のデータを中央ぞろえで表示するという指示です。
2 表の項目の部分
まずは表の項目名を表示するためのコードです。
HTML の一部
<table border = "1">
<tr>
<th>〔順位〕</th><th>市・区</th><th>人口(万人)</th><th>都道府県</th>
</tr>
ブラウザ
〔順位〕 | 市・区 | 人口(万人) | 都道府県 |
---|
ここは HTML のコードそのままですね。
3 <script> の部分(前半)
次に、<script> の開始から、配列の部分です。
HTML の一部
<script>
let ppl = [
["特別区", 979, "東京都"],
["横浜市", 376, "神奈川県"],
["大阪市", 277, "大阪府"],
["名古屋市", 232, "愛知県"],
["札幌市", 195, "北海道"],
["福岡市", 164, "福岡県"],
["川崎市", 154, "神奈川県"],
["神戸市", 149, "兵庫県"],
["京都市", 143, "京都府"],
["さいたま市", 134, "埼玉県"]
];
ここも問題ないかと思います。
4 <script> の部分(後半)
次に、繰り返し処理の部分です。
HTML の一部
for(let i = 0; i < ppl.length; i++){
document.write("<tr>");
document.write("<td>〔" + (i + 1) + "〕</td>");
for(let j = 0; j < ppl[i].length; j++){
document.write("<td>" + ppl[i][j] + "</td>");
}
document.write("</tr>");
}
</script>
相当複雑そうに見えます。
繰り返し処理のなかに、さらに 繰り返し処理 が記述されている構造になっています。
そこで、この内部の for 文は後から検討することにして、まずは一つ目の for 文以下に記述されている document.write のみについてみていきます。
見やすくしてみました。
HTML の一部
for(let i = 0; i < ppl.length; i++){
document.write("<tr>");
document.write("<td>〔" + (i + 1) + "〕</td>");
// 繰り返し処理
document.write("</tr>");
}
document.write が3つあります。
まず、一つ目の document.write と三つ目の document.write に注目します。
HTML の一部
for(let i = 0; i < ppl.length; i++){
document.write("<tr>");
document.write("<td>〔" + (i + 1) + "〕</td>");
// 繰り返し処理
document.write("</tr>");
}
これらは最初に <tr> を出力し、最後に </tr> を出力するというものです。
それぞれの出力を、変数 i が「0」から ppl.length より小さい間、繰り返し実行することになります。
出力される HTML の一部
<table border = "1">
<tr>
<th>〔順位〕</th><th>市・区</th><th>人口(万人)</th><th>都道府県</th>
</tr>
<tr>
</tr>
・
・
・
<tr>
</tr>
</table>
表の形式でいうと、「行」を示すためのコードが出力されたことになります。
なお、わかりやすいように、改行・インデントは手入力で追加しています。
次に、二つ目の document.write です。
HTML の一部
for(let i = 0; i < ppl.length; i++){
document.write("<tr>");
document.write("<td>〔" + (i + 1) + "〕</td>");
// 繰り返し処理
document.write("</tr>");
}
write メソッドの対象は、① <td>〔 ② i + 1 ③ 〕</td> の部分に分けて考えることができます。
まず、②の部分は変数 i に1を加算した数字が入りますので、1回目のループでは「1」が入りますね。
したがって、二つ目の document.write により、1回目のループでは <td>〔1〕</td> というコードが出力されます。
出力される HTML の一部
<table border = "1">
<tr>
<th>〔順位〕</th><th>市・区</th><th>人口(万人)</th><th>都道府県</th>
</tr>
<tr>
<td>〔1〕</td>
</tr>
・
・
・
<tr>
<td>〔10〕</td>
</tr>
</table>
この <td>・・・</td> は <tr> と </tr> との間にありますので、この位置にコードが出力されます。
あとは、その繰り返しですね。
なお、ここでもわかりやすいように、改行・インデントは手入力で追加しています。
さて、ここまで説明したコードではどのような結果になるでしょうか。
ブラウザ
〔順位〕 | 市・区 | 人口(万人) | 都道府県 |
---|
変数 ppl に入力した要素(配列)の部分以外の部分について表ができていますね。
そして市・区、人口、都道府県の部分は for 文の内部にある for 文で出力されることが容易に予想できますね。
それでは、その部分を生成するコードをみていきましょう。
HTML の一部
let ppl = [
["特別区", 979, "東京都"],
・
・
・
for(let j = 0; j < ppl[i].length; j++){
document.write("<td>" + ppl[i][j] + "</td>");
}
参照しやすいように、変数 ppl の0番目の配列を表示しています。
変数 j が「0」でこのループがスタートし、j++ とあることから、「1」ずつ変数 j の値が増えていきます。(増分処理)
そして、変数 j の値が ppl[i].length よりも小さいときのみループが続いていきます。
1回目は ppl[0] ですので、その内容は「”特別区”, 979, “東京都”」となります。
よって、この要素の数(配列の長さ)は「3」です。
そして、ppl[0] の length オブジェクトで得られた値を条件式にしていますので、判定される条件式は j < 3 ということになります。
つまり、このループは結果的に「0」から「2」まで、合計3回繰り返されることになります。
次に繰り返される処理についてみていきましょう。
HTML の一部
let ppl = [
j = 0 j = 1 j = 2 ← 内側のループ
["特別区", 979, "東京都"], i = 0 ← 外側のループ
["横浜市", 376, "神奈川県"], i = 1
・
・
・
for(let j = 0; j < ppl[i].length; j++){
document.write("<td>" + ppl[i][j] + "</td>");
}
<td> と </td> の部分は値が入る「場所」のようなものを設定するタグです。
これは先ほどの〔順位〕と同じですね。
そして、ppl[i][j] の部分は、変数 i と変数 j という添え字が2つ記述されています。
これは前回みたとおり、i番目の配列のうち、j番目の要素を指定するのでしたね。
ということは、変数 i が「0」で変数 j が「0」のときは、要素「特別区」が取り出されることになります。
そして、さらに変数 j が「1」のときは「979」、「2」のときは「東京都」が取り出され、それぞれ document.write により出力されることになり、合計3回で変数 i が「0」のときのループが終了します。
したがって、外側のループ1回目の時点で出力されるコードは下記のようになります。
出力される HTML の一部
<table border = "1">
<tr>
<th>〔順位〕</th><th>市・区</th><th>人口(万人)</th><th>都道府県</th>
</tr>
<tr>
<td>〔1〕</td><td>特別区</td><td>979</td><td>東京都</td>
</tr>
内側のループ処理が、<tr> の生成、<td>〔1〕</td> の生成の次にあるのでこのようになります。
外側のループ処理の1回目、つまり変数 i が「0」のみの処理ではどのように出力されるでしょうか。
ブラウザ
〔順位〕 | 市・区 | 人口(万人) | 都道府県 |
---|
表の内容の1行目のみが出力されています。
そして、ループ処理の2回目、つまり変数 i が「1」のときも同様に処理されます。
出力される HTML の一部
<table border = "1"> <tr> <th>〔順位〕</th><th>市・区</th><th>人口(万人)</th><th>都道府県</th> </tr> <tr> <td>〔1〕</td><td>特別区</td><td>979</td><td>東京都</td> </tr> <tr> <td>〔2〕</td><td>横浜市</td><td>376</td><td>神奈川県</td> </tr> </table>
ブラウザ
〔順位〕 | 市・区 | 人口(万人) | 都道府県 |
---|
表の内容の2行目までが出力されています。
この後、変数 i が「2」から「9」まで繰り返され、冒頭にあった表が出力されることになります。
5 次回
少し複雑でしたね。さて次回は、復習を兼ねて今回の処理を少し簡単に記述する方法を勉強します。
カテゴリー
更新記事
- 『日本経済新聞』を読む 2(DAC、株主優待、オピオイド、ベトナム車市場、離れ小島)
- 『日本経済新聞』を読む 1(リバースメンタリング、CBT、EBPM、地方創生DAO、IBD)
- テーマ株投資(7か月)
- 『会社四季報 2024年 3集 夏号』を読む 20(RPF、DtoC、ToF、駅ナカ、CX)
- 『会社四季報 2024年 3集 夏号』を読む 19(ATC、プローブカード、ニューデリー、商品CFD、SUV、FPC、IFRS)
- 『会社四季報 2024年 3集 夏号』を読む 18(シャリ玉ロボット、YAGレーザー、シナジー、SaaS、クルーズ、DFBレーザー)
- 『会社四季報 2024年 3集 夏号』を読む 17(DSP、サーメタル、自動小銃、ダイカストマシン、FPSO、サーボモーター、水晶振動子)
- 『会社四季報 2024年 3集 夏号』を読む 16(クロスセル、eVTOL、CFCC、RFID、配当性向、事業承継)
- 『会社四季報 2024年 3集 夏号』を読む 15(SiC半導体、NAS電池、フェロニッケル、フェライト粉、スポンジチタン)
- 『会社四季報 2024年 3集 夏号』を読む 14(AI警備システム、プロダクトアウト、ホットメルト接着剤、放熱ゲル、パイル、カソード)
- 『会社四季報 2024年 3集 夏号』を読む 13(PLM、ファクタリング、BCP、グリシン、メタクリル樹脂、アクティブシニア)
- テーマ株投資(6か月)
- 『会社四季報 2024年 3集 夏号』を読む 12(カプロラクタム、ゼロトラスト、RAG、ERP、シリカ)
- 『会社四季報 2024年 3集 夏号』を読む 11(オリゴマー、エッジAI、MLCC、ジルコニウム、アセチレンガス、ファインケミカル)
- 『会社四季報 2024年 3集 夏号』を読む 10(フラッシュハンドル、自動配膳ロボット、R-SUD、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証)
- 『会社四季報 2024年 3集 夏号』を読む 9(ペロブスカイト太陽電池、プロテイン、銀だこ、尿素SCR、エクソソーム)
- 『会社四季報 2024年 3集 夏号』を読む 8(ドミナント、EBITDA、SAF、消防車、キャンプ用品、GIGAスクール、ボウリング場)
- 『会社四季報 2024年 3集 夏号』を読む 7(MD、パーム椰子、GMS、EC、デジタルサイネージ、ハラール認証、ヴィーガンコスメ)
- 『会社四季報 2024年 3集 夏号』を読む 6(BIM、CMS、つけまつげ、CDMO、BNPL、EDI、CRM)
- 『会社四季報 2024年 3集 夏号』を読む 5(アグリゲーション、EMS、BPO、のれん、カカオ豆、オーツミルク)
- 『会社四季報 2024年 3集 夏号』を読む 4(SEP、社内起業、ZEP、VPP、DOE、バイオセンサー、PBX)
- 『会社四季報 2024年 3集 夏号』を読む 3(海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電)
- テーマ株投資(5か月)
- 『会社四季報 2024年 3集 夏号』を読む 2
- 『会社四季報 2024年 3集 夏号』を読む 1
- JavaScript でDOM 2
- JavaScript でDOM 1
- JavaScript でオブジェクト 5
- JavaScript でオブジェクト 4
- JavaScript でオブジェクト 3
- JavaScript でオブジェクト 2
- JavaScript でオブジェクト 1
- JavaScript で関数 3
- JavaScript で関数 2
- JavaScript で関数 1
- JavaScript で配列 6
- JavaScript で配列 5
- JavaScript で配列 4
- テーマ株投資(3カ月目)
- JavaScript で配列 3
- JavaScript で配列 2
- JavaScript で配列 1
- JavaScript で「繰り返し」2
- 『チーズはどこへ消えた?』を読む 2
- 『チーズはどこへ消えた?』を読む 1
- JavaScript で「繰り返し」1
- JavaScript で「もし」3
- テーマ株投資(2カ月目)
- JavaScript で「もし」2
- 「記憶」本 5冊を読む 3
- 「記憶」本 5冊を読む 2
- 「記憶」本 5冊を読む 1
- テーマ株投資(1カ月半)
- 「睡眠」本 6冊を読む3(夜間・朝の行動)
- 「睡眠」本 6冊を読む2(昼間の行動)
- テーマ株投資(1か月目)
- JavaScript で「もし」1
- JavaScript で変数3
- 「睡眠」本 6冊を読む1(理論)
- JavaScript で変数2
- テーマ株投資(第3週目)
- JavaScript でヘンな数
- 「メモ」本 6冊を読む2(メモの方法)
- テーマ株投資(第2週目)
- JavaScript で足し算
- 「メモ」本 6冊を読む1(メモの意義)
- テーマ株投資(第1週目)
- JavaScript で「こんにちは世界」
- 「コーチング」本 6冊を読む
- はじめてのテーマ株投資
- JavaScript とは
- 「怒り」「アンガーマネジメント」本 7冊を読む
- JavaScript を始めてみる
- 初めての自動給水器
- 「ブランディング」本 6冊を読む
タグ
break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) ことば (2) アンガーマネジメント (1) インソース (1) ココナラ (11) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (3) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) リンクアンドモチベーション (2) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (29) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (11) IGS (11) Kラーニング (1)