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

JavaScriptのモジュールとは？基本の仕組みと使い方を実例付きで解説

JavaScriptのモジュールとは

モジュール（Module）は、ES2015（ES6）で導入された機能で、大きなコードを小さな部品ごとのファイルに分割して管理するための仕組みです。モジュールの中には、クラスや関数など必要な処理をまとめて定義できます。

モジュールでは、「export」と「import」という2つのキーワードが中心となります。exportを使って変数・関数・オブジェクトを外部に公開し、importを使って別のファイルからそれらを読み込んで利用します。

従来のJavaScriptでは、読み込んだすべてのスクリプトがグローバルスコープを共有していたため、変数名の衝突などの問題が発生しやすいという課題がありました。モジュールを使うと各ファイルが独立したスコープを持つため、意図せずグローバル汚染が起きるのを防げます。

注意： このサンプルを実行するには、ローカルサーバー（localhost）環境が必要です。HTMLファイルを直接ブラウザで開くと、セキュリティ制限によりモジュールが正しく読み込まれない場合があります。

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;
      color:blueviolet;
   }
</style>
</head>
<body>
<h1>Modules 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>

ポイントは、scriptタグに type="module" を指定している点です。この属性を付けることで、そのファイルがJavaScriptモジュールとして扱われ、import文やexport文が使用できるようになります。

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';
}

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

実行結果

上記のコードを実行し、画面上の「IMPORT」ボタンをクリックすると、次のように表示されます。

JavaScriptのモジュールとは？基本の仕組みと使い方を実例付きで解説

resultクラスの要素に「Module testImport has been imported」というメッセージが表示され、sample.jsからエクスポートした関数が正常にインポートされて動作したことが確認できます。

まとめ

JavaScriptのモジュールを使えば、コードを役割ごとに分割して整理でき、再利用性や保守性が大きく向上します。exportで機能を公開し、importで読み込むという基本的な流れを押さえておけば、規模の大きなアプリケーション開発でもコードをすっきり管理できるようになります。

  1. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2

  2. JavaScriptモジュール入門：ES2015のexportとimportを使いこなそう

    JavaScriptモジュールとは モジュールはES 2015（ES6）で導入された機能です。大規模化しがちなコードを、再利用しやすい小さな単位に分割することを目的としています。モジュールにはクラスや関数などを格納でき、exportキーワードで変数・関数・オブジェクトを外部に公開し、別のファイルからimportキーワードで読み込んで使用します。 注意：この記事のサンプルを実行するには、ローカルホストサーバーが必要です。HTMLファイルを直接開いた場合、CORSポリシーによりモジュールの読み込みがブロックされることがあります。 モジュールのメリット コードの分割により保守性が向上する 関数やク