2019-06-09

外部読み込みのJSファイルに値を渡す

javascriptに関する記事

変数のスコープ(範囲)の基本的な性質

外部ファイルとして読み込んでいるファイルに値を渡して処理させたいと思うことがありました。これまで深く考えたことがなかったのですが、少し掘り下げて考察してみました。
呼び出し元ファイルであらかじめ変数で定義しておき、外部ファイル側で使用する、というのが一般的かと思いますが、関数の呼び出し時に引数として渡してあげるようなイメージの方がスマートなのではと思います。

scriptタグで定義

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

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

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

HTMLタグの属性に記述

HTMLタグの属性に、引数とする値を記述します。このとき要素にIDを設定しておくと、その要素を参照しやすくなります。
値を定義するためだけにHTMLタグを用意しなければなりません。ページのどこに記述するのか、他のメンバーへの周知などを考えると煩わしい気がします。

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

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

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

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>

外部ファイル呼び出しのscriptタグに属性として定義

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

参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script

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

app.js

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

スポンサーリンク

まとめ

結局、ページ数などプロジェクトの規模やサイトの構成で適切な方法は異なりますね。笑 自分は1枚で完結するようなLPを作成する機会が多いので、専ら最後のケースとなってしまいます。どのケースでも、idであったり属性名が重複しないように気をつける必要がありますね。