2021.02.02  2021.04.09

JSXを使う際に感じた疑問 大元をdivで括らないといけない理由を説明

皆さんこんにちは!マコブログです!
本日は、JSXを使っている途中で感じた疑問について話していこうと思います!

Reactでアプリケーションを開発している方々は、JSXを利用している途中、なぜ大元をdivで括らないといけないのか疑問に感じたことはありませんか?




Reactは、仮想DOMを本来のDOMに置き換えると言う流れで動的にサイトの内容を変更するのですが、この仮想DOMを作成する際に、Element(エレメント)と呼ばれる表示される内容をまとめた要素を作る必要があります。この作業がcreateElement(エレメントを生成する)です。

この作り出されたElement(エレメント)は、Reactで1つ1つ作ることができますが、JSXを利用することで複数のエレメントをまとめて作成することができます。

注意点

ですがここで注意点が…「JSXならエレメントをまとめて作れる≠同時に複数のエレメントを作れる」なんです。

え?同じことを言っているじゃん!と思うかもしれませんので、例え話をして理解をしていただきましょう。

JSX記述の上で理解しておくべき例え話

例えば、沢山の材料があるテーブルで、お菓子を1つ作っていいよ。と言われます。ですが、あなたは夢中になってしまい複数のお菓子を作ってしまいました。

当然怒られますよね。createElement(ここでいうお菓子作り)は、基本的に1つのエレメントを作る作業なのですから。
ですが、ここで貴方の友達がお菓子の袋を持ってきて、作ったお菓子を全て袋の中に入れます。



そして、これをまとめて1つのお菓子として扱おう!と言い出し、提出します。
実はこれ、
JSXではOKなんです…!!

React内で直感的にHTMLを操作できるJSXは、こういった理由でおおもとを<div>で括っていたのです。

まとめ

お疲れさまでした!
本日はReact、JSXの書き方、<div>で括る理由をご紹介させていただきました。

これからもドシドシReactの研究やNext等の研究を行ってまいります!是非また次の記事でお会いしましょう!

こちらの記事も是非チェックしてみてください↓
React.js JSXを使う事で得られるメリットと注意点を紹介

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

よく読まれる記事

S&P500研究所

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

Read More →