JavaScriptで「;」(セミコロン)をつける理由とは【メンターが回答】

「JavaScriptで;(セミコロン)をつける必要がある理由」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。ぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

JavaScriptで;(セミコロン)をつけるか、つけないか?だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

初歩的な質問なのですが、JavaScriptやjQueryで「;」セミコロンが末尾に必要な理由ってなんでしょうか?

例えば、以下のようにセミコロンはつけるべきですよね?

function(){ 
  内容 
};

勉強してる本でセミコロンがついてない箇所があり、疑問に思いました。

 

該当のソースコード

<script>
  $(document).ready(function(){ 
    //ファイルの読み込み 
    $.ajax({url:'data.json', dataType:'json'}) 
    .done(function(data){ 
      $(data).each(function(){ 
        if(this.crowded === 'yes'){ 
          var idName = '#' + this.id; 
          $(idName).find('.check').addClass('crowded'); 
        } 
      }); 
    }); 
    .fail(function(){ 
    window.alert('読み込みエラー'); 
    }); 
 
    //クリックされたら空き席状況を表示 
    $('.check').on('click', function(){ 
      if($(this).hasClass('crowded')){ 
        $(this).text('残席わずか').addClass('red'); 
      } else { 
        $(this).text('お席あります').addClass('green'); 
      } 
    }); 
  }); 
</script>

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

自分で試したこと

このプログラムが

.fail(function(){
  window.alert('読み込みエラー');
});

本の中身では、以下のようになっていました。

})

 

メンターからの回答

セミコロンは絶対につける必要があります。理由として、処理の影響範囲が想定と変わってくるからです。

JavaScriptにはセミコロンを省いても自動で文を解釈して実行してくれるという特性があります。

しかし、その場合は影響範囲を探す手間がかかります。

なので、その手間を考えればつけないという選択肢はないです。

 

以上、JavaScriptで;(セミコロン)をつける理由について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

 

回答してくれたメンター

武田 勝輝(たけだ しょうき)

HaskellやLispなど関数型プログラミング言語を使用した数値計算システム開発業務に従事。

 

田島悠介

JavaScriptで;(セミコロン)をつけるか、つけないか?について解説したよ。

大石ゆかり

セミコロンをつけなくても自動で解釈してくれるんですねー。

田島悠介

そうなんだ。でも間違いの元になるので省略しないほうがいいね。

大石ゆかり

わかりました。ありがとうございます!

他にもJavaScriptでグローバル変数を取得する方法についてメンターが回答しているので、合わせてご覧ください。

TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。