ReactのJSXについて理解を深めよう！

#概要
Reactを勉強していく中でふと__『JSXって何だ？』__という疑問が湧いたので、この記事を書くことでJSXの理解を深めたいと思います。

前回の記事
ReactでHello Worldをする前に...

続きはこちら
Reactにおけるトランスパイラー【Babel】の役割

#結論
####JSXでコードを書くことにより、JavaScriptでコードを書くより簡単にHTMLを画面に出力できる！

#実際にコードを見てみよう

src/App.js

import React, {Component} from 'react';

class App extends Component {
  render() {
    return <div>Hello Micropig！</div>;
  }
}

export default App;

上記のコードの<div>Hello Micropig！</div>がまさに__JSX__と言われるものです。

表示画面はこのように！

---

#JSX = JavaScript XML ? ?
JSXはJavaScriptを拡張した言語です。Reactを用いてHTMLを出力するための言語で、これもReactと同様にFacebook社が開発しました。JSXは見た目がXMLやHTML風なので可読性が高いです。

• JSX = JavaScript XML
• JSX = JavaScript eXtension

私が見つけた限り、２つの正式名称が見つかりました....
あまり正式名称にこだわらなくても良いかもしれませんね！

#なぜJSXなのか
先ほどお見せしたこのコードは、アプリケーションの中でトランスパイルされJavaScriptのコードに変換されます。

src/App.js

import React, {Component} from 'react';

class App extends Component {
  render() {
    return <div>Hello Micropig！</div>;
  }
}

直接JavaScriptで同じような出力を画面に表示しようとすると以下のようなコードになります。

src/App.js(JavaScriptを使う)

import React, {Component} from 'react';

class App extends Component {
  render() {
    return React.createElement(
      'div', 
       null, 
      'Hello Micropig！');
  }
}

export default App;

画面表示は特に変わりません。

以上に示すように、画面に<div>タグを用いてHello Micropig！と表示したい時に、JSXを用いてコードを書くのとJavaScriptを用いてコードを書くのではJSXを用いてコードを書いた方が__容易に実装できる__ことがお分かりいただけると思います。

####このように比較的直感的にHTMLを表現できるということがJSXの強みであります。

#リファレンス
React の JSX とは？
「JSX キモい」に反論してみる
ReactやVueのJSXについて曖昧に理解する
シンタックス 【 syntax 】とは
トランスパイルとは