【React】dangerouslySetInnerHTMLを使う方法

悩んでいる人

ReactのdangerouslySetInnerHTMLを使ってみたいんだけど、使い方が分からないんだよね…

こんな疑問にお答えします。

  • 本記事の執筆者
プロフィール
  • フリーランスエンジニア(保有資格約20個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • Twitterフォロワー約2,000人
いずみん

本記事を書いている僕はエンジニア歴7年です。
Reactは業務経験があるので、かなり有益な情報を発信できるかと思います。

結論、dangerouslySetInnerHTMLはHTMLの埋め込みなどに便利です。

ただし、名前の通り、使い方には注意が必要です。

本記事を読んでもらえれば、dangerouslySetInnerHTMLを使う方法が理解できるので早速見ていきましょう。

いずみん

すぐ読み終わるので、是非最後まで読んでみてください!

\ 年収が2倍に?! /

目次

dangerouslySetInnerHTMLは何に使う?

dangerouslySetInnerHTMLはHTMLの埋め込みに使います。

HTMLを埋め込むのに便利ですが、スクリプトも実行される危険性があるので注意しましょう。

いずみん

XSS(クロスサイトスクリプティング)の要因になるので注意してくださいね。
⇨dangerouslyとあるのはセキュリティ的に危険だからです。

dangerouslySetInnerHTMLの使い方

dangerouslySetInnerHTMLは、「__htmlプロパティを持つObjectを渡す」ことで使えます。

const App = () => {
  const html = `
    <html>
      <script>
        alert('うんち');
      </script>
      <body>
        <div>
          <button onClick="alert('うんち')">うんち爆弾</button>
        </div>
      </body>
    </html>
  `;

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

↑のようにhtmlを渡してあげればOKです。

dangerouslySetInnerHTMLを使う際の注意点

dangerouslySetInnerHTMLを使う際は、XSS(クロスサイトスクリプティング)に注意しましょう。

埋め込むHTMLが決まっている場合は問題ありませんが、動的に変わる場合はサニタイズした方が良いかもしれません。

いずみん

固定のHTMLを埋め込むだけなら十分使えるので、用途を考えて使用しましょう。

よくある質問|dangerouslySetInnerHTML

dangerouslySetInnerHTMLは何に使いますか?

HTMLの埋め込みに使います。

dangerouslySetInnerHTMLはどのように使うのですか?

__htmlプロパティを持つObjectを渡す」ことで使えます。

dangerouslySetInnerHTMLを使う際の注意点はありますか?

HTMLを埋め込むので、XSS(クロスサイトスクリプティング)に注意しましょう。

まとめ|dangerouslySetInnerHTMLを使う方法

今回は、dangerouslySetInnerHTMLを使う方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • dangerouslySetInnerHTMLはHTMLの埋め込みに使う。
  • dangerouslySetInnerHTMLは「__htmlプロパティを持つObjectを渡す」ことで使える。
  • dangerouslySetInnerHTMLを使う際はXSS(クロスサイトスクリプティング)に注意する。

この記事があなたのお役に立てば幸いです。

サイト内には、他にも初心者向けの記事を多く投稿していますので良ければ参考にしてみてください。

最後までお読みいただきありがとうございました!

最後に

僕が個人的におすすめするReactエンジニア向けのフリーランスエージェントをご紹介します。

いずみん

エンジニアで実務経験のある方(目安は3年)はフリーランスも視野に入れましょう。

僕自身、フリーランスになって収入が2倍(年収+280万)になりました。

あなたの貴重なスキルを安売りしないようにしましょうね!

初めてのフリーランスなら「レバテックフリーランス」

総合評価案件数(公開)面談
約40,000件無料
マージン率単価アフターフォロー
10〜20%あり
Good Point
  • 国内最大級のフリーランスエージェント
  • 案件数は約40,000件(国内最多)
  • 高単価案件が豊富
  • マージン率は10〜20%

は国内最大級のフリーランスエージェントです。

高単価案件が豊富で、初めてフリーランスになる方におすすめのエージェントです。

いずみん

僕も最初はレバテックを利用しましたが、おかげさまで収入が約1.5倍になりました(笑)。

正社員並みの保証なら「Midworks(ミッドワークス)」

総合評価案件数(公開)面談
約3,000件以上無料
マージン率単価保証
非公開
Good Point
  • 正社員並みの手厚い保証
  • 給与保証あり
  • 非公開案件が豊富
  • マージン率は一律20%

正社員並みの手厚い保証を受けたい方におすすめのエージェントです。

非公開案件が豊富で給与保証も付いているので、安心してフリーランスにチャレンジできますよ!

いずみん

ちなみに僕はMidworks経由でフルリモート案件に参画できました!
営業担当の方も真摯に対応してくれて非常に助かりました。

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次