別ソースをインポートするには？［JavaScript／jQuery］：.NET TIPS

JavaScriptファイルに別ファイルの内容を取り込むには、jQueryのajaxメソッドを利用できる。ECMAScript 2015のmoduleを使った例も紹介する。

» 2016年06月28日 05時00分公開

[山本康彦，BluewaterSoft／Microsoft MVP for Windows Development]

　JavaScriptのソースコードに別のソースコードを取り込みたいと思ったことはないだろうか？例えば、JavaScriptのソースコードを複数のファイルに分けたいのだが、HTMLの<script>タグで指定するJavaScriptのファイルは1つだけにしておきたいといった場合だ。jQueryを使えば、それが簡単にできる。

　本稿では、jQueryを使ってソースコードを取り込む方法を解説するとともに、JavaScriptの新しい機能による方法も紹介する。

jQueryを使って別ソースをインポートするには？

　jQueryのajaxメソッドを使えばよい。

　同期的に取り込むには、次のコードのようにajaxメソッドを使う（本稿では紹介しないが、非同期処理でよければgetScriptメソッドの方が簡潔に書ける）。

$(window).load(function(){
"use strict";

// jQueryを使ってWebサーバからJavaScriptファイルを読み込む
$.ajax({
    url: "./sample01.js", // JavaScriptファイルのURL（内容は後述）
    dataType: "script",
    async: false, // 同期処理にする
})
// 成功時の処理
.done(function (script, textStatus) {
    // 本来は、非同期処理にして、取り込んだ関数をここで使うことが望ましい
    console.log("done: " + textStatus);
})
// 失敗時の処理
.fail(function (jqxhr, settings, exception) {
    console.log("fail: " + jqxhr.status + ", " + exception);
})
// 終了時の処理（成功／失敗にかかわらず実行される）
.always(function (script, textStatus, exception) {
    console.log("always: " + textStatus);
});

// 同期処理を指定しているので、成功時にここへきたときには、
// sample01.jsファイル内の関数が使えるようになっている
console.log("getTime(): " + getTime());
// 出力例⇒getTime()：18:57
console.log("func1(3): " + func1(3));
// 出力⇒func1(3)：これはfunc1です。値は3
})

jQueryを使ってソースコードを取り込む例（JavaScript）
取り込んでいるソースコード「sample01.js」ファイルの内容は、後に記載する。getTime関数とfunc1関数は、「sample01.js」ファイルに記述してある。
ajaxメソッドのdataType引数に"script"を指定すると、JavaScriptファイルを読み込んで、それに含まれている関数を使えるようにしてくれる。
async引数をfalseに設定すると、同期的に処理してくれる（既定値はtrue）。コメントにあるように、できれば非同期的に処理して、doneメソッド内で取り込んだ関数を使うようにする方がよい。

　なお、上の例で取り込んでいる「sample01.js」ファイルの内容は、次のようなものだ。ごく普通なJavaScriptのソースコ―ドである。

// 関数宣言（function文）
function getTime() {
"use strict";

// 現在時刻
var now = new Date();
// 時分秒に分割し、それぞれ2桁の文字列（先頭ゼロ埋め）にする
var hh = ('0' + now.getHours()).toString().slice(-2);
var mm = ('0' + now.getMinutes()).toString().slice(-2);
// HH:mmという書式で現在時刻を返す
return hh + ":" + mm;
}

// 関数式（function演算子）
var func1 = function (n) {
"use strict";
return "これはfunc1です。値は" + n;
}

上のコードで取り込んでいる「sample01.js」ファイルの内容（JavaScript）
ごく普通にJavaScriptの関数が記述してあるだけだ。

JavaScriptのmodule機能を使って別ソースをインポートするには？

　以上のようにjQueryのajaxメソッドを使えば別ソースを取り込めるのだが、ちょっと面倒ではある。ところが、ECMAScript 2015のmodule機能がWebブラウザで使えるようになると、もっと簡潔に実現できるようになる。

　このmoduleとは、ECMAScript 2015仕様で定められている機能だ。ただし、本稿執筆時点では、メジャーなWebブラウザでこれを正式にサポートしているものはなく、一部で試験的なサポートが始まった段階である。ここではWindows 10 Insider Previewに搭載されているEdgeブラウザの試験的な実装を紹介しよう*1。

*1　Windows 10 Insider Preview Build 14342のEdgeから実装された。ただし、本稿執筆時点では既定では無効になっている。有効にするには、アドレスバーに「about:flags」と入力し、［試験的な JavaScript 機能を有効にする］チェックボックスにチェックを付けてから、Edgeを再起動する。

　まず、JavaScriptのファイルをmoduleとして扱うには、HTMLの<script>タグでtype属性に「module」と指定してWebページに取り込む（次のコード）。

<script type="module" src="./importSample.js" ></script>

JavaScriptファイルをmoduleとしてWebページに取り込む（HTML）
現在は、<script>タグを利用し、type属性に「module」と指定する。将来は専用のタグが作られるかもしれない。

　moduleの中では、import／export文が利用できる。上で示した「importSample.js」ファイルの中で、別のファイル（後述する「sample02.js」ファイル）から関数と定数をインポートして使うコードは次のようになる。

// ファイル：importSample.js

// sample02.jsに定義されている関数squareと定数piをインポート
import { square , pi, } from "/sample02.js";
// 別名を付けることも可能（この場合は、square関数を「sq」という名前で利用する）
//import { square as sq, pi, } from '/sample02.js';

// 円の面積を求める（インポートした関数squareと定数piを使う）
function getAreaOfCircle(radius) {
return square(radius) * pi;
}

import文で別のファイルから関数と定数をインポートするコードの例（JavaScript）
import文は、ECMAScript 2015仕様で定められている機能だ。
このようにして、他のmoduleでエクスポートされている関数や定数などを取り込める。import文の書き方には、この他に、エクスポートされているものを全て取り込む方法などがあるが、本稿執筆時点でEdgeが対応しているのはこの書き方だけのようである。

　上でインポートしている「sample02.js」ファイルは、次のコードのようになる。export文を使って明示的にエクスポートする。

// ファイル：sample02.js

// 定数piをエクスポート
export const pi = Math.PI;

// 関数squareをエクスポート
export function square(x) {
return x * x;
}

export文で関数と定数をエクスポートするコードの例（JavaScript）
export文は、ECMAScript 2015仕様で定められている機能だ。
このようにしてエクスポートしたものだけが、他のmoduleでインポートできる。
この他に、default exportというものもある。これは無名関数などをmoduleで1つだけエクスポートする機能だ（本稿執筆時点のEdgeでは未対応のようだ）。

　最後に、WebページのJavaScriptからgetAreaOfCircle関数を呼び出す（次のコード）。

moduleに含まれる関数をWebページから呼び出すコードの例（JavaScript）
WebページのJavaScriptからmoduleに含まれる関数を呼び出すコードは、従来通りだ。ただし、前述したように、moduleファイルを取り込む<script>タグのtype属性には「module」と指定する。

まとめ

　jQueryのajaxメソッドを使うと、別のファイルに記述されたJavaScriptを読み込んで、そこに定義された関数などを呼び出せる。ただし、将来的にはJavaScriptのimport／export文を使って、より簡潔に記述できるようになる予定だ。

カテゴリ：JavaScript　処理対象：言語構文
カテゴリ：JavaScript　処理対象：ファイルダウンロード
カテゴリ：オープンソース・ライブラリ　処理対象：JavaScript
使用ライブラリ：jQuery
関連TIPS：Ajax（非同期通信）を実装するには？［JavaScript／jQuery］
関連TIPS：strictモードとは？［JavaScript］