最新！JavaScript入門講座ー条件分岐、IF文をわかりやすく解説

プログラミングをしていて、Aの場合はこうして、Bの時はこのような処理をしたい、といったアイデアを抱いた方がいるのではないでしょうか？
こういった、時と場合によって処理の内容を変えるコードは様々なところで使われています。

このようなことを可能にしてしまうのが、条件分岐、IF文なのです。
IFを使うことによって、表現できる幅が一気に広がります。

この記事では、初心者の方にIF文についてわかりやすく、しっかりと解説してきます！

この記事のペルソナ

• 条件分岐について学びたい方
• IF文の基礎を知りたい方
• IF文でより複雑な処理をやってみたい方

JavaScriptの条件分岐解説

基本的なif文の解説

まずは、IF文の基本的な文法から押さえていきましょう。

IF文の書き方

if(条件式){
条件式に当てはまるときに実行したい処理を記述;
}

if条件文はこのように書きます。条件式の部分には、演算子を用いるというのが一般的な方法です。このカッコの中に判定したい事象や、条件式を入れます。
そして、{ }に実行したい処理を記述していきます。

いきなり、2種類のカッコが現れたりと、少々大変でしょうが、ゆっくりと慣れていきましょう。この2種類のカッコがなければ、JavaScriptはエラーになってしまいます。

では、実際のサンプルをみていきましょう。

if(3===3){
    console.log("同じ数字です！");
}

if("投資信託" === "上場投資信託"){
    console.log("違う単語です！");
}

$ node ifstat.js

同じ数字です！

実行するとこのようになるはずです。これがもっとも単純なIF文になります。
サンプルでは2つのifを記述しています。これはあくまで例ではありますが、演算子は厳密等価演算子を使っています。

演算子の記事で解説しましたね。演算子について具体的に知りたい、もしくは忘れてしまった方はこちらで復習をしていただければと思います。

最新！JavaScript入門講座ー演算子をわかりやすく解説！

演算子は数値を引いたり足したりなどを意味する記号群のことの総称です。演算子はプログラミングでは必ず使われる文法です。例えば、変数を定義するときに使用する=(イコール)も演算子の一つです。演算子は実は結構種類が多いです。ただ、一気に覚える必...

www.s-gakuenblog.com

上のif文は3と3を比較しています。当然、同じ数字なので処理が実行されます。
逆に、下は文字列の比較をしています。二つの文字列は違う文字列なので、実行されません。

また、これを少し発展させて変数を使ってみるとこんな感じです。

let number = 3;

let str = "上場投資信託";
let etf = "ETF";

if (number === 3){
    console.log("同じ数字で、素数です！");
}

if (str === etf){
    console.log("違う文字列です！");
}

$ node ifstat.js

同じ数字で、素数です！

実行するとこのようになります。
変数を使う場合はこうです。とはいっても、基本的には変わりありません。
ちなみに、したのIF文はfalseなので、実行はされませんが、上場投資信託とETFというのは文字列としては全く一致しませんが意味は同じです。

2択の条件分岐を解説(else)

続いては2択のIF文について解説していきます。
先ほどは、条件式の中がtrueの場合のみに絞っていました。次はfalseの場合にも実行されるようにしてみましょう。
そこで使うのがelseになります。

elseの書き方

if(条件式){
条件式に当て嵌まった時の処理を記述;
}else{
それ以外の時の処理を記述;
}

書き方の基本が上記です。プログラムは上から順番に読み込まれていきます。最初にifの上の条件式と比較されます。そのとき、条件式がfalseであった場合、elseのときの処理が実行されます。
逆に、条件式がtrueの場合は上の処理が実行され、else以下はスルーされて処理が終了します。

サンプルコードを見てみましょう。

let benefit = 230000;

if (benefit >= 200000){
    console.log("20万円以上なので確定申告が必要です!");
}else{
    console.log("確定申告は必要ありません!!");
}

benefit = 198400;

if (benefit >= 200000){
    console.log("20万円以上なので確定申告が必要です!");
}else{
    console.log("確定申告は必要ありません!!");
}

$ node ifstat.js

20万円以上なので確定申告が必要です!
確定申告は必要ありません!!

実行するとこのようになります。
上は変数の値が200000であり、条件に当てはまるので、上の処理が実行されています。逆に変数を再更新したときは上の条件式に当てはまりません。
なので、elseの処理が実行されています。

3択以上の条件分岐の解説(else if)

続いては3択以上の条件分岐を作りたい時の解説をしていきます。
先ほどはいわゆる、はいかいいえかで答えるような2択の条件分岐でした。

じつは、3択以上、n(nは3以上の自然数)沢の条件分岐を作ることが可能です。そこで使うのが、else ifになります。

条件分の書き方

if(条件式){
条件式がtrueの場合実行する処理;
}else if(条件式){
条件式がtrueの場合実行する処理;
}else if(条件式){
条件式がtrueの場合実行する処理;
}



}else{
それ以外の時に実行される処理;
}

else ifを使うことによって、より細かく条件分岐をすることが可能になります。上から条件式を一つ一つ比較していきます。
そして、どこかでtrueが帰ったときに処理を実行して終了するという流れになります。

サンプルを見てみましょう。

let point = 98;

if (point < 60){
    console.log("あなたの評価はEでぇす^^");
}else if(point < 70){
    console.log("あなたの評価はDでぇす^^");
}else if(point < 80){
    console.log("あなたの評価はCでぇす");
}else if(point < 90){
    console.log("あなたの評価はBでぇす");
}else if(point < 100){
    console.log("あなたの評価はB+でぇす");
}else if(point < 150){
    console.log("あなたの評価はA-でぇす");
}else if(point < 200){
    console.log("あなたの評価はAでぇす");
}else if(point < 300){
    console.log("あなたの評価はA+でぇす");
}else if(point < 500){
    console.log("あなたの評価はSでぇす");
}else if(point < 1000){
    console.log("あなたの評価はS+でぇす");
}else{
    console.log("あなたの評価はSSでぇす");
}

$ node ifstat.js

あなたの評価はB+でぇす

少々プログラムが長くなりますが、実行するとこのようになります。
このサンプルをご自分のPCで色々と数字を変えたりしてみてください。

条件分岐で評価を決定してくれるコードが書けます。
これも流れは一緒で、上から順番に条件式がtrueになるかならないかを判定してfalseならばどんどん下のほうへと流れていきます。

このプログラムでは1000ポイント以上の天才だと評価がSS、60未満だと最低評価、といった感じでポイントがn未満であるかどうかを判定していきます。

まとめ

では、今回のまとめに入りましょう。
今回はこれらのことについて学びました。

• 基本的なif文の使い方
• 2択の条件分岐:else
• 3択以上の条件分岐:else if

今回はここまでとなります。お疲れ様でした。

参考文献