「もし、天気が雨だったら傘を持っていこう」「もし、総合点数が300点以上であれば合格」といったように条件分岐はプログラミングだけでなく日常生活の中でも、条件分岐は数え切れないほど数多くあるかと思います。
条件によって行動を使い分けるように、プログラミングでは if 文を使って処理を使い分けることができます。
そこで今回は基本的なことも踏まえ、当時 if 文で理解に時間がかかったところや、よく間違えそうだから気を付けたいなと思ったところを備忘録としてまとめてみました。
if 文の基本構文
※言語により、多少構文が異なる
if (条件式1) {
処理1; // 条件式1がtrueの場合に実行
} else if (条件式2) {
処理2; // 条件式2がtrueの場合に実行
} else {
処理3; // 条件式1と2がfalseの場合に実行
}
//場合によって else if 、else は省略できる
条件分岐のいいところ
条件によって処理の**「使い分け」**ができる！
条件分岐はどんな時に使う？
- 数値の大小、同等,、相違
- 特定のデータ（文字列、数値等）があるかないか
- データが一致しているかどうか
Web 上で見かけるところ
- パスワード入力
- フォーム等におけるバリデーション
- スライドショーやアコーディオン等の切り替え
条件分岐で注目するのは?
真偽値（boolean)
true / false
真偽値を決めるものは？
論理演算子
＞、＜、＞＝、＜＝、＝＝、！＝、＆＆、｜｜
論理演算子を使用しない**「みなし判定」**もある
JavaScript の場合、下の値も false とみなす
空文字列数値の0NaN (Not a Number)undefinednull
他の言語もこのような「みなし判定」があり、言語によっても異なってくるので注意
そもそも「演算子」って何？
「前後の値に評価されて別のものに変化する記号」
簡単な例
1 + 1 -（評価）→ 2
「 1 + 1 」 を評価して、その結果の 2 という値に変化する
四則（+、-、*、/）、剰余（％）は**「算術演算子」**と呼ぶ
論理演算子の場合は？
score >50 -（評価）→ true / false
「score が 50 より大きいか」を評価して、その結果の true か false に変化する
順番に注意！（FizzBuzz にて）
for (var number= 1;number<=30;number++){
if (number % 5 == 0 && number % 3 == 0) {
console.log("FizzBuzz");
} else if (number % 3 == 0) {
console.log ("Fizz");
} else if (number % 5 == 0) {
console.log("Buzz");
} else {
console.log (number);
}
}
プログラムは上から処理していき、条件が成り立ったら「次の処理はスキップされる」ので順番を間違えると、思うような結果が得られない。
次の場合、 15と30は「FizzBuzz」と表示されない
for (var number= 1;number<=30;number++){
if (number % 3 == 0) {
console.log ("Fizz");
} else if (number % 5 == 0 && number % 3 == 0) {
console.log("FizzBuzz");
} else if (number % 5 == 0) {
console.log("Buzz");
} else {
console.log (number);
}
}
15、30 において一番最初の条件式(number % 3 == 0)が true なので、たとえ次の条件式(number % 5 == 0 && number % 3 == 0)が true だとしても処理がスキップされ、「FizzBuzz」が表示されない
さらに厄介なことに、構文的に間違えていなければ実行できるので順番を間違えて書くとそれに気づかないことがある。 ということで、条件分岐を書く際には条件の順番に気をつけること！！
ダイレクトな真偽値 (jQuery : hasClass メソッドにて)
考えられるつまずきの原因
-
真偽値（true/false） をダイレクトに入れるというイメージがあまりなく、あったとしても使う場面があるのかピンと来なかった。
-
「リターン値が真偽値」であるメソッドはこれまで見たことも使ったこともなかった
-
数値だけ条件分岐をするという発想しかなかった。
jQuery の hasClass メソッドに初めて触れたとき、これらのことが分からず躓いた覚えがあるので、こちらも備忘録としてメモ。
ダイレクトな真偽値
まずは、簡単な例から
var x = 5;
if (x > 10){
console.log("x は10より大きい");
}else {
console.log("x は10以下");
}
何の変哲もない if 文ではあるが、「 x>10 の中身って何だろう」とふと思ったので、それを「変数」として代入して、以下のようにして調べてみた
var x = 5;
var isLarger = x > 10; // 条件式を「変数」として代入
console.log(isLarger);
if (isLarger){ …}
出力結果が**「真偽値(boolean) 」の false**
ここで分かったことは、**if 文は「真偽値によって処理が使い分けられている」**ということだ。(前に記述した「みなし判定」も考慮しなければならないが）
さらに if 文の中にダイレクトに真偽値を入れても処理されるということも分かった。
var isLarger = x > 10;
console.log(isLarger); //true false
if (isLarger){ …}
// isLarger 変数の中身は真偽値
if (true){ …}
if (false){ …}
// 真偽値をダイレクトに入れても処理出来る
リターン値が真偽値のメソッド
これに初めて出会ったのは、jQuery でアコーディオンを作る時に使用されるhasClass メソッドである。
<li class="faq-list">
<h3 class="question">Q1</h3>
<span>+</span>
<div class="answer">A1</div>
</li>
$('.faq-list').click(function() {
var $answer = $(this).find('.answer');
if ($answer.hasClass('open')) {
// true: open クラスがあれば
$answer.removeClass('open');
$answer.slideUp();
$(this).find('span').text('+');
} else {
// false: open クラスがなければ
$answer.addClass('open');
$answer.slideDown();
$(this).find('span').text('-');
}
});
最初 hasClass メソッドに出会ったときは謎だらけで良く分からなかった覚えがある。真偽値についてはあまり触れていなかったのもあり、「数値じゃないのに何で if 文使ってるの？」みたいな的外れなことを考えてたり。
hasClass メソッドについて
hasClass メソッドは、取得した要素に**「特定のクラスがあるか」というメソッドで、このメソッドのリターン値は「真偽値」**
<h3 class="question">Q1</h3>
<div class="answer">A1</div>
$(function() {
console.log($('h3').hasClass('answer')) //false
console.log($('div').hasClass('answer')) //true
});
特定のクラス属性があるかどうかで条件分岐を行い、その有無によって処理を分けるといった仕組みになっている。
if ($answer.hasClass('open')) {
// true: open クラスがあれば
$answer.removeClass('open');
$answer.slideUp();
$(this).find('span').text('+');
} else {
// false: open クラスがなければ
$answer.addClass('open');
$answer.slideDown();
$(this).find('span').text('-');
}
});
まとめ
- if 文は true か false かで処理が使い分けられている
- 論理演算子以外にも、「みなし判定」での真偽値がある
- if 文を書くときは条件文の順番に気をつけること
- 条件文はダイレクトに真偽値を入れることができる
- リターン値が真偽値のメソッドがある
- 数値だけではなく、特定のものの有無に関しても条件分岐が可能