JSX内でHTMLっぽい出力を扱う方法と、dangerouslySetInnerHTMLの使い所

✅ 背景

Next.js や React を使っていると「HTMLっぽい変数を出力したい」と思う場面があります。
しかしJSXでは、変数にHTML文字列を直接書いても、自動でエスケープされて表示されないため注意が必要です。

❌ こうするとエスケープされる

const html = "<p>Hello!</p>";

return <div>{html}</div>; // → 文字列として表示されるだけ

✅ 対策: dangerouslySetInnerHTML

return <div dangerouslySetInnerHTML={{ __html: html }} />;

• 生のHTMLとして挿入される
• XSSに注意が必要（ユーザー入力を入れない）

✅ JSX的に繰り返す方法

const blogPosts = [
  { title: "記事1", content: "内容A" },
  { title: "記事2", content: "内容B" }
];

return (
  <div>
    {blogPosts.map((post, i) => (
      <div key={i}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    ))}
  </div>
);

JSXでは map() を使ってHTMLを構築するのが自然。key も忘れずに。

✅ まとめ

• JSXで変数にHTMLを入れるとエスケープされる
• 生HTMLを使いたい場合は dangerouslySetInnerHTML
• JSXでは map() などで動的な描画が一般的