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

JavaScriptでモジュールをインポート・エクスポートする方法を解説

JavaScriptにおけるモジュールのインポートとエクスポートの基本

JavaScript（ESモジュール）では、exportとimport構文を使用することで、コードを複数のファイルに分割し、他のファイルから必要な関数や変数を読み込んで利用できます。ここでは、実際に動作するサンプルコードを通じて、モジュールのインポートおよびエクスポートの基本をわかりやすく解説します。

注意： この例を実行するには、ローカルホストサーバー（localhost）環境が必要です。HTMLファイルを直接開くのではなく、必ずローカルサーバー経由でアクセスしてください。

INDEX.html

まずはHTMLファイルの全体像です。scriptタグにtype="module"を指定することで、JavaScriptファイルがモジュールとして扱われます。2つのモジュールファイルを読み込んでいる点に注目してください。

<!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>JavaScript Importing and Exporting Modules</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>

script.js

このファイルでは、sample.jsからデフォルトエクスポートされた関数testをインポートしています。ボタンがクリックされたタイミングで、その関数が実行される仕組みです。

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

sample.js

export defaultを関数に付けることで、このファイル内の関数を他のモジュールからインポートできるようになります。関数が実行されると、結果表示用の要素（.result）にメッセージが出力されます。

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

実行結果

ページを開くと、次のように「IMPORT」ボタンが表示されます。

JavaScriptでモジュールをインポート・エクスポートする方法を解説

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

JavaScriptでモジュールをインポート・エクスポートする方法を解説

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

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

  2. Hyper-V 2019で仮想マシンをエクスポート・インポートする完全ガイド

    2019年8月に、Hyper-V 2019のインストールから仮想マシンの構築・展開までを解説する全4回のシリーズ記事を公開しました。まだお読みでない方は、以下のリンクからご確認いただけます。Part 1:Hyper-V 2019 Server Coreのインストール方法Part 2:Hyper-V 2019 Core Serverの初期設定Part 3:Hyper-V 2019 Coreのリモート管理Part 4:Hyper-V 2019で最初の仮想マシンを作成する本記事の概要本記事では、あるHyper-V 2019サーバーから別のHyper-V 2019サーバーへ仮想マシンを移行するための「