Simon Willison's Weblog は2026年10月17日(現地時間)付けで、`document.currentScript` プロパティを活用したインラインレンダリングの新たな手法について報じた。リーン・ラダ (Lean Rada) 氏がこのテクニックを説明しており、ページ読み込み時に自身を置き換える小さなインライン`<script>`要素の利用方法が示されている。この手法により、JavaScriptを用いてHTML内のコンテンツを動的に生成し、埋め込み型テンプレート言語のように機能させることが可能になる。
このインラインレンダリングのテクニックは、document.currentScriptが持つ現在実行中のスクリプト要素への参照という特性を利用する。具体的には、JavaScriptコードを記述したインライン<script>要素が、ページ読み込み時に document.currentScript.replaceWith() メソッドを用いて自身の内容を動的に生成された値で置き換える。例えば、<script> document.currentScript.replaceWith( new Date().getFullYear())</script> という記述は、実行時にそのスクリプト要素自体を現在の年に置き換える。
さらに、$=(...n)=>document.currentScript.replaceWith(...n) のようなショートカット関数を定義することで、<script>$(new Date().getFullYear())</script> といった簡潔な形式で動的なコンテンツを生成する、簡易的なテンプレート言語として活用できる。これは、Webページ内で JavaScript を用いて効率的に動的コンテンツを埋め込むための手法として紹介された。
参考: Simon Willison’s Weblog — 2026年10月18日 06:11 (JST)
原文ハイライト"drop in a tiny inline <script> element that replaces itself when the page loads"