この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Webプログラミング講座初級 第三回 おみくじの結果を表示する

前回は乱数を使いランダムな値を取り出す処理を学びました。今回はおみくじの結果を表示する処理です。

おみくじの種類の大吉、中吉、小吉、凶の4種類とします。
乱数はおみくじの種類が4種類なので4とします。
乱数を変数「$result」に代入します。前回は変数名に「$zeto2one」としていましたが、今回は0か1ではなく、今後おみくじの種類が増えることを考えて汎用的な変数名としています。自分が分かりやすい変数名にしましょう。

$result = Math.floor( Math.random() * 4 );

これで「$result」には0、1、2、3、4のいずれかの値が入ります。
ここで1~5ではないのか? と疑問に思われる方もいると思いますが、プログラミングでは始まりの数は1ではなく0として扱われることが多いので注意して下さい。

次に「$result」の値を条件判定して結果を振り分ける処理です。
条件判定には「if文」を使います。

$result = Math.floor( Math.random() * 4 );

if( $result == 0 )
{
	$omikuji = "大吉です";
}
else if( $result == 1 )
{
	$omikuji = "中吉です";
}
else if( $result == 2 )
{
	$omikuji = "小吉です";
}
else if( $result == 3 )
{
	$omikuji = "凶です";
}
else
{
	$omikuji = "?です";
}

「if文」の書式は以下のようになっています。

if( 式 ) { 処理; }
else if( 式 ) { 処理; }
else( 式 ) { 処理; }

括弧で式を評価して、ブレス括弧で処理を書きます。

条件がひとつだけの場合はif文は一段で済みますが、複数の条件がある場合は、二つ目からは「else if(または、もし)」と続けます。
「else」はどの条件にもあてはまらない例外的な条件の時に実行されます。
「else文」がないと条件にあてはまらない時にはなにもしませんが、「else文」を付けておくと「if文」または「else if文」に当てはまらない時に必ず実行されるという違いがあります。

今回「else文」は必要なかったのですが、おみくじの種類だけ増やして条件式を増やし忘れた場合のことを想定して追加してみました。

次に、式の評価についてです。「$result == 0」とありますが、これは「$result」の中身が「0」と等しいなら、という意味となります。「==」のような記号を比較演算子と呼びます。
もし「$result」の中身が「abc」であるならば、文字列なので「$result == “abc”」または「$result == ‘abc’」二重引用符または一重引用符で囲みます。これは変数とただの文字列を区別するためです。数字以外の文字列はとにかく引用符で囲むと覚えておいて下さい。

評価するための比較演算子は以下のものがあります。

等しい $A == $B AはBと等しい
等しい $A === $B AはBと型も等しい
等しくない $A != $B AとBは等しくない
等しくない $A !== $B AとBは型も等しくない
以上 $A >= $B AはB以上
以下 $A <= $B AはB以下
大なり $A > $B AはBより大きい
小なり $A < $B AはBより小さい

8種類ほどしかないので簡単ですね。

処理の「$omikuji = “大吉です”;」は変数「$omikuji」にテキストを代入しています。簡単ですね。
「$result」を条件判定すると、変数「$omikuji」にはなんらかのテキストが入る、という流れです。

次に変数「$omikuji」のテキストを表示する処理です。

今まではページを開いただけで処理がスタートしていましたが、処理のタイミングをおみくじボタンを押した時にしてみます。
おみくじボタンはHTMLで作ります。ボタンがクリックされたらという処理はjQueryを使います。
以下のような形で作ります。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>おみくじ2</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="ja" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/" />
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

	</head>

	<body>

	<h1>おみくじ2</h1>
	<br />
	<input id="getFortune" type="button" value="おみくじ!"><br />
	<br />
	<div id="result">結果はここに出ます</div>

	<script type="text/">

		//スクリプトが全て読み込まれたら実行
		$( function() {

			//ボタンがクリックされたら
			$( "#getFortune" ).click( function(){

				//処理;

			});

		});

	</script>

	</body>

</html>

解説をすると以下の部分はスクリプト(Webページ)が読み込まれたら実行するための処理です。JavaScriptはファイルサイズが大きくなってくると読み込みが遅れる場合があります。ユーザーがJavaScriptが読み込まれる前に実行するとエラーとなるため、JavaScriptが読み込まれたら実行するようにしています。この処理は定型なので覚えておくと便利です。

//スクリプトが全て読み込まれたら実行
$( function() {

	//ボタンがクリックされたら
	$( "#getFortune" ).click( function(){

		//処理;

	});
});

次にボタンがクリックされたらという処理です。jQueryを使っているので非常に処理が簡単になりました。
「#getFortune」というのがミソです。これはセレクタと呼ばれるもので、HTMLの部品に名前を付けておくと、その名前を指定することで処理できます。

セレクタというのは選択肢という意味で、HTMLのどこの何をどうしたかを選択するために用意された手段です。部品に名前が付いていれば解り易いね、というわけです。

話は戻って「#getFortune」というのはボタンに付けられた名前です。

<input id="getFortune" type="button" value="おみくじ!">

CSSを知っている人にはお馴染みですが、HTMLにIDを付けると「#名前」でアクセスできるようになります。
IDというのはHTMLファイル内で一つしかつけることができません。同じものがあってはいけないのです。
今回「おみくじ」というボタンは1つしかないのでIDを付けることができます。
しかし、画像がたくさん表示されるような仕組みで、いくつあるかわからない場合はIDは使えません。
そんな時はクラスを使います。クラスは「class = “クラス名”」で指定し、「.クラス名」でアクセスできます。

<input id="getFortune" type="button" value="おみくじ!">

をクラスで書き換えるとこうなります。

<input class="getFortune" type="button" value="おみくじ!">

ちょっとだけ違いますね。jQueryのセレクタの指定もこうなります。

//ID版 ボタンがクリックされたら
$( "#getFortune" ).click( function(){

	//処理;

});
//クラス版 ボタンがクリックされたら
$( ".getFortune" ).click( function(){

	//処理;

});

違いは「#」「.」だけですね。
「スクリプトが読み込まれ、ボタンがクリックされたら」という処理を合体させるとこうなります。

//スクリプトが全て読み込まれたら実行
$( function() {

	//ボタンがクリックされたら
	$( "#getFortune" ).click( function(){

		//処理;

	});

});

「//処理;」の部分には先ほどのおみくじの判定処理を追加します。

//スクリプトが全て読み込まれたら実行
$( function() {

	//ボタンがクリックされたら
	$( "#getFortune" ).click( function(){

		$result = Math.floor( Math.random() * 4 );

		if( $result == 0 )
		{
			$omikuji = "大吉です";
		}
		else if( $result == 1 )
		{
			$omikuji = "中吉です";
		}
		else if( $result == 2 )
		{
			$omikuji = "小吉です";
		}
		else if( $result == 3 )
		{
			$omikuji = "凶です";
		}
		else
		{
			$omikuji = "?です";
		}

	});

});

これでボタンがクリックされたら乱数が作られ、条件判定でおみくじがセットされます。
しかし、これだけでは未完成です。おみくじの結果をユーザーに表示する処理がないからです。

おみくじの結果をユーザーに表示するにはjQueryを使います。
任意の場所にテキストを表示するには以下のようにします。

$( セレクタ名 ).text( “テキスト” );

「.text」とあるように、指定したセレクタにテキストを表示します。他にもいろんな機能がありますが、今はこれだけ説明しておきます。

$( '#result' ).text( $omikuji );

とすれば「result」と付いたHTMLパーツにテキストが表示できます。

例えば、レイアウトのタグとしてよく使われる「<div>にテキストを表示したい場合はこのようにHTMLを書いておきます。

<div id="result">結果はここに出ます</div>

すると「結果はここに出ます」というテキスト文字列がおみくじに変換されるという仕組みです。
以上を全部合体させるとこうなります。

関連記事