【Javascript】 条件分岐 (if文) – プログラミング入門

if文を用いた条件分岐は、もし〇〇なら☓☓をし、そうでないなら□□をする、といったものです。

プログラミングにおいて非常に重要な機能のため、少し内容が少し長いですが、頑張って習得していきましょう!

書き方

条件分岐は、次のように書きます。

let x = 10;
if (x > 0) {
    console.log("xは0より大きい");
}
if (x <= 0) {
    console.log("xは0より大きいはずなので, この行は実行されない");
}
if (x == 10) {
    console.log("xは10と等しい");
}

xは0より大きい
xは10と等しい

ここでパーツ毎に分解してみます。大きく分けると3つのパーツに分類できます。

• 最初のifは、その後の内容が条件分岐であることを明示します
• 次の括弧で囲んだところに, ifの中身を実行する条件を書きます
• 波括弧で囲んだところに, 実行する中身を書きます
  何行でも書けます

様々な比較演算子

ここで、>や<=という新しいものが登場しました。これらは数値や文字などを比較するときに使える記号 (演算子) です。役割を見ていきましょう。

次の例はサンプルです。if文の中身はすべて実行されます。

let x = 5;
let y = 10;

if (x == 5) {
    console.log("xは5");
}
if (x != y) {
    console.log("xとyは異なる");
}
if (x > y) {
    console.log("xはyより大きい");
}
if (x >= y) {
    console.log("xはyより大きいか等しい");
}
if (x < 10) {
    console.log("xは10より小さい");
}
if (y <= 10) {
    console.log("xは10より小さいか等しい")
}

trueとfalse

trueは”YES”、falseは”NO”のような感じのものです。

例えば、10 > 5はtrue、100 > 1000はfalse、x = 10;の場合のx == 5はfalseです。

このtrueとfalseは論理値と呼ばれます。

比較で、”かつ”や”または”を使う

例えば、xは5より大きく、かつ10未満、といった比較はしばしば行います。その場合は&&や||という記号を用います。

let x = 8;
if (x > 5 && x < 10) {
    console.log("xは5より大きい");
    console.log("xは10未満");
}

xは5より大きい
xは10未満

それぞれの演算子の意味は次のようになります。

&&を使えば、AかつB、といった判定ができます。x > 5 && x < 10はx > 5 かつ x < 10となります。

||を使えば、AまたはB、といった判定ができます。x > 5 || x < 2はx > 5 または x < 2となります。

条件を複数並べることもできます。ここで、&&と||の優先順位に注意する必要があります。

let x = 10;
let y = 5;
if (x > 100 || x + 5 == 15) {
    console.log("xが100より大きい、またはx+5は10と等しい");
}

if ((x > y || x > 100) && x > 10) {
    console.log("x > yまたはx > 100、かつx > 10");
}

2つ目のif文では、意図的に括弧を付けています。これは、&&が||より先に計算されるためです。掛け算と足し算の優先順位の関係に似ています。

そのため、括弧がなければx > 100かつx > 10、またはx > yという意味になってしまいます。この優先順位を把握していないとバグの原因になるのでしっかり把握しましょう!

よくある間違い

よくある間違いとして、次のような例が挙げられます。

let x = 10;
if (5 < x < 10) {
    console.log("実行される??");
}

数学ではこのような書き方をしますが、プログラミングでは少し挙動が違います。計算自体はできますが、思ったような結果にはなりません。

というのも、この場合はまず5 < xが計算されます。この結果はtrueです。次にtrue < 10が計算されます。trueは1として扱われるので1 < 10は満たせません。

この場合、5 < x && x < 10のように&&を用いて書きましょう。

not(!)の使い方

これまで紹介した演算子のうち、!だけ使い方が異なります。

let x = false;
if (!x) {
    console.log("xはtrueではない");
}

let y = 5;
if (!(y >= 10)) {
    console.log("yは10以上ではない");
}

!は、他とは違い、!の左側は関係なく、右側の1つだけが対象になります。

!(y >= 10)とすると、カッコで囲まれたy >= 10が先に計算されるので、その結果に対して!が影響します。つまり、y >= 10を満たしていない状態でのみ、if文の中身が実行されます。

優先順位

ここで、比較演算子、論理演算子の優先順位を把握しましょう。上にあるものほど先に計算され、同じ場合は左から計算されます。

1. !
2. 四則演算子 (+-*/)
3. 各比較演算子
4. &&
5. ||

not (!) は真っ先に計算されます。例えば、!x && yだと、xがfalse、yがtrueの場合にif文が実行されます。

比較演算子(==等)は論理演算子(&&等)より先に計算されるので、x < 5 && x > 10はx < 5かつx > 10という意味になります。

||は&&よりあとに計算されるので、a || b && cでは先にb && cが計算され、その結果とaのORになるので注意が必要です。a || bを先に計算するには、(a || b)のようにカッコで囲むと良いです。

四則演算は!以外より優先されるので、10 + 5 == 15は10 + 5が先に処理されます。そのためtrueになります。

例とともに計算を追う

上の知識をもとに、計算を追ってみましょう。

let x = 50;
let y = 100;

if (x > 0 || y > 1000 && x > 1000) {
    console.log("実行される");
}

1. x > 0 || y > 1000 && x > 1000
   

   x > 0 y > 1000 x > 1000を計算

2. true || false && false
   

   false && falseを計算

3. true || false
   

   true || falseを計算

4. true

となります。最終的にtrueとなったので、if文の中身が実行されます。もし||から先に処理してしまうと結果がおかしくなることが分かります。

まとめ

if文は、if (条件式) {実行する中身}の3つのパーツに別れます。

条件では、xが0以上か、yが100未満か、といったような比較を用いた条件を主に利用します。複数の条件を書くには、&&(AND)や||(OR)を主に利用します。

次は条件分岐が連続する場合を見てみましょう!

【Javascript】 条件分岐2 (if else文) 【プログラミング基礎】

if文では、AでなければBの条件で実行し、AでもBでもなければ別の処理をする、といった処理をよく書きます。つまり条件分岐が連続する場合です。ここ…

比較演算子のより発展的な内容はこちら

【Javascript】 比較演算子と論理演算子の振る舞い 【プログラミング発展】

比較演算子や論理演算子を用いた式は、四則演算と同様の式として計算されます。ここではその挙動を見ていきます。 式としての振る舞い 前に紹介した比較…

この内容の理解度チェックはこちら

【Javascript】 条件分岐 (if文) 理解度チェック

この内容のテキストはこちら 問1 単純なif 変数`x`が`10`と等しい時、コンソールに`xは10と等しい`と出力してください。 `x`が`1…