c4se記:さっちゃんですよ☆

.。oO(さっちゃんですよヾ(〃l _ l)ノ゙☆)

.。oO(此のblogは、主に音樂考察Programming に分類されますよ。ヾ(〃l _ l)ノ゙♬♪♡)

音樂は SoundCloud に公開中です。

考察は現在は主に Scrapbox で公表中です。

Programming は GitHub で開發中です。

JavaScriptで描画するページの初期値をページに埋め込む

SPA (single page application) なりなんなり、データからJavaScriptで描画し画面を更新してゆくときに、初期値をどう受け取るか問題になることがあります。ソフトウェアとして一番単純なのは、ページを受け取ったあとにサーバーとXHRなりで通信して受け取るものです。SPAを作るときは、もともとさういふ仕組みを作っていってゐるわけですから、加えてなにもする必要がありません。
サーバーでJavaScriptを実行し、初期値を素に描画した状態を、Webブラウザに渡す方法もあります。node.jsやPhantomJSやSlimerJSなどを使へばできます。
それから初期値をそのままページに埋め込んで、それを読みだしてやる方法があります。別途道具を用意してやる必要のない方法です。
PHPでそれをやります。DOMに埋め込んでやるやり方もあるでせうが、JSONJavaScriptに直接埋め込みます。

(function () {
'use strict';
var data = JSON.parse(decodeURIComponent('<?php echo rawurlencode(json_encode($data)); ?>'));
}());

形式をJavaScriptではなくJSONに限定してセキュリティリスクを減らします。URL encodeして、JavaScript文字列やHTMLとしての特殊文字を隠します。
PHPでなくても同樣にできます。