セミコロンの使い方 | 文(Statement)の構成 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

セミコロンとは？

セミコロン（;）は、JavaScriptにおいて文の終わりを示すために使われます。JavaScriptでは文ごとに処理が行われるため、それぞれの文を明確に区別するためにセミコロンが必要です。ただし、JavaScriptには「自動セミコロン挿入（Automatic Semicolon Insertion, ASI）」という機能があり、必ずしもセミコロンを手動で挿入しなくても動作することがあります。

セミコロンが必要なケース

セミコロンが特に必要になるのは、複数の文を1行に記述するときや、式を区切りたいときです。また、セミコロンを省略しても動作する場合がありますが、省略が原因でエラーや予期しない動作を引き起こすこともあります。以下では、セミコロンの基本的な使い方を具体例とともに説明します。

セミコロンを使ったJavaScriptの例

let x = 10;
let y = 20;
let sum = x + y;
console.log(sum);

上記の例では、各行の文の終わりにセミコロンを使って明示的に区切っています。これにより、各文が明確に区別され、JavaScriptエンジンが正しく処理を行うことが保証されます。

プログラムの解説

HTMLコードの解説

<script>
    let x = 10;
    let y = 20;
    let sum = x + y;
    console.log(sum);
</script>

HTMLの<script>タグ内にJavaScriptコードを埋め込んでいます。

JavaScriptコードの解説

let x = 10;
let y = 20;
let sum = x + y;
console.log(sum);

このJavaScriptコードでは、セミコロンを使って各文の区切りを明確にしています。JavaScriptでは1つ1つの文が終了するたびにセミコロンを付けることが推奨されています。セミコロンがあることで、複数の文を1行にまとめた際にも正しく動作します。

このコードでは、変数xとyにそれぞれ数値を代入し、xとyの合計をsumに代入しています。その後、console.log()を使ってsumの結果をコンソールに表示します。各文の終わりにはセミコロンを入れて文を区切っています。

セミコロンを省略できる場合

JavaScriptには自動セミコロン挿入（ASI）機能があり、文の終わりが明確である場合には、セミコロンを省略しても動作することがあります。次の例では、セミコロンを省略しています。

let x = 10
let y = 20
let sum = x + y
console.log(sum)

このコードでも正常に動作しますが、セミコロンを省略することでコードの読みやすさやエラー発生のリスクが増える場合があります。そのため、通常はセミコロンを明示的に使うことが推奨されます。

セミコロンを省略することで発生する問題

セミコロンを省略することによる問題の一例として、次のコードを見てみましょう。

let x = 10
let y = 20
let sum = x + y
(function() {
    console.log(sum)
})()

この例では、()()を使って即時実行関数を呼び出していますが、セミコロンを省略すると、JavaScriptはlet sum = x + yと(function() {...})()を1つの文とみなしてしまい、エラーが発生する可能性があります。このようなケースでは、セミコロンを使用して文を明確に区切ることが重要です。

まとめ

セミコロンは、JavaScriptで文の区切りを示す重要な役割を持っています。自動セミコロン挿入（ASI）によって省略できる場合もありますが、コードの明確性や予期せぬエラーを防ぐため、セミコロンを使用することが推奨されます。特に、複数の文を1行に書く場合や、即時実行関数を使用する場合など、セミコロンの使用が必須となるケースがあります。

スポンサーリンク