JavaScript ファイルに動的にパラメータを渡す方法
最近のWebアプリでは、JavaScript を使ってがりがり処理することが多いです。 動的にパラメータを渡して処理させることも多いのですが、 うまく渡す方法を知らない人が意外と多いみたいです。 なのでまとめてみます。誰かのお役にたてれば幸いです。
前提
説明しやすくするために下記の環境を想定します。
| 文書型（DOCTYPE） | HTML5 |
|---|---|
| スクリプト言語 | PHP + Smarty |
| JavaScript ライブラリ | jQuery |
パターン１：動的な JavaScript を生成する
<script>
var foo = "{$foo}";
var bar = "{$bar}";
</script>
<script src="/js/hoge.js"></script>
解説
よくある簡単なパターンですが、最もメンテナンスがしにくいです（経験上）。
良くないところは、
・渡したいパラメータが JavaScript のグローバル変数になる。
・記述する順番に気を付けなければならない。
・JavaScript と PHP（Smarty）が分離できない。
・script タグが２つあってカッコワルイ（超重要！！）。
です。
後述のパターン２～４を検討した方が良いです。
パターン２：input タグの hidden を使用
<script src="/js/hoge.js"></script>
～
<input type="hidden" id="foo" name="foo" value="{$foo}" />
<input type="hidden" id="bar" name="bar" value="{$bar}" />
$('#foo').val();
解説
パターン１の悪い点がかなり改善されています。 JavaScript と PHP（Smarty）が分離されているので、メンテナンスしやすいです。
良くないところは、
・パラメータの数だけ hidden を記述しなければならない。
・form タグ内に記述してしまうと、無駄にサーバーに送信されてしまう。
です。
後述のパターン３を検討した方が良いです。
2014/07/07 追記：
ちなみに disabled="disabled" を付けると、form タグ内に記述しても送信されません。
パターン３：data 属性を使用
<script src="/js/hoge.js"></script>
～
<a href="～" id="hoge" data-foo="{$foo}" data-bar="{$bar}" />
$('#hoge').data('foo');
解説
パターン２の悪い点が改善されています。 この記述の良い点は、タグに意味的に紐づいたパラメータを付与できる点です。 また不要なタグを追加する必要もありません。 "data-" は独自データ属性というもので、好きな名前で好きな値を設定できます。 jQuery にも専用のメソッドがあり、簡単に取得できます。
パターン４：script タグに data 属性を使用
<script src="/js/hoge.js" id="hogejs" data-foo="{$foo}" data-bar="{$bar}"></script>
$('#hogejs').data('foo');
解説
パターン３の応用です。
パターン３との違いは data 属性を script タグに設定している点です。
まるで JavaScript にパラメータを渡している（ように見える）ので、
全体に影響するようなパラメータ（例えば設定値など）を渡すときは、
直観的でわかりやすいです。
良くないところは、
・この記述を知っている人が少ないので、ぽかーんとされてしまう。
・たくさんのパラメータを記述すると長くなる。
です。
まとめ
パターン３と４は使い分けると良いです。 個別の要素に紐づいているパラメータはパターン３で、 script 全体に影響するパラメータ（例えば設定値など）はパターン４で記述するのがオススメです。
