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

JavaScriptでモジュール・ライブラリをインポート・エクスポートする方法をわかりやすく解説

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

JavaScriptでは、ESモジュール（ESM）の仕組みを利用することで、コードを複数のファイルに分割し、必要な機能だけを読み込んで再利用できます。モジュール化によって、コードの保守性・再利用性・可読性が大きく向上します。

注意 − この例を実行するには、ローカルホストサーバー（localhost）の起動が必要です。file:// プロトコルではモジュールを読み込めないため、VS Codeの「Live Server」拡張機能などを使ってローカル環境を立ち上げるのがおすすめです。

サンプルコード

以下は、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>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

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

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

sample.js

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

このファイルでは、testImport 関数を export default でエクスポートしています。デフォルトエクスポートは各モジュールにつき1つだけ定義でき、インポート側では任意の名前を付けて受け取ることができます。

実行結果

上記のコードを実行すると、次のような出力が得られます −

JavaScriptでモジュール・ライブラリをインポート・エクスポートする方法をわかりやすく解説

「IMPORT」ボタンをクリックすると −

JavaScriptでモジュール・ライブラリをインポート・エクスポートする方法をわかりやすく解説

押さえておきたいポイント

  • export default：モジュールごとに1つだけ設定できるデフォルトエクスポート。インポート時には任意の名前を指定できます。
  • type="module"：scriptタグに type="module" を指定することで、そのスクリプトがESモジュールとして扱われます。
  • 相対パスの指定：インポート時は ./sample.js のように相対パスを明示する必要があります。
  • ローカルサーバー必須：ESモジュールはセキュリティ上の制約により、HTTP経由での読み込みが必要です。
  1. VirtualBoxでOVAファイルをインポート・エクスポートする方法を徹底解説

    仮想マシン（VM）を活用する最大のメリットのひとつは、その「持ち運びやすさ」にあります。あるマシン上で作成した仮想マシンを別の環境へ移行したり、構築済みのVM一式を複製して展開できるのは非常に便利です。 さらに、インターネット上にはあらかじめ設定済みの仮想マシンイメージが多数公開されており、それらをすぐにインポートして使い始めることも可能です。本記事では、VirtualBoxでOVAファイルをインポートおよびエクスポートする手順を、初心者にもわかりやすく解説します。 OVAファイルとは？ OVAファイル（Open Virtual Appliance）とは、仮想マシンの情報を記述したファイル群

  2. Chromeのブックマークをエクスポート・インポートする方法｜HTMLファイルでのバックアップ手順を解説

    Google Chromeを長く使っていると、失うことができないほど大量のブックマークが蓄積されているはずです。デバイスの乗り換え、新しいブラウザプロファイルの作成、Chromeの再インストールなどを予定しているなら、事前にブックマークをエクスポートしておくことが重要です。あらかじめ書き出しておけば、後からいつでもデータを取り込めるようになります。 多くの方はGoogleアカウントを使って閲覧データをリアルタイムでGoogleサーバーに同期していると思います。それでも、より安全な対策として手動でのバックアップを習慣づけるのがおすすめです。 この記事では、ChromeのブックマークをHTMLファ