パソコン実践BLOG -道すがら講堂-

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の見た目を気にする方は挑戦してみてはいかがでしょうか。

広告