【React】JSXの導入

Reactのチュートリアルを読み始めたので、大事だと思うところをまとめてきます。 今日は「JSX」。

ja.reactjs.org

【目次】

1. JSX（JavaScript eXtension）とは

Reactでは、JSXというJavaScriptの構文を拡張したものが使われる。

const element = <h1>Hello, world!</h1>;

マークアップを書いているように思うが、これはJavaScriptを書いている。

2. JSXを使う理由

Reactのチュートリアルには下記のよう書いてあります。

マークアップとロジックを別々のファイルに書いて人為的に技術を分離するのではなく、React はマークアップとロジックを両方含む疎結合の「コンポーネント」という単位を用いて関心を分離します。

下記のShowUserNameというコンポーネントで考えてみる。

class ShowUserName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: 'Harper',
      lastName: 'Perez',
    }
  }

  // JSXで書かれたマークアップ？
  render() {
    return (
      <div>
          <h1>
              Hello, {formatName(user)}
          </h1>
      </div>
    );
  }

  // ロジック
  formatName(user) {
    return this.state.firstName + ' ' + this.state.lastName;
  }
}

マークアップとロジックを両方含んだ疎結合の「コンポーネント」
　⇒ShowUserName

関心の分離
　⇒コンポーネント内で
　　　・マークアップ（render()）と
　　　・ロジック（formatName(user) ）
　　がそれぞれ分離されてるってことかな？

上記のような理由で、Reactでは基本的にはJSXを使うらしいです。

あと、JSXはJavaScriptだから
　エラーや警告をコンパイル時に確認できる
　　⇒デバッグしやすい
ってのがメリットだということだと思う。

3. JSX に式を埋め込む

JSXではJavaScriptの式を中括弧{}で囲むことで使用できる。

変数

const name = 'Taro Yamada';
const msg = <h1>Hello, {name}</h1>;

計算式

const add = <h1>3 + 7 = {3 + 7}</h1>;

関数

const name = (
  <h1>
    Hello, {formatName(user)} !
  <h1>
)

formatName(user) {
  return this.state.firstName + ' ' + this.state.lastName;
}

JSXの式は、コンパイル後にはJavaScriptオブジェクトとして評価される。
よって、if文などの条件式だったり、変数の代入だったり、関数の引数や戻り値にも使うことができる。

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

4. JSX で属性を指定する

マークアップの属性に文字列リテラルを指定することや、属性にJavaScript式を埋め込むこともできる。

属性に文字列リテラルを指定する

const element = <font color="red">Hi, React!</font>;

属性にJavaScript式を埋め込む

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

ただし、属性にJavaScript式を埋め込むときに、中括弧を囲む引用符を書いてはいけないらしい。
こんなのかな？

const iro= 'red';
const element = <font color="{iro}">Hi, React!</font>;

5. JSX はインジェクション攻撃を防ぐ

デフォルトのReact DOMではJSXに埋め込まれた値をレンダリングされる前にエスケープするらしいです。

悪意あるユーザーが不正なコードを埋め込もうとしても、入力値を一度JSXに代入するようにしておけば、実行可能な不正コードがHTMLに埋め込まれることを防ぐことができるということ。
（HTMLにレンダリングされるときに、JSXに代入された不正なコードはエスケープされてすべて文字列に変換される。）

つまり、JSXを使うとXSS (cross-site-scripting) を防ぐことができるということ。

6. まとめ

自分が大事だと思ったところをまとめてみました。