【調査】ReactのJSXって何？？（React初学者向け）
React の勉強を始めました
最近 React の勉強を開始しました 🤗
始めた理由としては、新しく始まる開発のフロントエンドで React が使われているからです。
僕の場合、普段フロントエンドは Nuxt.js を使って開発しているので、書き方の違いを楽しんだり、似ている部分を探しながら勉強しています。
新しい技術を勉強するのは、大変な部分もありますが楽しいですよね。
さて、React の勉強を開始してまず最初に「?」となったのが、JSXという存在でした。。
HTML 風に書かれているので、HTML かと思ったら実は全く違ったり、JSX は JavaScript 拡張構文であるという、なんとなくのところはわかったのですが、もう少し理解を深めたかったので実際にどういう風に動作しているのかを調べてみました。
JSX をコンソール画面で確認してみる
まず初めに JSX をコンソール画面で確認してみたいと思います。
下記の code を、React コンポーネント内で書いてコンソールで出力してみます。
<h1>OK!!</h1>
確認してみると、JSX は JavaScript オブジェクトであることが分かりました。
確認方法
では JSX がどのような過程を経て、JavaScript オブジェクトに変換されるのでしょうか？？
結論から言うと、Babel を用いて変換されることになります。
実際に Babel の公式サイトから確認してみましょう。
確認方法は、下記の公式から「Try it Out」をクリック。あとは確認したい HTML の code を左の画面に貼り付けると、右側の画面で確認できます。（※左サイドバーの PRESETS の react にチェックを入れておくこと）
それでは、まずは下記の code を貼り付けて確認してみましょう。
<h1>Hello</h1>
Babel での変換結果はこのようになりました。
React.createElement("h1", null, "Hello");
次はもう少し複雑にしてみます。
<div>
<h1>Hello</h1>
<h2>React</h2>
</div>
下記のように変換されました。
React.createElement(
"div",
null,
React.createElement("h1", null, "Hello"),
React.createElement("h2", null, "React")
);
それでは、React コンポーネント内でこの code をコンソールで出力してみます。
すると下記のように JavaScript オブジェクトであることが確認できました。
Babel によって変換されたこれらの関数(React.createElement())が実行されることで、JavaScript オブジェクト(React 要素)が生成されていることが分かりますね。
結果からわかること
Babel で実際に動きの確認をしてみて分かったのは、繰り返しになりますが Babel によって変換された関数 (React.createElement()) が JavaScript オブジェクト （React 要素） を生成していることが分かりました。
またJSX を書くということは、React.createElement()を書いていることと同じであるということも分かりましたね。
ただ JSX のおかげで、React.createElement()を何回もベタ書きせずに済むので、code をスッキリさせることができますね 👍
Discussion