テーブル要素を使った九九表の作り方に関する質問

Question

学校のプログラミング課題で、
JavaScriptのfor文を使って
九九表を完成させろというものがありました。

<script>

    document.write("<center>"); 
    document.write("<h1>九九の表</h1>");
    document.write("<table border>"); 

    for( let i=1; i<=9; i++){   
      document.write("<tr>");
      for(let j=1; j<=9; j++){
        document.write("<td>",i*j,"</td>");
      }
      document.write("</tr>");
    }
    document.write("</center>");
    document.write("</table border>");
</script>

九九を作る時、
for文の中にfor文を書くという
発想は分かるのですが、

上記のコードを見て、
1回目のfor文の中の処理に<tr>と書くだけで
ループしてるiの中身が表示される
理由がよく分かりません。
私は、document.write("<tr>${i}</tr>");
と書くのかなと思いました。

また、1〜9のループを作る箇所は、
縦列1〜9、横列1〜9の二箇所あると思ったのですが、なぜ1〜9を一個作るだけで 縦と横の端っこの列に両方表示されるんですか？

2回目のfor文のループで

<td>の中(つまりセルの中)に i *jの結果を挿入するのは分かるんですが、 それ以外が全体的によく分かりません。

大変初歩的な質問をして申し訳ないのですが、初心者のため、平易な言葉でご説明していただけると、とてもありがたいです。

よろしくおねがい致します。

Answer 1

1回目のfor文の中の処理に<tr>と書くだけで
ループしてるiの中身が表示される
理由がよく分かりません。
私は、document.write("<tr>${i}</tr>");
と書くのかなと思いました。

最終的に出力しようとしている、テーブルの記法を正確に理解出来ていないんだと思います。
この課題ではJavaScriptはあくまで目標のHTMLを出力するための手段なので、ゴールとなるHTML(tableタグで記述された九九の表)を把握していることが大前提です。

まずはJavaScriptを使わずにテーブルを自力で書いてみることを強くお勧めします。

また、1〜9のループを作る箇所は、
縦列1〜9、横列1〜9の二箇所あると思ったのですが、なぜ1〜9を一個作るだけで 縦と横の端っこの列に両方表示されるんですか？

行(横列)を9個縦に並べているので、自動的に縦列も作られるためです。
二箇所に分けて記述することも可能ですが、複雑な記述になります。

Comments

[ayaChi]

昨日、テーブルについて勉強しました。テーブルを自分で書いたことがありませんでしたので。提言してくださって、ありがとうございました。勉強になります。

また、縦列を書いたら横列が自動的に作られるというのがあまり理解できなかったのですが、一体どういう仕組みになっているのでしょうか。

もしご存知でしたらご教示いただけると、ありがたいです。

[tanat]

>また、縦列を書いたら横列が自動的に作られるというのがあまり理解できなかったのですが、一体どういう仕組みになっているのでしょうか。

今回の場合は逆です。
行（横列）を積み重ねるとその厚みが列(縦列)になるよね。ということです。

これはhtmlは関係の無い単純な話で、例えば1から9の数字で構成される3x3の表を書くときは
一行目
123
二行目
456
三行目
789

と、書いて行ごとに書くと三行目を書き終わったタイミングでは結果として
123
456
789
という表が出来上がります。

行しか書いていないのに、
147,258,369という列も出来ています。

Answer 2

念の為、for文の中にfor文を書いた時の動作の確認をしておきます。

for文1つ目開始
1周目: i=1
  <tr>を表示
  for文2つ目開始
  1周目: j=1
    <td>i*j</td>を表示
  2周目: j=2
    <td>i*j</td>を表示
  ...9周目まで繰り返し(省略)
  for文2つ目終了
  </tr>を表示
2周目: i=2
  <tr>を表示
  for文2つ目開始
  1周目: j=1
    <td>i*j</td>を表示
  2周目: j=2
    <td>i*j</td>を表示
  ...9周目まで繰り返し(省略)
  for文2つ目終了
  </tr>を表示
...9周目まで繰り返し
for文1つ目終了

以上で合計9×9の81回<td>i*j</td>が表示されます。

それでは、プログラムを実行して表示されるHTMLの完成図を見てみましょう。

<center>
<h1>九九の表</h1>
<table border>
<tr><td>1*1</td><td>1*2</td><td>1*3</td>... </tr>
<tr><td>2*1</td><td>2*2</td><td>2*3</td>... </tr>
<tr><td>3*1</td><td>3*2</td><td>3*3</td>... </tr>
...
</table border>
</center>

これで察しが付けば感が鋭いです。

横方向は 11=1、12=2、13=3、... だから1～9が並び、
縦方向は
11=1
21=2
31=3
...
だから1～9が並ぶのです。

<tr>と書いたからではなく、<td>i*j</td>の結果1～9が並んだわけです。 (<tr>は表を表示する上で1行ずつをまとめるために使われているだけです。)

---

追記: 本題に比べて些細なことですが、修正箇所があります

1. </center>の場所が違います。正しくは</table>の下です。

なぜか?: <center><table></table></center>とtableを囲っていなければいけないから
2. </table>の閉じタグにborderは不要です

正しくは下のとおりです。

<script>
     document.write("<center>"); 
     document.write("<h1>九九の表</h1>");
     document.write("<table border>"); 

     for( let i=1; i<=9; i++){   
          document.write("<tr>");
            for(let j=1; j<=9; j++){
                  document.write("<td>",i*j,"</td>");
             }
          document.write("</tr>");
       }
     document.write("</table>");
     document.write("</center>");
</script>

Comments

[ayaChi]

分かりやすい解説ありがとうございます。

for文の中のループを書いてくださったことで頭が整理されました。

ひとつ気になったのですが、
2回目の繰り返し文の中の処理を
document.write("<td>i *j</td>")
とすると、
正しい結果は得られませんでした。
カンマで必ず区切らなければいけないものなのでしょうか…。

[HAC]

はい、この区切りは必要です。

"" で囲って "<td>"と書くと、文字列とみなされ、そのまま出力され、
"" で囲わずに i*j と書くと、変数を使った計算が行われ、その計算結果が出力されます。

"<td>i*j</td>"とすると、ひとまとめの文字列とみなされて計算が行われません。
i*j i*j i*j ... という感じに文字が表示されてしまったはずです。

文字列と計算部分は分けて書きましょう

[ayaChi]

解説ありがとうございます。

"<td>",i *j,"<td>"だと、
" "で囲った中身が出力されるのかと思っていましたが、< >で囲われたものは、なにかしらのタグと見なされて 文字列だけど表示されないということでしょうか…。で、数値のi *jのみ出力されるということですかね…！
例えばなんですけど、
`<td>${i *j}</td>`と書いても問題ないですか？

重ね重ねすみませんが、
いま思ったのですが、
私が最初にあげた書き方だと
九九の表の1の段にあたる
部分がないなと思ったのですが、
例えば下記のような表にするとしたら

[] 1 2 3 4 ...
1 1 2 3 4 ...
2 2 4 6 8 ...
3 3 ...

(空白)を最初のマス(td)に手動で
表示させて、1〜9のループ(カウンター変数i)を一列目につくって

そのあとの1〜9列(カウンタ変数jとする)の縦行(tr)を作るループのうしろに tdをi *jの形で表示したらいいのかな、、って思ったのですが、どう思われますか、、？

上手に説明出来てなくてすみません。
さきに示した表のように書くための
効率的なプログラムがあれば、
お手数ですが 教えていただけませんか。

[x_x]

すみません、直接の回答ではないのでここにぶら下げさせてください
「HTML5」タグが付いていますが、HTML5 では center 要素は削除済みです。
出力場所を修正するよりも、出力しないようにしましょう。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/center

[HAC]

>ayaChiさま
javascriptの基礎の理解はされていたみたいですね。
文字リテラルを使って`<td>${i *j}</td>`と書いても大丈夫です。

> < >で囲われたものは、なにかしらのタグと見なされて...
はい、HTMLのタグとみなされて文字列としては表示されません。
「JavascriptがHTMLを生成」→「ブラウザがHTMLを解釈」→「表示」
という形なので、HTMLタグは直接表示には現れません。

<td></td>は表のセルを表すタグです。tableタグについて押さえておられないよなので、どこかで勉強されたほうがよいと思います。

> 下記のような表にするとしたら
> [] 1 2 3 4 ...
> 1 1 2 3 4 ...
> 2 2 4 6 8 ...
> 3 3 ...
不親切ですみませんが、効率的でなくてもよいので、一度自分の手で作ってみることをおすすめします。
その方がfor文への理解が深まると思うので。

その上でわからないことがあれば再度新たな質問を立てるのがよいかと思います。