Zenn
🤞

[React] JSXのすゝめ

2021/02/02に公開
JavaScript
React
初心者
tech

Reactのチュートリアルにも出てきたJSXとは何かという記事です。

JSXは JavaScript XML

まずはなんの略か気になるのが人の性。こちらに答えが。

JSX stands for JavaScript XML.

JSXは JavaScript XMLJSX は JavaScript XML の略！

今いちど"XML"とは

Extensible Markup Languageの略。データを記述するためのマークアップ言語。

JSXの特徴

その後に続く説明文がこちら。

JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods

JSXはRailsでいうところのヘルパーメソッドのようなもの。
RubyをHTMLに埋め込むことができるように、JavascriptにHTML要素みたいなものを記述することができるようです。

JSXアリナシ比較

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>Christmas</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

上のhtmlファイルにReactDOMで変数をレンダーします。
以下の2つのケースでは同じ出力になります。

// jsxアリ
const xmas = <h1>Snow is really comming down!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

jsxを使うと、xmasという変数定義に直接htmlタグを記述できます。

// jsxナシ
const xmas = React.createElement('h1', {}, 'Snow is really comming down!');

ReactDOM.render(myelement, document.getElementById('root'));

jsxを使わずに出力した変数を定義する場合はReactのcreateElement()メソッドを使用する必要があります。

JSX で書かれたコードはこのcreateElement()を用いるコードに変換されるようです。

JSXのメリット

属性の指定ができる

htmlタグと同様に、属性の記述を加えることが可能。

//ストリングを属性に指定するときは""
const element = <div tabIndex="0"></div>;
//変数を属性に指定するときは{}
const element = <img src={user.avatarUrl}></img>;

式展開ができる

htmlタグ内では{ }の中に変数や数式を直接記述することが可能。

const santa = <h1>Santa is {10 * 10} times larger than me</h1>;

XSS(クロスサイトスクリプティング)対策

React DOMはJSXに埋め込まれた値は全てレンダー前に文字列に変換されるので、悪意のあるコードがレスポンスとして帰ってきた時にもそれがコードとして読み込まれることはありません。

Cross-site scripting(XSS)

脆弱性のあるWebアプリケーション上に、悪意のあるJSのプログラム（スクリプト）を埋め込み、そのサイトの利用者を攻撃する手法

SOTD

JSXについて調べてみて、Reactがマークアップとロジックを両方含むコンポーネントという単位で構成されていることを理解するためのヒントを得られました。JSXのように拡張されたTypeScript、TSXもあるようなのでこっちのほうも今度触ってみたい。

Discussion