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"></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文を使った方が美しいですが、少し複雑なのでパフォーマンス面で見ると若干不利かもしれません。といっても数行のJavaScriptですからよほど切羽詰ったサーバーでなければ問題ないでしょう。

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

スポンサーリンク

Track Back

Track Back URL

コメントする

非公開。必須ではありません。

(いくつかのHTMLタグ(a, strong, ul, ol, liなど)が使えます)

このページの上部へ

サイト内検索

広告

最近のコメント

Powered by Movable Type 6.3.2