今回はプログラミングの基本である
条件分岐について学んでいきます。
条件分岐は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文を使ったサンプルプログラム
さて、ここでサンプルプログラムを提示してみます。
<!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文を使って試しにちょっと面白いものを・・・
ということで以下のものを作ってみました。
<!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://raimuspace.com/prom/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以下の時は「モンスターは弱ってきた」みたいに
新たなメッセージを追加してみても良いでしょう。
- モンスターのHPや攻撃時の値を変更して動かしてみよう
- 残りHPが少ない時「モンスターは弱ってきた」みたいなメッセージを表示させてみよう
以上のようにゲームみたいなプログラムでもif文が使われるので、
これがプログラミングの基本ということが分かったでしょうか？
「switch」を使うという手段もある
条件分岐の方法で「if」について説明しましたが、
以下みたいな書き方もあります。
<!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文で書くと以下のようになります。
<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文というのもある
コメント