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

JavaScriptでセミコロンを誤って配置するとどうなる？予期しない動作の原因と対策を解説

JavaScriptでは、セミコロンを誤った場所に配置すると、誤解を招く結果や予期しない動作につながることがあります。特に注意が必要なのは、if文などの制御構造の直後に余分なセミコロンを付けてしまうケースです。

セミコロンの位置を間違えると、条件がfalseであっても値が出力されてしまうことがあります。以下の具体例で確認してみましょう。

具体例

<!DOCTYPE html>
<html>
   <body>
      <script>
         var val1 = 10;

         // セミコロンが誤って配置されている例
         if (val1 == 15); {
            document.write("セミコロンの誤配置により出力される: " + val1);
         }

         var val2 = 10;

         // 正しい書き方：この場合は出力されない
         if (val2 == 15) {
            document.write(val2);
         }
      </script>
   </body>
</html>

なぜこのような動作になるのか

上記のコードでは、変数 val1 の値は10なので、val1 == 15 という条件はfalseです。しかし、if文の条件の直後にセミコロンが付いているため、JavaScriptはこれを「空の文（何もしない文）」として解釈します。

その結果、if (val1 == 15); までがひとつの完結した文となり、直後の波括弧 { } のブロックは条件判定の対象外となります。つまり、このブロックは条件に関係なく常に実行されてしまうのです。

一方、val2 の例のようにセミコロンを正しく配置すれば、条件がfalseの場合はブロック内のコードは実行されません。

間違いを防ぐためのポイント

  • if文、for文、while文などの条件の直後にセミコロンを付けない
  • ESLintなどのリンターやエディタの構文チェック機能を活用して、余分なセミコロンを自動検出する
  • コードレビューの際に、制御構造の記述ミスがないか確認する習慣をつける

このように、たった一文字のセミコロンでも、その位置を間違えるとプログラムの挙動が大きく変わってしまいます。制御構造を記述する際は、セミコロンの位置に十分注意しましょう。

  1. JavaScriptで0を数値（Number）に変換する方法をわかりやすく解説

    JavaScriptで値を数値（Number型）に変換するには、Number()メソッドを使用します。このメソッドに引数として値を渡すと、その値が数値に変換されて返されます。例えば、数値の「0」をNumber()メソッドに渡した場合、結果はそのまま数値の「0」として返されます。以下のサンプルコードを実行して、実際の動作を確認してみましょう。サンプルコード<!DOCTYPE html> <html>    <body>       <p>0を数値（Number

  2. JavaScriptで["demo"]を数値に変換するとどうなる？

    JavaScriptで配列 [demo] を数値に変換するには、Number() メソッドを使用します。この配列には文字列 demo が含まれていますが、demo は数値として解釈できないため、変換結果は NaN（Not a Number）になります。NaN は「数値ではない」ことを表す特別な値で、数値への変換が失敗した際に返されます。コード例以下のコードを実行して、[demo] を JavaScript で数値に変換する動作を確認してみましょう。<!DOCTYPE html> <html>    <body>