2021.02.01  2021.04.09

React.js JSXを使う事で得られるメリットと注意点を紹介

皆さんこんにちは!マコブログです!
本日はReact.jsを学習する上で必須のJSXについて、利用するメリットと注意点を紹介していきます!

まず、皆さんReactを使用してSPAなどを作成した事はありますか?ある方は今回の内容にすごく納得ができると思います。
一度もReactを使用したことの無い方は、是非入門参考書などを買ってチャレンジしてみてください。



それでは解説に入りましょう!

Reactではエレメントを1つずつ作るのが本来の形(クリエイトエレメント)

クリエイトエレメント=createElement は、その名の通りエレメントを作るという意味で、これはreact特有の仮想DOMを利用する上で大切な事です。

reactではクリエイトエレメント(エレメントを作る)で本来表示されているDOMに入れ替えるためのエレメントをあらかじめ指定し、ユーザーのアクションに応じてDOMを動的に変更します。このエレメントを予め作っておく作業を、jsxを利用せずに行うと、恐ろしく面倒なのです。

JSXだとめっちゃ便利

上記のような悩みを持ち困っているエンジニア達の前に現れた救世主、JSX。これはなんとHTMLを直感的にscript内で書けてしまう優れものなんです。

今まではエレメントの中にエレメント…と言うように繰返しの記述でしか解決出来なかったエンジニア達は、まるでscriptタグの中でHTMLを直接書いているかのように記述できる様になったのです。実際に入門書などでReactを触っていた方ならこの便利さをより実感できるでしょう。

大袈裟かもしれませんが、JavaScriptで HTMLを直接書ける。そんな表現に近いです。

注意点

ですが、JSXを利用する上で注意する点があります。



それは、scriptファイルとして外部ファイルとしない事です。jsxを利用しない場合であれば、scriptを別ファイルとして保存し、HTML内で呼び出す方法はありです。

ですが、jsxを利用したscriptは、必ずHTMLファイル内に記述しましょう。


まとめ

いかがでしたか?今回はreactを使う上で欠かせないJSXのメリットと注意点をまとめてみました。

なんとなくJSXを利用していた人、JSXって何だかよく分からないと思っている人のお役に立てれば幸いです。

こちらの記事も是非チェックしてみてください↓
JSX 記述方法 divタグで囲む理由とは?

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →