コーディング

JavaScriptの条件分岐 - if文

★JavaScript

JavaScriptの条件分岐

if文とは

「if」の文字が表すように「もし〜だったら、〜を実行する」といった条件分岐を行う構文となります

if (条件) {
 //条件がtrueだった場合に実行する処理
}

ifの基本ルール

if文は、真偽値(true or false)を元に処理の振り分けを行いますので、「真偽値が返される条件式」を指定します

const a = 5;

if (a < 10) {
  console.log('aは10より小さい');
}

数値型の変数 a を宣言し、初期値として 5 を入れる
a が10より小さいとき、「{}」で囲まれたところが実行される
結果を出力パネルに表示する

ifの処理の流れ

もちろん、実際にこの文を使う場合、判定の結果はtrace文ではなく、もっと具体的な演出になります。

さまざまな条件

const a;
a < 10  // a が10より小さい
a > 10  // a が10より大きい
a <= 10  // a が10以下（10も含む）
a >= 10  // a が10以上（10も含む）
a == 10  // a が10と一致
a != 10  // a が10ではない

この中で特に間違えやすいのは「==」という記号です。
等しいかどうか調べるときには必ず２つ必要です。

if ( password != 'abc123' ) {
    console.log( 'パスワードが間違っています。' );
}

else

条件が成立しない場合に何かを実行したいときに、「そうではないとき」という処理を実行します

if (条件) {
 // 条件がtrueだった場合に実行する処理
} else {
 // 条件がfalseだった場合に実行する処理
}

《else文の特徴》

単体では利用できない
同一if文内に一つのみ
最後に記述する
省略可

const a = 15;

if (a < 10) {
  console.log('a は10より小さい');
} else {
  console.log('a は10より小さくはない');
}

else if

if と else の間に書く「else if」には、if 文と同じように条件を書くことができ、「そうでなくて、もし〜ならば」という処理をつくります

if (条件A) {
 // 条件Aがtrueだった場合に実行する処理
} else if (条件B) {
 // 条件Aがfalseで、条件Bがtrueだった場合に実行する処理
} else {
 // 条件A、条件Bともにfalseだった場合に実行する処理
}

《else if文の特徴》

単体では利用できない
同一if文内に複数記述可
if文より後に記述する
省略可

const a = 10;

if (a < 10) {
  console.log('a は10より小さい');
} else if (a == 10) {
  console.log('a はずばり10');
} else {
  console.log('a は10以上');
}

ANDで条件を組み合わせる

if 文では、いくつかの条件を並べることができます
条件を並べるときには「AND（&&）」か「OR（||）」を使って、条件どおしをつなぎます
両方の条件が成立するときだけ処理を実行したいときには、AND（&&）を使います

const a = 5;

if ( a > 0 && a < 10 ) {
   console.log( 'a は１から９までの数値です。' );
}
条件A：a > 0　　a が０より大きい
条件B：a < 10　 a が10より小さい

この例では条件A、Bの両方が成立する（true）ので、出力パネルには「a は１から９までの数値です。」と表示されます。

ORで条件を組み合わせる

どちらかの条件が成立するだけで処理を実行したいときは、OR（||）記号を使います

cons a= 5;

if ( a < 0 || a > 10 ) {
   console.log( 'a は０より小さいか、10より大きい数値です。' );
}
条件A：a < 0　　a が０より小さい
条件B：a > 10　 a が10より大きい

この例では条件A、Bのどちらも成立しない（false）ので、出力パネルにはなにも表示されません。

中括弧の省略

各コードブロックに文がひとつしかないときには、次のように括弧を省略することもできます
不用意に省略すると、うまくいかない原因にもなるため、常に中括弧を書くようにしましょう

swich文とは

swich文で実行できる処理は、if文でも実行できるので、利用機会はあまり多くありません
swich文は、一つ値を複数の値と比較し条件分岐を行う際に適しています
swich(式){ }の式には、比較基準となる値を指定します

swich (式) {
 case 比較対象1:
  //式が比較対象1と一致した場合に実行する処理
  break;

 case 比較対象2:
  //式が比較対象2と一致した場合に実行する処理
  break;

 case 比較対象3:
 case 比較対象4:
  //式が比較対象3または比較対象4と一致した場合に実行する処理
  break;

 default:
  //どのcaseにも一致しなかった場合に実行する処理
  break;
}

case

caseには、式と比較する値を指定します
式とcaseの値が一致した際にcase ~ breakまでの処理が実行されます

break

swich文は「一致したcase ~ 次に現れるbreakまで」の処理が実行される仕組みとなっています
breakを書き忘れると以降のcaseまで実行されてしまいますので注意してください

default

defaultは、省略可能です。
defaultに指定した処理は、どのcaseにも一致しなかった場合に実行されます

const language = 'en';

swich (language) {
 case 'jp':
  console.log('こんにちは');
  break;

 case 'en':
  console.log('Hello');
  break;

 default:
  console.log('そのような言語は存在しません');
  break;
}

定数languageがjpだった場合、「こんにちは」と表示する
定数languageがenだった場合、「Hello」と表示する
定数languageがjpでもenでもなかった場合、「そのような言語はありません」と表示する