YASD-TECH
YASD TECH
# TypeScript

Javascript、Typescriptでのモジュールとは

投稿日:2024/11/23

更新日:2024/11/23

ttitleImage

前置き

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

モジュールとは

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

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

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

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

実例

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

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

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

main.ts
// インポート (モジュールを使う)
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出身なので雰囲気で掴んでいましたが、この辺のワードを押さえておくと記事が理解しやすくなったり、学習速度が上がると思うのでその辺の基礎力あげていきたい、、

Index

  • 前置き
  • モジュールとは
  • 実例
  • まとめ