JavaScript入門制御構文（条件分岐）

制御構文とは、コードが実行される処理の流れを条件分岐したり繰り返したり制御するための手段です。

条件分岐
switch文

条件分岐

if文

JavaScript のif文は、ifに続く丸括弧（）内の条件式がtruthy（真）の場合、それに続く波括弧{}内のコードを実行します。条件式がfalsy（偽）な値の場合には、波括弧{}内のコードは実行せず、次の処理を進めます。なお、{]で囲まれた部分は、ブロック（または節）と呼びます。

構文：if

if( 条件式 ){
   条件が真の場合の処理
}

const fruit = "りんご";
if ( fruit ) {                              //fruitに値が格納されているため、Boolean(fruit)となりtrueが返ります。
    console.log("フルーツが見つかりました。");
}

if ( fruit === "ばなな" ) {
    console.log("ばななが見つかりました。");
}

if ( fruit === "りんご" ) {
    console.log("りんごが見つかりました。");
}

>フルーツが見つかりました。
>りんごが見つかりました。

if else文

if ・・・else文では、if文の条件式がfalsyな場合にはelseブロック内のコードを実行します。

構文：if else

if ( 条件式 ) {
    ifブロック  条件式が真の場合に実行される
} else {
   elseブロック 条件式が偽の場合に実行される
}

const fruit = "りんご";
if ( fruit === "ばなな" ) { 
    console.log("ばななが見つかりました。");
}else{
    console.log("ばなな以外が見つかりました。")
}

>ばなな以外が見つかりました。

ifブロックやelseブロックの省略記法

if文やelse文に続けてブロック{}を記述しますが、このブロックを省略することもできます。

const fruit = "ばなな";
if ( fruit === "ばなな" ) 
    console.log("ばななが見つかりました。");       //条件式が真の場合に実行。ここに２行書くとエラーとなる
else
    console.log("ばなな以外が見つかりました。");   //条件式が偽の場合に実行。
    console.log("必ず実行されます")               //必ず実行

>ばななが見つかりました。
>必ず実行されます

この書き方はバグが混入しやすいので、なるべく避けた方が良いでしょう。

else if文の三項演算子で書き換え

else ・・・if文は、三項演算子で書き換えることができます。特に条件によって変数に設定する値を変更したい場合などでは、三項演算子を使うと記述を簡略化できて便利です。

if else文で書いた場合

let score = 90;
let gokaku;

if( score > 60 ){
    gokaku = "合格";
} else {
    gokaku = "不合格";
}
console.log( gokaku );
>合格

三項演算子で書いた場合

let score = 90;
let gokaku = score > 60 ? "合格" : "不合格";

console.log( gokaku );
>合格

if else文チェーン

if else文をチェーン（鎖）のように繋げて記述することで、複数の条件式を使った分岐を作成できます。

構文

if( 条件式A ){
   ifブロック  条件式Aが真の場合に実行されるブロック
}else if( 条件式B ){
   else ifブロック　条件式Aが偽かつ、条件式Bが真の場合に実行されるブロック
}

const fruit = "りんご";

if ( fruit === "ばなな" ) { 
    console.log("ばななが見つかりました。");
}else if ( fruit === "りんご" ){
    console.log("りんごが見つかりました。")
}

>りんごが見つかりました。

else ifブロックはさらに複数個繋げたり、最後にelseブロックを追加したりなど、複数の条件を追加することもできます。

const fruit = "みかん";

if ( fruit === "ばなな" ) { 
    console.log("ばななが見つかりました。");
}else if ( fruit === "りんご" ){
    console.log("りんごが見つかりました。")
}else if ( fruit ){
    console.log("フルーツが見つかりました。")
}else{
    console.log("フツールが見つかりませんでした。")
}

>フルーツが見つかりました。

if文と論理演算子

if文で複合条件を扱うときは、論理演算子を使います。

構文

論理積（AND条件）
if ( 条件式A && 条件式B && … ) {
   ifブロック   条件をすべて満たすとき実行
}

論理和（OR条件）
if ( 条件式A || 条件式B || … ) {
   ifブロック   1つ以上の条件をすべて満たすとき実行
}

if文と論理積

const num = 5;
if ( num >= 0 && num < 10 ){
    console.log( "0以上10未満です。" );
} else {
    console.log( "それ以外です" );
}
>"0以上10未満です。

if文と論理和

const fruit = "みかん";

if ( fruit === "みかん" || fruit === "りんご" ) { 
    console.log("みかん、またはりんごです。");
} else {
    console.log("それ以外です");
}

>みかん、またはりんごです。

演算子を使わないif文

JavaScript では演算子を使わず値をそのままif文の条件式に利用することができます。

演算子を使わないif文

const truthy = "truthyな値です。";
if ( truthy ) {
    console.log("条件式に渡された値truthyです。");
} else {
    console.log("条件式に渡された値falsyです。");
}
>条件式に渡された値truthyです。

if文の条件式として「文字列や数値が単純に渡された場合には、渡された値がtruthyかfalsyかを判断します」すなわち、Boolean（値）の結果を判定します。

Boolean(値)は、渡された値がnullやundefinedではないかどうかを確認するときによく使われる記述です。値が0などのfalsyな値のときにも、Boolean( 0 )の結果はfalseになるため、Boolean( null )やBoolean( undefined )と同じ結果が取得されます。そのため、nullやundefinedでないことを確認したい場合には、きちんと記述する必要があります。

const falsyVal = 0;

if ( falsyVal !== null && falsyVal !== undefined ) {
    console.log("null, undefined以外の値です。");
} else {
    console.log("null, またはundefinedです。");
}
>null, undefined以外の値です。

switch文

switch文では、条件に渡したい値がcase節と一致した場合に、それ以降のコードを実行します。条件式の値がcase節のどれにも一致しない場合には、default節に続くコードが実行されます。

構文

switch ( 条件式 ){
    case 値1:
         条件式の値が値1に一致する場合に実行
         breack;
    case 値2:
         条件式の値が値2に一致する場合に実行
         breack;
    default:
         条件式の値が値1、値2に一致しない場合に実行される

}

上記例では、case2までしか記述していませんが、任意の数だけcaseを追加できます。case節の一致の判定には、厳密等価演算子（===）を使って値を比較しています。値と型が異なる場合は、一致しません。

条件式とcase文の値と型が異なる場合

const val = 0;
switch ( val ){
    case "0": console.log("case文が実行されました。");
    default: console.log("default文が実行されました。");
}
>default文が実行されました。

switch文の場合には、それぞれのcase節の最後にbreakというキーワードを記述するのが一般的です。breakが実行されると、switchのブロックスを抜けることになります。

switch文の基本的な使い方

const whichCase = "case1";
switch ( whichCase ){
    case "case1":
      console.log("case1節を実行しました。");
      break;
    case "case2":
      console.log("case2節を実行しました。");
      break;

    case "case3":
      console.log("case3節を実行しました。");
      break;
    default:
      console.log("Default 節を実行しました。");
}

breakが実行されるとき

>case1節を実行しました。

breakが実行されない場合（コメントアウトする）

>case1節を実行しました。
>case2節を実行しました。

switch文では、case節の最後にbreakを呼び出さないと意図せず他のcase節まで実行されることになります。この仕様はバグの混入の元になるため、switch文を使用しないで、if、else if、elseを使って、switch文を代用することがしばしばあります。

カテゴリー:JavaScript