文字列を返しているだけ — テンプレートとJSXの正体

jinja2 3.1.6 python 3.14.6
autoescape=True: '<h1>&lt;script&gt;alert(1)&lt;/script&gt;</h1>'
autoescape=False: '<h1><script>alert(1)</script></h1>'
select_autoescape()('page.html') = True
select_autoescape()('page.txt')  = False
select_autoescape()(None)        = True
Template default: '<h1><script>alert(1)</script></h1>'

react 19.3.0 react-dom 19.3.0 node v24.21.0
typeof el: object
JSON.stringify(el): {"type":"h1","key":null,"props":{"children":"<b>x</b>"},"_owner":null,"_store":{}}
renderToString(el): <h1>&lt;b&gt;x&lt;/b&gt;</h1>
renderToString(dangerouslySetInnerHTML): <div><b>x</b></div>
renderToString(attr): <a href="x&quot; onmouseover=&quot;alert(1)">link</a>

At parse time each {{.}} is overwritten to add escaping functions as necessary.
 
<a href="/search?q={{. | urlescaper | attrescaper}}">{{. | htmlescaper}}</a>
 
↑ 元は <a href="/search?q={{.}}">{{.}}</a> の1行。
  同じ {{.}} が href の中と外とで別の関数に置き換わる。

JSON.stringify(el): {"type":"h1","key":null,"props":{"children":"<b>x</b>"},...}
                                     ↑ この時点では <b>x</b> のまま
 
renderToString(el): <h1>&lt;b&gt;x&lt;/b&gt;</h1>
                       ↑ 文字列にする時点で変換された

この章のまとめ

• テンプレートもJSXも、値を受け取って組み立てる関数。作るのはHTML文字列か描画の指示を表すオブジェクトか、どちらかしかない。
• エスケープは「値をHTMLの構文にしない」境界処理。第41週『なぜ入力がコードになるのか』の値が構文になれる位置と同じ話。
• Jinja2 の autoescape の既定は False。 「テンプレートエンジンは既定で安全」は誤り。拡張子による切り替えは select_autoescape() を渡したときの話。
• Go の html/template は、値の位置に応じ parse 時点でエスケープ関数を差し替える(文書の語は contextual autoescaping)。
• createElement が返すのはオブジェクト。公式は “does not render … or create any DOM elements” と書く。DOM を触る命令ではない。 < になるのは renderToString で文字列にする時点。
• 「React は文字列を作らない」はクライアント描画に限った話。公式の Returns は “An HTML string.”。
• dangerouslySetInnerHTML や |safe は表示を直すが、外すのは境界。値の出所を辿ることが対処の中身。
• JSX 仕様は Draft / August 4, 2022 で “without any defined semantics”。createElement への変換はトランスパイラの規則。

ここで作ったHTML文字列は、レスポンスの本文として送り出されます(クライアント描画の経路では、指示のオブジェクトがブラウザ側で描画に反映されます)。ただし本文を受け取った側が「これはHTMLだ」と知る手立ては本文にありません。次はそのラベルです。

手を動かすなら、フロントエンド の「フロントエンド V(フレームワークと状態管理)」で描画の側を、自動エスケープを扱う設問群で境界処理の側を確かめられます。