サーバのデータをクライアントサイドの JavaScript で扱いたいとき、API を用意して取得する方法が一般的だが、もっと簡易的な方法として HTML に JSON データを埋め込むという方法がある。

JSON を埋め込む

JSON の生成方法は利用している言語やテンプレートエンジンによって様々だが、今回は PHP で。

<script type="application/json" id="json-data">
<?php echo json_encode($data, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>
</script>

type="application/json" を指定することで JSON 文字列として埋めこむことができる。

注意点として、HTML の中に JSON 文字列を埋め込むことになるため最低でも < と > はエスケープしておかないと XSS の恐れがある。PHP の json_encode の場合、 JSON_HEX_TAG フラグを指定するとすべての < > を \u003C \u003E に変換できる。

埋め込んだ JSON を読み込んで利用する

var elem = document.getElementById("json-data");
var data = JSON.parse(elem.textContent);

先程の script エレメントの textContent プロパティから JSON 文字列が取得できるので、あとは JSON.parse() で JS オブジェクトに変換する。

別の方法との比較

よく見るのは「文字列リテラルとして埋め込む」方式。

<script type="text/javascript">
var data = JSON.parse('<?php echo json_encode($data, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>');
</script>

この方式だとグローバル変数を利用することになってしまうので微妙。

グローバルに状態を持つのであれば DOM に持たせたほうがまだマシでは、ということで <script type="application/json"> で埋め込む方式をオススメしたい。