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

2013/11/24 00:36:36
この記事は最終更新日から7年以上が経過しています。

最近の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で記述するのがオススメです。

参考サイト

記事検索

アーカイブ

2021

2019

2018

2017

2016

2015

2014

2013

2012

2011

2010

RSSフィード