前置き

Javascript、Typescriptを書いているとよくモジュールという言葉を耳にしますが、これについて整理したのでそのアウトプットです。

モジュールとは

厳密には以下の役割を果たすコードのまとまりになります。

1. コードの分割と管理:
   • 大きなプログラムを小さな部品（ファイル）に分けて管理しやすくする。
   • 例えば、api.js はapi用の関数だけを提供し、ui.js はユーザーインターフェース関連のコードを管理するみたいな
2. 再利用可能性:
   • モジュール化したコードは他のプロジェクトや部分でも使い回せる。
   • 例えば、utils.js というモジュールに共通処理をまとめておくとか
3. 名前空間の分離:
   • モジュールを使うことで、異なるファイル間の変数や関数が競合しないようにできる。
   • 例えば、ファイルAにaddという関数があっても、ファイルBのaddとは衝突しない。

概念的に見ると何言ってんだという感じかと思いますが、要はインポート、エクスポートされているファイルのことをモジュールっていうんだという理解で問題ないと思います。

ちなみにインポートもエクスポートもしていないファイルのことをスクリプトっていうそうです。

実例

// エクスポート (関数や変数をモジュールとして外部に公開)
export function add(a, b) {
    return a + b;
}

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

上記の機能を下記ファイルで使用します。

// インポート (モジュールを使う)
import { add, subtract } from './mathUtils.js';

const result1 = add(10, 5);
const result2 = subtract(10, 5);

console.log(`Add: ${result1}, Subtract: ${result2}`);

このように書いた時、calculation.tsはモジュールということになります。

1ファイル＝1モジュールですが、1モジュールから複数エクスポートも可能な点は押さえておきたいですね。

まとめ

文系でRails出身なので雰囲気で掴んでいましたが、この辺のワードを押さえておくと記事が理解しやすくなったり、学習速度が上がると思うのでその辺の基礎力あげていきたい、、