JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのif...else if文とは？複数条件を扱う基本構文を解説

if...else if文は、if...else文の拡張形であり、複数の条件の中から正しい判断を行いたい場合に使用されるJavaScriptの制御構造です。条件式を上から順に評価し、最初にtrueとなったブロック内の処理を実行します。

基本構文

if-else-if文の構文は以下のとおりです。

if (条件式1){
   // 条件式1がtrueの場合に実行される処理
}
else if (条件式2){
   // 条件式2がtrueの場合に実行される処理
}
else if (条件式3){
   // 条件式3がtrueの場合に実行される処理
}
else{
   // すべての条件式がfalseの場合に実行される処理
}

動作のポイント

条件式は記述された順番に上から評価され、最初にtrueになった時点でそのブロックの処理を実行し、残りの条件判定はスキップされます。すべての条件がfalseだった場合は、最後のelseブロックが実行されます。

サンプルコード

以下のコードを実行すると、JavaScriptにおけるif...else if文の動作を確認できます。

<html>
   <body>
      <script>
         var book = "maths";
         if( book == "history" ){
            document.write("<b>History Book</b>");
         }
         else if(book == "maths" ){
            document.write("<b>Maths Book</b>");
         }
         else if(book == "economics" ){
            document.write("<b>Economics Book</b>");
         }
         else{
            document.write("<b>Unknown Book</b>");
         }
      </script>
   </body>
</html>

実行結果

この例では、変数bookに"maths"が代入されているため、最初の条件（history）はfalse、次の条件（maths）がtrueとなり、画面には「Maths Book」と表示されます。

なお、document.write()は古い書き方のため、現代の開発ではconsole.log()やDOM操作を使って出力する方法が一般的です。しかし、条件分岐の仕組み自体は同じなので、学習段階ではそのまま理解して問題ありません。

  1. JavaScriptのフローチャートでif...elseステートメントをわかりやすく図解する方法

    if文は、JavaScriptが条件に応じて判断を下し、処理を条件付きで実行するための最も基本的な制御構文です。この記事では、if...elseステートメントの動作をフローチャート（流れ図）を使って視覚的に理解する方法を解説します。 if...elseステートメントとは if...elseステートメントは、指定した条件式がtrue（真）かfalse（偽）かによって、実行する処理を切り替えるための構文です。基本的な書き方は以下の通りです。 if (条件式) { // 条件がtrueの場合に実行される処理 } else { // 条件がfalseの場合に実行される処理 } if...

  2. JavaScriptのwithステートメントとは？用途と使い方をわかりやすく解説

    JavaScriptのwithステートメントは、特定のプロパティに対してデフォルトのオブジェクトを指定し、冗長になりがちなオブジェクト参照の記述を省略するための構文です。withブロック内で指定したオブジェクトは、スコープチェーンの先頭に追加されるため、そのプロパティ名だけで直接アクセスできるようになります。 基本的な動作 通常、オブジェクトのプロパティにアクセスするには、毎回オブジェクト名を明示する必要があります。しかし、withステートメントを使えば、以下のようにコードを簡潔に書けます。 オブジェクト名の繰り返し記述を省略できる 同じオブジェクトの複数のプロパティへ短くアクセスできる 指