こんにちは！Reactの世界へようこそ。
フロントエンドの最前線でコードを書いていると、つい難しい横文字で語りたくなってしまうものですが、今日はそんな「小難しい理屈」は一度置いておいて、Reactの「優しさ」についてお話ししようと思います。

Reactを触り始めて、「JSXって、ただのHTMLの書き換えじゃないの？」と感じている方も多いかもしれません。でも、実はその裏側で、Reactはあなたの書いたコードを「守る」ためのとても大切な仕事を、黙々とこなしてくれているんです。

今日は、その「Reactの守護神」とも言えるエスケープ処理の話をしますね。

—

1. JSXという「防弾ガラス」

まず、JSXについて。`

こんにちは

` のように書くあれですね。
実は、JSXの中に変数を埋め込むとき、Reactは「入力されたデータは、すべて信用しない」という厳格なルールを持っています。

例え話をしましょう。
あなたがWebサイトという「お店」を開いているとします。そこにお客さん（ユーザー）が、「名前を入力してね」という欄に、自分の名前を書き込みに来ました。

普通なら「山田太郎」と書いてくれますが、悪意のある人が、「お店を爆破するプログラム」を名前の欄に書き込んできたらどうでしょう？怖いですよね。これを「XSS（クロスサイトスクリプティング）」という攻撃と呼びます。

でも、安心してください。ReactでJSXを使う限り、Reactは入力された文字をすべて「ただの文字」として表示します。

function Greeting({ userName }) {
// もし userName にが入ってきても、
// Reactはこれを「実行可能なプログラム」ではなく「ただの文字列」として画面に出します。
// つまり、悪意のあるタグは無効化されるんです。

return

こんにちは、{userName} さん！

;
}

Reactは、あなたが書いたJSXの中身をブラウザに渡す前に、「これ、プログラムとして実行しちゃダメなやつだよね？よし、ただの文字に変換しておこう」と、自動的にエスケープ処理をしてくれています。いわば、あなたのお店にお客さんが入ってくるとき、手荷物検査をしてくれる屈強な警備員さんのようなものですね。

—

2. 危険な香りがする `dangerouslySetInnerHTML`

でも、時々こんな場面に出会います。「CMSで作ったブログ記事のHTMLをそのまま表示したい！」というときです。

Reactの自動エスケープのおかげで、HTMLタグを含んだ文字列をそのまま表示しようとしても、タグがそのまま画面に文字として表示されてしまいます。
「いや、そうじゃない！ HTMLとして解釈してほしいんだ！」というとき、Reactは困った顔をしてこう言います。

「どうしてもやるならいいけど、めちゃくちゃ危険だよ？」

それが、`dangerouslySetInnerHTML` という名前の機能です。直訳すると「危険な方法でHTMLをセットする」ですね。Reactは名前からして「やめとけ」と言ってくれています（笑）。

どうしても必要なときの使いかた

もし、信頼できるデータ（自分で書いた記事など）をHTMLとして表示したい場合は、以下のように書きます。

function Article({ contentHtml }) {
// contentHtml には ‘

記事の本文です

‘ のようなHTML文字列が入っているとします。

return (

);
}

この書き方をすると、Reactの警備員さんは「わかりました、あなたの責任でどうぞ」と門を開けてくれます。でも、ここで読み込むデータの中に悪意のあるコードが含まれていたら、そのまま実行されてしまいます。まさに「諸刃の剣」なんです。

—

3. 初学者の皆さんへ：明日からの心得

ここまで読んで「うわ、怖い！ Reactって難しい！」と思わなくて大丈夫です。むしろ、今の話で一番大切なのはこれだけです。

1. 基本はJSX（`{ }`）を使えばReactが守ってくれる！
2. `dangerouslySetInnerHTML` は、本当に本当に必要なとき以外は使わない！

実務でコードを書いていると、便利そうなライブラリや関数に出会うことがたくさんあります。でも、Reactがデフォルトでやってくれている「自動エスケープ」は、世界中の開発者を攻撃から守ってきた最高の仕組みの一つです。

迷ったときは、「これはReactに守られている書き方かな？」と一度立ち止まってみてください。それだけで、あなたの書くアプリケーションの安全性はグッと高まります。

Reactのコードを書くことは、ただ画面を作るだけでなく、ユーザーを守る「防壁」を作ることでもあります。そう考えると、少しだけエンジニアとしての誇りを感じませんか？

もしまた何か分からないことがあれば、いつでも聞いてくださいね。一緒に少しずつ、かっこいいフロントエンドエンジニアを目指していきましょう！

【入門編】 JSXにおけるエスケープ処理 – React実践ガイド