今回はReactの文法で用いられるJSXについて解説したいと思います。JSXはHTML扱ったことがある方であれば簡単に理解、記述することが可能です。この機会に簡単におさらいしておきましょう。React同様、JSXもFacebook社が開発したものになります。XML」の略でJavaScriptを拡張した言語です。JSXはReactを用いてHTMLを出力するための言語で、一言で言うとReactのマークアップ言語です。JSXのメリットとしては以下の2つが挙げられます。HTMLやXMLと記述が似ており、直感的に書くことが可能な点JavaScriptよりコードが短くなるため処理が速い点JSXのトランスパイルJSXはReact内部でトランスパイルという処理が施され、JavaScriptに変換されます。JSXのトランスパイルは暗黙的にBabelが行っています。参考:BabelではどのようにJSXがJavaScriptに変換されるか見ていきましょう。以下の記述はJSXで書かれたコードになります。App;これがトランスパイルされJavaScriptに変換されると以下のようなコードになります。App;JSXでコーディングするか、JavaScriptでコーディングするか、どちらが容易であるかは一目瞭然ですね。これがJSXが直感的であるということになります。JSXとJavaScriptJSXとJavaScript、両方記載することも可能です。Worldを表示させてみます。App;このようにJSXとJavaScriptを併用できることも覚えておきましょう。深く理解する今回はReactの文法で用いられるJSXについて解説しました。上記のポイントを押さえながら開発に取り組んでいきましょう。list...Railsエンジニアちばよしはる銀座にあるヘルステック企業のRailsエンジニア。初心者から中級者向けに記事を更新しています。お酒とカレーと競馬が好き。TechTechMedia。