JavaScript で配列２

　多次元配列という形式を理解します。今回は、いわゆる表の形でデータを表示するための基礎的な知識です。

１　準備

　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集夏号』を読む１１（オリゴマー、エッジＡＩ、ＭＬＣＣ、ジルコニウム、アセチレンガス、ファインケミカル）2024-07-25
『会社四季報 2024年 3集夏号』を読む１０（フラッシュハンドル、自動配膳ロボット、Ｒ－ＳＵＤ、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証）2024-07-22
『会社四季報 2024年 3集夏号』を読む９（ペロブスカイト太陽電池、プロテイン、銀だこ、尿素ＳＣＲ、エクソソーム）2024-07-19
『会社四季報 2024年 3集夏号』を読む８（ドミナント、ＥＢＩＴＤＡ、ＳＡＦ、消防車、キャンプ用品、ＧＩＧＡスクール、ボウリング場）2024-07-16
『会社四季報 2024年 3集夏号』を読む７（ＭＤ、パーム椰子、ＧＭＳ、ＥＣ、デジタルサイネージ、ハラール認証、ヴィーガンコスメ）2024-07-13
『会社四季報 2024年 3集夏号』を読む６（ＢＩＭ、ＣＭＳ、つけまつげ、ＣＤＭＯ、ＢＮＰＬ、ＥＤＩ、ＣＲＭ）2024-07-10
『会社四季報 2024年 3集夏号』を読む５（アグリゲーション、ＥＭＳ、ＢＰＯ、のれん、カカオ豆、オーツミルク）2024-07-07
『会社四季報 2024年 3集夏号』を読む４（ＳＥＰ、社内起業、ＺＥＰ、ＶＰＰ、ＤＯＥ、バイオセンサー、ＰＢＸ）2024-07-04
『会社四季報 2024年 3集夏号』を読む３（海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電）2024-07-01
テーマ株投資（５か月）2024-06-28
『会社四季報 2024年 3集夏号』を読む２2024-06-25
『会社四季報 2024年 3集夏号』を読む１2024-06-22
JavaScript でDOM ２2024-06-18
JavaScript でDOM １2024-06-14
JavaScript でオブジェクト５2024-06-10
JavaScript でオブジェクト４2024-06-06
JavaScript でオブジェクト３2024-06-02
JavaScript でオブジェクト２2024-05-29
JavaScript でオブジェクト１2024-05-25
JavaScript で関数３2024-05-21
JavaScript で関数２2024-05-17
JavaScript で関数１2024-05-13
JavaScript で配列６2024-05-10
JavaScript で配列５2024-05-07
JavaScript で配列４2024-05-04
テーマ株投資（３カ月目）2024-05-02
JavaScript で配列３2024-04-27
JavaScript で配列２2024-04-24
JavaScript で配列１2024-04-21
JavaScript で「繰り返し」２2024-04-18
『チーズはどこへ消えた？』を読む２2024-04-15
『チーズはどこへ消えた？』を読む１2024-04-11
JavaScript で「繰り返し」１2024-04-07
JavaScript で「もし」３2024-04-01
テーマ株投資（２カ月目）2024-03-29
JavaScript で「もし」２2024-03-28
「記憶」本５冊を読む３2024-03-24
「記憶」本５冊を読む２2024-03-20
「記憶」本５冊を読む１2024-03-17
テーマ株投資（１カ月半）2024-03-15
「睡眠」本６冊を読む３（夜間・朝の行動）2024-03-10
「睡眠」本６冊を読む２（昼間の行動）2024-03-03
テーマ株投資（１か月目）2024-03-01
JavaScript で「もし」１2024-02-29
JavaScript で変数３2024-02-27
「睡眠」本６冊を読む１（理論）2024-02-25
JavaScript で変数２2024-02-23
テーマ株投資（第３週目）2024-02-22
JavaScript でヘンな数2024-02-20
「メモ」本６冊を読む２（メモの方法）2024-02-18
テーマ株投資（第２週目）2024-02-16
JavaScript で足し算2024-02-14
「メモ」本６冊を読む１（メモの意義）2024-02-12
テーマ株投資（第１週目）2024-02-09
JavaScript で「こんにちは世界」2024-02-09
「コーチング」本６冊を読む2024-02-06
はじめてのテーマ株投資2024-02-01
JavaScript とは2024-01-30
「怒り」「アンガーマネジメント」本７冊を読む2024-01-27
JavaScript を始めてみる2024-01-22
初めての自動給水器2024-01-21
「ブランディング」本６冊を読む2024-01-20

手習い日記帳

１　準備

HTML

ブラウザ

HTML の一部

ブラウザ

HTML の一部

ブラウザ

２　多次元配列のしくみ

HTML の一部

HTML の一部（宣言の部分から続けて入力）

ブラウザ

HTML の一部（宣言の部分から続けて入力）

ブラウザ

HTML の一部（宣言の部分から続けて入力）

ブラウザ

HTML の一部（宣言の部分から続けて入力）

ブラウザ

HTML の一部（宣言の部分から続けて入力）

ブラウザ

３　次回

カテゴリー

更新記事

タグ

JavaScript で配列 ２

１ 準備

HTML

ブラウザ

HTML の一部

ブラウザ

HTML の一部

ブラウザ

２ 多次元配列のしくみ

HTML の一部

HTML の一部（宣言の部分から続けて入力）

ブラウザ

HTML の一部（宣言の部分から続けて入力）

ブラウザ

HTML の一部（宣言の部分から続けて入力）

ブラウザ

HTML の一部（宣言の部分から続けて入力）

ブラウザ

HTML の一部（宣言の部分から続けて入力）

ブラウザ

３ 次回

カテゴリー

更新記事

タグ

JavaScript で配列２

１　準備

２　多次元配列のしくみ

３　次回