【React】JSXの{}構文について「特徴」や「注意点」などを解説！

この記事ではReactの『{}構文』について、

• JSXの{}構文とは
• JSXの{}構文の特徴
• JSXの{}構文の注意点

などをサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

JSXの{}構文とは

JSXの{}構文を用いることで、任意のJavaScriptの式(変数、計算式、関数、メソッド)を直接コンポーネントの中に埋め込むことができます。

以下にJSXの{}構文を用いて変数を埋め込んだReactコンポーネントのサンプルコードを示しています。

function App() {
  const name = 'Taro'; // 変数定義
  return <h1>Hello, {name}!</h1>; // 変数を埋め込み
}

export default App;

上記のサンプルコードでは、nameという変数が{}内に置かれ、<h1>タグの中で展開されています。これにより、ブラウザに表示される際にはHello, Taro!というテキストが出力されます。

同様に、以下にJSXの{}構文を使って演算子、計算式、メソッドを埋め込んだReactコンポーネントのサンプルコードを示しています。

function App() {
  const age = 20;

  // 関数の定義
  function double(value) {
    return value * 2;
  }

  // オブジェクトとメソッドの定義
  const person = {
    firstName: 'Taro',
    lastName: 'Yamada',
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    },
  };

  return (
    <div>
      {/* 計算式の埋め込み */}
      <p>Next year, I will be {age + 1} years old.</p>

      {/* 関数の埋め込み */}
      <p>Twice my age is {double(age)}.</p>

      {/* メソッドの埋め込み */}
      <p>My full name is {person.fullName()}.</p>
    </div>
  );
}

export default App;

上記のサンプルコードでは以下のことを行っています。

• 計算式の埋め込み
  • ageという変数に1を加算した計算式を埋め込んでいる。
• 関数の埋め込み
  • double関数を埋め込んでいる。
• メソッドの埋め込み
  • personオブジェクトに定義したfullNameメソッドを埋め込んでいる。

このようにJSXの中で{}構文を使うことで、直感的にJavaScriptのコードを埋め込んで、動的なコンテンツを作成できます。

JSXの{}構文の特徴

JSXの{}構文の特徴を以下に示します。

• {}構文では式はエスケープ処理されている
• {}構文では式はブール値、undefined、nullは出力されない

上記の特徴についてこれから説明します。

{}構文では式はエスケープ処理されている

JSXの{}構文を使用すると、その内部で記述されたJavaScript式は自動的にエスケープ処理されています。以下にサンプルコードを示します。

function App() {
  const content = '<h1>Hello!</h1>';

  return (
    <>
      {/* エスケープ処理されるので安全なコードです */}
      <p>{content}</p>
    </>
  );
}

export default App;

上記のサンプルコードでは、文字列contentに<と>という記号を用いていますが、Reactではこの文字列をJSXの{}構文に埋め込む際にエスケープ処理しています。エスケープ処理することによって、XSS(クロスサイトスクリプティング)攻撃などの脆弱性からアプリケーションを守っています。

ただし、dangerouslySetInnerHTML属性の__HTMLキーで指定された場合には、エスケープ処理が適用されないので注意してください。この属性はその名の通り「dangerously」な(危険な)操作であり、使用時には十分な注意が必要です。以下にサンプルコードを示します。

function App() {
  const content = '<h1>Hello!</h1>';

  return (
    <>
      {/* エスケープ処理されないので注意してください */}
      <p dangerouslySetInnerHTML={{ __html: content }}></p>
    </>
  );
}

export default App;

上記のサンプルコードでは、content内のHTMLはエスケープ処理されずに直接DOMに挿入されるため、XSS攻撃に対して脆弱になる可能性があります。

{}構文では式はブール値、undefined、nullは出力されない

JSXの{}構文では、ブール値(trueやfalse)、undefined、nullは無視されて出力されない点に注意してください。

例えば、以下のサンプルコードでは{0}を除いて何も表示されません(各<p>タグ内は完全に空になります)。

function App() {
  return (
    <>
      {/* trueは表示されない */}
      <p>{true}</p>

      {/* falseは表示されない */}
      <p>{false}</p>

      {/* undefinedは表示されない */}
      <p>{undefined}</p>

      {/* nullは表示されない */}
      <p>{null}</p>

      {/* 0は表示される */}
      <p>{0}</p>
    </>
  );
}

export default App;

これらの表示したい場合には、以下のサンプルコードに示すように、String属性で文字列化する必要があります。

function App() {
  return (
    <>
      <p>{String(true)}</p>
      <p>{String(false)}</p>
      <p>{String(undefined)}</p>
      <p>{String(null)}</p>
      <p>{0}</p>
    </>
  );
}

export default App;

この挙動は、条件付きレンダリングを行う際に便利です。例えば、ある条件がtrueの場合にのみ特定のコンテンツを表示したくて、条件式がfalseやnull、undefinedを返すときに不要な出力をしない時に使用します。以下にサンプルコードを示します。

function App({ user }) {
  return (
    <>
      {user && <p>Welcome, {user}!</p>}
    </>
  );
}

export default App;

上記のサンプルコードでは、変数userがtrue(つまり、nullやundefinedではなく、実際に存在する)と評価される場合のみ、メッセージが表示されます。userがnullやundefinedの場合、<p>タグも何も表示されません。

JSXの{}構文の注意点

JSXの{}構文を用いる上での注意点を以下に示します。

• JSXの{}構文の配下の文字列はクォートで囲むこと

上記の注意点についてこれから説明します。

JSXの{}構文の配下の文字列はクォートで囲むこと

JSXの{}構文内で文字列を使用する場合には、文字列をクォートで囲む必要があります。文字列はシングルクォート'、ダブルクォート"、またはバックティック`(テンプレートリテラルを使う場合)で囲むのが一般的です。

例えば、hogeという文字列を{}構文経由で出力する場合には、以下のように記述します。

<p>{“hoge”}</p>

<p>{hoge}</p>にすると、hogeは変数として解釈され、その変数が保持している値が表示されます。hogeという名前の変数が定義されていない場合、このコードはエラーを引き起こします('hoge' is not definedというエラーが表示される)。サンプルコードを以下に示します。

function App() {
  const hoge = 'hogehoge';

  return (
    <>
      {/* 以下のコードではhogeと出力される */}
      <p>{'hoge'}</p>
      {/* 以下のコードではhogehogeと出力される */}
      <p>{hoge}</p>
    </>
  );
}

export default App;

本記事のまとめ

この記事ではReactの『{}構文』について、以下の内容を説明しました。

• JSXの{}構文とは
• JSXの{}構文の特徴
• JSXの{}構文の注意点

お読み頂きありがとうございました。