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

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

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

参考サイト

関連記事

Twitter の埋め込みタイムラインを簡単に遅延読み込みさせる方法を思いついたので、備忘録としてメモしておきます。例として、Twitter の埋め込みタイムラインを使用していますが、他のサービスの埋め込みパーツでも同じ方法が使えると思います。誰かの参考になれば幸いです。Twitter の埋め込みタイムラインの問題点一 ...
最近のブラウザでは、JavaScript からウィンドウを開こうとした際、ポップアップブロックによってブロックされてしまうことがあります。通常のユーザーによる操作であれば問題ないのですが、Ajax と組み合わせた際にもブロックされてしまうのは困りものです。回避策を調査しましたので、ここに書いておきます。少々ハマってしま ...

記事検索

最新記事

人気記事

RSSフィード

お知らせ

  • 2022/10/02 NEW
    ツールに「テキスト画像ジェネレーター」を追加しました。
    任意のテキストを画像に変換します。
    AA(アスキーアート)や絵文字などをそのまま画像化することができます。
  • 2022/09/30 NEW
    ツール「巨大文字AAジェネレーター」と「点字AAジェネレーター」に、「この結果を画像に変換する」を追加しました。
    生成したAAをテキストから画像に変換できます。
  • 2022/09/18
    ツール「巨大文字AAジェネレーター」の「ファイルから」に、「明るさ」を追加しました。
    巨大文字AAの明るさを調整できます。
    負の値を指定すると暗く、正の値を指定すると明るくなります。
  • 2022/08/28
    ツール「点字AAジェネレーター」の「ファイルから」に、「明るさ」を追加しました。
    点字AAの明るさを調整できます。
    負の値を指定すると暗く、正の値を指定すると明るくなります。
  • 2022/08/08
    ツール「巨大文字AAジェネレーター」で、半角文字を選択できるようになりました。
    半角文字を使用した場合は、横幅が全角文字の半分になるため、コンパクトな巨大文字AAが作成できます。