if文による条件分岐は、さまざまなプログラミング言語で良く使用されており、JavaScriptにおいても必須の知識です。
今回はプログラミングを行う上で、初期段階で学ぶif文の基本を初心者向けに分かりやすく解説していきます。この記事を通して、if文を深く理解していきましょう。
if文
if文は、JavaScriptでもっとも利用されている条件分岐の手法です。
if文では、条件式の評価結果が真（true）だった場合に処理を実行し、偽（false）だった場合は処理が実行されません。
また、if文にelse/else if文を用いることで、条件が偽（false）だった場合の処理を分けて書くことができます。
つまり、条件に一致する場合の処理と、一致しない場合の処理をそれぞれ分けて記述することで、異なる結果を返すことができるのがif文の特徴です。
if文の基本形
ここからはif文の基本構文について見ていきましょう。
if文
if文は、与えられた条件を評価し、評価結果に応じて異なる処理を実行します。
以下がif文の基本構文です。
if (条件式) {
trueの時に実行する処理;
}
条件式の評価結果がtrueであれば、if文内の処理が実行されます。
以下は、条件式がtrueのため、コンソール出力が行われます。
if (true) {
console.log('この文は実行されます');
}
// "この文は実行されます"
if文は、条件式に比較演算子などを用いて、その結果によって条件分岐を行う場合に良く使われます。
このコードでは、変数resultが75よりも大きい値であるため（評価結果がtrue）、if文内の処理が実行されます。
let result = 80;
if (result >= 75) {
console.log('合格です');
}
// "合格です"
もし、条件式の評価結果がfalseの場合、if文内の処理は実行されません。
if (false) {
console.log('この処理は実行されません');
}
// 何も実行されない
else文
else文を使うことで、条件に一致しなかった場合の処理を書くことができます。
else文は単体で使用することはできないため、if文とセットで書く必要があります。
if (条件式) {
trueの時に実行する処理;
} else {
falseの時に実行する処理;
}
条件式の評価結果がtrueの場合には、ifブロック内の処理が実行され、反対に評価結果がfalseの場合には、elseブロック内の処理が実行されます。
次のコードでは、変数resultが75よりも小さい値であるため、条件式の評価結果はfalseとなります。
よって、else文内の処理が実行されます。
let result = 60;
if (result >= 75) {
console.log('合格です');
} else {
console.log('不合格です');
}
// "不合格です"
else if文
複数の条件を組み合わせたい場合には、else if文を使います。
else文と同様に、if文とセットで使用します。
if (条件式1) {
条件1がtrueの時に実行する処理;
} else if (条件2) {
条件1がfalse、条件2がtrueの時に実行する処理;
} else {
すべての条件がfalseの時に実行する処理;
}
はじめに条件式1の評価を行います。
条件式1の評価結果がtrueの場合には、ifブロック内の処理を実行し、falseの場合には、条件式2の評価に移ります。
条件式2の評価結果がtrueであればelse ifブロック内の処理を実行し、すべての条件式に当てはまらなければelseブロック内の処理を実行します。
else ifは必要な数だけ記述することができ、else文は必要でなければ省略しても問題ありません。
次のコードでは、変数resultが65以上かつ75より小さいため、else if文の条件に当てはまります。
よって、else if文内の処理が実行されることになります。
let result = 70;
if (result >= 75) {
console.log('合格です。おめでとうございます！');
} else if (result >= 65 && result < 75) {
console.log('不合格です。あともう少しです。');
} else {
console.log('不合格です。頑張りましょう。');
}
// "不合格です。あともう少しです。"
if文は上から順番に評価されるため、どこかの条件式でtrueの評価を得ると、その先の条件式は評価されません。
論理演算子を使用する
if分では、論理演算子（and、or、not）を使用することで条件式を細かく指定することができます。
論理積（and）
if (条件式1 && 条件式2) {
実行する処理; //条件式1と条件式2がtrueの場合に実行される
}
条件式の間に&&を挟むことで、条件がいずれも真の場合に処理を実行できます。条件を1つでも満たさない場合は、処理は実行されません。
論理和（or）
if (条件式1 || 条件式2) {
実行する処理; //条件式1または条件式2がtrueの場合に実行される
}
条件式の間に||を挟むことで、条件のいずれかが真の場合に処理を実行できます。条件を1つでも満たせば、その他の条件を満たさずとも処理は実行されます。
論理否定（not）
if (!条件式) {
実行する処理; //条件式がfalseの場合に実行される
}
条件式の前に!を記入すると、条件を満たさない場合に処理が実行されます。結果が逆になると覚えておきましょう。
if文の省略形
実行する処理が1行のみの場合、ブロック{}を省略し、1行にまとめてif文を書くことができます。
if (条件式) 実行する処理;
if (true) console.log('この文は実行されます');
// "この文は実行されます"
かんたんな条件分岐であれば省略形を書くことで、無駄なコードを省くことができます。
しかし場合によっては、どこまでがif文であるか分かりにくくなってしまうこともあるため、可読性を向上させるためにも基本的にはブロックを用いることが推奨されます。
また、条件演算子を用いることで、if文とは異なる形で完結に条件分岐を書くことができます。
気になる方は、以下の記事を参考にしてみてください。
JavaScriptには、演算子の中でも特にユニークな条件演算子というものがあります。 if...else文の代わりとして良く使用されるため、覚えておくと便利です。 今回は、条件演算子とは何か、また使い方について解説していきます。 条件演算子（三項演算子） 条件演算子とは、条件によって処...
ネストされたif文
if文の中に別のif文を記述することで、複数の条件を満たすかどうか表現することができます。
if (条件式1) {
if (条件式2) {
条件式1と条件式2がtrueの時に実行する処理;
} else ...
} else ...
一番外側のif文の条件式1がtrueを返した場合、そのifブロック内に書かれた内側のif文の処理に移ります。
さらに内側のif文の条件式2を評価し、trueまたはfalseによって実行する処理が分岐されていきます。
ネストを使ったif文を用いることで、細かい条件分岐を行うことができます。
その一方で、一般的にはネストは浅い方が読みやすいコードとして認識されるため、まずは標準のif文で表現できないか、条件式をよりシンプルに設定できないかを考えると良いでしょう。
まとめ
今回は、if文による条件分岐について解説しました。
どのプログラミング言語にもif文の活用場面は非常に多く、JavaScriptの場合にも同様のことが言えます。
if文の省略形を用いることで、メンテナンスがしやすくなるメリットがありますが、複数人で開発をする場合などは、省略形だと誰もがわかるようにコメントを残すなど、工夫をすると良いでしょう。
合わせて読みたい条件分岐入門シリーズ
第1回：条件分岐 -if文（当記事）
第2回：条件分岐 -switch文
コメント