React講座　JSXの使い方 - あさめしコード

ではReactの仕組みを理解したところでReactのテンプレートシンタックスのJSXを理解していきましょう。

JSXはこのように書くことができます。ストリングでもないのでクオートで囲う必要もありません。

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

JSXを使わない方法もありますが、Reactを使う上ではJSXを是非使っていきたいです。

JSXはReactのエレメントを作成して、そこからDOMに変換されるようになります。

JSXを使う理由

Reactはイベントへのリスポンスや状態の変化を感知してユーザー側に表示するデータをリアクティブに作成することができます。

Reactの強みでもあるのがこのロジックとマークアップ（HTML）を同じファイルに記述できることです。ファイルが別々でないので一目で見ただけで何がユーザー側に表示されるか理解しやすいです。

この概念をコンポーネントと呼びます。

JSXに式を埋め込む

では、次の例を見てみましょう。

nameという変数を宣言し、中括弧｛｝に入れることでJSX内で使用することができます。

const name = 'asameshi';
const element = <h1>Hello, {name}</h1>;

この方法を使うことで、計算式の２＋２やオブジェクト（例：user.name）を使うことができます。

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

const user = {
  firstName: 'あさめし',
  lastName: '田中'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSXは長く記載する場合もあるので()で囲むようにするとよいです。

JSX自体を式として使う

先ほどはJSXに変数を入れる方法を紹介しました。

さらに、JSX自体も式としてif文やforループの文で使用することができます。

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

ReactがJSXを読み込む際にコンパイルされ普通のJavaSxriptに変換されるようになります。

JSXで属性を指定する

文字列リテラルを属性として指定するために引用符（クオーテーション）を使用できます。

これでHTMLの属性（attribute）にストリングの値を入れてあげることができます。

const element = <a href="https://www.reactjs.org"> link </a>;

また、属性に JavaScript 式を埋め込むために中括弧を使用することもできます。これでダイナミックなデータを流し込むことができますね。

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

注意しておきたいこと

JSXはHTMLよりもJavaScriptに近いものになります。ですのでHTMLの属性にclassを入れたい場合はJavaScriptのclassと干渉することを防ぐためにclassNameを使うことになります。

const titile = <h1 className="app-title">寿司アプリ</h1>

JSXで子要素を指定

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

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

//const element = <div>タグが空でない場合<div>;

もちろんJSXのタグに子要素（HTMLのタグ、エレメント）を入れることができます。

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

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

JSX にユーザの入力を埋め込むことは安全です：

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

React　DOMはJSXに埋め込まれた値をレンダー前にエスケープします。

→エスケープとは、HTML上で特殊文字を期待通りに表示するために施す処理のことです。

→特殊文字に指定されている文字は、割り当てられている記号を記述することで表示できます。

このため、XSS攻撃の防止になります。

JSXはオブジェクトの表現になる

ReactがJSXをコンパイルする流れを見てみましょう。

下記の二つの例は同じものになります。

①JSXの例

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

②JSXを使わない例

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

上記のコードをReactのcreateElementメソッドで下記の様なオブジェクトを作成することになります。

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

このようなオブジェクトはReact要素（エレメント）と呼びます。Reactがこれらのオブジェクトを読み取り、必要に応じてDOMを構築し常にリアクティブなデータをユーザーに’届けるようになります。

では、次回は要素のレンダーについて学んでいきましょう。