ifとは簡単に言うと、
「こうだったらああしてください、ああだったらこうしてください、それ以外ならそうしてください」
と、条件によって処理を分岐させるものです。
全てのプログラミング言語にとって要と言っても過言ではありません。
ifを使いこなせるようになるだけで、できることの幅がグッと広がります！
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます！
それでは本文へ、レッツゴー！
ifの基本構文
ifの基本構文はこうなっています。
if(条件){
ifが「真」の時に実行される処理;
}else{
ifが「偽」の時に実行される処理;
};条件の部分が、真（true）と判定されると、ifブロック内の記述が実行され、偽（false）と判定されると、elseブロック内の記述が実行されます。
そのため条件の部分は必然的にboolean型（真か偽）になる必要があります。
boolean型とはJavaScriptにおけるデータ型の一種で、真偽値を持つ値のことを指します。
boolean型になるものはたくさんありますが、一番わかりやすいのが不等号を使った数式です。
サンプルコード
ローランドさんの名言に「俺か、俺以外か」というものがありますが、これは条件分岐入門のためのセリフと言っても過言・・・ですね。
サンプルコードは変数nameがrolandであれば「真」、それ以外であれば「偽」となり、出力内容が分岐します。
<script>
let name = 'roland'
if(name == 'roland'){
console.log('俺です。');
}else{
console.log('俺以外です。');
};
</script>letが分からない方はこちら
console.log()が分からない方はこちら
条件部分のイコールが「==」と2つ重なっていますが、これについては後述します。
ifの条件を3つ以上に分岐させる！
先ほどは「俺か、俺以外か」と世界の人間を2つに分けていました。
ですが世の中そんな単純ではありません。
ここからは条件を2つだけではなく、3つ以上に分岐させていきます。
if(条件①){
条件①が「真」の時に実行される処理;
}else if(条件②){
条件②が「真」の時に実行される処理;
}else if(条件③){
条件③が「真」の時に実行される処理;
}else{
条件①〜③全てが「偽」の時に実行される内容;
};記述自体にさほど変化はありません。
先ほどの構文のifとelseの間に、else ifを加えるだけです。
else ifを1つ増やせば3つに分岐し、else ifを2つ増やせば4つに分岐していきます。
else ifの数に制限はありません。
条件①が偽であれば次の条件②へ、条件②が偽であれば次の条件③へと、上から順に条件を判定していき、「真」になった時点で処理が実行されます。
サンプルコード
変数numが100以上か、50以上か、10以上か、それ以外かで処理が分岐します。
<script>
let num = 23;
if(num >= 100){
console.log(`変数numは${num}です。100以上の数字です。`);
}else if(num >= 50){
console.log(`変数numは${num}です。50以上の数字です。`);
}else if(num >= 10){
console.log(`変数numは${num}です。10以上の数字です。`);
}else{
console.log(`変数numは${num}です。10より小さい数字です。`);
}
</script>条件式（比較演算子）
先ほど、イコールの際に「==」を使っていました。
このように、不等号の記述にもちょっとしたルールがあります。
| == | 等しい |
| === | 等しい |
| != | 等しくない |
| !== | 等しくない |
| > | より大きい |
| >= | 以上 |
| < | より小さい |
| <= | 以下 |
さて、「等しい」と「等しくない」に2つのパターンがありますね。
これはデータ型の一致も含めるかどうかの違いです。
==と===、!=と!==の違い
===（!==）の方が判定が厳しく、データ型も一致して「真」と判定されます。
つまり、値が同じでもデータ型が違えば「偽」と判定されてしまいます。
一方、==（!==）の場合、データ型が違っても値が同じであれば「真」と判定されます。
1は数字の1ですが、‘1’は数字ではなく、文字列の1です。
<script>
let one = '1';
if(one === 1){
console.log('変数oneは数字の1です。')
}if(one == 1){
console.log('変数oneは文字列の1です。')
}else{
console.log('変数oneは1ではありません。')
}
</script>変数oneは’1’（文字列の1）なので、「one === 1」は「偽」となり、「one == 1」で「真」と判定されています。
条件式その２（理論演算子）
さて、もう少し条件式をややこしくしていきましょう。
ここまで扱えるようになれば、もうif文なんて怖くありません。
| && | かつ（and） |
| || | または（or） |
中学校の頃、数学の授業の集合の部分でやった・・・っけ・・・？
&&と||は、複数のboolean（不等号式）を繋げる時に使います。
さて、これらの記号がどのような結果になるのかみていきましょう。
| 真 && 真 | 真 |
| 真 && 偽 | 偽 |
| 偽 && 偽 | 偽 |
| 真 || 真 | 真 |
| 真 || 偽 | 真 |
| 偽 || 偽 | 偽 |
&&は、全ての条件が「真」の場合に「真」となります。
つまり、「偽」が1つでも混ざっていれば「偽」となります。
それに対し、||は、いずれかの条件が「真」であれば「真」となります。
つまり、「偽」が混ざっていようと、1つでも「真」があれば「真」となります。
サンプルコード
変数numが0〜99の数字の場合、その数字が2か3で割り切れるか判定します。
<script>
let num = '24';
if(num < 0 || num >= 100 || typeof(num) != 'number'){
console.log('0から99の数字を入力してください。')
}
if(num % 2 == 0 && num % 3 == 0){
console.log(`${num}は2でも3でも割り切れます。`);
}else if(num % 2 == 0){
console.log(`${num}は2で割り切れますが、3では割り切れません。`);
}else if(num % 3 == 0){
console.log(`${num}は3で割り切れますが、2では割り切れません。`);
}else{
console.log(`${num}は2でも3でも割り切れません。`)
};
</script>一番最初の条件 num < 0 || num >= 100 || typeof(num) != ‘number’ について、
これはnumが「0〜99」以外の数字を弾き飛ばします。
「0より小さい数字」か「100以上の数字」か「データ型が数字でない」のいずれかがヒットすると「真」と判定され、「0から99の数字を入力してください。」と出力しています。
num % n とは、「numをnで割った時に出るあまり」です。
例えば5%3の場合は2、10%7の場合は3となります。
つまり、割り切れる場合は0となります。
同じ条件分岐仲間のswitchについて
switchとは、ifと同じく、条件分岐の際に使います。
使い方はifよりシンプルなのですが、ifほど汎用性は高くありません。
「これはswitchで事足りるな。」と使い分けられるのがベストなのですが、まあifでできることなので最初のうちは覚えなくても問題ないと思います。
