Reactを書く上で欠かせない『JSX』とは??

React
とんぺい
とんぺい

Reactを勉強してく途中でJSXっていうものに出会ったんだけど、これってなんなんだろう?

師匠に話を聞きに行ってみるブゥ!

こんにちは〜

師匠
師匠

とんぺいくん、こんにちは。

今日は何を聞きに来たんだい?

とんぺい
とんぺい

今日はReactで出てくるJSXについて質問に来たブゥ!

本とかで調べたりしたんだけど、あんまりピンとくるものがなかったブゥ…

JSXとは

師匠
師匠

なるほど、JSXについて知りたいんだね。

JSXとはReactでHTMLを簡単に出力するためにFacebookが開発した独自の構文のことをいうんだ。

とんぺい
とんぺい

ほうほう…

なんでFacebookはわざわざJSXなんてものを作ったんだブゥ?

なぜJSXなのか?

師匠
師匠

それは実際にコードを見ながら説明しよう!

例として、簡単な入力フォームとボタンを作成するよ。

とんぺい
とんぺい

うんうん。

この構文の形には見覚えがあるブゥ!

HTMLさえわかってれば、大体何を書いているか見当がつくブゥ!

師匠
師匠

じゃあ次に、JSXを使わないでJavaScriptだけで同じページを書くとどうなるか見てみよう!

とんぺい
とんぺい

うわ〜、全然違う!

JSXを使って書いた方が圧倒的に読みやすいブゥ!

これはJSXを開発した理由も納得いくブゥ!

師匠
師匠

実際にはBabelというトランスパイラーが裏でJSXを自動でJavaScriptに変換してくれているんだ。

今日はもう遅いし、その話はまた今度にしよう。

とんぺい
とんぺい

Babel?

また気になるワードが出てきたブゥ!

でもとりあえず今日はJSXについて理解できたブゥ。

師匠ありがとう! またね〜

師匠
師匠

はい。さようなら。

それでは最後にまとめをして終わりにしよう。

まとめ

JSXとはReactでHTMLを簡単に出力するためにFacebookが開発した独自の構文のことをいうんだ。

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

コメント

タイトルとURLをコピーしました