レイズソフトウェア

JavaScriptファイルに動的にパラメータを渡す方法

はてなブックマーク
2013/11/24 00:36:36

最近のWebアプリでは、JavaScript を使ってがりがり処理することが多いです。 動的にパラメータを渡して処理させることも多いのですが、 うまく渡す方法を知らない人が意外と多いみたいです。 なのでまとめてみます。誰かのお役にたてれば幸いです。

前提

説明しやすくするために下記の環境を想定します。

文書型(DOCTYPE) HTML5
スクリプト言語 PHP + Smarty
JavaScriptライブラリ jQuery

パターン1:動的なJavaScriptを生成する

HTML

<script>
var foo = "{$foo}";
var bar = "{$bar}";
</script>
<script src="/js/hoge.js"></script>

解説

よくある簡単なパターンですが、最もメンテナンスがしにくいです(経験上)。

良くないところは、
・渡したいパラメータが JavaScript のグローバル変数になる。
・記述する順番に気を付けなければならない。
・JavaScript と PHP(Smarty)が分離できない。
・script タグが2つあってカッコワルイ(超重要!!)。
です。

後述のパターン2~4を検討した方が良いです。

パターン2:input タグの hidden を使用

HTML

<script src="/js/hoge.js"></script>
<input type="hidden" id="foo" name="foo" value="{$foo}" />
<input type="hidden" id="bar" name="bar" value="{$bar}" />

JavaScript

$('#foo').val();

解説

パターン1の悪い点がかなり改善されています。 JavaScriptとPHP(Smarty)が分離されているので、メンテナンスしやすいです。

良くないところは、
・パラメータの数だけ hidden を記述しなければならない。
・formタグ内に記述してしまうと、無駄にサーバーに送信されてしまう。
です。

後述のパターン3を検討した方が良いです。

2014/07/07 追記:
ちなみに disabled="disabled" を付けると、formタグ内に記述しても送信されません。

パターン3:data 属性を使用

HTML

<script src="/js/hoge.js"></script>
<a href="~" id="hoge" data-foo="{$foo}" data-bar="{$bar}" />

JavaScript

$('#hoge').data('foo');

解説

パターン2の悪い点が改善されています。 この記述の良い点は、タグに意味的に紐づいたパラメータを付与できる点です。 また不要なタグを追加する必要もありません。 "data-" は独自データ属性というもので、好きな名前で好きな値を設定できます。 jQuery にも専用のメソッドがあり、簡単に取得できます。

パターン4:script タグに data 属性を使用

HTML

<script src="/js/hoge.js" id="hogejs" data-foo="{$foo}" data-bar="{$bar}"></script>

JavaScript

$('#hogejs').data('foo');

解説

パターン3の応用です。 パターン3との違いは data 属性を script タグに設定している点です。 まるで JavaScript にパラメータを渡している(ように見える)ので、 全体に影響するようなパラメータ(例えば設定値など)を渡すときは、 直観的でわかりやすいです。

良くないところは、
・この記述を知っている人が少ないので、ぽかーんとされてしまう。
・たくさんのパラメータを記述すると長くなる。
です。

まとめ

パターン3と4は使い分けると良いです。 個別の要素に紐づいているパラメータはパターン3で、 script 全体に影響するパラメータ(例えば設定値など)はパターン4で記述するのがオススメです。

参考サイト