React の JSX とは？
React 要素を簡単に記述する JSX
ここまでの例では React 要素を作成するために、 React API の React.createElement() を利用していました。
しかし、JSX を使うと React 要素をより簡便な形式で作成できます。
JSX は JavaScript を拡張して、UI 要素を記述するのに HTML のようなタグ構文が使えるようにしたものです。
JSX による React 要素の作成
比較のため、まずは JSX を使わないで React 要素を作成する例を示します。これは「React の基本要素 〜 React 要素と ReactDOM」で紹介した例と同じです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Simple React</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="js/test1.js"></script>
</body>
</html>
var a = React.createElement('h1', { myaddr: 'bar' }, 'First element!')
ReactDOM.render(a, document.getElementById('root'))
React.createElement() メソッドで React 要素を作成し、 ReactDOM.render() メソッドで、それを HTML の div 要素と関連付け出力しています。
実行すると次のようになります。
さて、JSX を利用した場合は、どのように書けば良いでしょうか。
JSX を使うと次のように記述できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Simple React using JSX</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="js/test101.js"></script>
</body>
</html>
var a = <h1 myaddr="bar">First element!</h1>
ReactDOM.render(a, document.getElementById('root'))
js/test101.js の1行目。変数に対して、いきなりタグをセットするような書き方になっていますが、これが JSX です。
「HTML の h1 タグとして作成する」、「プロパティは myaddr="bar"」、「子要素は "First element!" である」といった内容が、 直感的という以上に、まさにそのまんま記述されていることがわかりますね。
とても直感的かつ使いやすいので、これ以降は直接 React.createElement() 関数で React 要素を記述するのではなく、JSX を利用することにします。
さらに具体的な書き方は、後で説明します。
JSX を利用するために Babel を取り込む
さきに進む前に、一点注意点があります。
JSX は、ブラウザの JavaScript エンジンで直接はサポートされていません。このため JSX を使うには Babel を利用します。
Babel は新しい JavaScript のシンタックスなどを、多くのブラウザがサポートできるバージョンに変換するために使われる JavaScript コンパイラです。 Babel は JSX のシンタックスから React.createElement() 関数の呼び出しに書き換えます。
このため、上記で JSX を利用しない場合と利用する場合で、次の二点の違いがあります。
- JSX 利用時、上記 HTML で babel.min.js を取り込んでいる
- JSX 利用時、JavaScript の type 属性で text/babel を指定している
Babel を取り込むだけで JSX が利用できるので簡単ですね。
以上、ここでは JSX と React.createElement() の関係を軸に JSX について説明しました。