JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでのモジュールのエクスポートとインポート方法を徹底解説

はじめに

JavaScriptでは、ESモジュール（ES Modules）の仕組みを使うことで、コードを複数のファイルに分割し、必要な機能だけを他のファイルから読み込んで再利用できます。この記事では、exportとimportを使ったモジュールの基本的な使い方を、実際に動作するサンプルコードとともに解説します。

注意： このサンプルを実行するには、ローカルホストサーバー（localhost）が必要です。HTMLファイルを直接ブラウザで開くと、CORSポリシーによりモジュールの読み込みがブロックされるためご注意ください。

実装例：モジュールのエクスポートとインポート

以下は、JavaScriptでエクスポートとインポートを使用した具体的なコード例です。

INDEX.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Exports and imports in JavaScript</h1>
<button class="Btn">IMPORT</button>
<div class="result"></div>
<h3>Click on the above button to import module</h3>
<script src="script.js" type="module"></script>
<script src="sample.js" type="module"></script>
</body>
</html>

このHTMLファイルでは、ボタンと結果表示用の要素を配置し、2つのJavaScriptファイルをtype="module"属性付きで読み込んでいます。この属性を指定することで、ブラウザはこれらのスクリプトをESモジュールとして扱います。

script.js

import test from './sample.js';
document.querySelector('.Btn').addEventListener('click',()=>{
test();
})

script.jsでは、sample.jsからデフォルトエクスポートされた関数をimport文で読み込んでいます。そして、ボタンがクリックされたときにその関数を呼び出します。

sample.js

let resultEle = document.querySelector(".result");
export default function testImport(){
resultEle.innerHTML = 'Module testImport has been imported';
}

sample.jsでは、export defaultを使ってtestImport関数をデフォルトエクスポートしています。この関数が実行されると、結果表示用の要素にメッセージが出力されます。

実行結果

ページを開いた直後の初期状態は以下の通りです。

JavaScriptでのモジュールのエクスポートとインポート方法を徹底解説

「IMPORT」ボタンをクリックすると、以下のようにモジュールが正常にインポートされたことを示すメッセージが表示されます。

JavaScriptでのモジュールのエクスポートとインポート方法を徹底解説

まとめ

このように、exportでモジュール側から機能を公開し、importで別のファイルからその機能を読み込むことで、コードの分離と再利用性の向上が実現できます。特にexport defaultは1ファイルにつき1つだけ定義できるため、モジュールのメイン機能を公開する際によく使われます。

  1. 【初心者向け】JavaScriptでインポートとエクスポートの名前を変更する方法

    JavaScriptにおけるインポートとエクスポートの名前変更とはJavaScriptのESモジュールでは、asキーワードを使うことで、エクスポートやインポートの際に関数や変数に別名を付けることができます。モジュール側の元の名前はそのまま維持しながら、利用する側では分かりやすい名前で扱えるため、コードの可読性と保守性が向上します。注意：このサンプルを実行するには、ローカルホストサーバー環境が必要です。HTMLファイルを直接ブラウザで開くと、CORSポリシーの制限によりモジュールの読み込みが失敗する場合があるためご注意ください。コード例index.html<!DOCTYPE html>

  2. JavaScriptで動的インポート（dynamic import）をawaitする方法

    この記事では、JavaScriptの動的インポート（dynamic import）をawaitを使って読み込む方法について解説します。 注意： このサンプルコードは、モジュールを読み込むためローカルサーバー（localhost）環境が必要です。HTMLファイルを直接開くのではなく、Live Serverなどの開発用サーバー経由で実行してください。 動的インポートとは？ 通常のimport文はファイルの先頭で静的に宣言しますが、import()関数を使うと、必要なタイミング（例：ボタンクリック時）でモジュールを遅延読み込みできます。戻り値はPromiseであるため、awaitと組み合わせることで