76
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTML に JSON データを埋め込んで JavaScript から利用する

Last updated at Posted at 2017-02-17

サーバのデータをクライアントサイドの 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"> で埋め込む方式をオススメしたい。

76
67
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
76
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?