条件分岐は、プログラミングでよく使うもので、条件に応じて挙動を変更したい場合に使用します。
この記事では、そんなJavaScriptの条件分岐について、初心者向けに解説します。
条件分岐は主に「if文」と「switch」の二つを使用して行います。
目次
JavaScriptで条件分岐【If文】
ifは、言葉のとおり「もし〇〇だったら△△する」という条件分岐で、下記の様に、ifの横に（ ）で条件（もし〇〇だったら）を書き、そこが「true（正しい場合）」の場合は、｛ ｝の中（△△する）を実施します。
※このifの横の（）内は、boolean型になっていて「true」か「false」が返されます。
if (条件式) {
実行する処理;
}
【実際の例】
let num = 3;
//numは２より大きいため、コンソールに「numは２より大きい数字です。」と表示されます。
if(num>2){
console.log("numは２より大きい数字です。")
}
//numは２より小さくないため、コンソールに何も表示されません。
if(num<2){
console.log("numは２より小さい数字です。")
}
else文
シンプルなif文に関しては、条件に合致した場合（条件式の部分が「true」の場合）に｛ ｝の中が実行されて、それ以外の場合には、何も起こりません
条件に合致しない場合に何かしら処理したい場合もあり、その場合には「else」を使います。
下記のように、if文の｛ ｝の後にelse{ 実行する}と記述することで、if文以外の場合、elseの処理が実行されます。
※elseはif文の条件式以外の場合、全て適用されるため、条件式を記述する必要はありません。
if (条件式) {
実行する処理;
}else{
実行する処理;
}
【実際の例】
let num = 3;
//numは２より大きいため、if文の｛ ｝が処理され、コンソールに「numは２より大きい数字です。」と表示される。
if(num>2){
console.log("numは２より大きい数字です。")
}else{
console.log("numは２より小さい数字です。")
}
//numは５より小さいため、else｛ ｝が処理され、コンソールに「numは5より小さい数字です。」と表示される。
if(num>5){
console.log("numは5より大きい数字です。")
}else{
console.log("numは5より小さい数字です。")
}
else If文
if文だけを使用する場合、条件分岐が１つだけとなりますが、複数分岐が必要な場合があります。そうした時にif文に合わせて使うのが「else if」です。
下記のように、if文の｛ ｝の後にelse if(条件式){ 実行する}と記述することで、if文の条件式が「false」だった場合に、else ifの条件式の判定がされ、「true」の場合に処理が実行されます。
if (条件式) {
実行する処理;
}else if(条件式) {
実行する処理;
}
【実際の例】
let num = 3;
//numは２より大きいため、if文の｛ ｝が処理され、コンソールに「numは２より大きい数字です。」と表示される。
if(num > 2 ){
console.log("numは2より大きい数字です。")
}else if(num < 2){
console.log("numは2より小さい数字です。")
}
//numは５より小さいため、else ifの条件式が判定され、numは２より大きいため、｛｝が処理され、コンソールに「numは5より小さい数字です。」と表示される。
if(num > 5 ){
console.log("numは5より大きい数字です。")
}else if(num > 2){
console.log("numは2より大きい数字です。")
}
また、elseifで複数回使うことも可能です。
下記の例の様に、else if(条件式)｛処理内容｝を繋げていけば条件式を増やしていくことも可能です。
【実際の例】
let str = "青";
//strは青のため、コンソールに「strは青色です。」と表示される。
if(str === "赤" ){
console.log("strは赤色です。")
}else if(str === "黄"){
console.log("strは黄色です。")
}else if(str === "青"){
console.log("strは青色です。")
}
}
また、複数分岐をした上で、elseをつなぐことで、どの条件にも合わない場合の処理を記述することが可能です。
let str = "緑";
//strは、どの条件分岐にもあてはならないため、コンソールに「strは赤色でも黄色でも青色でもありません。」と表示される。
if(str === "赤" ){
console.log("strは赤色です。")
}else if(str === "黄"){
console.log("strは黄色です。")
}else if(str === "青"){
console.log("strは青色です。")
}else{
console.log("strは赤色でも黄色でも青色でもありません。")
}
複数の条件に当てはまる場合
else ifで複数の条件を記述する場合、複数の条件に当てはまることがあります。
例えば、下記のような場合、(num > 2)と(num >= 0)のどちらにも当てはまる(true)となります。そのような場合にどうなるかというと、一番最初に条件式が「true」となる(num > 2)の処理が実行され、コンソールには、「numは２より大きい数字です。」と表示されます。
let num = 3;
//コンソールに「numは２より大きい数字です。」と表示される。
if(num > 5 ){
console.log("numは5より大きい数字です。")
}else if(num > 2){
console.log("numは2より大きい数字です。")
}else if(num >= 0){
console.log("numは正の数字です。")
}else{
console.log("numは負の数字です。")
}
if文は、上から順番に条件式の判定を行い条件式に合致しない（false）の場合、次の判定式を確認し、条件式が合致した「true」場合に、その「true」となった｛ ｝内の処理が実行され、それ以降の条件式の判定は行われません。
この例の場合、(num > 5 )が「false」のため、次の(num > 2)の判定をし、「true」となっているため、 コンソールには、「numは２より大きい数字です。」と表示し、それ以降の処理はされませんので注意してください。
JavaScriptで条件分岐【switch文】
条件分岐には、if文ともう一つswitch文があります。
※今後if文の方が使うことが多いと思いますが、記述によってはswitch文の方が良い場合もあるので、記述方法を覚えておきましょう。
switch文の記述は下記の様になります。swithの横の（ ）には、判定する変数などを入れ、caseの横のラベルという部分に値を記述し、変数と値が合致しているか、判定を行い、合致した場合、その処理を実行します。
処理を記述した後は、breakと記述し、switch文の処理から離脱します。
caseは複数記述することで、条件分岐を行うことができ、最後にdefaultを記述することで、条件のどれにも当てはまらない場合の記述をすることができます。
switch (式) {
case ラベル1:
実行する処理;
break;
case ラベル2:
実行する処理;
break;
default:
実行する処理;
break;
}
【実際の例】
let str = "青";
//strは青のなので、コンソールに「strは青色です。」が表示される。
switch (str) {
case "赤":
console.log("strは赤色です。")
break
case "黄":
console.log("strは黄色です。")
break
case "青":
console.log("strは青色です。")
break
default:
console.log("strは赤色でも黄色でも青色でもありません。")
break
}
上記の例のcaseの部分をif文の例だとif(str === “赤” )のような記述になります。
switch (str) {
// if(str === "赤" )
case "赤":
console.log("strは赤色です。")
break
//else if(str === "黄")
case "黄":
console.log("strは黄色です。")
break
//else if(str === "青")
case "青":
console.log("strは青色です。")
break
//else
default:
console.log("strは赤色でも黄色でも青色でもありません。")
break
}
if文で記述するとこんな感じです。
let str = "青";
if(str === "赤" ){
console.log("strは赤色です。")
}else if(str === "黄"){
console.log("strは黄色です。")
}else if(str === "青"){
console.log("strは青色です。")
}else{
console.log("strは赤色でも黄色でも青色でもありません。")
}
switch文でbreakを記述し忘れると
switch文は、caseごとにbreakを記述することで、処理が終わった後、switch文から離脱します。
では、breakを記述し忘れるとどうなるかというと、合致したcase以降のすべての処理が実行されてしまいます。
下記の例だと、case”青”で合致したため、コンソールに「strは青色です。」と表示されますが、breakで離脱しないため、次の「strは赤色でも黄色でも青色でもありません。」に関しても実行されてしまい、コンソールに表示されます。
こうなると、予期せぬ動作をしてしまう可能性がありますので、switch分を使用する場合には、breakをcaseごと必ず忘れないように記述しましょう。
let str = "青";
//strは青のなので、3つ目以降の処理がされ、コンソールに「strは青色です。」と「strは赤色でも黄色でも青色でもありません。」とが表示される。
switch (str) {
case "赤":
console.log("strは赤色です。")
case "黄":
console.log("strは黄色です。")
case "青":
console.log("strは青色です。")
default:
console.log("strは赤色でも黄色でも青色でもありません。")
}
JavaScriptで条件分岐【三項演算子】
三項演算子は、簡単なIF文を作ることができる演算子で、非常に便利です。
- 三項演算子・・・ 条件式 ？ trueの時の値 ： falseの時の値
書き方は、上記の様になり、条件式の部分が「ture」か「false」の場合で表示するあたりを変更することが可能です。
【実際の例】
let num = 20;
//「num>20」はfalseとなる
let answer = num>20 ? "numは20より大きい数字です。":"numは20以下の数字です";
console.log( answer ); //「numは20以下の数字です」と表示される
let num2 = 25;
//「num2>20」はtrueとなる
let answer2 = num2>20 ? "num2は20より大きい数字です。":"num2は20以下の数字です";
console.log( answer ); //「num2は20より大きい数字です」と表示される
私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。
「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。
プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。
ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。
無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！
