プログラミング入門 ⑥条件分岐。if文について

プログラミング入門

今回はプログラミングの基本である
条件分岐について学んでいきます。

条件分岐はif文を使う

条件分岐とはなにか?
もし**の場合、○○という処理をして、
それ以外の場合、××という処理をする、
・・・みたいなことをプログラムでやることです。

プログラミングの場合は「変数」を頻繁に使うので、
変数が3より大きい場合、○○という処理をして、
それ以外の場合、××という処理をする・・・みたいになります。

これには「if」というのを使って、
以下のように書きます。

if (条件文) {

	(処理)

}

ifは英語で、日本語訳すると「もし」ってやつですね。
プログラミング言語は外人が作っただけあって、
それっぽいワードが使われていることがよくあります。

加えて、「else」を使うことで、
条件に該当しない場合の処理を書くことができます。

if (条件文) {

    (処理)

}
else {

    (処理)

}

さらに「else if」を使って、
複数の条件を繋げていくこともできます。

if (条件文) {

    (処理)

}
else if (条件文) {

    (処理)

}
else {

    (処理)

}

そんでもって、「条件文」はだいたい変数を使って書くもので、
以下のような例があります。
※変数名を「x」とした場合

x == 5  xと5が一致した場合
x != 5 xと5以外だった場合
x > 5 xが5より大きい場合
x < 5 xが5より小さい場合
x >= 5 xが5以上の場合
x <= 5 xが5以下の場合

注意点として、一致を判定する場合は「x = 5」じゃないので注意してください。
C言語から続いてる仕様ですが、とても間違えやすいです。

if文を使ったサンプルプログラム

さて、ここでサンプルプログラムを提示してみます。

◆サンプル6-1

<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル6-1</title>
<script type="text/javascript"><!--

function sampleExecute() {

	var inputValue = document.getElementById("inputText").value;

	document.getElementById("resultArea").style.display ="block";

	var output = document.getElementById("outputArea");
	
	if (inputValue == "" ) {
		
		output.innerHTML = "値を入力してください。";
		return
		
	}
	
	if (isFinite(inputValue) == false ) {
		
		output.innerHTML = "数値以外が入力されています。";
		return
		
	}
	
	if (inputValue > 100) {
	
		output.innerHTML = "100より大きな数です。";
	
	}
	else if (inputValue == 100) {
	
		output.innerHTML = "ちょうど100の数値です。";
	
	}
	else {
	
		output.innerHTML = "100より小さな数です。";
	
	}

}

// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル6-1</h2>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;"  >
<h3>数値を入力してください</h3>
<input id="inputText" size="20"><br><br>
<input type="button" value="実行" onClick ="sampleExecute()"><br>
<div id="resultArea" style="display:none"><h3>~実行結果~</h3>
<span id="outputArea"></span></div>
</div>
</center>
</body>
</html>

ソースを見て結果がどうなるか大体分かるでしょうか?
100より小さい数、100、100より大きい数をそれぞれ入力してみてください。
(あと、数値以外の入力にも対応しています。)

上記のソースでは、「return」とか、
「isFinite(inputValue)」というのも使っています。
returnは処理を終了させる時に使うものです。
あと、isFiniteは値が数値かどうかチェックするものです。

それから、if文を使って試しにちょっと面白いものを・・・
ということで以下のものを作ってみました。

◆サンプル6-2

<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル6-2</title>
<script type="text/javascript"><!--

var monsterHP = 100;
var hiroAttack = 23;

function sampleExecute() {
	
	var output = document.getElementById("outputText");
	
	if (monsterHP > 0) {
	
		output.innerHTML += "<br>";
		output.innerHTML += "勇者の攻撃!";
		
		monsterHP = monsterHP - hiroAttack;
		
		if (monsterHP > 0)
		{
		
			output.innerHTML += "<br>";
			output.innerHTML += "一つ目おばけにダメージを与えた! 残りHP:" + monsterHP;
		
		}
		else
		{
		
			output.innerHTML += "<br>";
			output.innerHTML += "一つ目おばけにダメージを与えた!"
			output.innerHTML += "<br>";
			output.innerHTML += "一つ目おばけを倒した!"
			
			document.getElementById("monster").style.display ="none";
		
		}
		
	}
	
}

// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル6-2</h1>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;" >
<div style="width:200px;height:200px">
<img border="0" id="monster" alt="" src="https://promitheus.net/program/img/monster01.png" width="200" height="200"></div><br>
<input type="button" value="攻撃!" onClick ="sampleExecute()"><br><br>
<div id="messageArea" style="width:400px;padding-bottom:18px;padding:18px;background-color:black;color:white;border-radius:7px">
<span id="outputText">一つ目おばけがあらわれた。 残りHP:100<span>
</div>
</div>
</center></span></span>
</body>
</html>

上記のコードでは「sampleExecute()」の外にも変数があります。
説明していませんでしたが、Javascriptはこうしたことも可能です。

あと、「+=」を使って「文字を追加で表示する」ことをしています。
それから、”<br>”はHTMLだと「改行」を意味します。
ただ文字を追加するだけだと改行がされないので、改行したい場合は”<br>”を挟む必要があります。

以上のソースコードで、
「monsterHP」の値や「hiroAttack」の値を変更して動かしてみたり、
HPが40以下の時は「モンスターは弱ってきた」みたいに
新たなメッセージを追加してみても良いでしょう。

Challenge
  • モンスターのHPや攻撃時の値を変更して動かしてみよう
  • 残りHPが少ない時「モンスターは弱ってきた」みたいなメッセージを表示させてみよう

以上のようにゲームみたいなプログラムでもif文が使われるので、
これがプログラミングの基本ということが分かったでしょうか?

「switch」を使うという手段もある

条件分岐の方法で「if」について説明しましたが、
以下みたいな書き方もあります。

◆サンプル6-3

<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル6-3</title>
<script type="text/javascript"><!--

function sampleExecute() {

	var inputValue = document.getElementById("inputText").value;

	document.getElementById("resultArea").style.display ="block";

	var output = document.getElementById("outputArea");
	
	if (inputValue == "" ) {
		
		output.innerHTML = "値を入力してください。";
		return
		
	}
	
	if (isFinite(inputValue) == false ) {
		
		output.innerHTML = "数値以外が入力されています。";
		return
		
	}
	
	switch (inputValue) {
		case "1":
			output.innerHTML = "1を漢字で書くと「壱」。";
			break;
		case "2":
			output.innerHTML = "2を漢字で書くと「弐」。";
			break;
		case "3":
			output.innerHTML = "3を漢字で書くと「参」。";
			break;
		default:
			output.innerHTML = "1でも2でも3でもない数値が入力されました。";
			break;
	}

}

// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル6-3</h2>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;"  >
<h3>1か2か3を入力してください</h3>
<input id="inputText" size="20"><br><br>
<input type="button" value="実行" onClick ="sampleExecute()"><br>
<div id="resultArea" style="display:none"><h3>~実行結果~</h3>
<span id="outputArea"></span></div>
</div>
</center>
</body>
</html>

以上のソースでは「switch」というのを使っています。
変数「inputValue」の値が「1」の場合、○○の処理を行う
「2」の場合、××の処理を行う
「3」の場合、△△の処理を行う
それ以外の場合は、□□の処理を行う
・・・といった内容の処理です。

こうしたswitch文と言われるものも、
条件分岐のもう一つの手段として使うことができます。

先ほどの処理は、if文で書くと以下のようになります。

◆サンプル6-4

<script type="text/javascript"><!--

function sampleExecute() {

	var inputValue = document.getElementById("inputText").value;

	document.getElementById("resultArea").style.display ="block";

	var output = document.getElementById("outputArea");
	
	if (inputValue == "" ) {
		
		output.innerHTML = "値を入力してください。";
		return
		
	}
	
	if (isFinite(inputValue) == false ) {
		
		output.innerHTML = "数値以外が入力されています。";
		return
		
	}
	
	if (inputValue == "1") {
		output.innerHTML = "1を漢字で書くと「壱」。";
	}
	else if (inputValue == "2") {
		output.innerHTML = "2を漢字で書くと「弐」。";
	}
	else if (inputValue == "3") {
		output.innerHTML = "3を漢字で書くと「参」。";
	}
	else {
		output.innerHTML = "1でも2でも3でもない数値が入力されました。";
	}

}

// --></script>

以上のように、「else if」で繋げていけば同様の処理ができます。

「else if」で繋げていけば同様の処理ができる・・・ということは、
極論を言うと、すべてif文を使えばswitch文はいらないのでは?
という意見がありそうですが・・・

恐らくその通りです。

まぁこれはこうしないと処理に問題が起きるというより、
ソースコードの読みやすさの問題になります。
仕事でプログラミングをしていると、
こうして「列挙」するように条件分岐するシーンというのはあるので、
自分はそういう場合はちゃんとswitchを使ってました。

なので、それぞれif文という手段と、
switch文という手段があるということを覚えておいて、
条件分岐を使っていきましょう。
 

まとめ
  • 条件分岐にはif文を使う
  • 条件に該当しない場合の処理はelse内に書く
  • else ifで条件を追加することが可能
  • switch文というのもある

 

プログラミング入門 ⑦条件分岐の話の続き。複数条件指定について
前回は条件分岐の話をしていきました。 一通りの話をしていきましたが、まだやっていないことがあるので、 今回は前回の話の続きです。 if文は以下のように書くと説明しました。 if (条件文) { (処理) } ここで、...

コメント