連載
» 2010年05月31日 00時00分 公開

初心者のためのJavaScript入門(4):プログラミングのキホン、if文を使ってみよう! (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」を入力して「判断」ボタンを押してください。

答えは「止まる」ですね。

       1|2 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。