JavaScriptの九九表出力プログラム解説【JavaScript基礎講座】

2020年3月13日プログラム基礎JavaScript,プログラムサンプル

【初心者】JavaScriptで九九表を出力するプログラミングを解説【プログラミング初心者の入門講座】
【初心者】JavaScriptで九九表を出力するプログラミングを解説【プログラミング初心者の入門講座】

JavaScriptで九九表を出力するプログラミングの解説です。

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

JavaScriptで九九表のプログラミング

JavaScriptで九九表を出力するプログラミングの解説します。

2重ループを使いこなせるとプログラムできるロジックの幅が一気に増えます！

九九表出力で習得できること

  • 2重ループの制御
  • ループ内で処理の実行
  • JavaScriptでHTMLタグの追加

ぜひチャレンジしてください！

※今回はレイアウトの見た目を良くするために「Bootstrap」を使っています。あとHTMLタグの追加などを簡単に行えるように「JQuery」も使っています。

サンプルコード【JavaScriptで九九表を出力】

では、さっそくJavaScriptで九九表を出力するサンプルコードから紹介します。
(基本的にコピペで動くと思います。)

<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScriptで九九表</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	</head>
	<body>
		<h1>JavaScriptで九九表</h1>
		<table class="table table-bordered table-hover table-sm" style="text-align: center;">
			<thead class="thead-dark">
				<tr>
					<th>#</th>
					<th>1</th>
					<th>2</th>
					<th>3</th>
					<th>4</th>
					<th>5</th>
					<th>6</th>
					<th>7</th>
					<th>8</th>
					<th>9</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
		<script>
			for (var row = 1; row<=9; row++) {
				$('table').find('tbody').append('<tr><th>'+row+'</th></tr>');
				for (var column = 1; column<=9; column++) {
					var num = row * column;
					$('table').find('tbody').find('tr').eq(row - 1).append('<td>'+num+'</td>');
				}
			}
		</script>
	</body>
</html>

HTML部分の解説【JavaScriptで九九表を出力】

JavaScriptで九九表を出力するサンプルコードのHTML部分から解説をします。

細かく解説していきます！

文字コードを指定

HTMLのheadタグ内にmetaタグでcharset(文字コード)をUTF-8に指定します。

<meta charset="UTF-8">
metaタグでcharsetを指定する理由

metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。

BootstrapのスタイルシートをCDNで読み込む

Bootstrapを読み込んで見た目を良くします。
(使わなくても問題ないです。)

あとBootstrapをCDNで読み込むようにしています。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
CDNとは

Content Delivery Networkの略です。
リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
簡単にいうと「高速にリソース(CSSやJQuery)を外部サーバから取得できる」って感じです。

九九表を出力する要素を用意

HTMLの要素としてtableタグでテーブルを用意します。ここへJavaScriptで九九表を出力します。

<table class="table table-bordered table-hover table-sm" style="text-align: center;">
	<thead class="thead-dark">
		<tr>
			<th>#</th>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
			<th>5</th>
			<th>6</th>
			<th>7</th>
			<th>8</th>
			<th>9</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

JavaScriptで出力する際は、tableタグのtbodyタグという指定でtrタグやtdタグを出力します。

JQueryをCDNで読み込む

JavaScriptでHTMLタグの追加を簡単に行えるようにJQueryを読み込みます。Bootstrap同様にCDNで読み込みます。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

JavaScript部分の解説：【 JavaScriptでカレンダー出力】

JavaScriptでカレンダー出力するサンプルコードのJavaScript部分を解説します。

ここからが本番！１つ１つゆっくり理解できるよう解説していきます。

scriptタグを用意してJavaScriptのプログラムを始める

JavaScriptでプログラムコードを記述するためにscriptタグを記述します。

<script>
・・・
</script>

JavaScriptで九九表を出力する

HTMLへ九九表出力を行っていきます。

九九表出力は、９×９のテーブル構成になっているので「外側のループを９回」と「内側のループを９回」というように２重ループを行います。

for (var row = 1; row<=9; row++) {
	$('table').find('tbody').append('<tr><th>'+row+'</th></tr>');
	for (var column = 1; column<=9; column++) {
		var num = row * column;
		$('table').find('tbody').find('tr').eq(row - 1).append('<td>'+num+'</td>');
	}
}

このコードをもう少し細かく解説します。

内側のループ：九九表の行

for (var row = 1; row<=9; row++) {
}
  • var row=1;
    • 変数rowに行数を代入(初期値は1)
  • row<=9;
    • 変数rowに代入した行数が9行目になるまでループする
  • row++
    • ループ処理のたびにインクリメント(1プラス)する

tableタグへ1行追加

$('table').find('tbody').append('<tr><th>'+row+'</th></tr>');

tableタグへ1行追加し、行番号を書き込みます。

  • $('table’)
    • テーブルタグの
  • find('tbody’)
    • tbodyタグへ
  • append()
    • trタグで1行追加して、thタグで行番号を書き込む

外側のループ：九九表の列

for (var column = 1; column<=9; column++) {
}
  • var column=1;
    • 変数columnに列数を代入(初期値は1)
  • column<=9;
    • 変数columnに代入した列数が9列目になるまでループする
  • column++
    • ループ処理のたびにインクリメント(1プラス)する

2重ループの理解するコツは「表で考える」とイメージしやすくなります。
参照：繰り返し処理のループについて解説

九九を計算

var num = row * column;

行番号×列番号で九九を計算して、変数numへ代入します。

計算した九九をtableタグへ書き込む

$('table').find('tbody').find('tr').eq(row - 1).append('<td>'+num+'</td>');

計算した九九をtableタグの最終行へ書き込みます。

  • $('table’)
    • tableタグの
  • find('tbody’)
    • tbodyタグの
  • find(tr).eq(row – 1)
    • 行番号-1番目のtrタグの
  • append()
    • 計算した九九を書き込む

まとめ【JavaScriptで九九表を出力】

今回はJavaScriptで九九表出力をプログラミングしたサンプルコードを解説しました。

九九表出力プログラムでは、2重ループを習得するのに最適な練習問題でした。

九九表のポイント
  • 2重ループで九九を計算
  • 2重ループでテーブルの行と列を追加

九九表出力プログラムを終えた人へ

０から自分で同じような九九表出力プログラムを実装してみてください！
(写経だと自分の力になりにくいので)

他にも「forループの回数を増やして行や列の数を増量」したりカスタマイズすると理解が深まるのでおススメです。

最後まで読んでもらいありがとうございます。

＼プログラミングスクール受講メリット／

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

＼現役エンジニアによるサポート就職支援／
[ TechAcademy ]
の特徴・料金を確認
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト

2020年3月13日プログラム基礎JavaScript,プログラムサンプル

Posted by ユート