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

この記事は最終更新日から 10年以上 が経過しています。

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

参考サイト

関連記事

JavaScript ファイルを読み込むためには script タグを使用するわけですが、その script タグの書き方をほんの少し変えるだけで処理速度は大きく変わってしまいます。そこで、JavaScript ファイルの読み込み方をまとめておきます。誰かのお役に立てば幸いです。方法1:head タグの中で読み込む(デ ...
最近、ダイアログを表示した際にページのスクロールを無効化する方法を探していて、思ったより苦戦したのですが、良い方法を見つけたので、忘れないように備忘録としてメモしておきます。誰かのお役に立てば幸いです。スクロールイベントはキャンセルできないまず最初にパッと思いついたのが、onscroll イベントハンドラーの中で pr ...
Twitter の埋め込みタイムラインを簡単に遅延読み込みさせる方法を思いついたので、備忘録としてメモしておきます。例として、Twitter の埋め込みタイムラインを使用していますが、他のサービスの埋め込みパーツでも同じ方法が使えると思います。誰かの参考になれば幸いです。Twitter の埋め込みタイムラインの問題点一 ...
最近のブラウザでは、JavaScript からウィンドウを開こうとした際、ポップアップブロックによってブロックされてしまうことがあります。通常のユーザーによる操作であれば問題ないのですが、Ajax と組み合わせた際にもブロックされてしまうのは困りものです。回避策を調査しましたので、ここに書いておきます。少々ハマってしま ...

記事検索

最新記事

人気記事

RSSフィード

フィードバック

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

匿名でフィードバックする
匿名でフィードバックする

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

なお、このフォームから入力された内容について、管理者から返信はできませんので注意してください。 もし、管理者からの返信が必要であれば、X(旧 Twitter) もしくは、お問い合わせより、お願いします。

  • フィードバックの送信が完了しました。