プログラミングのキホン、if文を使ってみよう！：初心者のためのJavaScript入門（4）（1/2 ページ）
前回の変数と関数に続いて、プログラミングの基本とも言える条件による処理の分岐ができるif文にチャレンジしてみよう！
前回の課題
第3回では、変数とfunction（関数）を使ったJavaScriptを覚えました。変数は何かを入れて名前を付けておけるマッチ箱のようなもの、関数は入り口から何かを入れると、出口から処理した結果が出てくるようなイメージでしたね。
まずは前回の課題の答えから見てみましょう。課題は、「足し算ができる関数」を使ったJavaScriptにチャレンジしてみてください。それができたら、変数や関数を使って、かけ算や割り算、入力された文字をつなげるなど、さまざまな関数を作って実験してください」ということでした。例えば、「足し算ができる関数」を使ったJavaScriptはこうなります。tasizanというのが足し算を行う関数です。
<html>
<body>
<script type="text/javascript">
function tasizan(a,b){
var c=Number(a)+Number(b);
return c;
}
</script>
<input type="text" id="num1">
<input type="text" id="num2">
<input type="button" value="足す" onclick="alert(tasizan(num1.value,num2.value))">
</body>
</html>
5行目の「var c=Number(a)+Number(b);」がポイントです。
「a+b」のままだと、例えば「123」と「456」を足そうとすると、「123456」のようになってしまいます。これはフォームに入力した「123」と「456」が文字として扱われてしまったためです（文字を足し算しようとするとつながって表示してしまうのは第1回でやりましたね）。
文字を数字としてJavaScriptに計算させるために「Number(★)」を使います。「Number(★)」というのは★部分の文字を数字に変える関数です。この関数は自分で作らなくてもJavaScriptに最初から用意されています。「Numberなんてやってないから知らない！」という声が聞こえてきそうです。ちょっと意地悪だったでしょうか……。
Number関数を使わなくても文字を数字に変えることができます。
var c=(a-0)+(b-0); var c=(a*1)+(b*1); var c=(a/1)+(b/1);
などという書き方をすることで、文字を数字として計算することができるようになります。
Number関数以外にも文字を数字に変える「parseInt(★)」、「parseFloat(★)」という関数を使うことができます。「parseInt(★)」は★部分の文字を整数にします。小数を含む数字を扱うには「parseFloat(★)」を使います。
さて、課題がクリアできなかった人も気を取り直して、今回は条件によって動作を変えるJavaScriptをやってみましょう。
if文
条件によって動作を変えるとはどういうことでしょうか？ 例えば人の場合で考えると、踏切を渡るときに「遮断機が降りていたら止まる」「遮断機が降りていなかったら進む」というように、「もし○○が▲▲だったら〜」という判断をJavaScriptにさせることができます。
これをJavaScript風に書いてみましょう。
もし(遮断機が降りていたら){
止まる;
} そうじゃなかったら {
進む；
}
「そうじゃなかったら」というのは、「遮断機が降りていたら」という条件に当てはまらなかった場合、つまり「遮断機が降りていなかったら」ということになります。
「遮断機が降りているかどうか」をJavaScriptで書くのはどうしたら良いでしょうか？ 色々方法はあると思いますが、ここでは分かりやすく変数を使って表現してみます。
変数「shadanki」の値が「1」だったら「遮断機は降りている」状態、それ以外だったら「遮断機は降りていない」状態とします。
さっそく、JavaScriptで書いてみましょう。
テキストエディタを起動して、次のサンプルをコピー＆ペーストして、「javascript4.html」などの名前を付けて保存してください。
<html>
<body>
<script type="text/javascript">
function handan(shadanki){
if(shadanki == 1){
document.getElementById("kekka").innerHTML = "止まる";
} else {
document.getElementById("kekka").innerHTML = "進む";
}
}
</script>
<input type="text" id="num">
<input type="button" value="判断" onclick="handan(num.value)">
<div id="kekka">ここに結果を表示します</div>
</body>
</html>
Webブラウザで開くと、このような画面が出ていると思います。
※注意!! Internet Explorerでは、PC上のJavaScriptを動かそうとするとセキュリティー警告が出ます。情報バーをクリックして、「ブロックされているコンテンツを許可」を選ぶとJavaScriptが実行されます。
フォームに「0」を入力して「判断」ボタンを押してください。
「進む」が表示されたでしょうか。
次は、フォームに「1」を入力して「判断」ボタンを押してください。
今度は「止まる」が表示されたでしょうか。
サンプルを理解してみる
サンプルをもう少し詳しく見てみましょう。
3行目の<script>タグや、HTMLのタグについては説明を省きます（もし使い方が分からなかったら第1〜3回を復習してくださいね）。
4行目：function handan(shadanki){
せっかくなので、前回覚えた「関数（function）」を使ってみましょう。ここでは、「handan」という名前の関数を作って、「入り口の変数（引数）」に「shadanki」という名前を付けます。
5行目：if(shadanki == 1){
ここで条件を判断しています。さっき、JavaScript風に書いた条件の「もし(遮断機が降りていたら){」という部分を思い出してください。「もし」はJavaScriptで書くと「if」になります。この「if」を使って条件を判断する文を「if文」と言います。
if文では「if(★)」のようにカッコの中に判断するための条件を書きます。先ほど、変数「shadanki」の値が「1」だったら「遮断機は降りている状態」としましたね。if文に変数「shadanki」の値が「1」かどうかを判断させるには、カッコの中に「shadanki == 1」と書きます。
この「==」は、プログラムの世界では「関係演算子」や「比較演算子」と呼ばれています。でも、「演算子」なんて難しい言葉は覚えなくても大丈夫です。「shadanki == 1」を日本語に訳すとすれば「shadankiが1」になります。「==」は「○○が▲▲」というときに使う「が」にあたる記号です。
行の最後の「{」は7行目の「}」とセットになっていて、条件が当てはまったとき、ここでは「shadankiが1」のときに実行するJavaScriptを囲むのに使います。
6行目：document.getElementById("kekka").innerHTML = "止まる";
新しいJavaScriptですね！
しかし、詳しく説明しようとすると、軽く連載3回分ぐらいはかかってしまうのですが、すごく便利なJavaScriptなので、とりあえず細かいことは抜きに、使い方だけ覚えてしまいましょう。 「document.getElementById("★").innerHTML」は、★部分の名前（id）のタグの中身（HTML）を書き換えてしまうという、すごいJavaScriptです。
ここでは、「kekka」という名前（id）を持ったタグの中身を「止まる」に書き換えようとしています。書き換えの犠牲となる「kekka」は14行目にありますね。ここはまたあとで説明します。
7行目：} else {
最初の「}」はさっき説明したように、5行目のif文の最後の「{」とセットで、if文の条件があっていたときに実行するJavaScriptを囲んでいます。「else」は「そのほか」という意味ですが、if文と組み合わせて「if文の条件に合わなかったとき」、つまり「そうじゃなかったら」という処理をさせたいとき「else」を使います。
if文の条件に合わなかったときに、特に何もさせたくない場合は書かないでも構いません。ここでは、「shadankiが1じゃないとき」ということになります。
最後の「{」から9行目の「}」までが「shadankiが1じゃないとき」に実行されるJavaScriptになります。
8行目：document.getElementById("kekka").innerHTML = "進む";
「shadankiが1じゃない＝遮断機が降りていない」ときにこの8行目が実行されます。「kekka」という名前（id）を持ったタグの中身を「進む」に書き換えようとしています。
12行目：<input type="text" id="num">
「num」という名前（id）を持ったテキストフィールドを作っています。
13行目：<input type="button" value="判断" onclick="handan(num.value)">
ボタンを作って、ボタンの表示を「判断」にしました。そして、イベント「onclick」で、ボタンがクリックされたら関数「handan」を呼び出しています。関数「handan」を呼び出すときに、関数の入り口に「num.value」で、さっき作ったテキストフィールド「num」の値を渡しています（関数の使い方が分からなくなってしまったら、連載第3回を読んで思い出してくださいね）。
14行目：<div id="kekka">ここに判断結果を表示します
「kekka」という名前（id）を持ったタグが出ました！ 最初は「ここに判断結果を表示します」と書いてありますが、関数「handan」が呼び出されると、ここの中身は書き換えられてしまう運命です。
サンプルを書き換えてみよう
サンプルは理解できましたか？ 次は試しに、フォームに「2」を入力して「判断」ボタンを押してください。
「進む」になってしまいました。
なぜなら、「shadankiが1」じゃないときは「遮断機は降りていない」と判断されるからですね。
今度は条件を変えてみましょう。さっきは、「shadankiが1」のときは「遮断機は降りている」という条件でしたが、これを「shadankiが0」じゃないときは「遮断機は降りている」という条件にしてみましょう。
<html>
<body>
<script type="text/javascript">
function handan(shadanki){
if(shadanki != 0){
document.getElementById("kekka").innerHTML = "止まる";
} else {
document.getElementById("kekka").innerHTML = "進む";
}
}
</script>
<input type="text" id="num">
<input type="button" value="判断" onclick="handan(num.value)">
<div id="kekka">ここに判断結果を表示します</div>
</body>
</html>
5行目のif文を「shadanki != 0」と書き換えました。この「!=」は、「shadankiが0じゃない」という意味で、「==」の反対の意味です。
さっきは、「shadankiが1」のときは遮断機が降りているので「止まる」という条件でした。今度は逆に、「shadankiが0じゃない」ときは遮断機が降りているので「止まる」という条件になっています。ちょっとややこしいですね……。
検証してみましょう。フォームに「0」を入力して「判断」ボタンを押してください。
「shadankiが0じゃない」じゃないので（ややこしいですがつまり0なので）、else部分が実行されます。このように「shadanki == 1」と「shadanki != 0」という条件で、「shadanki = 0」のときは「進む」、「shadanki = 1」のときは「止まる」という動作は同じになります。
では、「shadanki != 0」という条件で「shadanki = 2」のときはどうなるでしょうか？ フォームに「2」を入力して「判断」ボタンを押してください。
答えは「止まる」ですね。
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。