JSX - Reactを学ぶなら知っておきたい、HTMLの表現手法
Summary
TLDRReactの学習において、HTMLとJavaScriptを組み合わせて扱うJSXについて解説しています。HTMLとの違いや動的な変数の埋め込み方などのTipsを紹介しています。Next.jsを使ったReactの学習がオススメだと締めくくっています。
Takeaways
- 😀 JSXはJavaScriptの中にHTMLを埋め込むことができる規格で、Reactでよく使われる
- 😃 JSXはHTMLとは少し異なる点があるので注意が必要
- 🤔 JSXでは複数のHTML要素を返すことができないため、divタグ等でラップする必要がある
- 📝 JSXではclass属性の代わりにclassNameを使用しなければならない
- 💡 JSX内の変数は{}で囲むことでHTML内で利用できる
- 🔗 属性値に変数を利用したり、スプレッド構文で属性を動的に設定できる
- 😮 dangerouslySetInnerHTMLでHTMLのエスケープを解除できるが、セキュリティ的に危険
- 📑 CSS in JSが可能で、スタイルを動的に切り替えられる
- 📚 ReactとNext.jsを学ぶための良書が発売された
- 🙌 ReactとNext.jsはWebフロントエンドの必須スキルになりつつある
Q & A
JSXとはどのようなものですか?
-JSXはJavaScriptの中にHTMLを記述できるようにする規格です。Reactでよく使われますが、React専用のものではありません。HTMLとJavaScriptのコードを分離せずに、1つのファイルで扱えるようになります。
JSXで複数のHTML要素を返す方法は?
-JSXではreturn文の中で複数のHTML要素を直接返すことはできません。divタグなどで囲うか、React Fragment syntaxtを使う必要があります。
JSXではclass属性はなぜ使えないのか?
-JSXではclassはJavaScriptの予約語と被るため、classNameと言う名前で属性を使う必要があります。
JSXで変数や式を埋め込むには?
-{変数名}や{式}のように中括弧で囲むことで、JSX内に変数や式を埋め込むことができます。
JSXでHTMLをエスケープせずに出力するには?
-dangerouslySetInnerHTMLというpropを使い、__htmlキーにHTML文字列をセットすることで、エスケープせずにHTMLを出力できます。
JSXで動的に属性を設定するには?
-属性の値に{}で囲んだ変数を渡すことで動的に属性を設定できます。またオブジェクトに属性をまとめて{...スプレッド属性}のように展開して渡せます。
JSXではスタイルはどのように指定するのか?
-styleプロパティにオブジェクトを渡します。プロパティはキャメルケースで、文字列ではなく変数で値を指定します。
JSXのコメントアウトはどう書くのか?
-JSXではHTMLのコメントアウトは使えません。JSスタイルのコメント /* コメント */ を使います。タグ内は// で行コメントが可能です。
HTMLをJSXに変換するツールは?
-HTMLをJSXに変換してくれるオンラインツールが多数あります。コピペするだけで変換結果が得られ便利です。
JSXのメリットは何か?
-HTMLとJavaScriptの切り分けが不要になり、1つのファイルで扱えること。変数や式をそのままHTMLに埋め込めること。動的な属性設定がしやすいことなどがあります。
Outlines
😀JSXの基本的な特徴とルール
<paragraph1>では、ReactのJSXについて説明しています。JSXはJavaScriptの中にHTMLを埋め込むことができる記法で、Reactでよく使われます。HTMLとJavaScriptを一緒に書けるので扱いやすくなりますが、ルールがいくつかあります。要素は1つしかreturnできない。複数要素の場合はReact Fragmentやdivタグで囲む必要があります。空要素はXHTML形式で閉じタグが必要です。属性のclassはclassNameに、forはhtmlForに変更が必要です。コメントもJavaScript形式になります。慣れるのに時間がかかりますが、メリットは大きいです。
😃JSXでの変数や属性の埋め込み
<paragraph2>では、JSXでは変数や式をそのままHTMLに埋め込むことができ非常に扱いやすいことを説明しています。しかしセキュリティのため、デフォルトではエスケープされてしまうので、改行やHTMLタグを含めたい場合はdangerouslySetInnerHTMLでラップする必要があります。また、オブジェクトにまとめた属性を{...変数名}という記法で一括で埋め込むこともでき便利です。
😊スタイルやイベントもJSXの中で設定可能
<paragraph3>では、JSX内でインラインスタイルやイベントも設定できることを説明しています。スタイルはキャメルケースで記述する必要があります。このようにHTMLとの親和性が高く、動的に生成できるJSXはとても扱いやすく、既存のサイトをNext.js化するなどの利用シーンも増えているそうです。
😌リンクなどの属性にも変数埋め込み可能
<paragraph4>では、hrefのような属性にも{}で変数をそのまま埋め込むことができることを説明しています。ただし、クオートは不要です。{...変数}という記法を使うと、objectに列挙した属性を一括で展開でき非常に便利だということです。
🙂おすすめのReactの学習書を紹介
<paragraph5>では、今回ご紹介した内容は山田祥寛さんの書籍「ここから始めるReact実践入門」からの一部で、とても分かりやすく丁寧な解説がされている本だということを説明しています。前半の基本的な内容からNext.jsに関する実践的な内容まで扱われているため、FrontalEndの学習には最適だそうです。
Mindmap
Keywords
Please replace the link and try again.
Highlights
最初の重要なハイライトのテキスト
2番目の注目すべきハイライトのテキスト
Transcripts
こんばんは、ともすたのたにぐちです。
今日はReactの話をしていきたいと思うんですけれども
その中でもですねこちらJSXというものについて
ご紹介していきたいと思います
今日はですねこちらの書籍
これから始めるReact実践入門
コンポーネントの基本からNext.jsによるアプリ開発まで
というですね
山田 祥寛さんが執筆された
ソフトバンククリエイティブさんの書籍
こちらが発売になったんですけれども
こちらですね一冊いただきましたので
参考にさせていただいて
今日はですねその中でチャプター2のところでですね
JSXの基本というところがあるので
そちらをですね参考にさせていただきながら
こちらの講座作らせていただきました
ありがとうございます
ということでこの JSXというものなんですけれども
これ何かと言いますとJavaScriptの中に
HTMLを組み込むことができるという規格になります
Reactだけのものではないんですけれども
基本的にはこのReactでよく使われる文法になるので
Reactを学習するときにはこのJSXについてもですね
慣れていかないといけないよということになります
要は、従来はHTMLとJavaScriptというのは
別々のものですので非常にこう相性が悪くてですね
HTMLを書いてJavaScriptを書いてということをしていたんですけれども
それをこの中に組み込むことができちゃいますよ
というのが JSX というものですね
ですので非常にこう扱いやすくなりますし
JavaScriptで操作しやすくなるというのが特徴ということですね
ではちょっとさっそく触りながらですねやっていきたいと思うので
まずReactを準備していきましょう
こちらですねターミナルを準備していきます
macOSの方はアプリケーションの中の
ユーティリティのターミナルですね
Windowsの方はスタートボタンを右クリックして
Microsoft Terminalこちらを起動しておいてください
Node.jsが必要なので、Node.jsのインストールが終わったところから
スタートしていきたいと思います
こちら np m の -v としてバージョン番号が出れば OK ですね
まだインストールしてない方は「nodejs インストール」とか
検索していただければすぐ出てくるかと思います
ではやっていきましょう
npx create-next-app@latest と入力していきます
今ですねReactを学習する時に
ここnext-appとしていまして
これNext.jsっていうフレームワークを使ったものなんですけれども
今、Reactを学習する時には
基本的にはこのNext.jsを入れて学習していただくのが
手っ取り早いかなというところがありますので
ReactとNext.jsは同じようなものだと
考えていただければと思います
ではこれでEnterしていきましょう
で OK ですかということですね
まずプロジェクトの名前を入れていきます
next-appとかとしましょうか
好きな名前で結構です
TypeScript使いますかということですね
今日はどっちでも大丈夫ですマ
Noのままいきましょうか
ESLint使いますかですね
これ Yes にしておきましょうかね
Tailwind使いますかですね
まあこれも Yes にしておきましょう
srcディレクトリー使いますかですね
これも Yes にしておきましょうか
Appルーター使いますかは Yes にしておきます
さあこんな感じですかね
customize the default import aliases
これは No のままで結構です
こんな感じでですね質問に答えていって
プロジェクトを作っていきます
これで準備できましたら next-app という
ディリクトリーができあがっていますので
これをですね Visual Studio Code で開いていきましょう
code . ですね
これで今作ったディリクトリーを
Visual Studio Codeで開くことができました
さあそしたらですねこちら見ていきましょう
src フォルダーの中のappフォルダーの中ですね
この中に page.js というファイルがあるんですけれども
ここがですねトップページの HTML を司っているところになります
これをブラウザーで見ていきましょう
ターミナルを起動して
ここで npm run dev と入力していきます
そうするとですねこちら
ローカルサーバーですね起動するので
これをですね見ていきましょう
こんな感じでページが表示されました
こちらの page.js が表示されている状態ということですね
さあではですねちょっとここでやっていきたいと思うんですけれども
今ですねまあここに書かれているのが
実際には JSX なんですが
ちょっと一旦全部消しちゃいたいと思います
この5行目のところですね main タグというのが始まっているので
この辺全部消していっちゃいましょう
ざーっと消していきます
ここですね main タグ閉じるのところまで消していきましょう
あと CSSがちょっとかかっているんですね
これで今ちょっと何もないですよということで
エラーが出ていますけれども
あとこちらですね globals.css というところでですね
CSS がかかっているので
これもちょっと消していきたいと思います
4行目から下ですね
これを全部消しちゃいましょう。
さあではこれでですね実際にやっていきましょう
page.js の方ですねこちらにこんなふうに書いていきます
p タグですね
で例えば「こんにちは」としていきましょう
で保存します
さあそうするとですね、これだけで
ページに表示されました
今ですねここよく見ていただくとわかるんですけれども
これ HTML のファイルではありません
そもそもが .js のファイルですよね
かつ3行目にですね
export default function Home() などと書かれていて
その関数というのが始まっていますけれども
JavaScriptの内部なんですよね
ですが、ここにこのように普通に HTML を書くと
そのままですね画面に表示されるよというのが
JSX というものになります
実際ですね生成される HTML もこんな感じ
きれいな p タグが生成されています
なんでこんなことができるのかというのは
普通にですね JavaScript を作っていたら
こんなことは、もちろんできないんですけれども
今 Next.js というフレームはこう使ってですね
中に React が入っていますので
それがですねこちらを処理してくれているよということになります
で JSX はですね HTML とは厳密には違うので
ちょっとですね差があるんですね
例えば、ではここにですねもう1つ p タグを入れまして
「ともすたへ」などとしましょう
保存します
そうするとですねこれエラーになっちゃうんですね
何かと言いますと
Unterminated regexp literalと書かれているんですけれども
何のこっちゃかもしれないんですが
これ終わってないですよということですね
どういうことかと言いますと
まずですね JSX の基本的なルールとして
この return の中にかける HTML の要素は1つだけ
というルールがあります
今ですねこれ p タグ1つあるんですけれども
1つの時はこれルール違反ではありません
問題ありません
なんですが2つ書くとですね
これ2つの要素がリターンの中に入ってしまっているので
これはダメですよということになります
いくつかやり方が
どうするかなんですけれどもあります
例えば1つのやり方としては
このdiv というタグですね
こういったレイアウトに影響しないタグでですね
全体を囲ってあげる
そうするとこのようにきちんと表示されるようになります
ただこれはですねちょっとデメリットもありまして
実際に生成される HTML の方ですね
こちらにもこの div タグというのができてしまうんですね
特にレイアウトとかに影響はないんですけれども
ただですねちょっとこう気持ち悪いところがあったりですとか
まあCSSによっては影響が出てきてしまう可能性があります
こういう場合どうするかなんですけれども
1つのやり方としてですね
React Fragmentというんですけれども
こういうですね非常に特殊なタグが使えます
これですね、 、 という形で
HTML のタグとも言えないようなものなんですが
これで囲ってあげると
ちゃんとですねエラーにならないですね
これはですね HTML のソースを見ても
何もですね出力されていません
JavaScript 特に React の方でですね
これはちゃんと処理してから出力してくれるので
こういうふうにきれいな HTML になってくれます
これですね実はあるものの省略でして
っていうですねちょっと特殊なタグがあって
これのですね略称なんですけれども
Next.jsの場合ですね
この React っていうオブジェクトが標準ではないので
not defined ということで
エラーになってしまうんですね
Reactっていうのをここでロードしてあげればいいんですけれども
この省略系の方が使いやすいかなと思いますので
省略系を使っていただいていいかなと思います
ということで複数のですね要素を JSX で表現したいときには
この React Fragment ですね
それか divタグとかarticleタグとか
そういったレイアウト系のタグをですね
1つ入れてあげるといいかなというところがあります
さあもう1つがですね
例えばこう hr というタグを使ってですね
罫線ですねを引きたいという場合なんですけれども
これもですねエラーになってしまいます
これ何かと言いますと
このいわゆる空要素ってやつですかね
終了タグがないタグがあるんですけれども
その場合ですねこの HTML の普通の書き方ではできません
XHTML って昔の規格があるんですけれども
その書き方をしないといけないんですね
/> でこうするとですね
ちゃんとこのように罫線が出ているんですけれども
空要素の時はですね
この /> 記号で閉じてあげるという
XHTML の書き方をしてあげましょうねということになります
続いてがですね属性にもいくつかですね変化があるんですね
例えばよく使うのがこの class っていう属性よく使うかと思います
例えば greeting とかとしましょう
でじゃあこの greeting というものに対してですね
こう文字を赤くしたいなということであれば
globals.css の方にですね
こちら greeting というクラスを
これですね color を red にしますよとかって書きました
そうするとこう赤が反映されるわけなんですけれども
実はですねこれちょっと正しくありません
正しく画面には表示されているんですけれども
デベロッパーツールの方で見るとですね
ちょっとおかしいなことが起こります
デベロッパーツールでここですねエラーが1件起こってます
見ていくとこんなエラーですね
DOM property 'class' が invalid 正しくないですよということですね
でもしかしたら className のことですかと
書かれているんですけれども
これもですね JSX の特徴の1つですね
class っていうのが JavaScript の用語と被ってしまっているので
使えません
なので JSX では class は className という名前に変わっています
なので普通に className に変えてあげるだけなんですけれども
こうですねで、赤いままきちんと表示されていて
これだと CSS のですね
エラーも表示されなくなるよということになります
画面がですねうまく表示されちゃうので
ちょっとですね見落としがちなんですけれども
プログラムとか組んでいくとですね
エラーになったりしますので気をつけてください
他にもですねいくつかありまして
for 属性が使えないので
htmlFor になったりとかですね
いくつか変化する場所があります
でこのあたりはですね HTML で普通に組んでしまったものを
JSX にしたいなという場合には
これをですねそれぞれ変更しないといけないんですけれども
こういったものはですね結構ツールが提供されています
例えばこれ transform というちょっと適当なですね
サービスを探しただけなんですけれども
HTMLをこちらに貼り付けてあげると
こっちにですね JSX として吐き出したものというのが出力されます
例えば class のところが className に変わったりですね
style が書き方が変わったりですとか htmlFor に変わったりですとか
そういった形でですね JSX で正しい書式に書き換えてくれるので
こういったツールを使ってあげるのが
一番早いかなと思いますね
さあそしてコメントの入れ方もですね
ちょっと違うんですね
HTML ではコメントをこのようにですね
コメントを入れることができるんですけれども
これですね残念ながらこちらではエラーになってしまいます
なぜかと言いますとこの ! とかがですね
JSX では使えないので
じゃあどうするかですが
こんなコメントになります
{/* そしてこちらは */} という形になります
これ JavaScript のですねコメントですね
こちら HTML に見えてるんですが
今この中って実は JavaScript ですので
JavaScript のコメントを書くようということになります
ちょっとユニークなのが
実はこのタグの中とかにですね
このようにコメントを書くことができるんですね
// とかとして p タグとかって書いてあげると
これですねコメントとしてきちんと機能しています
こうですね特に変化はないんですけれども
こんな書き方ができるのも JSX っていうのが
HTML に似ているんだけれども
実はちょっと違うよというところの一つかもしれません
ということでまあ JSX ですね
いくつかちょっと違いがあるので
HTML に慣れている方だとですね
JSX ちょっとこう違和感があったり
気持ち悪いなって感じるところはあると思うんですけれども
JSX をですね React ですとかこの Next.js で使えるようになると
どんなところが便利かといいますと
まず1 つが変数をそのまま埋め込むことができるよということですね
例えばちょっとやってみましょう
こちらですね上のところで、これいらないですね消しちゃって
const としていきますね
で name として自分の名前例えば入れたとしましょう
そしたらこの name っていう変数をですね
画面に出力したいなと思いました
その場合ですね
これまでの HTML を JavaScript で操作するとかですと
まあここに id 属性を振ってですね
で getElementById とかでですね
いろいろこう書いていかないといけなかったんですけれども
こちら JSX をですね使っている場合は
こんな風に書くことができます
これで画面を出力すると
ここがちゃんと たにぐちまこと さんになっていますよね
この {name}、マスタッシュ構文とかよく言いますけれども
{ } で変数の名前を囲ってあげると
文章の中にこの準備したですね
変数をそのまま埋め込むことができますよというのが
JSX の非常に便利なところかなと思います
ただですねここもちょっと注意が必要なのが
例えばですねこの中に HTML を組み込んだとします
ここで として太字にしましょうということですね
そうするとですねこちら埋め込んだ状態だと
ここですね まこと さんということで
タグがですねそのまま出力されます
これいわゆるエスケープというのがされているという状態ですね
HTMLをエスケープしないでそのままですね
表示したいなという場合にはこんな風に書くことができます
例えばここですね {name} さんのところを
タグで囲っていきましょうか
dangerouslySetInnerHTML
ちょっと長いですね
このように dangerouslySetInnerHTML というものにですね
入れることができるんですけれども
__html: name と入れていきます
とこういう形で書いていきます
そうするとですねこれ今保存すると
ここ まこと というところがですね
太字になっているのでお分かりの通り
この タグのですね
この中に HTML がそのまま入って
これはエスケープされないよということになります
このですね dangerouslySetInnerHTML という属性の部分ですね
このように書く必要があるよということです
これはもう決まり文句としてですね
覚えてしまうと早いかなと思います
また逆に言うとですね
基本的にはここでエスケープされて表示されるので
安全性が高いよということでもあります
どんどん行きましょう
続いて属性もですね動的に出力することができます
例えばではここではですね const link としましょうか
https://tomosta.jp と入れていきますね
このリンクという変数ですね
これを使っていきたいと思うんですけれども
例えばこの「ともすたへ」というところにですね
リンクを貼っていきましょう
href ですねこの属性のところに
今のものを埋め込んでいきます
linkですね「ともすたへ」のところを タグで囲っていきましょう
今ちょっと色が変わらないので分かりにくいんですけれども
「ともすたへ」 のところにリンクが張られていて
ともすたのサイトにリンクが張られています
さあこれちょっともう一度見ていきますと
このリンクというところに URL が入っていますよね
属性のところなんですけれども
でここに {link} を埋め込んでいると
気をつけないといけないのがここですね
HTML の属性なので " で囲いたくなってしまうんですが
これ囲うとですねうまく動かなくなります
リンクがこう張られてない状態ですね
なので変数を埋め込むときには
" で囲わないというのが約束になります
これですね囲わなくても HTML 出力されている時は
" が自動的に入っているのでご安心ください
このようにですね属性を動的に入れることができるんですけれども
JSX はですねもっと便利な機能があります
まとめて入れることができるんですね
例えばちょっとここを変えていきましょう
リンクをですねオブジェクト形式にしていきます
例えば href属性これにですね https://tomosta.jp を入れる
そして例えばtarget属性ですね
これブラウザーを新しく開くかどうかみたいのを
決めることができるんですけれども
これを _blank ということで新しいタブを開きますということですね
例えばtitle属性をですね
ともすた などにしておきましょうということで
さあこれでですね
今この link っていう中にたくさんのですね
属性が一気に入った状態になります
でこれをですね
ここに出力していきたいんですけれども
この時ですねこんな書き方ができます
{...link} としていきましょう
さあこれで見ていきます
そうするとここですね
リンクは張られています
HTML のソースを見ていきましょう
そうするとhref属性 target属性と title属性ですね
それぞれこのようにきちんと入っています
今のですねちょっともう一度見ていきますと
この書き方ですね {...link} というふうに書いて
このリンクというのが
上のところでオブジェクトとして定義されています
hrefとtargetとtitleそれぞれを定義しているんですけれども
これによってですね
それをまとめてここに書き出すことができるよということになります
例えばですねいわゆる論理属性ですかね
属性名だけを書くっていうのがあったかと思うんですけれども
例えば disabled というやつですね
書き出したい時はこれ true というのを値を入れてあげます
そうするとですねこちらの出力されるタグの方も
ここですね disabled属性がこのように表示されています
当たり前ですけれどもここですね false にしてあげると
生成される HTML からは属性名も外れていくよということですね
ここでですね属性も動的に制御することができますので
まあこの辺でですねプログラムであらかじめまとめておいて
まあそれを HTML の方に出力するという形ができます
あとスタイルシートもですねできます
const styles = {
例えば color をここでは blue にしましょうと
fontSize を例えば 1.5rem などとしましょうと
ここまでですねまたちょっと書き方が特殊なので
気をつけていただきたいんですけれども
まずですねここですね fontSizeですね
CSS のプロパティだとこれ font-size と - 区切りなんですけれども
- 区切りがですね JSX の中では使えません
fontSize とこのキャメルケースっていうんですけれども
二文字目が大文字になるという書き方ですね
このように書いていく必要があります
そうするとこの styles というところでですね
スタイルシートが定義されているので
先ほどのこの部分ですかね
ここに style= として styles というふうに書いていきます
さあそうするとこちら CSS が効きましたね
検証するときちんとですねここの p タグのところに
color: blue だよと
で font-size= 1.5rem だよと
font-size というプロパティもちゃんと - 区切りに変わっています
こんな風にですねスタイルシートも
動的に吐き出すことができますよということですね
実際にはですねこちらスタイルシートですね
インラインで書いてしまうと
色々と扱いにくくなってしまいますので
先ほどみたいにですね
この className の方で class を割り振って
それを CSS のファイルでですね
こう書いていくというのがいいかなと思いますけれども
とはいえなんかプログラムでですね
色を変えたりするときにはこういった書き方もいいかなと思います
ということでいかがだったでしょうか
JSX ちょっとですね最初は非常に扱いにくいなと
いうふうに感じるところはあるとは思うんですけれども
とはいえまこの JavaScript ですね HTML をいじれるというのは
非常にですねメリット大きいかなと思いますので
まずはですね少しいじってみていただいて
慣れてみていただくといいかなと思います
HTMLで組んでしまったものは
先ほどの通りこの HTML を JSX に変換するツールですね
こういったものを使っていただくと変換できますので
それで既存のですねウェブサイトとかも
こちらの JSX に持ってきて
Next.js 化するというような
プロジェクトもやってみるといいかもしれません
ということでですね今回改めてご紹介すると
ここでから始める React 実践入門
コンポーネントの基本から Next.js によるアプリ開発まで という書籍
今日はですねもう本当に一部ですねご紹介をしました
書籍ですね今私の手元に届いているのが
非常に分厚い書籍となっていて
かなりですねじっくりと勉強できる書籍になっています
まあ React と Next.js はですね
今フロントエンドをやるには
結構必須の科目になっていますので
ぜひですねちょっとこの機会に手に取っていただいて
学習してみていただければなと思います
僕の動画でもですね
引き続き React ですとか Next.js
あとまあ Astro とかですね
WordPress とかそういった情報もお届けできればと思いますので
興味ありましたらぜひチャンネル登録していただければと思います
ということで本日もご視聴ありがとうございました
5.0 / 5 (0 votes)