JSXでの即時関数ではセミコロンをつけるとエラー

JSXで即時実行関数(IIFE)を使うとき、セミコロンをつけるとエラーになる

先日からJavaScriptのフレームワークであるReactの基礎の基礎を勉強し始めて、ずっとハマっていた問題がありました。それは、JSX記法で、JavaScriptと同じように即時関数を使うと、なぜかエラーが出るというものでした。

即時関数の書き方:JavaScriptとJSX記法との違い

ここで即時関数の基本的構文(書き方)を比べてみましょう。

JavaScript(アロー関数を使う場合)JSX
( ( )= >{ 文 } )( ) ;

アロー関数を使わない場合は 、( function ( ) { 文 } )( ) ;
( ( )= >{ 文 } )( )
即時関数の書き方について、JavaScriptとJSXとでの違い。セミコロンの有無

違いはただ1つ、そう、セミコロンの「;」をつけるかどうかです。

JSXでは即時関数の末にセミコロン「;」をつけるとエラーが出る

エラーの例

はい、まさにそのままです。エラーが出る簡単な例を以下に示します。

<div>
 { 
   ( () = >{
                if ( x ) {
                   文1
                         }
          文2
            })();  //★ セミコロン「;」をついているのでエラーがでる
 }
</div>

これの「//★」部分に注目してください。その直前のコードに「;」がついているので、ここでエラーがでます。

エラーの理由

この点正確な理由は知りません。

ただ、JSXの波括弧「{ }」の内部は、全体として1つの式でなければならないというルールがあるようです。

そしてJavaScriptのセミコロン「;」は、「文」の区切りを表すため、もし、//★の直前にセミコロンをつけてしまうと、

<div>
{
 ~~~~ ;
}

</div>

という形式になってしまうため、波括弧内部が全体として「1つの文」として構成されてしまいます。

これは上述、JSXの波括弧「{ }」の内部は、全体として1つの式でなければならないというルールに反してしまいます。なので、エラーが出るのだろうと思っています。

稼げる実力を身につける、就職や転職で勝つために

Tech Academy

厚切りジェイソンのCMでおなじみのプログラミングスクール。自宅でオンライン受講OK。現役のプロが一人一人に専属メンターになってくれ、質問すればすぐに回答。転職保証あり

Udemy

世界最大級のオンライン学習動画サービス。AI・データサイエンスなど最先端のプログラミング講座からビジネススキル講座まで10万以上の講座から選び放題。講師に掲示板から直接に質問もできる。