モジュールの概要
JavaScriptのモジュールは、コードを再利用可能な小さな部品に分割する仕組みです。これにより、コードの保守性が向上し、グローバル変数の衝突を回避できます。
モジュールのルール
- モジュール内は常にStrictモードで実行される。
- ルートコンテキストでのthisはundefinedとなる。
- モジュール内の変数や関数は、export構文を使用して外部に公開する。
- exportにはデフォルトエクスポートと名前付きエクスポートがある。
デフォルトエクスポート
export default function XXXXXX() { ... } は、JavaScriptモジュールで関数をデフォルトエクスポートするための構文です。これにより、このモジュールから関数を簡単にインポートして利用することができます。
export default function logging() {
// なにかログを行うなど
}export default function logging() { ... } は、logging という名前の関数を定義し、それをデフォルトエクスポートとして公開するものです。この関数は、モジュール外部からインポートして利用することができます。
logging.js
// 関数の定義とデフォルトエクスポート
export default function logging() {
console.log('Logging information');
}デフォルトエクスポートをインポートする際には、任意の名前をつけてインポートすることができます。
main.js
// デフォルトエクスポートをインポート
import LogFunc from './logging.js';
// インポートした関数を使用
LogFunc(); // コンソールに "Logging information" と表示されるこの例では、logging.js モジュールから logging 関数をデフォルトエクスポートし、main.js で LogFunc という名前でインポートして使用しています。
名前付きエクスポート
JavaScriptモジュールで定数（const）を名前付きエクスポートするための構文です。これにより、他のファイルやモジュールからこれらの定数をインポートして利用することができます。
以下に、この構文の意味と具体的な使い方について説明します。
export const array = [10, 20, 30, 40, 50]
export const user = {
name: '鈴木太郎',
age: 25
}名前付きエクスポート（named export）は、複数のエクスポートを1つのモジュールから行うための方法です。名前付きエクスポートは、モジュールから特定の変数、関数、またはクラスをエクスポートし、それらをインポートする際にはエクスポートされた名前を使います。
動的なモジュールの読み込み
import('src/user').then(module => { console.log(module.user.name); }) は、JavaScriptモジュールを動的にインポートする方法を示しています。これは、モジュールを必要なときにのみ読み込むための非同期的な方法です。この構文を使用することで、パフォーマンスの向上やリソースの効率的な管理が可能になります。
以下に、この構文の意味と使い方について説明します。
import('src/user')
.then(module => {
console.log(module.user.name);
})
.catch(error => {
console.error('Error loading the module:', error);
});
import('src/user')：
import関数を使用して、src/userモジュールを動的に読み込みます。これはプロミスを返します。
.then(module => { ... })：
- プロミスが解決されたときに呼び出される
thenメソッドを使用して、モジュールのエクスポートを受け取ります。ここでは、moduleはsrc/userモジュールのエクスポートを含むオブジェクトです。
console.log(module.user.name)：
- モジュールの
userオブジェクトのnameプロパティをコンソールに出力します。userはsrc/userモジュール内でエクスポートされているオブジェクトです。
.catch(error => { ... })：
- エラーが発生した場合に備えて
catchメソッドを使用してエラーハンドリングを行います。モジュールの読み込み中に問題が発生した場合に、エラーメッセージをコンソールに出力します。
ブラウザでモジュールを実行する
ブラウザでJavaScriptモジュールを使用する場合、ファイル拡張子として.mjsを使用します。また、HTMLファイル内で<script>タグにtype="module"を追加してモジュールであることを宣言します。
フォルダ構成
index.html
module1.mjs
module2.mjsファイルの内容
index.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Modules</title>
</head>
<body>
<script type="module" src="./module1.mjs"></script>
<script type="module" src="./module2.mjs"></script>
</body>
</html>module1.mjs
export function plus(num1, num2) {
return num1 + num2;
}module2.mjs
import { plus } from './module1.mjs';
console.log(plus(1, 1)); // 2動的インポートは、必要な時にのみモジュールを読み込むため、パフォーマンス上の利点があります。import関数を使用して動的にモジュールを読み込みます。
「Cannot use import statement outside a module」エラー
このエラーは、ES6モジュールシステムで使用される import ステートメントがモジュール外で使用された場合に発生します。JavaScriptファイルがモジュールとして扱われるようにするために、type="module" を使用することで解決する場合があります。
<script type="module" src="your-script.js"></script>Node.jsでは、package.json ファイルに “type”: “module” を追加します。
{
"type": "module"
}または、.mjs 拡張子を使用してファイルを保存します。
node your-script.mjsこれらの方法を使用して、import ステートメントを正しく使えるようにすることができます。具体的な状況に応じて、適切な方法を選んでください。
まとめ
これらのポイントを押さえることで、JavaScriptモジュールの利用が可能です。これで、JavaScriptモジュールの基本的な使用方法とその利点について理解できました。
モジュールを活用して、コードの保守性と再利用性を向上させましょう。
