はじめに

Reactでのテキスト表示は多くの場合、シンプルな<p>や<h1>タグで十分です。しかし、動的なコンテンツや特定のHTMLタグを含むテキストを表示する必要がある場合、TypographyとdangerouslySetInnerHTMLが非常に便利です。

Typographyとは

TypographyはMaterial-UI（現在はMUIとして知られています）の一部であり、テキストのスタイリングを簡単に行うことができます。

import Typography from '@mui/material/Typography';

function App() {
  return (
    <Typography variant="h1">Hello World</Typography>
  );
}

このvariantプロパティによって、h1からh6までのHTML見出しタグを簡単に適用できます。

dangerouslySetInnerHTMLとは

Reactでは、dangerouslySetInnerHTML属性を使用して、生のHTMLをコンポーネントに挿入することができます。

import React from 'react';

function App() {
  // 例として、以下のようなHTML文字列があるとします。
  const htmlString = '<h1>Hello World!</h1><p>This is a paragraph.</p>';

  return (
    <div>
      {/* 注意：dangerouslySetInnerHTMLを使うときは、セキュリティリスクがあることを確認してください。 */}
      <div dangerouslySetInnerHTML={{ __html: htmlString }} />
    </div>
  );
}

export default App;

この属性名にdangerouslyが含まれているのは、XSS（クロスサイトスクリプティング）攻撃のリスクがあるからです。したがって、信頼できるソースからのHTMLのみを使用するように注意が必要です。

実用例：TypographyとdangerouslySetInnerHTMLの組み合わせ

以下のコードは、TypographyとdangerouslySetInnerHTMLを組み合わせた一例です。

<Typography
  className="brain-title"
  dangerouslySetInnerHTML={{
    __html: brain.title.replace(/\n/g, '<br />'),
  }}
/>

このコードでは、brain.titleのテキスト内の改行（\n）を<br />タグに置き換えています。

なぜこの組み合わせが便利なのか

1. SEO対策: variantプロパティを使用して、適切な見出しタグ（h1〜h6）を適用できます。
2. 柔軟性: dangerouslySetInnerHTMLを使用することで、HTMLタグを含む複雑なテキストも正確に表示できます。

注意点とベストプラクティス

• dangerouslySetInnerHTMLを使用する際は、XSS攻撃を防ぐために信頼できるソースからHTMLを取得すること。
• SEOを考慮して、variantプロパティを適切に設定すること。

まとめ

ReactのTypographyとdangerouslySetInnerHTMLは、テキスト表示において非常に強力なツールです。しかし、それらを使用する際にはセキュリティとSEOの側面を考慮する必要があります。

セキュリティ面も考慮して使うことが重要かと思います。