JavaScriptのモジュール化

うち知ル

モジュール化とは、プログラムを小さなモジュール（部品）に分割し、それぞれが特定の機能や責務を持つように設計することです。
これにより、コードの再利用性、保守性、および理解のしやすさが向上します。
Node.jsやフロントエンドのJavaScriptでは、モジュールシステムを使用してこれを実現します。
以下に、モジュール化の重要性とNode.jsやフロントエンドでのモジュールシステムの使い方を解説します。

モジュール化の重要性

  1. 再利用性:

    • コードを再利用可能な部品として分割することで、他のプロジェクトや他の部分でも簡単に利用できます。

  2. 保守性:

    • 小さなモジュールに分割することで、特定の機能やバグの修正が容易になります。

  3. 可読性:

    • モジュールごとに責務が明確になるため、コードの理解が容易になります。

  4. テストの容易さ:

    • モジュールごとに単体テストを行うことで、テストの範囲を限定しやすくなり、バグの早期発見が可能になります。

Node.jsにおけるモジュールシステム

Node.jsでは、CommonJSモジュールシステムがデフォルトで使用されます。これにより、require(リクワイア)とmodule.exportsを使ってモジュールを定義し、他のファイルからインポートすることができます。また、ES Modules（ESM）もサポートされています。

Node.jsでCommonJSを使用する場合

ファイル名：math.js（モジュールを定義するファイル）

// math.js
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = {
    add,
    subtract
};

math.jsファイルには2つの関数(add、subtract)と「module.exports」のコードが記載されています。
module.exports は、現在のファイル内で定義された関数やオブジェクトを他のファイルから使用できるようにエクスポートするための仕組みです。
ここでは、add と subtract という2つの関数をエクスポートしています。

他のファイルからのインポート方法

ファイル名：app.js（モジュールを使用するファイル）

// app.js
const math = require('./math');

console.log(math.add(2, 3));       // 5
console.log(math.subtract(5, 2));  // 3

math.jsファイル(モジュール)を他のファイル(app.js)で使用するには、require(リクワイア) 関数を使用してインポートします。
const math = require('./math');
require 関数を使って math.js モジュールをインポートしています。'./math' は、現在のファイルと同じディレクトリにある math.js ファイルを指定しています。
require 関数は、エクスポートされたオブジェクトを返します。この場合、{ add, subtract } というオブジェクトが返され、それを math という変数に代入しています。

■ 関数の呼び出し
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 2)); // 3
math オブジェクトのプロパティとして add と subtract 関数を使用しています。
math.add(2, 3) は 2 + 3 の計算を行い、結果として 5 を返します。
math.subtract(5, 2) は 5 - 2 の計算を行い、結果として 3 を返します。

Node.jsでES Modulesを使用する場合

ファイル名：math.mjs（モジュールを定義するファイル）

// math.mjs
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

export function add(a, b) {
return a + b;
}
exportを使用し関数をエクスポートします。

app.mjs（モジュールを使用するファイル）

// app.mjs
import { add, subtract } from './math.mjs';

console.log(add(2, 3));       // 5
console.log(subtract(5, 2));  // 3

import { add, subtract } from './math.mjs';
importを使用し関数をインポートします。

ES ModuleとCommonJSの棲み分けの理解

■ JavaScript（特にブラウザ環境）:
ES Modulesが標準モジュールシステムです。importとexportを使用します。
■ Node.js:
CommonJSがデフォルトのモジュールシステムですが、ES Modulesもサポートされています。
ES Modulesを使用するためには、.mjs拡張子を使うか、package.jsonで"type": "module"を設定します。

JavaScriptでES Moduleを使用する場合

JavaScriptでもES Modulesが標準化されており、importとexportを使用してモジュールを定義および使用します。

ファイル名：utils.js（モジュールを定義するファイル）

// utils.js
export function formatDate(date) {
    return date.toISOString().split('T')[0];
}

export function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

ファイル名：main.js（モジュールを使用するファイル）

// main.js
import { formatDate, capitalize } from './utils.js';

const today = new Date();
console.log(formatDate(today));  // "2024-06-18"
console.log(capitalize('hello'));  // "Hello"

HTMLでの使用

<head>
    <meta charset="UTF-8">
    <title>Module Example</title>
    <script type="module" src="main.js"></script>
</head>

<script type="module" src="main.js"></script>
ヘッダー部分に「type="module"」のコードを記載することで使えるようになります。

まとめ

モジュール化はコードの再利用性や保守性を向上させるための重要な手法です。Node.jsではCommonJSおよびES Modulesを使用し、フロントエンドではES Modulesを使用して、コードを小さなモジュールに分割します。これにより、開発者はより効率的にコードを管理し、他のプロジェクトやコードベースでも利用しやすくなります。

この記事が気に入ったらサポートをしてみませんか？