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

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

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

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

JavaScript（アロー関数を使う場合）	JSX
( ( )= >{ 文 } )( ) ; アロー関数を使わない場合は 、( function ( ) { 文 } )( ) ;	( ( )= >{ 文 } )( )

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

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

エラーの例

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

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

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

エラーの理由

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

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

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

<div>
{
 ～～～～ ;
}

</div>

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

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