zukucode
主にWEB関連の情報を技術メモとして発信しています。

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

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

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文の中の条件が実行されます。

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

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文

例えばa1の場合、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文の基本的な使い方と注意点で紹介します。


関連記事

  • webpack-dev-serverでhttpsでのアクセスを可能にする方法

    webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...


  • stylelintで例外(無視)するタグを指定する

    cssで構文チェックを行うstylelintで任意のタグを無視してエラーとしない方法を紹介します。以下のようにruleのignoreTypesで無視するタグを指定します。以下の例ではamp htmlの...


  • JavaScript localStorageの基本的な使い方まとめ

    JavaScriptでデータをブラウザに簡単に保存する仕組みのlocalStorageの基本的な使い方を紹介します。keyは保存するときにキーとなる値です。取り出すときにこのキーを指定して取得します。...


  • JavaScript 文字列を連結する

    JavaScriptで文字列を連結します。JavaScriptでは文字列の連結は文字列同士を+で結合できます。例えば以下のように、数値同士を+演算子で計算すると足し算が行われてしまうので注意します。上...


  • JavaScript 0埋めをするテキストボックスを作成する

    テキストボックスで値を入力後、指定した文字数に0埋めする処理を実装します。以下のURLで紹介した処理を組み合わせれば簡単に実装できます。JavaScriptで指定した文字数に0埋めをするとJavaSc...


  • JavaScript ¥(円マーク)を文字列で扱う

    JavaScriptの¥(円マーク)は、正しく設定していないと利用者のPCのOSなどの環境によっては\(バックスラッシュ)で表示されてしまう可能性があるので、扱いには注意が必要です。JavaS...


  • JavaScript trimで前後の空白(スペース)を削除する

    JavaScriptで文字列の前後の空白(スペース)を削除します。trim関数を使えば先頭と末尾の半角スペース、全角スペースの両方が削除されます。IE8以下の場合はtrim関数が使えないので自作する必...


  • JavaScript 時刻の妥当性チェックをする

    時刻の妥当性チェックを行います。HH:mm書式で00:00〜23:59までの範囲が有効になるように正規表現でチェックをしています。


  • JavaScript システム日付を取得する

    JavaScriptでシステム日付を取得するには以下のように、Dateオブジェクトを宣言します。取得したDateオブジェクトから年〜ミリ秒までをそれぞれ取得できます。月だけは0から始まるので+1をする...


  • JavaScript switch文の基本的な使い方と注意点

    JavaScriptのswitch文の基本的な使い方を紹介します。JavaScript If,else,else if文の基本的な使い方でif文の基本的な使い方について説明しましたが、else ifの...