ywork2020.com

Title

javascriptで掛け算九九の処理をする

目次 (INDEX)

times tablesとは

times tablesとは掛け算九九のことです。

目次に戻る

このページの主旨と概要

このページではプログラミングの初歩としてプログラムで掛け算九九を処理するための方法と、 webページに出力するための表の要素について説明しています。

掛け算九九をHTMLで表示することは簡単です。 しかし簡単な文書である半面、綺麗に出力しようとするとタグは非常に混雑して見ずらいものとなります。 これをプログラムで出力することは、初めてプログラムを学ぶ人にとって非常に勉強になります。

このプログラムの大筋はjavascript以外の言語でコードを書いたとしても、方言は違えど、考え方は同じです。 javascriptのコードはプログラムの基礎であるBASICと非常によく似ています。このページが参考になって、 プログラミングの楽しさや有用性を理解していただければ、筆者としてはこの上なく嬉しく思います。

目次に戻る

プログラムをはじめる前に

まず、はじめにプログラムを使うことなくHTML文書だけで掛け算九九を表示してみたいと思います。

ここでは、それなりに見栄えよく掛け算九九を表示するために table (テーブル) 要素とtableに関連する最小限の要素を使うことにします。またデザインはstyle要素内に記述したCSSを使用します。

サンプルコード: CSS
<style>
	table{
		border: thin solid ##black;
		border-spacing: 0;
		width: 100%;
	}
	td{
		border: thin solid ##black;
		border-spacing: 0;
		padding-right: 1em;
		text-align: right;
	}
	tr:nth-child(1), td:first-child{
		background-color: ##lightpink;
	}
</style>
サンプルコード: HTML
<body>
	<table>
		<tbody>
			<tr><td> </td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
			<tr><td>1</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
			<tr><td>2</td><td>2</td><td>4</td><td>6</td><td>8</td><td>10</td><td>12</td><td>14</td><td>16</td><td>18</td></tr>
			<tr><td>3</td><td>3</td><td>6</td><td>9</td><td>12</td><td>15</td><td>18</td><td>21</td><td>24</td><td>27</td></tr>
			<tr><td>4</td><td>4</td><td>8</td><td>12</td><td>16</td><td>20</td><td>24</td><td>28</td><td>32</td><td>36</td></tr>
			<tr><td>5</td><td>5</td><td>10</td><td>15</td><td>20</td><td>25</td><td>30</td><td>35</td><td>40</td><td>45</td></tr>
			<tr><td>6</td><td>6</td><td>12</td><td>18</td><td>24</td><td>30</td><td>36</td><td>42</td><td>48</td><td>54</td></tr>
			<tr><td>7</td><td>7</td><td>14</td><td>21</td><td>28</td><td>35</td><td>42</td><td>49</td><td>56</td><td>63</td></tr>
			<tr><td>8</td><td>8</td><td>16</td><td>24</td><td>32</td><td>40</td><td>48</td><td>56</td><td>64</td><td>72</td></tr>
			<tr><td>9</td><td>9</td><td>18</td><td>27</td><td>36</td><td>45</td><td>54</td><td>63</td><td>72</td><td>81</td></tr>
		</tbody>
	</table>
</body>
  • <table>~</table> (表の基礎になるタグです。)
  • <tbody>~</tbody> (表の内容を包含するタグです。)
  • <tr>~</tr> (表の行を表すタグです。包含された要素は表の行として認識されます。)
  • <td>~</td> (表内のデータを表すタグです。)

123456789
1123456789
224681012141618
3369121518212427
44812162024283236
551015202530354045
661218243036424854
771421283542495663
881624324048566472
991827364554637281

HTMLとCSSだけで掛け算九九を作成するとHTMLのタグを書くことに苦労しました。 しかも、手打ちですので、例えば15段の掛け算をしようとしても拡張することも大変です。

次のセクションからはプログラムを使って掛け算九九を作成する方法を段階をおって説明していきます。

目次に戻る

プログラムでHTMLタグや文字を出力する。

ここではHTML文書の中にjavascriptのコードを記述して、そのプログラムでタグやテキスト、数値を出力する方法を見て下さい。

この出力の仕方は一つの方法であり、他の方法も沢山あります。 しかし、javascriptを初めて学ぶ人には、とても分かりやすいと思います。

ここでの出力には、Documentオブジェクトのwriteメソッドを使います。 Documentインターフェースにはdocument変数からアクセスします。

次にメソッドのお話しですが、メソッドはオブジェクトが持つ関数のことです。 関数は「関数名」の後に引数というものが必要です。これは「関数名」の後に () 括弧で括って表記します。

下記がwriteメソッドの構文です。
valueの部分に書き出したいテキストや数値を当てはめます。

document.write(value);
document.write(value, value, ...);
document.write(value + value + ...);

それでは次のコードで実際にいくつかの出力例を見て下さい。

サンプルコード: script
<body>
	<script>
		document.write(5+5, "カンマ区切り", 5*5, "<br>");
		document.write(5+5 + "+演算子で連結" + 5*5 + "<br>");
		document.write("<span style='color: red;'>要素内のテキスト</span>");
	</script>
</body>
  • 03: カンマ区切り (引数の値をカンマで区切って列挙しています。)
  • 04: +演算子 (引数の値を+演算子で連結しています。)
  • 05: 要素の出力 (引数にDOMStringを与え要素として出力しています。)
実行結果:

引数に与えた計算式は計算された結果が出力されます。 数値と文字のようにデータ型が違う値は+演算子を使うと連結されて出力されます。 また、文字型でHTMLタグを含めたテキストを与えることで要素として書き出すこともできます。

目次に戻る

for文: 繰り返し処理を行う

ここではプログラムの処理を繰り返しおこなう方法の1つとしてfor文に触れたいと思います。

for文は繰り返したい回数が決まっているときに使用する繰り返し制御文です。 この制御文は非常に使用頻度が高いので是非とも覚えていただきたいと思います。

サンプルコード: script
<script>
	for(let count = 1; count < 10; count++){
		document.write(count + ",");
	}
</script>
  • 02: let count = 1; (countという変数を宣言して1を代入しています。)
  • 02: count < 10; (countが10未満の場合、このfor文のブロックを繰り返します。)
  • 02: count++ (for文を1回処理する度にcountが+1されます。) インクリメント演算子といいます。
  • 03: 書き出し (count変数の値とカンマを書き出します。)
  • 04: } (for文の終りの閉じ括弧です。)
実行結果:

目次に戻る

for文: 繰り返し処理をネストする

ネストとは「入れ子」のことをいいます。 皆さんはロシアの マトリョーシカ という人形をご存じでしょうか? 人形が上下の半分で割れるようになっており、割った中には一回り小さな同じ型の人形が入っています。 また、その中の人形を割ると、その中にも一回り小さな人形が入っています。このような状態を入れ子といいます。

ここでは前のセクションで説明したfor文をネストして利用したプログラムを見て下さい。 掛け算九九は縦軸と横軸にある数字を掛けた答えが表のマスを埋めていきます。 for文をネストすることで、この掛け算の処理を簡単に実行することが可能になります。

サンプルコード: script
<script>
	for(let countX = 1; countX < 10; countX++){
		for(let countY = 1; countY < 10; countY++){
			document.write(countX * countY + ",");
		}
		document.write("<br>");
	}
</script>

for文の基本的な動作については前セクションを参照してください。

countX = 1 の状態でcountYは1~9までの値に変化します。 次にcountX = 2 の状態でcountYは、また同じように1~9までの値に変化します。 このようにcountXの値が1ずつ増える度にcountYは1~9までの値に変化します。 このcountXとcountYの値を掛け算することで掛け算九九の結果を求めています。

実行結果:

目次に戻る

まめ知識: メソッド記述を簡素化する

ここまでのセクションで使ってきたdocument.write()ですが、同じ長いコードを何回も記述するのは、 コードを書いている自分自身が疲れますし、コードの視認性も悪くなることがあります。

ここでは、よく使うメソッドを関数にしてコードの簡略化をしてみたいと思います。 これは次のセクションで利用していますので同じメソッドを少ないコードでスッキリさせていることが分かりやすいと思います。

サンプルコード: script
<script>
	const WRITE = str => document.write(str);
	WRITE("strの値");
</script>
  • 02: const WRITE (WRITEという定数を宣言しています。)
  • 02: = str => document.write(str) (strという変数をwrite()メソッドの引数にして関数としてWRITEに代入しています。)
  • 03: WRITE(str) (WRITE定数を使ってwrite()メソッドを実行しています。)
実行結果:

目次に戻る

まとめ: for文の入れ子でHTMLタグと九九の計算結果を出力する

それでは、まとめです。 ここでは以前のセクションまでで説明してきたことを使って掛け算九九をjavascriptで表示しています。

出来上がった九九の表はHTML文書だけで作ったものと変わりません。ただプログラムを使って必要なタグと計算結果を順番に 書き出しているだけです。ゆっくりとコードを確かめていただければ理解できると思います。

サンプルコード: CSS
<style>
	table{
		border: thin solid ##black;
		border-spacing: 0;
		width: 100%;
	}
	td{
		border: thin solid ##black;
		border-spacing: 0;
		padding-right: 1em;
		text-align: right;
	}
	tr:nth-child(1), td:first-child{
		background-color: ##lightpink;
	}
</style>
サンプルコード: script
<script>
	const WRITE = str => document.write(str);
	WRITE("<table><tbody><tr><td> </td>");
	for(let X = 1; X < 10; X++){
		WRITE("<td>" + X + "</td>");
	}
	WRITE("</tr>");
	for(let X = 1; X < 10; X++){
		WRITE("<tr><td>" + X + "</td>");
		for(let Y = 1; Y < 10; Y++){
			WRITE("<td>" + X * Y + "</td>");
		}
		WRITE("</tr>");
	}
	WRITE("</tbody></table>");
</script>
  • 定数 (WRITEという定数を宣言して関数としてdocument.write()の記述を簡略化しています。)
  • 変数 (XとYという変数を宣言してfor文で利用しています。)
  • 九九 (08:~14:行で掛け算九九の処理をしています。)
  • 04~06:と09: (1行目と1列目の掛け数の部分を書き出しています。背景色がピンクの部分のことです。)
実行結果:

目次に戻る