エスケープ とはどういったことかわからない

Question

いまどきのJSプログラマーのための
Node.jsとReactアプリケーション開発テクニック
という本でReactを勉強中です。

本の中に、「JSXのDOMテキスト部分に差し込んだ変数の値は自動的にエスケープされる」という記述があったのですが、この「エスケープ」とはどういったことか分からないです。
本には、「HTMLとして特別な意味を持つ「<」や「>」といった記号が自動的に「<」や「>」に変換される。」とありました。

自分は、

<script type="text/babel">
  const value = "<<< 豚に真珠、猫に小判 >>>"
  const elem = <h2>{value}</h2>
  const root = document.getElementById('root')
  ReactDOM.render(elem, root)
</script>

と書いたら、

<<< 豚に真珠、猫に小判 >>>

と表示されるのだろうか？
と思っていましたが実際には

<<< 豚に真珠、猫に小判 >>>

と表示されました。

エスケープとはどういったことか良く分からないです。

Answer 1

表示されたものでなくそのソースを見ればわかると思います。
表示されたところで F12 を押して開発者ツールを使って下さい。

Comments

[mimikun]

Chromeの開発者ツールでh2要素を選択し、Copy→Copy outerHTML でコピーしたものをメモ帳に貼り付けたら <h2 data-reactroot="">&lt;&lt;&lt; 豚に真珠、猫に小判 &gt;&gt;&gt;</h2> と出てきました。これが「エスケープ」された、ということでしょうか？

[Zuishin]

そうです。

[mimikun]

ありがとうございます

[Zuishin]

後でこの質問を見る人への補足です。この低評価はタイミング的に逆恨みの人の最後っ屁だと思うので気にしないでください。