ywork2020.com

Title

Math オブジェクトのメソッドを利用して、おみくじツールを作成する

目次 (INDEX)

このページの概要と Math オブジェクトについて

Math (マス) という単語には数学という意味があります。

Math は、javascript のオブジェクトであり、私たちが学校で習う数学の分野の計算を得意とする、計算処理の専門オブジェクトです。

このページでは javascript の初心者向けのプログラムサンプルとして Math オブジェクトの random メソッド と floor メソッド を使った簡単な「おみくじツール」を作成しています。

このプログラムサンプルが、プログラミングの学習のきっかけとなり、プログラミングの面白さや、学習意欲の向上に役立ってくれると、 筆者としては嬉しく思います。

目次に戻る

おみくじツールの動作サンプル

このサンプルは、とてもシンプルです。 初めてプログラミングに挑戦する方にとっては、このようにシンプルなところから学習を始めていく方が良いと思いました。 よって、見た目は重視していませんので、ご了承ください。

おみくじ結果の画像

目次に戻る

作成の前準備

今回のサンプルでは html ファイルと同じフォルダ内に images フォルダを作成して、その中に png 形式の画像ファイルを6つ用意します。

ファイル名は [ omikuji-.png ] とします。

の部分には0から5の数字を当てはめてください。 ちなみに 5 のファイルは一番最初に表示される画像になり、0 から 4 のファイルが 「おみくじ結果」の画像ファイルとなります。

目次に戻る

サンプルコード

ここでは、サンプルのコードを掲載します。

HTML のコードと script のコードを分けて掲載していますが、同じドキュメントとして見てください。

サンプルコード: HTML
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>おみくじツール</title>
	</head>
	<body>
		<div><input type="button" value="おみくじを引く" onclick="funcOmikuji"></div>
		<div><img src="./images/omikuji-5.png" name="namOmikujiPNG" alt="おみくじ結果の画像"></div>
		<script>...</script>
	</body>
</html>
  • 08: input type="button" (入力要素です。 button 型はブラウザではボタンとして表示されます。 この要素には onclick という属性が付けてあります。 この属性の値には "funcOmikuji" と設定してあります。 この funcOmikuji は script で定義している関数の名前です。 つまり、この要素をクリックすると funcOmikuji 関数が実行されるという仕組みです。 )
  • 09: img src="ソース" (画像要素です。 src 属性の値に 画像ファイルの位置と名前をフォルダ名とファイル名の綴りで指定します。 詳しくは 絶対参照と相対参照 のページを参照してください。)
  • 10: script (プログラムを書くための要素です。 ... の部分に プログラムを記述します。 この部分の内容は 下記の サンプルコード: script に掲載しています。)
サンプルコード: script
<script>
	function funcOmikuji(){
		let numFile = Math.floor(Math.random()*5);
		document.images["namOmikujiPNG"].src = "./images/omikuji-" + numFile + ".png";
	}
</script>
  • 02-05: function funcOmikuji(){関数の処理} ( function とは関数のことです。ここでは、funcOmikuji() という名前の関数を作っています。 この funcOmikuji() 関数は HTML コードの 08 行目の input 要素 button 型がクリックされたときに呼び出されます。 つまり、ボタンがクリックされると関数が呼び出されて 関数の処理 の部分が実行されるという仕組みです。 )
  • 03: let numFile = Math.floor(Math.random()*5); numFile は変数の名前です。 let numFile とは numFile という名前の変数を宣言しています。

    = は代入演算子というもので = の右辺の値を左辺に代入するためのものです。 つまり、ここでは Math.floor(Math.random()*5) という計算処理の結果値を numFile という変数に代入していることになります。

    以下は Math.floor(Math.random()*5) の処理の内容です。
    1. Math.random() : random メソッドは 0 から 1 の範囲の乱数を取得します。
    2. Math.random()*5 : random メソッドの結果値に 5 という値を掛けています。これにより、0 から 5 までの実数値が得られます。 ようは 0 から 5 までの小数点付の値が得られるということです。
    3. Math.floor( 引数 ) : floor メソッドは 引数 に与えられた実数値を最小の整数値に変換することができます。
    結果として、Math.floor(Math.random()*5) は 0 ~ 5 の何れかの整数を返し、numFile に その結果値が代入されるという仕組みです。
  • 04: document.images["namOmikujiPNG"].src document プロパティ経由で images コレクションを使って namOmikujiPNG という name 属性値をもつ img 要素を取得しています。 これは HTML コードの 09 行目の要素のことです。 .src の部分は、09 行目の要素の src 属性の値という意味です。
  • 04: "./images/omikuji-" + numFile + ".png" これは img 要素の src 属性に代入するための値を設定しているところです。 ソースとなる画像ファイルまでフォルダ構成とファイル名を作成しているということです。

    ここでは、"./images/omikuji-" という文字列と ".png" という文字列の間に numFile 変数の値が入ります。 例えば numFile の値が 1 ならば、結果は "./images/omikuji-1.png" となります。

目次に戻る

おみくじプログラムの主要部分の説明とまとめ

  1. random メソッドで 0 から 1 の範囲の乱数を取得します。
  2. 上記の乱数に 5 を掛けると 0 から 5 までの乱数を得ることができます。( 画像ファイルが5つあるので )
  3. その乱数を floor メソッドで変換すると実質 0 から 4 まで整数が返るので、ファイル番号用の変数 ( numFile ) に代入します。
  4. 以下のコード、### の部分に画像ファイルのソースを "アドレス文字列" + numFile変数 + ".png" という具合に挟んで指定します。
document.images["name属性値"].src = ###

"name属性名" の部分に img 要素の name 属性の値が入っていることにも着目して下さい。

目次に戻る