ホーム » JavaScriptチュートリアル » JavaScriptの読み込み

JavaScriptの読み込み

要約: このチュートリアルでは、別のモジュールから変数、関数、クラスを読み込むためのJavaScriptのimportキーワードの使い方について学習します。

JavaScriptのimportキーワードの紹介

ES6モジュールを使用すると、JavaScriptコードをモジュールに分割し、さまざまなモジュール間で値（変数、関数、クラスなど）を共有できます。

モジュールから値を読み込むには、importキーワードを使用します。また、JavaScriptソースファイルをモジュールとして読み込む必要があります。HTMLでは、scriptタグにtype="module"を指定して読み込みます。

<script type="module" src="app.js"></script>Code language: JavaScript (javascript)

以下に簡単な例を記載します。importキーワードの使い方を示します。

以下のような構造を持つプロジェクトがあるとします。

├── index.html
└── js
   ├── app.js
   └── greeting.jsCode language: JavaScript (javascript)

このプロジェクトでは、index.htmlがapp.jsをモジュールとして読み込みます。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript import</title>
    </head>
    <body>
        <script src="js/app.js" type="module"></script>
    </body>
</html>Code language: JavaScript (javascript)

greeting.jsモジュールには、メッセージを表示するsayHi()関数があります。sayHi()関数は、デフォルトのエクスポートとしてエクスポートします。

export default function sayHi() {
  alert('Hi');
}Code language: JavaScript (javascript)

app.jsはgreeting.jsモジュールからsayHi()メソッドを読み込み、実行します。

デフォルトのエクスポートの読み込み

モジュールがデフォルトのエクスポートを使用する場合、次の構文を使用してそのモジュールからデフォルトのエクスポートを読み込むことができます。

import name from 'module.js';Code language: JavaScript (javascript)

たとえば、app.jsモジュールにgreeting.jsモジュールからsayHi()関数を読み込むには、以下のようにします。

import sayHi from './greeting.js';

sayHi();Code language: JavaScript (javascript)

index.htmlをWebブラウザで開くと、アラートメッセージが表示されます。

sayHi()関数はデフォルトのエクスポートなので、読み込むときに任意の名前を割り当てることができます。

たとえば、greeting.jsモジュールからsayHi関数を読み込み、名前をdisplayGreeting()に設定するには、以下のようにします。

import displayGreeting from './greeting.js';

displayGreeting();Code language: JavaScript (javascript)

名前付きエクスポートの読み込み

デフォルトのエクスポートの読み込みとは異なり、名前付きエクスポートを読み込むときは、モジュールに読み込むときに名前付きエクスポートの正確な名前を指定する必要があります。さらに、名前付きエクスポートは中括弧で囲む必要があります。

以下に、名前付きエクスポートを読み込むための構文を示します。

import { namedExport1, namedExport2} from 'module.js';Code language: JavaScript (javascript)

たとえば、2つの名前付きエクスポートを含むgreeting.jsモジュールを変更できます。

export function sayHi() {
  alert('Hi');
}

export function sayBye() {
  alert('Bye');
}Code language: JavaScript (javascript)

app.jsモジュールにsayHi()関数とsayBye()関数をインポートするには、次のコードを使用します。

import { sayHi, sayBye } from './greeting.js';Code language: JavaScript (javascript)

これらの関数も呼び出すことができます。

import { sayHi, sayBye } from './greeting.js';

sayHi();
sayBye();Code language: JavaScript (javascript)

index.htmlをWebブラウザで開くと、この2つの関数によって作成された2つのアラートが表示されます。

名前空間のインポート

モジュールの名前空間オブジェクトは、モジュールからのすべてのエクスポートを含む静的なオブジェクトです。モジュールを評価するときにJavaScriptによって作成される静的なオブジェクトです。

モジュール名前空間オブジェクトにアクセスするには、次の構文を使用します。

import * as name from 'module.js';Code language: JavaScript (javascript)

この構文では、nameはmodule.jsモジュールのすべてのエクスポートをプロパティとして含むモジュール名前空間オブジェクトです。

たとえば、modules.jsにmyVariable、myFunction、myClassという名前付きエクスポートがある場合、nameオブジェクトを使用して次のようにアクセスできます。

name.myVariable
name.myFunction
name.myClassCode language: JavaScript (javascript)

名前空間のインポートの仕組みを説明するために、app.jsを変更して次のように名前空間のインポートを使用できます。

import * as greeting from './greeting.js';

greeting.sayHi();
greeting.sayBye();Code language: JavaScript (javascript)

以下は、greetingをモジュール名前空間オブジェクトとして指定します。

import * as greeting from './greeting.js';Code language: JavaScript (javascript)

モジュール名前空間オブジェクトを取得したら、sayHi()関数とsayBye()関数を呼び出すことができます。

greeting.sayHi();
greeting.sayBye();Code language: JavaScript (javascript)

インポートするモジュールにデフォルトのエクスポートがある場合、defaultキーワードを使用してアクセスできます。

name.defaultCode language: JavaScript (javascript)

例えば、greeting.jsモジュールでsayHi関数をデフォルトのエクスポートに変更できます

export default function sayHi() {
  alert('Hi');
}

export function sayBye() {
  alert('Bye');
}Code language: JavaScript (javascript)

そしてgreeting.jsモジュールからエクスポートを名前空間インポートを使用してapp.jsモジュールにインポートします

import * as greeting from './greeting.js';

greeting.default(); // sayHi()
greeting.sayBye();Code language: JavaScript (javascript)

この場合、上で示されたようにdefault()経由でsayHi()関数を呼び出すことができます。次のように名前を使用してsayHi()関数にアクセスすることはできないことに注意してください

greeting.sayHi();Code language: JavaScript (javascript)

そうすると、次のエラーが発生します

Uncaught TypeError: greeting.sayHi is not a functionCode language: JavaScript (javascript)

名前付きエクスポート名を変更する

名前付きエクスポートをインポートする場合は、新しい名前を割り当てることができます。さまざまなモジュールから同じ名前の関数をインポートする場合に役立ちます

import { name as name1 } from "module1.js";
import { name as name2 } from "module2.js";Code language: JavaScript (javascript)

たとえば、次の例では、app.jsモジュールにインポートするときに、sayHi()関数とsayBye()関数をhi()関数とbye()関数に名前変更する方法を示しています

import { sayHi as hi, sayBye as bye } from './greeting.js';

hi();
bye();Code language: JavaScript (javascript)

まとめ

  • モジュールに変数、関数、およびクラスをインポートするには、JavaScriptのimportキーワードを使用します
このチュートリアルは役立ちましたか？
JavaScript Export
戻る
JavaScriptエクスポート
次
JavaScript動的インポート
JavaScript Dynamic Import