JavaScriptのロードを1つのファイルにまとめて実行する方法

HTMLなどでJavaScriptを読み込ませると、Webサイトに様々な便利機能を追加させてくれます。なので便利なJavaScriptを見つけるといくつも導入してみたくなるものです。

しかし、複数のJavaScriptを読み込ませようとすると、HTML内の記述が煩雑になり見にくくなってしまいます。

そこで、JavaScriptの読み込み(ロード)を1つのファイルにすべてまとめて実行する方法を紹介します。
これでHTMLの記述がすっきりし、またJavaScriptの管理もしやすくなります。

いくつか方法はあると思いますが、この記事では2つの方法を紹介します。

広告

「document.write」を使う方法

「document.write()」は括弧内に記述されている内容をHTMLに出力するJavaScriptの関数です。
つまり、「document.write()」の括弧内に「<script type=”text/javascript” src=”../js/AAA.js”&gt</script>」といった感じに記述すれば、HTMLに出力されJavaScriptファイルが読み込まれるということになります。

また、「document.write()」は複数同時に利用できる関数なので、ひとつのJavaScriptファイル(.js)にまとめて記述することができます。

document.write('<script type="text/javascript" src="../js/AAA.js"></script>');document.write('<script type="text/javascript" src="../js/BBB.js"></script>');document.write('<script type="text/javascript" src="../js/CCC.js"></script>');document.write('<script type="text/javascript" src="../js/DDD.js"></script>');...

テキストファイルを作成後、以上のように「document.write()」を複数使ってJavaScriptを読み込ませるよう記述します。保存したら拡張子を「.js」に変更してアップロードします。ファイル名は任意ですが、今回は「import.js」という名前にします。

<script type="text/javascript" src="../js/import.js"></script>

最後にHTMLで先ほど作成・アップロードしたJavaScriptファイルを読み込ませれば完了です。

JavaScriptの読み込み(ロード)を1つのJavaScriptファイルにすべてまとめることができました。

for文を使う方法

for文を使って「document.write()」を使ったHTML出力によるJavaScriptの読み込みをループさせます。

function importJS() {if (! new Array().push) return false;var scripts = new Array('../js/AAA.js','../js/BBB.js','../js/CCC.js');for (var i=0; i<scripts.length; i++) {document.write('<script type="text/javascript" src="' +scripts[i] +’"></script>’);}}importJS();

ひとつの関数に読み込ませたいJavaScriptファイルを書き、for文を使って「document.write()」をループさせることで順にHTMLへ出力させ、読み込ませます。(詳しい関数の解説は省きます。)

これも同じようにテキストファイルへ記述した後、拡張子を「.js」に変更してアップロード、HTMLでアップロードしたJavaScriptファイルを読み込ませればOKです。

<script type="text/javascript" src="../js/import.js"></script>

これで複数のJavaScriptファイルの読み込みをひとつのJavaScriptファイルにまとめ実行させることができました。

どちらの方法を使うかはお任せします。コード的にみるとfor文を使った方が美しいのでできればこちらが推奨です。

HTMLの見た目を気にする方は挑戦してみてはいかがでしょうか。

広告