JavaScript

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

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

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

jQueryの.getScriptとは?

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

CSSの基本設定

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

<style type="text/css">
<!--
body {
    font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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が利用できるようになっています。ただし、実際にクロスドメインでの動作を確認する必要がありますので、今後の実験として取り組んでみたいと考えています。

さいごに

jQueryの.getScriptを使って外部のjsファイルを読み込む方法についての解説でした。この方法を利用することで、ウェブページの動作をより柔軟にし、ユーザーエクスペリエンスを向上させることができます。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。