2019-06-09

外部ファイルとして読込むjavascriptファイルに値を渡す方法

外部ファイルとして読み込んでいるjavascriptのファイルに、読込み時に値を渡して処理させたいということがありました。これまで深く考えたことがなかったのですが、少し掘り下げて考察してみました。

シーンで使い分ける、値の読込み方法

呼び出し元ファイルであらかじめ変数で定義しておき、外部ファイル側で使用する、というのが一般的かと思います。

スクリプトが読み込まれるとグローバル変数として定義されます。スクリプト側で特別に値を取得する処理等は必要出なく確実な方法と言えるでしょう。しかしグローバル変数で定義しているため変数の管理には気をつけましょう。ちょっとした記述であれば問題ないでしょう。

変数foo、barをapp.js内で使用する例です。

<script>
  var foo = 'foo';
  var bar = 'bar';
</script>

<script src="app.js"></script>

HTMLタグの属性に、引数とする値を記述します。このとき要素にidを設定しておくと、その要素を参照しやすくなります。

値を定義するためだけにHTMLタグを用意しなければなりません。ページのどこに記述するのか、他のメンバーへの周知など保守性を考えると煩わしい気がします。

<div id="foo" data-foo="123"></div>
<div id="bar" data-bar="バー"></div>

<script src="app.js"></script>

下記の取得スクリプトでは、ネイティブではなくjQueryを使用しています。

下記はHTML内のデータ属性の値をapp.jsで表示しています。

$("#foo").data("foo"); //123
$("#bar").data("bar"); //バー

なお専らデータの受け渡し用とし、タグとして表示させない場合は下記のようにdisplay: none;とスタイルをあてることで非表示にもできます。

<div id="foo" data-foo="123" style="display: none;"></div>
<div id="bar" data-bar="バー" style="display: none;"></div>

ん〜、いまいちですね〜。笑

もっとも直感的な感じがします。あたかも関数呼び出し時に引数を渡してあげるかのようなシンプルさ。先にご紹介した2つのケースのように、別途変数やタグの記述を用意する必要がないので見た目もスマートです。

変数の定義とスクリプトの定義がセットになるので、構造的にもシンプルです。

ただし、HTMLの仕様には準拠しません。その点が少し気になりました。

<script src="app.js" id="foo" data-device="tablet"></script>

●app.js

$("#foo").data("device"); //tablet

結局のところ、ページ数などプロジェクトの規模やサイトの構成で適切な方法は異なりますね。

自分の場合は、1枚で完結するようなLPを作成する機会が多いので、専ら最後のケースを使うケースが多いです。どのケースも、idであったり属性名が重複しないように気をつける必要があります。