if文による条件分岐と、条件式のつくり方
Updated
2021/8/8 9:39
Author
Jumpei Ikegamiorder
14
JavaScriptで、ある値の内容に応じて処理を分岐させるための方法について説明します。関連して、比較を使った条件や、複数の条件を組み合わせた条件式などについても説明します。
if文による条件分岐
JSにおける条件分岐の構文は、次の通りです。
JavaScript
「条件式」には、真偽値（Boolean）型に評価される値が入ります。つまり、「最終的に
trueかfalseになるような式」を指定します。最もシンプルなのは、次のように
trueやfalseをそのまま入れることです。JavaScript
条件式に
trueを入れるとif文の中の処理は必ず実行されます。逆に条件式にfalseを直接指定すると、if文の中の処理は実行されることはありません。しかし、実際には変数を使って「あるときは実行され、またあるときは実行されない」といった条件分岐を実現するのが普通です。たとえば、LINE Botのチュートリアルに登場したプログラムでは、LINEでユーザーから来たメッセージの内容に応じてBotの返答を切り替えています。
2. LINE BotのJavaScriptプログラムを簡単に理解して、自分なりに改造する2021/6/20 5:212021/8/8 8:05JavaScript
なお、上のプログラムでも使われているように、if文の条件式に合致しない場合の処理を記述したい場合は、elseを使います。
JavaScript
3つ以上の分岐をつくりたい場合は、if -> else if -> elseなどと、elseを使ってif文を連結していきます。
ちなみに、実行したい処理が1行しかない場合、
{}は省略することができます。JavaScript
ただし、後から処理を追加して2行以上になる場合は
{}が必要になるので、基本的には{}を使って書いた方が安全でしょう。
数値を使った条件式
ある数値の内容に応じて処理を分けたい場合は、数値比較を使うことができます。
JavaScript
次の例は、URLの長さが50文字より大きかったら51文字目以降を
'...'で省略するプログラムです。JavaScript
文字列を使った条件式
文字列の完全一致
文字列についても、数値と同様に完全一致や完全不一致による条件式を書くことができます。
JavaScript
文字列の部分一致
文字列を使った条件式で最も多いのは部分一致、つまり「ある文字列に別の文字列が含まれるかどうか」をチェックするというものです。
これを実現するには、
indexOf()というメソッドを使います。indexOf()は、次のように使うことで、検索したい文字列が元の文字列の何文字目から始まっているかを教えてくれます。JavaScript
次の例は、クエリパラメタが含まれたURLで
?が全体の何文字目にあるかを特定するプログラムです。JavaScript
この
indexOf()メソッドは、検索したい文字列が見つからなかったとき、-1を返すという仕様になっています。少し回りくどいですが、これを使うことで「ある文字列に別の文字列が含まれるかどうか」のチェックに使うこともできます。つまり次のように、「
indexOf()の結果が-1ではない」ということを「文字列が部分一致している」と読み替えられるわけです。JavaScript
前述したLINE Botのプログラムでも、「ユーザーの入力メッセージに
"疲れ"という文字列が入っていたら」という条件式で使われていました。JavaScript
文字列のパターンマッチ
正規表現を利用すると、より複雑なパターンマッチを使った条件式を記述することも可能です。正規表現マッチを使うには、
match()というメソッドを使います。JavaScript
次の例は、入力された文字列がemailアドレスとして正しいかどうかをチェックするプログラムです。
JavaScript
正規表現の詳細については、正規表現のリファレンスで説明します。
否定、AND、OR
条件式を扱っていると、ある条件を否定して
true/falseを反転させたい場合や条件をAND・ORで組み合わせたい場合があります。JSにもそれぞれに対応する記号が割り当てられています。プログラミングに慣れていないと記号の意味に違和感があるかもしれません。
!（ビックリマーク） ： 否定
&&： AND
||（縦棒2つ） ： OR
特に、ANDとORは&や|を2回繰り返して使うことに注意してください。（ちなみに、これは
&や|を1つだけで使うと、別の意味になるからです。これは覚えなくていいですが、興味がある人は「ビット演算子」で調べてください。）否定、AND、ORの利用例は次の通りです。
JavaScript
falseっぽい値はfalseとみなされる
JavaScriptは自由で柔軟な言語です。そのため、なんと「条件式にtrueっぽい値を入れると
trueとみなし、falseっぽいものを入れるとfalseとみなす」という驚きの仕様があります。ちなみに、このようにデータ型の解釈が勝手に変わることを、「暗黙的な型変換」と呼びます。たとえば、
undefinedやnullは、「定義されてない」とか「存在しない」ということを意味するデータ型です。存在しないというのは、とてもfalseっぽいです（よね？）。そのため、JSではundefinedやnullが単体で条件式に入ると、falseとみなされます。実際に、次の値は条件式としては
falseとみなされます。false
undefined
null
""（空文字）
0
NaN
逆に、これらに該当しない値はすべて
trueとみなされます。こうした
true/falseへの暗黙的な変換の何が嬉しいかというと、条件式をシンプルに書くことができるようになります。たとえば、Webページから
document.querySelector()メソッドで要素を取ってくるプログラムがあるとします。その要素は、存在していないケースも考慮する必要があります。そのとき、あなたはdocument.querySelector()メソッドで要素が見つからなかったときの戻り値がundefinedなのかnullなのかを覚えていなくても、if文の条件式に結果を雑につっこむだけで、「結果が存在していたら」というプログラムを書くことができます。JavaScript
こうした「暗黙的な型変換」は強力であり、特に値の存在チェック周りで世の中のJSプログラムでも頻繁に使われています。
しかし、雑に使いすぎるとバグを生むこともあります。たとえば、ユーザーから0〜100までの数値を受け取って何らかの処理をするプログラムがあったとします。入力された数値は変数
numberFromUserに格納されるとします。次の例のように、数値がちゃんと入力されているかをチェックしてみます。JavaScript
このとき、
numberFromUserの値が0であると、ユーザーからは「0」という正しい数値が入力されているにも関わらず、「0」はfalseとみなされ「数値が入力されていた場合の処理」が実行されなくなってしまいます。慣れるまでは、「暗黙的な型変換」を多用するのは危険です。特に、数値0や空文字を正しい入力として扱う必要があるケースでは、十分に注意してください。