現役プログラマーによるJavaScript奮闘記10!~if文ってなんじゃろ編~

今回は文について説明します。

プログラムは文を実行していくことで処理していきます。
文には文法が決まっていて、その通りに書くとプログラムが認識され動作します。
前に紹介している関数も関数宣言文というものだったりします。

関数は

function 関数名(引数, 引数,・・・){
  文
}

という風に書けと決まっています。

他にもJavaScriptには色々な文が存在しますが、その中でも良く使う制御文について紹介します。

■if文

これを書かないときは無いんじゃないかって位の制御文です。

形式としてはこうなります。


if(条件式)
  文;

また、「条件に当てはまらなかったら○○する」ということを表現するelseというものがあります。


if(条件式)
  文;
else
  文;

こう書きます。

JavaScriptのたいていの文{}は省略できますが、どこからどこまでがifの範囲でどこからがelseの範囲なのかの可読性を上げるために{}をつけたほうが良いです。


if(条件式){
  文;
} else {
  文;
}

こうなります。文が一つの場合そこまで混乱はしないですが、
多くなってしまうと訳がわからなくなってしまうので、{}でくくった方が絶対に良いです。

昼食の値段判定(値段はpriceという変数で保持しています)


var price = 1200;
if(price >= 1000) {
   document.write("高いわ、、、");
} else {
   document.write("手頃だねぇ");
}

この場合、priceが1000より大きいので

高いわ、、、

と出力されます。

if文の条件式にはbooleanを入れます。true or false で表現できるものですね。

これは比較演算子とか同値演算子とかで文字列型や数値型をbooleanに型変換します。
なんかややこしくいいましたが、ざっくりと
等しいかどうか(===とか==で表現)
大きいか小さいか(<とか<=とか>とか>=)
で条件式を作ります。

なんとなくわかりますかね。このあと(part13とか?)にこの同値演算子とか比較演算子とかの説明しているのでそちらまで雰囲気で察してください。

例では
1000以上であれば「高いわ、、、」と表示し、
それ以下であれば「手頃だねぇ」と表示する
という例でした。

これに対して、500よりも小さければ「めっちゃやすいやん」というのを追加してみましょう。

色々書き方はあるのですが、一番読みやすいであろうelse ifを使って記載します。


if(price >= 1000) {
   document.write("高いわ、、、");
} else if(price < 1000 && price >= 500){
   document.write("手頃だねぇ");
} else {
   document.write("めっちゃやすいやん");
}

こんな風にかけます。
これは順番に上から条件式を確認していきます。

var price = 400;

の場合一つ目の条件式 if(price >= 1000)
には該当しないので、次の条件式に行きます。

else if(price < 1000 && price >= 500)
この条件式にある && は「かつ」をあらわします。

1000より小さく、かつ 500以上
という条件式ですね(ちなみに「または」は || であらわします)。

これにも該当しないので次のelseの
document.write(“めっちゃやすいやん”);
が実行されます。

■if文の注意

いうまでも無いかもしれないのですが、こういった書き方も可能です。


if(price >= 1000) {
   document.write("高いわ、、、");
} else if(price < 500){
   document.write("めっちゃやすいやん");
} else {
   document.write("手頃だねぇ");
}

どっちが見やすいかですね。

あと条件式は上から順番に実行されるので


if(price >= 1000) {
   document.write("高いわ、、、");
} else {
   document.write("手頃だねぇ");
} else if (price < 500){
   document.write("めっちゃやすいやん");
}

と書いてしまうと一番下のelse if文は実行されません。こんな書き方見たことないですけど。。。

また、


if(price >= 1000) {
   document.write("高いわ、、、");
}

if(price < 1000 && price >= 500){
   document.write("手頃だねぇ");
} else {
   document.write("めっちゃやすいやん");
}

このようにelseでつながず分けて書いてしまうと、2つのif文とみなされます。

そのため、
var price = 1200;
の場合、

一つ目のif文に該当するので、
document.write(“高いわ、、、”);
が実行され、二つ目のはelseの内容
document.write(“めっちゃやすいやん”);
が実行されてしまいます。

初めのうちはやりがちなミスなので注意してください。

では、今回はこの辺で!
次回は他の制御文について色々書いていきます。

コメント

タイトルとURLをコピーしました