JSX - Reactを学ぶなら知っておきたい、HTMLの表現手法

Summary

Reactの学習において、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

00:00

😀JSXの基本的な特徴とルール

<paragraph1>では、ReactのJSXについて説明しています。JSXはJavaScriptの中にHTMLを埋め込むことができる記法で、Reactでよく使われます。HTMLとJavaScriptを一緒に書けるので扱いやすくなりますが、ルールがいくつかあります。要素は1つしかreturnできない。複数要素の場合はReact Fragmentやdivタグで囲む必要があります。空要素はXHTML形式で閉じタグが必要です。属性のclassはclassNameに、forはhtmlForに変更が必要です。コメントもJavaScript形式になります。慣れるのに時間がかかりますが、メリットは大きいです。

05:00

😃JSXでの変数や属性の埋め込み

<paragraph2>では、JSXでは変数や式をそのままHTMLに埋め込むことができ非常に扱いやすいことを説明しています。しかしセキュリティのため、デフォルトではエスケープされてしまうので、改行やHTMLタグを含めたい場合はdangerouslySetInnerHTMLでラップする必要があります。また、オブジェクトにまとめた属性を{...変数名}という記法で一括で埋め込むこともでき便利です。

10:00

😊スタイルやイベントもJSXの中で設定可能

<paragraph3>では、JSX内でインラインスタイルやイベントも設定できることを説明しています。スタイルはキャメルケースで記述する必要があります。このようにHTMLとの親和性が高く、動的に生成できるJSXはとても扱いやすく、既存のサイトをNext.js化するなどの利用シーンも増えているそうです。

15:02

😌リンクなどの属性にも変数埋め込み可能

<paragraph4>では、hrefのような属性にも{}で変数をそのまま埋め込むことができることを説明しています。ただし、クオートは不要です。{...変数}という記法を使うと、objectに列挙した属性を一括で展開でき非常に便利だということです。

20:03

🙂おすすめのReactの学習書を紹介

<paragraph5>では、今回ご紹介した内容は山田祥寛さんの書籍「ここから始めるReact実践入門」からの一部で、とても分かりやすく丁寧な解説がされている本だということを説明しています。前半の基本的な内容からNext.jsに関する実践的な内容まで扱われているため、FrontalEndの学習には最適だそうです。

Keywords

The video is abnormal, and we are working hard to fix it.
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 とかそういった情報もお届けできればと思いますので

興味ありましたらぜひチャンネル登録していただければと思います

ということで本日もご視聴ありがとうございました