はじめに

この記事はReact初心者の筆者が学習のために書いている記事です。
間違っていたら温かくご指摘いただけるとありがたいです。

JSXとは

そもそもJSXとはなんでしょうか？
JSXは「JavaScript XML」の略で、JavaScriptの文法を拡張したものです。
ざっくり言ってしまえば、JavaScriptなのにHTMLタグを値として記述できるようになってたりします。
Babelというものを使ってこれを実現しています。

以下、サンプルコードです。

jsx_sample.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>React</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
        <h1 class="br-primary text-white display-4">React</h1>
        <div class="container mt-3">
            <div id="root"></div>
        </div>
        <script type="text/babel">
            // #rootのElementオブジェクトを取得
            let dom = document.querySelector('#root')
            // 仮想DOMのElementオブジェクトを作成
            let element = <h2>JSX sample</h2>
            // 仮想DOMをレンダリング
            ReactDOM.render(element, dom)
        </script>
    </body>
</html>

この部分ですね。
JavaScriptなのに、「変数 = htmlタグ」という書き方ができています。

jsx_sample.html

// 仮想DOMのElementオブジェクトを作成
let element = <h2>JSX sample</h2>

JSXを使わずに書いた場合は、下記のようにcreateElementを使うことで同様の結果になります。

jsx_sample.html

// 仮想DOMのElementオブジェクトを作成
let element = React.createElement('h2', {}, "JSX sample")

JSXを使った方がどんなタグが表示されるのかわかりやすくて良いですね。

JSXに値を埋め込む

JSXはただタグを埋め込むだけではなく、JavaScriptの値を埋め込むことができます。

以下はサンプルコードです。

jsx_sample2.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>React</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
        <h1 class="br-primary text-white display-4">React</h1>
        <div class="container mt-3">
            <div id="root"></div>
        </div>
        <script type="text/babel">
            // #rootのElementオブジェクトを取得
            let dom = document.querySelector('#root')

            // 変数を宣言
            let title = "タイトル"
            let message = "メッセージです。"
            let link = "http://google.com"

            const msg_s = {
                fontSize:"20pt",
                color:"red",
                border:"1px solid blue"
            }

            // 関数を定義
            let printMsg = function(msg, size, color){
                const style = {
                    fontSize: size + "pt",
                    fontWeight: '700',
                    color: color,
                    border: "1px solid " + color
                }
                return <p style={style}>{msg}</p>
            }

            // 仮想DOMのElementオブジェクトを作成
            let element = (
                <div className="alert alert-primary">
                    <h3>{title}</h3>
                    <p style={msg_s}>{message}</p>
                    <p>{10*10}</p>
                    <p><a href={link} target="blank">this is link!</a></p>
                    {printMsg('メッセージ1', 36, '#fff')}
                    {printMsg('メッセージ2', 24, '#aaa')}
                    {printMsg('メッセージ3', 12, '#666')}
                </div>
            )

            // 仮想DOMをレンダリング
            ReactDOM.render(element, dom)
        </script>
    </body>
</html>

この部分ですね。
{}の中に変数や計算式、関数を埋め込んでいます。

jsx_sample2.html

let element = (
    <div className="alert alert-primary">
        <h3>{title}</h3>
        <p style={msg_s}>{message}</p>
        <p>{10*10}</p>
        <p><a href={link} target="blank">this is link!</a></p>
        {printMsg('メッセージ1', 36, '#fff')}
        {printMsg('メッセージ2', 24, '#aaa')}
        {printMsg('メッセージ3', 12, '#666')}
    </div>
)

最後に

今回はJSXの基礎的な使い方を学んでいきました。
JavaScriptやjQueryでタグを生成して表示させるのより圧倒的に楽でしたね。
個人的にjQueryでめちゃくちゃ動的にタグを変更させるような処理を作ったことがあるので、その時の苦労を思えばReactは本当に便利だと感じました。

【React学習 #6】JSXを学ぶ

はじめに

JSXとは

JSXに値を埋め込む

最後に