外部jsの読み込み・実行:jQuery $.getScript()完全ガイド｜DAD UNION

Webページの動的な機能追加やコンテンツの変更にJavaScriptが利用されますが、時には外部のjsファイルを読み込んで実行したい場面が出てきます。特に大規模なウェブアプリケーションやサイトでは、一つのページ内で全てのJavaScriptを記述するのではなく、外部のjsファイルとして管理し、必要に応じて読み込むことが一般的です。

本記事では、jQueryの.getScriptメソッドを使って、外部のjsファイルを読み込む方法を詳しく解説します。

Contents

jQueryの.getScriptとは？
CSSの基本設定
.getScript()を使った外部jsファイルの読み込み
外部jsファイルの記述例
jQueryの.getScriptを使用し外部jsファイルの処理を実行するデモページ
クロスドメインとjQueryの.getScript
さいごに

jQueryの.getScriptとは？

jQueryの.getScript()は、外部のJavaScriptファイルを非同期に読み込んで実行するためのメソッドです。
このメソッドを使用すると、ページの表示速度を遅くすることなく、必要な時にのみJavaScriptを読み込むことができます。

CSSの基本設定

以下はデモページの基本的なCSSの設定です。この設定は外部jsファイルの動作確認を目的としていますので、適宜変更してください。

<style type="text/css">
<!--
body {
    font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
    margin:0;
    padding:0;
}
h1{
    font-size:16px;
    font-weight:normal;
    line-height:1.4em;
    text-align:center;
    padding:15px 0;
}
#idWrap{
    width:800px;
    margin:0 auto;
}
-->
</style>

.getScript()を使った外部jsファイルの読み込み

次に、$.getScript()メソッドを使って外部のjsファイルを読み込む方法を示します。ここでは、jqueryのバージョン1.8系を使用しています。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
window.onload = (function(){
	$.getScript("https://dad-union.com/demo/js/20140418-getscript-external-file-crossdomain/ext.js");
});
</script>

外部jsファイルの記述例

読み込む外部jsファイル（ext.js）の簡単な例を以下に示します。この例では、jsファイルが正しく読み込まれたことを確認するためのalertメッセージを表示しています。

alert("外部jsファイル「ext.js」が読込まれました。");

jQueryの.getScriptを使用し外部jsファイルの処理を実行するデモページ

具体的な動作を確認したい方は、以下のデモページをご覧ください。

jQueryの.getScriptを使用し外部jsファイルの処理を実行するデモ

クロスドメインとjQueryの.getScript

通常、JavaScriptのクロスドメイン通信はセキュリティの観点から制限されています。しかし、最近のjQueryのバージョンでは、クロスドメインでも.getScriptが利用できるようになっています。ただし、実際にクロスドメインでの動作を確認する必要がありますので、今後の実験として取り組んでみたいと考えています。