多次元配列という形式を理解します。今回は、いわゆる表の形でデータを表示するための基礎的な知識です。
１ 準備
JavaScript ではなく HTML の学習になりますが、最初にリストとテーブルについて確認します。
まずはリストです。これはいわゆる「箇条書き」の形式です。
書式
<ul>
<li>項目</li>
・
・
<li>項目</li>
</ul>
最初に <ul> でリストの始まりを示し、そのリストの終了を </ul> で指定します。
そして、各々の項目は、<li> と </li> との間に記述します。
具体的な例を見ていきましょう。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>リスト</title>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>北海道</li>
<li>青森県</li>
<li>岩手県</li>
</ul>
</body>
</html>
ブラウザ
- 北海道
- 青森県
- 岩手県
リスト形式で表示されました。
なお、<ul> を <ol> とすると番号付きで表示されます。
HTML の一部
<ol>
<li>北海道</li>
<li>青森県</li>
<li>岩手県</li>
</ol>
ブラウザ
- 北海道
- 青森県
- 岩手県
次はテーブルです。
書式
<table>
<tr>
<th>項目名</th>・・・<th>項目名</th>
</tr>
<tr>
<td>内容</td>・・・<td>内容</td>
</tr>
・
・
・
<tr>
<td>内容</td>・・・<td>内容</td>
</tr>
</table>
テーブル自体は <table> と </table> との間に記述します。
項目名は <th> と </th> との間に、内容は <td> と </td> との間に置きます。
また、表の「行」にあたる部分は、先頭に <tr>、末尾に </tr> を置いて囲う必要があります。
HTML の一部
<table border = "1">
<tr>
<th>都道府県名</th><th>面積（km）</th><th>人口（万人）</th>
</tr>
<tr>
<td>北海道</td><td>83424</td><td>522</td>
</tr>
<tr>
<td>青森県</td><td>9646</td><td>123</td>
</tr>
<tr>
<td>岩手県</td><td>15275</td><td>121</td>
</tr>
</table>
ブラウザ
| 都道府県名 | 面積（km） | 人口（万人） |
|---|---|---|
| 北海道 | 83424 | 522 |
| 青森県 | 9646 | 123 |
| 岩手県 | 15275 | 121 |
改善すべき要素はあるものの、単に項目を並べるよりもこのほうが見やすくなったのではないでしょうか？
２ 多次元配列のしくみ
JavaScript に戻ります。
多次元配列というものがあり、たとえば２次元のものであれば、わかりやすい表形式の形式で表示することができます。
簡単な例を見てみましょう。
HTML の一部
<script>
let ppl = [
["特別区", 979, "東京都"],
["横浜市", 376, "神奈川県"],
["大阪市", 277, "大阪府"],
["名古屋市", 232, "愛知県"],
["札幌市", 195, "北海道"],
["福岡市", 164, "福岡県"],
["川崎市", 154, "神奈川県"],
["神戸市", 149, "兵庫県"],
["京都市", 143, "京都府"],
["さいたま市", 134, "埼玉県"]
];
・
・
</script>
直感的におわかりになると思いますが、まず最初に変数 ppl の宣言をして［ を置きます。
そのなかに各要素を配列の形で配置し、最後に ］で多次元配列の末尾を示しています。
配列の要素として、さらに配列が記述されている形ですね。
次にこの多次元配列から要素を取り出してみましょう。
まず、変数 ppl の中身をすべて出力してみます。
HTML の一部（宣言の部分から続けて入力）
document.write("<p>" + ppl + "</p>");
ブラウザ
やはりわかりにくいですね。
そこで、ある１行のみを取り出してみます。
配列のうち、個別の要素を取り出すには、添え字を使うのでしたね。
HTML の一部（宣言の部分から続けて入力）
document.write("<p>" + ppl[1] + "</p>");
ブラウザ
多次元配列うち２番目（ただし添え字は「１」）の配列が出力されました。
表の形式でいえば２行目のデータです。
次に、配列のなかから 各要素を取り出してみましょう。
HTML の一部（宣言の部分から続けて入力）
document.write("<p>" + ppl[2][0] + "</p>");
document.write("<p>" + ppl[2][1] + "</p>");
document.write("<p>" + ppl[2][2] + "</p>");
ブラウザ
このように添え字を２段階で使います。
２番目の配列のうち、それぞれ０番目、１番目及び２番目の要素がそれぞれ出力されています。
表の形式でいえば、３行目のうち１列目、２列目及び３列目のデータとなります。
最後に２次元配列の長さ（配列の数）を確認します。
HTML の一部（宣言の部分から続けて入力）
document.write("<p>" + ppl.length + "</p>");
ブラウザ
この２次元配列のなかに１０の配列があるということですね。
さらに各配列の中の長さ（要素の数）を確認します。
前回学習した繰り返し処理を使ってみます。
HTML の一部（宣言の部分から続けて入力）
for(let i = 0; i < ppl.length; i++){
document.write("<p>" + ppl[i].length + "</p>");
}
ブラウザ
２次元配列のなかにある、配列の要素の数はすべて「３」であることが分かりました。
なお、繰り返し条件の判定に i < ppl.length と記述されていますが、これは変数 i が２次元配列のなかの配列の数 ppl.length より小さい間はループ処理を続けるということ、つまり、変数 i が ppl.length 以上になったらこのループを抜けるというものです。
したがって、変数 i の値が「１０」になった時点、つまり document.write を１０回実行した後にループを抜けます。
念のためいうと、変数 i の値が「０」から「９」のときに document.write が実行されたということです。
そして、write メソッドの内容は ppl[i] の長さを length プロパティを使って取得するというものですので、結果的に各配列の要素の数「３」が合計１０回表示されました。
３ 次回
さて次回は、今回学んだ知識をもとに、上記２の冒頭にあるデータを表形式で表示することにチャレンジします。
カテゴリー
更新記事
- 『日本経済新聞』を読む２５（モルドバ、スマートロック、バリ、二重価格、ニッチ）
- 『日本経済新聞』を読む２４（ＦＴＳ、焼酎、化粧水、防災ビジネス、一太郎）
- 『日本経済新聞』を読む２３（人工芝、睡眠市場、東海道新幹線、地雷、酸化ガリウム）
- 『日本経済新聞』を読む２２（ポータブル電源、ズワイガニ、モルディブ、リチウム、ロブスター）
- 『日本経済新聞』を読む２１（高速船、駄菓子、レンタル自習室、ＰＦＡＳ、戻りガツオ）
- 『日本経済新聞』を読む２０（書店、コネクテッドカー、アゼルバイジャン、アルメニア、服薬）
- 『日本経済新聞』を読む １９（アボカド、飼料、ビレット、電動キックボード、フレア）
- テーマ株投資（９か月）
- 『日本経済新聞』を読む １８（背徳、デフリ、シアヌークビル港、デジタルノマド、企業博物館）
- 『日本経済新聞』を読む １７（在庫、字幕、梅田、エクセル職人、耐震シェルター）
- 『日本経済新聞』を読む １６（初任給、ウイスキー、スリランカ、クジラ肉、宇宙ごみ）
- 『日本経済新聞』を読む １５（配当貴族、スマートウォッチ、底引き網、ねこ住宅、電池の冷却）
- 『日本経済新聞』を読む １４（サービス収支、つながらない、租税回避地、電池寿命、置き社食）
- 『日本経済新聞』を読む １３（鉄鉱石、内需株、画像診断、ハブ空港、ＬＣＣ）
- 『日本経済新聞』を読む １２（アンチモニー、おもちゃショー、スタートアップ、燃料電池、送電）
- 『日本経済新聞』を読む １１（にがり、おせち、ダチョウ、災害ドローン、ビジネスホテル）
- 『日本経済新聞』を読む １０（航空エンジン、金型、国際会議、ＰＣＥ、ゲーム機）
- 『日本経済新聞』を読む ９（家計金融資産、車載半導体、ホタテ、コンテナ、ＧＰＵ）
- 『日本経済新聞』を読む ８（北陸新幹線、車中泊、ジョブ型、ＧＰＩＦ、メタンハイドレート）
- 『日本経済新聞』を読む ７（紙、ラストワンマイル、リユース市場、カード審査、ボルダリング）
- 『日本経済新聞』を読む ６（ｉＰＳ細胞、騰落レシオ、短期プラ、ＲＥＩＴ、フードテック）
- 『日本経済新聞』を読む ５（ナフサ、ビール、輸入牛肉、悪玉コレステロール、核融合）
- 『日本経済新聞』を読む ４（ダビンチ・サージカル・システム、ゼロエミッション船、クッキー、ＬＢＯ、洋上風力発電）
- 『日本経済新聞』を読む ３（変動金利、ＨＳＰ、スリープテック、双腕ロボット、物流パレット）
- 『日本経済新聞』を読む ２（ＤＡＣ、株主優待、オピオイド、ベトナム車市場、離れ小島）
- 『日本経済新聞』を読む １（リバースメンタリング、ＣＢＴ、ＥＢＰＭ、地方創生ＤＡＯ、ＩＢＤ）
- テーマ株投資（７か月）
- 『会社四季報 2024年 3集 夏号』を読む ２０（ＲＰＦ、ＤtoＣ、ＴｏＦ、駅ナカ、ＣＸ）
- 『会社四季報 2024年 3集 夏号』を読む １９（ＡＴＣ、プローブカード、ニューデリー、商品ＣＦＤ、ＳＵＶ、ＦＰＣ、ＩＦＲＳ）
- 『会社四季報 2024年 3集 夏号』を読む １８（シャリ玉ロボット、ＹＡＧレーザー、シナジー、ＳａａＳ、クルーズ、ＤＦＢレーザー）
- 『会社四季報 2024年 3集 夏号』を読む １７（ＤＳＰ、サーメタル、自動小銃、ダイカストマシン、ＦＰＳＯ、サーボモーター、水晶振動子）
- 『会社四季報 2024年 3集 夏号』を読む １６（クロスセル、ｅＶＴＯＬ、ＣＦＣＣ、ＲＦＩＤ、配当性向、事業承継）
- 『会社四季報 2024年 3集 夏号』を読む １５（ＳｉＣ半導体、ＮＡＳ電池、フェロニッケル、フェライト粉、スポンジチタン）
- 『会社四季報 2024年 3集 夏号』を読む １４（ＡＩ警備システム、プロダクトアウト、ホットメルト接着剤、放熱ゲル、パイル、カソード）
- 『会社四季報 2024年 3集 夏号』を読む １３（ＰＬＭ、ファクタリング、ＢＣＰ、グリシン、メタクリル樹脂、アクティブシニア）
- テーマ株投資（６か月）
- 『会社四季報 2024年 3集 夏号』を読む １２（カプロラクタム、ゼロトラスト、ＲＡＧ、ＥＲＰ、シリカ）
- 『会社四季報 2024年 3集 夏号』を読む １１（オリゴマー、エッジＡＩ、ＭＬＣＣ、ジルコニウム、アセチレンガス、ファインケミカル）
- 『会社四季報 2024年 3集 夏号』を読む １０（フラッシュハンドル、自動配膳ロボット、Ｒ－ＳＵＤ、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証）
- 『会社四季報 2024年 3集 夏号』を読む ９（ペロブスカイト太陽電池、プロテイン、銀だこ、尿素ＳＣＲ、エクソソーム）
- 『会社四季報 2024年 3集 夏号』を読む ８（ドミナント、ＥＢＩＴＤＡ、ＳＡＦ、消防車、キャンプ用品、ＧＩＧＡスクール、ボウリング場）
- 『会社四季報 2024年 3集 夏号』を読む ７（ＭＤ、パーム椰子、ＧＭＳ、ＥＣ、デジタルサイネージ、ハラール認証、ヴィーガンコスメ）
- 『会社四季報 2024年 3集 夏号』を読む ６（ＢＩＭ、ＣＭＳ、つけまつげ、ＣＤＭＯ、ＢＮＰＬ、ＥＤＩ、ＣＲＭ）
- 『会社四季報 2024年 3集 夏号』を読む ５（アグリゲーション、ＥＭＳ、ＢＰＯ、のれん、カカオ豆、オーツミルク）
- 『会社四季報 2024年 3集 夏号』を読む ４（ＳＥＰ、社内起業、ＺＥＰ、ＶＰＰ、ＤＯＥ、バイオセンサー、ＰＢＸ）
- 『会社四季報 2024年 3集 夏号』を読む ３（海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電）
- テーマ株投資（５か月）
- 『会社四季報 2024年 3集 夏号』を読む ２
- 『会社四季報 2024年 3集 夏号』を読む １
- JavaScript でDOM ２
- JavaScript でDOM １
- JavaScript でオブジェクト ５
- JavaScript でオブジェクト ４
- JavaScript でオブジェクト ３
- JavaScript でオブジェクト ２
- JavaScript でオブジェクト １
- JavaScript で関数 ３
- JavaScript で関数 ２
- JavaScript で関数 １
- JavaScript で配列 ６
- JavaScript で配列 ５
- JavaScript で配列 ４
- テーマ株投資（３カ月目）
- JavaScript で配列 ３
- JavaScript で配列 ２
- JavaScript で配列 １
- JavaScript で「繰り返し」２
- 『チーズはどこへ消えた？』を読む ２
- 『チーズはどこへ消えた？』を読む １
- JavaScript で「繰り返し」１
- JavaScript で「もし」３
- テーマ株投資（２カ月目）
- JavaScript で「もし」２
- 「記憶」本 ５冊を読む ３
- 「記憶」本 ５冊を読む ２
- 「記憶」本 ５冊を読む １
- テーマ株投資（１カ月半）
- 「睡眠」本 ６冊を読む３（夜間・朝の行動）
- 「睡眠」本 ６冊を読む２（昼間の行動）
- テーマ株投資（１か月目）
- JavaScript で「もし」１
- JavaScript で変数３
- 「睡眠」本 ６冊を読む１（理論）
- JavaScript で変数２
- テーマ株投資（第３週目）
- JavaScript でヘンな数
- 「メモ」本 ６冊を読む２（メモの方法）
- テーマ株投資（第２週目）
- JavaScript で足し算
- 「メモ」本 ６冊を読む１（メモの意義）
- テーマ株投資（第１週目）
- JavaScript で「こんにちは世界」
- 「コーチング」本 ６冊を読む
- はじめてのテーマ株投資
- JavaScript とは
- 「怒り」「アンガーマネジメント」本 ７冊を読む
- JavaScript を始めてみる
- 初めての自動給水器
- 「ブランディング」本 ６冊を読む
タグ
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) ことば (25) アンガーマネジメント (1) インソース (1) ココナラ (12) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (4) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) リンクアンドモチベーション (3) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 新聞 (2) 株式 (30) 用語 (16) 睡眠 (3) 給水器 (1) 記憶 (3) Ａｏｂａ－ＢＢＴ (12) ＩＧＳ (12) Ｋラーニング (1)
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1b854c42.1e21a26f.1b854c43.46ddb6a5/?me_id=1213310&item_id=20920710&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F6465%2F9784295016465_1_4.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1b854c42.1e21a26f.1b854c43.46ddb6a5/?me_id=1213310&item_id=19734346&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F1577%2F9784815601577.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1b854c42.1e21a26f.1b854c43.46ddb6a5/?me_id=1213310&item_id=20857618&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F5758%2F9784815615758_1_4.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")