JavaScriptさわってみる12回目(((´・ω・｀))) 多重ループと多次元配列、表作成

こんにちは。

ひっさしぶりの”JavaScriptさわってみる企画"です。

前回、アイテムの組み合わせを考える記事を書いて、それをリスト化するってことでEXCELのVBAコードを急に載せたのですが折角だからEXCELを持ってない人でも使えるようにJavaScriptで作ってみようかと思いました(ページは作成中)。

前回の記事↓

JavaScriptさわってみる企画では前回の記事のVBAでやっているような多重ループを用いたことがなかったと思うので先にメモ書きを作っておこうと思います。

それに加えてJavaScriptでは表を作成する必要があるので値を管理しやすくするために多次元配列についても書いておきます。

※この記事は初心者が勉強しながら書きとめるメモ書きなので間違いを含んでいる場合があります。ご了承ください。

多重ループ

まず多重ループですがループの中にループを作ったものを二重ループと呼びます。例えば行を作成するループ文の中に列を作成するループ文を入れると行ごとに列が作成されるので表が作れる、という感じに使うことができます。

例として表を作成するJavaScriptを書いてみますがそのまえにHTMLで表を作るとどうなるかというと…↓

<table border = 1>
    <tr>
      <th>列１</th>
      <th>列２</th>
    </tr>
    <tr>
      <td>中身(1,1)</td>
      <td>中身(1,2)</td>
    </tr>
    <tr>
      <td>中身(2,1)</td>
      <td>中身(2,2)</td>
    </tr>
</table>

上のHTMLで表示されるのはこれ↓

列１	列２
中身(1,1)	中身(1,2)
中身(2,1)	中身(2,2)

行がtrタグ、列１，列２と書いてあるところは見出し行で列がthタグ。データ行の列はtdタグですね。

これを踏まえ、同じ表を作るJavaScriptコードを書いてみます。

二重ループサンプル(表作成)↓

<div id="tableContainer"></div>
<script>
function createTable() {
    let rows = 2;
    let columns = 2;     
　　
　　//HTMLコードを文字列として格納する変数
    let table = '<table>';

    // 見出し行
    table += '<tr>';
    for (let j = 0; j < columns; j++) {
      table += '<th>列' + (j + 1) + '</th>';
    }
    table += '</tr>';

    // データ行
    for (let i = 0; i < rows; i++) {
      table += '<tr>';
      for (let j = 0; j < columns; j++) {
        table += '<td>' + '中身(' + (i+1) + ',' + (j+1) + ')</td>';
      }
      table += '</tr>';
    }

    table += '</table>';
    
　　//HTMLを差し替え
　　document.getElementById('tableContainer').innerHTML = table;
}
</script>

tableという変数に '+=' という演算子を使って文字列をどんどん書き加えていき、最終的にさっきのHTMLコードと同じものが出来上がるようになっています。

最後のdocument.getElementById～のコードによって作成したHTMLコードがid='tableContainer'のdivタグ箇所(先頭行)に置かれ表が表示されます。

//データ行というところの下を見ると行を作成するfor文の中に列を作成するfor文があり、行ごとにすべての列を作成することで表ができあがるっていう仕組みになっていることがわかります。

このコードはlet rows = 2; がデータ行の行数、let columns = 2；がデータ行の列数に
なっているので数字を変えると表の行と列の数を変えることができるのですがこれは行×列の回数の繰り返し(二重ループ)を使っているからこそできることです。

多次元配列
次に配列ですが二次元配列は複数データを表のようなイメージで管理できるようになります。
表に入れたいデータを普通の配列で管理するとき、
dataArray = ['中身(1,1)','中身(1,2)','中身(2,1)','中身(2,2)',…]
と格納していたら行2列1のデータはdataArr(3)ですが、
じゃあ行△列〇のときは？ってなったら「えーっと…」ってなりますよね。

二次元配列を使うとこのように整理できます↓

dataArray[0][0] = '中身(1,1)';
dataArray[0][1] = '中身(1,2)';
dataArray[1][0] = '中身(2,1)';
dataArray[1][1] = '中身(2,2)';
…

これなら行△列〇のときdataArr[△-1][〇-1]と即答できます。

データを格納するときも二重ループを使ってすっきり書けます↓

let rows = 2;
let columns = 2;
let dataArray =[];
for (let i = 0; i < rows; i++) {
    dataArray[i] = [];
    for (let j = 0; j < columns; j++) {
	dataArray[i][j] = '中身(' + (i+1) + ',' + (j+1) + ')';
    }
}

ちなみにJavaScriptで多次元配列の宣言っていうのは無いみたいで普通の配列の宣言を行った後、初期値を入れるようにするっぽい。

表のデータを扱うなら二重ループと二次元配列を使うのが(おそらく)一般的。
さらに多重ループ、多次元配列を使えば複雑で膨大なデータを整理できるってわけです。

メモ書き終わり。近日中にリスト作成ページを完成させます。