二次元配列であいうえお - 猫と遊ぶ　見習いプログラマーの備忘録

参考書の二次元配列の書き方見てたら、

「お、あいうえおの表作れるかも…！」

と思ってしまったので、書いてみる💡

とりあえず、いいなと思ったものはどんどん試す（笑）

こないだは九九の表だったからな～

で、あいうえおの表を書いてみると、できました！

f:id:msm20-chocolateee:20180914164755p:plain

じゃん

いいかんじです♪
シンプルイイネ✨

ソースコードはこちら。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <style>
    table {
      border-collapse: collapse;
    }

    td {
      width: 50px;
      height: 50px;
      border: solid 1px;
      text-align: center;
    }
  </style>
  <title>あいうえお</title>
</head>

<body>
  <table id="aiueoTable"></table>
  <script>
    var array = [
      // イメージをそのままってかんじ
      ["わ", "ら", "や", "ま", "は", "な", "た", "さ", "か", "あ"],
      ["　", "り", "　", "み", "ひ", "に", "ち", "し", "き", "い"],
      ["を", "る", "ゆ", "む", "ふ", "ぬ", "つ", "す", "く", "う"],
      ["　", "れ", "　", "め", "へ", "ね", "て", "せ", "け", "え"],
      ["ん", "ろ", "よ", "も", "ほ", "の", "と", "そ", "こ", "お"],
    ];
    var aiueo = document.getElementById("aiueoTable");
    // まずは縦の行から作っていく
    for (var tate = 0; tate < 5; tate++) {
      var row = aiueo.insertRow(-1);
      // 次に横の列を作っていく
      for (var yoko = 0; yoko < 10; yoko++) {
        var cell = row.insertCell(-1);
        cell.textContent = array[tate][yoko];
      }
    }
  </script>
</body>

</html>

JavaScriptのプログラムにより、一発であいうえおの表ができました。