連載
» 2016年06月28日 05時00分 UPDATE

.NET TIPS:別ソースをインポートするには?[JavaScript/jQuery]

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

[山本康彦,BluewaterSoft/Microsoft MVP for Windows Development]
「.NET TIPS」のインデックス

連載目次

 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="text/javascript" src="./importSample.js"></script -->

<!-- moduleとして取り込む方法 -->
<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関数を呼び出す(次のコード)。

  <script type="module" src="./importSample.js" ></script>
  <!-- 上の<script>タグについては前述した -->

  <script type="text/javascript">
$(window).load(function(){
  "use strict";

  console.log(getAreaOfCircle(2.0));
  // 出力⇒12.5663706143592
})
  </script>

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]


「.NET TIPS」のインデックス

.NET TIPS

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。