プログラミングの作成において必ず必要となるのが「条件分岐」です。条件分岐とは「もし〇〇であればこの処理」「そうでなければこの処理」というように条件によって処理を分けることです。プログラムは多くの条件分岐によって複数の条件を処理し、さまざまな機能を実行しています。JavaScriptでは条件分岐を「if」文または「switch」文で行ないます。今回は特に基礎ともいえるif文について紹介します。この記事では、if文の基本的な書き方から論理演算子を使用した書き方や三項演算子を使用した書き方などの応用的な書き方について解説します。
JavaScriptのswitch文については、下記の記事で詳しく解説しています！
if文とは
if文は条件や値によって処理を分岐させ、一致する場合の処理と、一致しない場合の異なる処理を記述するための方法です。
例えば
- もし変数の中身がAであれば、処理1を実行する
- もし変数の中身がBであれば、処理2を実行する
というように、複数の処理をどのように実行するかを判定することができるようになります。また、条件が一致する場合を「真（true）」、条件が一致しないことを「偽（false）」と言います。if文を使用することにより「もし〇〇であればこの処理」「そうでなければこの処理」ということが簡単に実現できます。
if文の基本的な書き方
if文の基本的な書き方について
前述した通りif文を使用することにより「もし〇〇であればこの処理」「そうでなければこの処理」ということが簡単に実現できます。それではif文の具体的な書き方について解説します。
基本的な構文は次のようになります。
if (条件) {
条件が真（true）であれば実行
}
if文の基本となる文型です。if(条件)で条件分岐を行ない、条件に合致する場合はif文内の処理を実行します。この構文を使用して実際にコードを記述してみると次のようになります。
var signal = ‘red’;
if (signal == ‘red’) {
console.log(‘止まれ’);
}
//実行結果は「止まれ」となります
このサンプルでは、変数signalが’red’なので、「止まれ」と表示されます。
if elseの書き方について
「else」は条件が偽（false）であった場合の処理を命令する際に使用します。if文に「else」を加えることで条件を追加することができます。条件が一致する場合と一致しない場合では異なる処理が行なわれます。
基本的な構文は次のようになります。
if (条件) {
条件が真（true）であれば実行
} else {
条件が偽（false）であれば実行
}
この構文を使用して実際にコードを記述してみると次のようになります。
var signal = ‘yellow’;
if (signal == ‘red’) {
console.log(‘止まれ’);
}else {
console.log(‘一旦停止’);
}
//実行結果は「一旦停止」となります
このサンプルでは、変数signalが’yellow’なのでif文の条件と一致していないため「一旦停止」と表示されます。
else ifの書き方について
「else if」を使用すると「Aだった場合、AではなくBだった場合、AでもBでもない場合」のように3つの条件分岐を作ることができます。ifとelseの間に、else if(条件)を記述して条件を追加します。
基本的な構文は次のようになります。
if (条件1) {
条件1が真（true）であれば実行
} else if (条件2) {
条件2が真（true）であれば実行
} else {
条件1と2がどちらも偽（false）であれば実行
}
この構文を使用して実際にコードを記述してみると次のようになります。
var signal = ‘blue’;
if (signal == ‘red’) {
console.log(‘止まれ’);
}else if(signal == ‘yellow’){
console.log(‘一旦停止’);
}else {
console.log(‘進め’);
}
//実行結果は「進め」となります
このサンプルでは、変数signalが’blue’なのでif文の条件である’red’と’yellow’と一致していないため「進め」と表示されます。
if文の応用的な書き方
論理演算子(「||」「&&」)を使用した複数条件の書き方について
論理演算子をifの条件に使用することができます。分岐の条件に論理演算子を使用すると、通常の分岐よりも複雑な条件を監視して処理を分岐させられます。
論理演算子OR「||」の使用について
「もし〇〇または××のときはこの処理」という条件をつけたい時に論理演算子or「||」を使用します。
基本的な構文は次のようになります。
if (条件1 || 条件2) {
条件のいずれかがtrue（真）であれば実行
}
この構文を使用して実際にコードを記述してみると次のようになります。
var signal_1 =’red’ ;
var signal_2 = ‘yellow’;
if(signal_1 == ‘red’ || signal_2 == ‘blue’){
console.log(‘赤’);
}
//実行結果は「赤」となります
このサンプルでは、変数signal_1が’red’であり、条件と一致しているため「赤」と表示されます。
論理演算子AND（&&）の使用について
「もし〇〇かつ××のときはこの処理」という条件をつけたい時に論理演算子AND（&&）を使用します。
基本的な構文は次のようになります。
if (条件1 && 条件2) {
条件1,2が全てtrue（真）であれば実行
}
この構文を使用して実際にコードを記述してみると次のようになります。
var signal_1 =’red’ ;
var signal_2 = ‘blue’;
if(signal_1 == ‘red’ && signal_2 == ‘blue’){
console.log(‘赤と青’);
}
//実行結果は「赤と青」となります
このサンプルでは、変数signal_1が’red’,signal_2が’blue’であり、両方とも条件と一致しているため「赤と青」と表示されます。
JavaScriptの論理演算子については、下記の記事で詳しく解説しています！
入れ子(ネスト)させる場合の書き方について
if文の処理にif文を設定することができます。この「入れ子（ネスト）」した状態にすることで複数の条件を持つ処理を設定できます。
基本的な構文は次のようになります。
if (条件1) {
if(条件2){
条件1,2が全てtrue（真）であれば実行
}
}
この構文を使用して実際にコードを記述してみると次のようになります。
var signal_1 =’red’ ;
var signal_2 = ‘blue’;
if(signal_1 == ‘red’){
if(signal_2 == ‘blue’){
console.log(‘赤と青’);
}
}
//実行結果は「赤と青」となります
この処理は前述の論理演算子を使用したANDと同じ処理になります。
三項演算子を使用した書き方について
JavaScriptには「三項演算子」と呼ばれる演算子を用いることでif文に似た処理を行うことができます。三項演算子はif…elseを1行で書くための記述方法で、実際のコーディングでも短いif文の場合は三項演算子を使用することがあります。
基本的な構文は次のようになります。
条件 ? trueの場合の動作 : falseの場合の動作;
この構文を使用して実際にコードを記述してみると次のようになります。
var score = 80;
var comment = score > 70 ? ‘good’ : ‘not good’;
console.log(comment);
//実行結果は「good」となります
このサンプルでは変数scoreが80であり、70以上という条件に一致していることから「good」が表示されます。
まとめ
この記事では、if文の基本的な書き方から論理演算子を使用した書き方や三項演算子を使用した書き方などの応用的な書き方について解説しました。if文はJavaScriptに限らず、多くのプログラミング言語で使用される条件分岐です。そのためプログラミングを書くにあたってif文はなくてはならない存在です。条件分岐について理解を深めることで、必要な分岐であるのかを理解し、冗長化しないコードを記述できるようになります。また三項演算子のような短い記述方法も用いることにより、読みやすく処理の早いJavaScriptのコードがプログラミングできるようになるでしょう。この記事を参考に、JavaScriptにおけるif文を習得していただければと思います。
JavaScriptを短期間かつ効率的に学びたい方は
「独学だと分からないことが多すぎる」「プログラミングをより現場に近い形で学びたい」「学んだ後にどう収益に繋げればいいの？」と考えている方も多いでしょう。
そんな方には、現役エンジニア講師在籍/案件獲得サポートもあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、体系立てて学ぶことで短期間かつ効率的にプログラミングを習得することが可能です。
「即戦力になれる！稼いでいけるようになれる！」プログラミングスクールを紹介した記事をこちらに記載しておきますので、是非ご覧ください。
コメント