JavaScriptのimportとは？ | IT職種コラム

JavaScriptのimport文とは？

JavaScriptにはimportというものがあります。JavaScriptのimportはモジュールを扱うためのものとなっています。importを使用するためには、exportを行う必要があります。

ここではJavaScriptのモジュール、import、exportについて説明します。

JavaScriptのモジュールは1つのファイルであり、exportとimportを使用することでモジュール間で機能を相互にやりとりすることが可能となります。

また、モジュールは、ES6(ES2015) でサポートされた機能です。

JavaScriptのモジュールはモジュール間で機能を相互にやりとり出来ると説明しました。ですがJavaScriptファイルをモジュール化しなければなりません。モジュール化するにはexportを使用します。

exportについて説明します。

関数や、オブジェクト、プリミティブ値をexportを使用しモジュール化（エクスポート）することができます。

モジュール化（エクスポート）するサンプルコード1

export function hello() {
  alert("Hello world!!");
}
export function sum(x, y) {
    return x+y;
}

これは、helloとsumという名前の関数のモジュールをエクスポートしています。

サンプルコード2

export default function () {
    alert("Hello world");
};

これはデフォルトモジュールとしてエクスポートしています。

このようにexportを使用する事でモジュール化することができます。

exportを使用しモジュール化の方法を説明しました。

モジュールでエクスポートされた、関数やオブジェクト、プリミティブ値を使用するにはimportを使用します。

importの基本構文

import {モジュール名} from "インポート元";

上記構文でエクスポートされたモジュールをインポートし使用することができます。

 import {hello} from './module.js';

これは、module.jsファイルから、helloというモジュールをインポートしています。

 import {hello,name} from './module.js';

これは、module.jsファイルから、hello、nameの2つのモジュールをインポートしています。

 import Default from './module.js';

これは、module.jsファイルから、デフォルトモジュールをインポートしています。

実際にimportとexportを両方使用したサンプルコードを紹介します。

//module.js
export function hello(name) {
  return 'こんにちは, ${name}さん';
}

//index.html
<!DOCTYPE html>
<script type="module">
  import {hello} from './module.js';

  document.body.innerHTML = hello('山田');
</script>

結果

こんにちは, 山田さん

このコードはまずmodule.jsを作成し、exportを使用しhelloというモジュールをエクスポートしています。

次にindex.htmlを作成しています。

モジュールを扱うには<script type="module">で属性を設定する必要があるため記述しています。

import {hello} from './module.js';でhelloをインポートしています。

document.body.innerHTML = hello('山田');でインポートしたhelloを使用しています。

ブラウザは自動的にインポート対象を取得/評価し、スクリプトが実行され結果のように表示されます。

ローカル環境(file://URL)では動作しません。

ローカル環境に配置したHTML上でimport文を使用すると「Cannot use import statement outside a module」というエラーが出てしまいます。

オフライン環境で動作チェックをするときは適当なサーバを立ててHTMLを表示する必要があります。

また、Webブラウザーで使えるプレイグラウンドサービスなどでも動作チェックが出来ます。

JavaScriptのモジュール、import、exportについて簡単に説明しました。
import文はモジュールを扱うためのものとなっています。