React公式ドキュメントを読む5 JSX構文について補足

前回からの続きですが、このページだけ読んでも分かる内容になっています。

JSXはJavaScriptコードの中でも使える

JSXで書かれたコードは、Babelなどでコンパイルされた後にはJavaScriptオブジェクトとして評価されます。そのため、必ずしもJSX構文だけで書かれたコードである必要はなく、JavaScriptコードの中にJSXコードを埋め込んで記述することもできます。

例えば、JavaScriptコードのif文やforループの中でJSXを使用したり、変数に代入したり、引数として受け取ったり、関数から返したりできます。以下のソースコードは、基本的にはJavaScriptで書かれた関数ですが、戻り値の部分にはJSX構文が使われています。

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSXで要素の属性値に文字列を指定する際には、以下の使用例のように引用符を使用できます。

const element = <img src="photo.jpg"></img>;

そして、JSXでは以下の使用例のように、中括弧{ }を使うことで属性値にJavaScript式を埋め込むことができます。

const element = <img src={user.avatarUrl}></img>;

ここで注意が必要なのは、中括弧{ }を使って属性値にJavaScript式を埋め込む場合には、引用符を書かないということです。以下の使用例は誤りです。

const element = <img src="{user.avatarUrl}"></img>;  // 誤り！

JSXで要素の属性値を指定する場合、正しくは引用符、または、中括弧{ }のどちらか一方を使用します。

JSXでは、要素の属性名はキャメルケース（camelCase）の命名規則を使用します。以下の使用例では、tabindexではなく、tabIndexと記述している点に注意してください。

const element = <div tabIndex="0"></div>;

JSXはHTMLよりもJavaScriptに近いものです。HTMLの属性としてなら tabindex というすべて小文字で良いのですが、JSX構文のなかではJavaScriptの tabIndexプロパティと同じようにキャメルケースで記述します。

他にも、class は className となります。

JSXで空要素を閉じる場合には、XMLのように /> でタグを閉じることができます。

const element = <img src={user.avatarUrl} />;

JSXでは、タグを入れ子にできます。HTMLソースに慣れていれば、直感的に読み書きしやすいでしょう。

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSXでは、アプリのコードとして書かれていないものを、そのまま利用することはありません。ユーザーが入力した内容などを利用する際には、レンダリング前にエスケープするようになっています。

JSXは、悪意のあるコードがインジェクション（注入）されないように配慮されているので、JSXでコードを書くとクロスサイトスクリプティング（XSS = cross-site-scripting）攻撃の防止となるでしょう。

const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;  // JSXなので、安全です

以上、JSXがどのようなものか簡単に見てきました。JSXは、JavaScriptに似ているけれど、XMLのようでもあります。

次回は、JSXがコンパイルされるとどうなるのか？を見ていきます。JSXコードがコンパイルされた後に生成される等価のJavaScriptコードを確認することで、JSXとはどのようなものか分かりやすくなるかもしれません。

次回へ続きます。