スポンサードリンク
どうも、とがみんです。
この記事では、JavaScript の構文を拡張する「JSX」という構文について紹介します。
JSXとは？
「JSX」とは、「JavaScript XML」の略であり、Reactのコンポーネント内でマークアップ言語を記述するためのXML風の構文で、以下のようなものです。
1 2 3 4 5 6 7 8 9 | #JSXを使う場合 function render(){ return ( <ul> <li>togamin.com</li> <li>fresopiya.com</li> </ul> ); } |
JSXだと、HTMLとほとんど同じように記述することができ、ulタグや、liタグ、divタグなど、HTMLと同様のタグを使用することができます。
XML：Extensible Markup Languageの略。文章の見た目や構造を記述するためのマークアップ言語の一種。
JSX構文を利用しない場合は、上記のコードは以下のように書かれます。
1 2 3 4 5 6 7 8 9 | #JSXを使わない場合 function render(){ return React.createElement( 'ul', null, React.createElement('li', null, 'togamin.com'), React.createElement('li', null, 'fresopiya.com') ); } |
JSXの構文で書かれたものは、そのままではブラウザで認識されないため、「Babel」というJSXをJavaScriptに変換するコンパイラを使う必要があります。
JSXの利点
JSXを利用することによるメリットについてです。
上記のJSXを使用した場合と、しない場合を比べるとわかるように、
JSXを使用することによって、書くコード量を減らすことができ、また、HTML風な構文で記述されるため、構造がわかりやすいというメリットがあります。
まとめ
「JSX」という構文について紹介しました。
参考文献
スポンサードリンク
スポンサードリンク
