今回は、JavaScriptのモジュールについて学びます。モジュールを使うことで、コードを整理しやすくなり、再利用可能な部品に分割することができます。

モジュールとは？

モジュールとは、機能ごとにコードを分割して管理する方法です。大きなプロジェクトになると、すべてのコードを1つのファイルに書くのは大変ですし、管理も難しくなります。モジュールを使えば、コードを複数のファイルに分けて管理できます。

モジュールの基本的な使い方

JavaScriptでは、ES6からimportとexportを使ってモジュールを管理できます。まず、exportを使ってモジュールを定義します。

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

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

次に、importを使って他のファイルからモジュールを読み込みます。

// main.js
import { add, subtract } from './utils.js';

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

これで、utils.jsに定義した関数をmain.jsで使うことができます。

デフォルトエクスポート

モジュールにはデフォルトエクスポートという方法もあります。デフォルトエクスポートを使うと、1つのモジュールから1つの値や関数をエクスポートできます。

// math.js
export default function multiply(a, b) {
  return a * b;
}

デフォルトエクスポートされたモジュールをインポートするには、名前を自由に決めることができます。

// main.js
import multiply from './math.js';

console.log(multiply(3, 4));  // 12

まとめ

JavaScriptのモジュールを使うことで、コードを整理しやすくなり、再利用可能な部品に分割することができます。importとexportを使って、簡単にモジュールを定義し、他のファイルから利用することができます。