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に埋め込めること。動的な属性設定がしやすいことなどがあります。