【React】{}構文内で実体参照に対応する文字を表示する方法

この記事では『{}構文内で実体参照に対応する文字を表示する方法』について、

Unicode番号を直接使用して、実体参照に対応する文字を表示する方法
dangerouslySetInnerHTML属性を使用して、実体参照に対応する文字を表示する方法

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

{}構文で実体参照に対応する文字を表示する方法

React の JSXにおいて、HTMLの「実体参照（&など）」はJSX式上では意図した表示になりません。たとえば、以下のように{}構文内に&を書いた場合、

<div>{'Tom & Jerry'}</div>

このコードは、ブラウザでは以下のように表示されます。

Tom & Jerry

{}構文内に文字列を埋め込むと、その中の文字列は「生の文字列」として扱われるため、&はそのまま表示されます（&を書けばそのまま&と表示され、&を書けば&と表示されます）。

なお、以下のサンプルコードに示すように、{}構文内に実体参照を記述せず、直接HTMLのように書いた文字列は、自動でエスケープされるため「Tom & Jerry」と正しく表示されます。

<div>Tom & Jerry</div>

{}構文内に実体参照に相当する文字を表示したい場合には、Unicode番号を直接使用するか、dangerouslySetInnerHTML属性を使用する必要があります。

Unicode番号を直接使用する場合

{}構文内に実体参照に相当する文字を表示するには、実体参照に相当するUnicode番号を見つけて、{}構文の内部でのそのUnicode番号を使用します。以下にサンプルコードを示します。

function App() {
  return (
    <>
      {/* エスケープシーケンスを利用 */}
      <div>{'Tom \u0026 Jerry'}</div>

      {/* Unicode番号から取得 */}
      <div>{'Tom ' + String.fromCharCode(38) + ' Jerry'}</div>

      {/* Unicode番号から取得(テンプレートリテラルを使用した場合) */}
      <div>{`Tom ${String.fromCharCode(38)} Jerry`}</div>
    </>
  );
}

export default App;

記述のシンプルさからエスケープシーケンスを利用するのがおすすめです。

dangerouslySetInnerHTML属性を使用する場合

エスケープ処理を抑制するdangerouslySetInnerHTML属性を用いて、生のHTMLを直接挿入しても、{}構文内に実体参照に相当する文字を表示することができます。以下にサンプルコードを示します。

function App() {
  return (
    <>
      {/* dangerouslySetInnerHTML属性を利用 */}
      <div dangerouslySetInnerHTML={{ __html: 'Tom & Jerry' }}></div>
    </>
  );
}

export default App;

ただし、dangerouslySetInnerHTML属性を使用すると、生のHTMLが挿入されるので、XSS(クロスサイトスクリプティング)攻撃のリスクがあります。この属性はその名の通り「dangerously」な(危険な)操作であり、使用時には十分な注意が必要です。

【React】{}構文内で実体参照に対応する文字を表示する方法

{}構文で実体参照に対応する文字を表示する方法

Unicode番号を直接使用する場合

dangerouslySetInnerHTML属性を使用する場合

エスケープ処理とは？HTML・JavaScript・URLの例でわかりやすく解説！