JavaScript If,else,else if文の基本的な使い方

JavaScriptのif文の基本的な使い方を紹介します。

VB.NETでのIf文の使用方法をVB.NET If,Else,ElseIf文の基本的な使い方で紹介しましたが、他の言語でのif文とは文法が少し変わるくらいで考え方はほぼ同じです。

JavaScriptでのif文は以下のように、ある条件の場合だけ実行したい部分を{ }で囲い、if ()で条件を記載します。

var a  = 1;
if (a == 1) {
  // aが1の場合のみ実行される
  console.log('aは1です');
}
if (a == 2) {
  // aが2の場合のみ実行される
  console.log('aは2です');
}

// 実行結果
// aは1です

if (条件式)としたとき、条件式の結果が真(true)の場合のみ、if文の中の条件が実行されます。

AndやOr条件を含めたいろいろな使い方ができます。

JavaScripではAndは&&、Orは||で記載します。

var a  = 1;
if (a == 1 || a == 2) {
  // aが1または2の場合のみ実行される
  console.log('aは1または2です');
}
if (a >= 0 && a <= 10) {
  // aが0以上、10以下の場合のみ実行される
  console.log('aは0以上10以下です');
}

else文

条件を満たした場合だけでなく、満たさなかった場合に処理を行いたいときはelse文を使用します。

var a = 2;
if (a == 1) {
  // aが1の場合のみ実行される
  console.log('aは1です');
} else {
  // aが1以外の場合のみ実行される
  console.log('aは1ではありません');
}

// 実行結果
// aは1ではありません

満たさなかった場合のみ処理を行いたい場合は、if文の条件を工夫すればelse文を使わずに行えます。

var a = 2;
if (a != 1) {
  // aが1以外の場合のみ実行される
  console.log('aは1ではありません');
}

// 実行結果
// aは1ではありません

else if文

例えばaが1の場合、2の場合、といったように、処理を複数分けたいときはelse ifを使用します。

var a = 2;
if (a == 1) {
  // aが1の場合のみ実行される
  console.log('aは1です');
} else if (a == 2) {
  // aが2の場合のみ実行される
  console.log('aは2です');
} else if (a == 3) {
  // aが3の場合のみ実行される
  console.log('aは3です');
} else {
  // aが1,2,3以外の場合のみ実行される
  console.log('aは1,2,3ではありません');
}

// 実行結果
// aは2です

else ifは複数指定できますが、条件を満たした時点で、以降のelse ifは実行されません。

例えば、以下は最初のif (a < 10)の部分を満たしているため、続くelse if (a < 20)は実行されません。

var a = 2;
if (a < 10) {
  console.log('aは10未満です');
} else if (a < 20) {
  // 実行されない
  console.log('aは20未満です');
} else if (a < 30) {
  // 実行されない
  console.log('aは30未満です');
}

// 実行結果
// aは10未満です

else ifを何個も書くような場合は可読性を上げるため、代わりにswitch文を使用することが多いです。

switchの基本的な使い方についてはJavaScript switch文の基本的な使い方と注意点で紹介します。