Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
React

【React】JavaScript 構文の拡張「JSX」とは?

どうも、とがみんです。

この記事では、JavaScript の構文を拡張する「JSX」という構文について紹介します。

JSXとは?

「JSX」とは、「JavaScript XML」の略であり、Reactのコンポーネント内でマークアップ言語を記述するためのXML風の構文で、以下のようなものです。

JSXだと、HTMLとほとんど同じように記述することができ、ulタグや、liタグ、divタグなど、HTMLと同様のタグを使用することができます。

XML:Extensible Markup Languageの略。文章の見た目や構造を記述するためのマークアップ言語の一種。

JSX構文を利用しない場合は、上記のコードは以下のように書かれます。

JSXの構文で書かれたものは、そのままではブラウザで認識されないため、「Babel」というJSXをJavaScriptに変換するコンパイラを使う必要があります。


JSXの利点

JSXを利用することによるメリットについてです。

上記のJSXを使用した場合と、しない場合を比べるとわかるように、

JSXを使用することによって、書くコード量を減らすことができ、また、HTML風な構文で記述されるため、構造がわかりやすいというメリットがあります。

まとめ

「JSX」という構文について紹介しました。

参考文献