条件式 - if文
この記事からプログラミングの文法を学んでいこう。僕は専門学校でC言語を1年間くらい習っていたが、当時は文法が中途半端な理解に留まっていたように感じる。しかし、何度もプログラミングに触れる事により自然に分かるようになっていった。大切なのは数をこなす事だ。
条件文について概要
プログラミングは条件によって実行する処理を変える事ができる。それを条件式や条件文と呼んだりする。例えばペットショップのサイトでユーザに犬派ですか、猫派ですか？という選択肢を与えて犬が選ばれたらドッグフードを勧める。猫が選ばれたらキャットフードを勧めたりする事がプログラムの条件文で実現できる。
JavaScriptのif文のサンプル
ジュースの簡易販売機を想定している。持っているお金が100円以上なら購入可能で、100円未満ならお金が足りず購入できない。
var money = 90;
if(money >= 100) {
alert("ジュースをどうぞ！");
}
これを実行すると何も起こらないが、moneyの90を100以上の数値に変えると「ジュースをどうぞ！」とメッセージが出る。
サンプルのif文の説明
下記はmoneyが100以上ならtrue(真)となる。
if(money >= 100)
もし、真となったらif文の末尾にある { } の中のコードが実行される！ここではalertでジュースをどうぞ！が実行される。
if(money >= 100) {
alert("ジュースをどうぞ！");
}
比較演算子(関係演算子)
| 記号 | 説明 |
|---|---|
| > | A > B AがBより大きいならtrue |
| >= | A >= B AがB以上(同じ値も含む)ならtrue |
| < | A < B AがBより小さいならtrue |
| <= | A <= B AがB以下(同じ値も含む)ならtrue |
| == | A==B AとBの値が同じか比較。値が同じならtrue |
| != | A != B AとBの値が違うか比較。値が違う場合はtrue |
| === | A===B AとBの値がプリミティブ型も含めて同じか比較。値が同じならtrue ==よりバグが少なくなるので、これを使う事が推奨される |
論理演算子
Webで検索する時に単語と単語にスペースを入れて検索ボタンを押すよな。ぞくに言うOR検索というやつだ。プログラミングにもそのようなものがある。
| 記号 | 説明 |
|---|---|
| || | 記号だ。アイでもエルでもないぞ。ORの事でどちらか一方または両方の条件が true の場合に true となる |
| && | ANDの事で両方の条件が true の場合にのみ true となる |
| ! | 真偽値を反転する。trueならfalseに、falseならtrueにする |
論理演算子のサンプル
let pet = "猫";
if(pet === "犬" || pet === "猫") {
alert("犬か猫のフードあります！");
}
petの変数の値が文字列リテラルで犬か猫ならalertで表示。
trueやfalseになるリテラル
if文はtrue(真)となった時にその下の { } の中のコードを実行する。上の比較演算子以外にもJavaScriptではいくつかtrueになる条件があるので確認してくれ。
| 値 | 真偽 | 説明 |
|---|---|---|
| 1以上の値 | true | 1以上の値は真になる |
| 0 | false | 0は偽となる |
| -1以下の値 | true | やってみたら真でした。エラーになると思った！ |
| "文字列" | true | 文字列は真 |
| "" | false | 空の文字列は偽 |
| null | false | nullは偽 |
例えばif文の中に上の値をそのまま入れると分かると思うぞ。
if(1) {
alert("1はtrue");
}
if(0) {
alert("0はfalseだから、このコードは実行されない")
}
if("文字列") {
alert("文字列はtrue");
}
else if文とelse文
下記のコードで分岐を追加する事ができる。
let pet = "猫";
if(pet === "犬") {
alert("ドッグフードをどうぞ！");
}
else if(pet === "猫") {
alert("キャットフードをどうぞ！");
}
else {
alert("犬と猫以外のペット商品は取り扱っていません");
}
このコードを実行すると値が猫なので「キャットフードをどうぞ！」というメッセージが表示される。
else if文とelse文の解説
まず、ifなどの中に式があるがこれを実行して結果を得る事をプログラミング用語で評価するという。よく使うので覚えておこう。
if - else if - else文はまず上のif文が評価される。
if(pet === "犬") {
この場合、petの変数が猫なのでif文の中で猫と犬は違うのでfalseになり、下のelse ifの文にプログラムは行く。
else if(pet === "猫") {
alert("キャットフードをどうぞ！");
}
letで定義したpetの変数は猫なので、この式の評価は猫と猫は同じということでtrueになる。真になったプログラムはそのelse if文の { } の中を実行するので、「キャットフードをどうぞ！」というメッセージが出る。
下のelse文は実行されない事に注意。if - else if文はどれか真になったらそのブロック内 { } のコードを実行し、実行が終わったらコードを抜ける(if文を終了する)。
let pet = "サル";
if(pet === "犬") {
alert("ドッグフードをどうぞ！");
}
else if(pet === "猫") {
alert("キャットフードをどうぞ！");
}
else {
alert("犬と猫以外のペット商品は取り扱っていません");
}
petの変数はサルだ。まず最初のif文で犬かどうか評価され、違うので下のelse if文にいく。そこの式は猫かどうか評価されるが、違うのでelse文にいく。ちなみにif - else if文でどちらの式もtrueにならなくて、else文があるなら無条件で最後のelse文のブロック { } を実行する。
ここでは「犬と猫以外のペット商品は取り扱っていません」というメッセージが出る。
慣れないうちは難しいよな