【JavaScript入門】よくわかる！JavaScriptにおけるセミコロンの必要性

皆さんこんにちは！Kotonoです。

今回はJavaScriptにおけるセミコロンの必要性や役割などについて、解説していきたいと思います。

この記事では

・セミコロンとは
・セミコロンが必要なシチュエーション

などといった基本的な内容から

・セミコロンの省略について
・セミコロンを省略するとどうなるのか

といったより発展的な内容に関しても、わかりやすく解説していきたいと思います。

セミコロンとは

セミコロンは、ピリオドとコンマを合体させた句読点の一種です。

句読点というと、普通の文章などでしか使用されないというイメージですが、実はプログラム内でも使用されることが多いのです。

使用される場面や、句読点の種類などは各プログラミング言語によってばらつきがありますが、JavaScriptにおいてはセミコロンはとても重要な役割を果たしているのです。

JavaScriptで書かれたプログラムでは、セミコロンは文の末尾に付け、その文の区切りのために使用されます。

主に「処理の仕分け・区別」などのために使われます。

セミコロンで区切られている二つの文は、それぞれ違う処理を表すということになります。

セミコロンが必要なシチュエーション

では実際に、JavaScriptプログラムにおいてセミコロンが必要な場面を見てみましょう。

まず第一に、変数を宣言する際はセミコロンを末尾に付ける必要があります。

var my_hensu = 1234;

他にも、関数内の処理を書く際にセミコロンが必要です。

function myfunction(){
    alert("Hello world!");
    console.log("Hello world!");
}

こうすることで、alert関数とconsole.log関数を別の文として区切ることが出来ました。

関数内の処理以外にも、条件分岐（if-else文）やループ文などでもセミコロンは必要です。

while (my_hensu < 5){

    console.log(my_hensu);


    if (my_hensu == 3) {
        alert("Hello!");
}
}

上のコードは、while文の中にif文を組み込んだものです。

最初の処理であるconsole.log関数の呼び出しと、次にあるif文がしっかりセミコロンによって区別されています。

セミコロンの省略について

先ほどのセクションでもご紹介したように、JavaScriptプログラミングにおいてセミコロンはほとんどどの構文にも出現するといっても過言ではありません。

「文の区切りにはセミコロンを付ける」と心がけていても、忘れがちなのも事実ですよね。

実際、セミコロンを毎回付けるのが面倒な場合「セミコロンの省略」を行うことが出来るんです。

しかし、色々気を付けないといけないルールや決まりがあるので、結局はセミコロンを毎回末尾に付けるほうが早いということもあるので、注意してください。

セミコロンを省略するとどうなるのか

では、実際にセミコロンを省略してみましょう。

省略する前のコードが以下の通りです。

var my_hensu = 10;
console.log(my_hensu); 

シンプルに変数my_hensuに値を代入し、それをJavaScriptコンソールに表示させています。

セミコロンを省略したものが、以下のコードです。

var my_hensu = 10
console.log(my_hensu) 

この場合、両方のコードが正常に動きます。

JavaScriptには、セミコロンを省略したコードでも解釈できる機能があるからです。

しかし、以下のようなシチュエーションだと、セミコロンの省略によってエラーが発生してしまいます。

以下のコードをご覧ください。

var result = myfunction(5)


(function(){
    alert("Hello!")
}) ()

上のコードでは、まず一行目に変数resultにmyfunction関数の戻り値を保存し、その文の末尾のセミコロンを省略します。

JavaScriptには、グローバル名前空間の汚染を防ぐために、関数の定義を括弧の中に閉じ込めてしまうテクニックが存在します。

グローバル名前空間などについては、以下のリンクをご覧ください。

上のコードではそのテクニックを使用し、関数の定義を括弧の中に収めました。

しかし、myfunction(5)の後にセミコロンが無いため、次の行にある括弧が正常通りに認識されないのです。

このように、場合によってはエラーが発生したりと、セミコロンを省略することで予期せぬ事態が起こるので、やはりセミコロンは省かない方が良いでしょう。

まとめ

この記事では、JavaScriptにおけるセミコロンの必要性と役割について解説しました。

セミコロンを毎回付けるのは面倒ですが、省いてしまうと余計なエラーの発生を招いてしまう可能性があるので、省略は出来る限り避けましょう。

みなさんもこの記事を通して、JavaScriptに関する知識をどんどん増やしていってくださいね！