概要

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

結論

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 】とは
 トランスパイルとは

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

概要

結論