【初心者必見！JavaScriptの条件分岐】if文の書き方と使い方をわかりやすく解説

JavaScriptを勉強し始めて条件分岐を聞くと苦手意識や難しそうといったイメージを持った方がいらっしゃると思います

しかしプログラミングにおいて最初に習得する必要があるのは、コーディングの基礎とも言うべき「条件分岐」です。プログラムは多くの条件分岐によって複数の条件を処理し、さまざまな機能を実行しています。そのため、プログラミングを進めていくには、条件分岐をマスターすることは必須といえるでしょう

JavaScriptでは条件分岐は「if」文または「switch」文で行ないます。今回は特に基礎ともいえるif文について、機能や記述方法について詳しくわかりやすく解説していきます

理解するとそこまで難しいものではないのでここでしっかりと理解して進んでいきましょう

JavaScriptの基本的な学習がまだの方はこちらからどうぞ

あわせて読みたい

【超入門】JavaScriptの基礎を理解しよう 今回はプログラミングを始めてHTMLやCSSは分かってきたけどJavaScriptてなんだろう？？ こんな悩み持ったことはありませんか？ そんな初心者向けに、JavaScriptとは何が...

条件分岐とは

条件分岐とは、「必須事項が入力されていたらフォーム内容を送信し、未入力であればエラーメッセージを表示する」など、条件によって処理を分けることです

JavaScriptで条件分岐を行うときは、if文またはswitch文を使います。今回はif文について詳しく解説していきます

一応ですがswitch文との違いを簡単に説明しておくと現時点では、分岐が少ないときはif文、分岐が多いときはswitch文を使うという認識でOKです

Javascriptでのif文の基本的な書き方

if文は「もし条件式が成り立つならば、処理を行う」という条件分岐です

if文は以下のように書きます

if文では、()内の条件式が成り立つ場合に{}内の処理が実行されます。

なお、条件が成り立つかどうかを判定する式のことを、JavaScriptをはじめとするプログラミング言語では条件式といいます。条件式は条件が成り立てばtrueを返し、成り立たなければfalseを返します

そして、trueが返されたときに処理が実行されます

if文の使用例を見てみましょう

以下のnum > 10の部分が条件式です。以下の例ではif文の前にconst num = 50;と記述しているため、num > 10という条件が成り立ち（trueが返され）、「定数numは10より大きいです」という文字列がコンソールに出力されます

なお、条件式に使う>などの記号を比較演算子といいます

条件が成り立つ場合を「true(真)」、成り立たない場合を「false(偽)」といいます

この場合成り立つので戻り値は「true(真)」となります

条件式に使う比較演算子

先ほども言ったように条件式には>などの比較演算子を使います

条件式に使う主な比較演算子は以下のとおりです。実際に使いながら覚えていけばよいので、ここではざっと確認しましょう

比較演算子	処理の内容
==	2つの値が等しい場合はtrueを返す（等価演算子）。
===	2つの値とデータ型が等しい場合はtrueを返す（厳密等価演算子）。
!=	2つの値が等しくない場合はtrueを返す。
!==	2つの値とデータ型が等しくない場合はtrueを返す。
>	左辺の値が右辺の値よりも大きい場合はtrueを返す。
>=	左辺の値が右辺の値以上の場合はtrueを返す。
<	左辺の値が右辺の値よりも小さい場合はtrueを返す。
<=	左辺の値が右辺の値以下の場合はtrueを返す。

JavaScriptのif文の使用例

if文の基本形（もし○○であれば、●●する）

if文の基本となる文型です。if(条件)で条件分岐を行ない、条件に合致する場合はif文内の処理を実行します

覚える必要はありませんが、今回はランダムな整数を生成するためにMath.floor(Math.random() * n)というコードを記述します。Math.floor(Math.random() * n)は、0〜n - 1までのランダムな整数を生成するコードです。現時点では「数字を指定しなくてもランダムな数字を表示してくれるおまじない」という認識でOKです

コードを解説していきます

変数numに0～4までのランダムな整数を代入します。
確認用でconsole.logで変数numの値を出力します。
「num === １」が条件式となっており、numは0～４までのランダムな整数が入っているので変数numが1の時、条件式が成り立ち{}内の「console.log(‘大当たりです’)」の処理が実行されます

ifとelseを記述するパターン（もし○○であれば●●し、それ以外であれば▲▲する）

次のようにif文に付け加えることで、条件式が成り立たない場合の処理も書くことができます

これまではifのみを記述し、「それ以外のとき」、つまり条件式が成り立たないときは処理を何も行いませんでした

しかし、「それ以外のとき」にも何らかの処理を実行したい場合もあります

そこで記述するのがelseです。以下のようにelseを記述することで、条件式が成り立たないときにも処理を行うことができます

先ほどのコードとともに以下に例をとってみましょう

変数numの値が１のときは「大当たりです」という文字列が表示され、それ以外のときは「はずれです」という文字列が表示されます

if、else if、elseを記述するパターン（もし○○であれば●●し、そうでなくて□□であれば■■し、それ以外であれば▲▲する）

条件式を複数作りたい場合はelse ifを記述します

なお、ifとelseは1つの条件分岐の中で一度しか記述できませんが、else ifはいくつでも追加できます。ただし、else ifが多すぎるとコードが見づらくなってしまうので、コードを短くしたりswitch文を使ったりするなど工夫が必要です

では実際に先ほどに続いて以下に例をとってみます

• 変数numの値が１のときは、「大当たりです」という文字列が表示される
• 変数numの値が２のときは、「当たりです」という文字列が表示される
• それ以外のときは、「はずれです」という文字列が表示される

上記の結果になります

まとめ

if文はプログラミングにおいて頻出の文法であるため、必ず覚える必要があります

if文が書けないとプログラミングはできないと言われるほど大切なものです

条件分岐の組み合わせや様々な演算子を使いこなしてif文をマスターしましょう

それでは皆さん引き続きどんどん取り組んでいきましょう！