概要

小さな関数を分割する。
それぞれの責任を明確に保つ。
複数人で開発しても破綻しないコードを築く。

それを支えるのが、モジュールという設計単位である。
JavaScriptの import / export 構文は、単なる構文の話ではない。責任の明文化と依存の制御という、設計思想そのものである。

本記事では、モジュールの基本構文から、ユースケースに応じた分割設計・責務管理・依存構造の制御まで、構造的に解説する。

対象環境

モダンJavaScript（ES Modules）対応環境（ES6〜）  
Node.js（ESMフラグあり） / Vite / Webpack / Babel など

// utils.js
export function add(a, b) {
  return a + b;
}
export const VERSION = '1.0.0';

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

// logger.js
export default function log(msg) {
  console.log(`[LOG] ${msg}`);
}

// main.js
import log from './logger.js';

import * as utils from './utils.js';
utils.add(1, 2);

/src
  /utils
    - string.js
    - math.js

// string.js
export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

/src
  /services
    - userService.js
  /repositories
    - userRepository.js

→ 役割の意味単位で分ける

/components
  - UserCard.vue
/hooks
  - useUser.js
/store
  - userStore.js

// /utils/index.js
export * from './string.js';
export * from './math.js';

import { capitalize } from './utils'; // ← ルート経由でアクセス

→ import文の見通しが良くなり、リファクタリングにも強くなる

// user.js に UI, fetch, ロジック全部書いてしまう

→ ✅ 役割ごとに明確に分ける：UserCard.vue, userService.js, userSchema.js 等

// utils.js
export default {
  add, subtract, divide
};

→ ✅ 名前付き export にして静的解析・Tree Shaking に強くする

モジュールとは「処理のまとまり」ではなく、「責務のまとまり」である。
そして import / export はその責務を他にどう明示するか、どう制限するかのインターフェースである。

設計とは、コードをどう“切るか”ではなく、どう“持たせないか”だ。
分けることで自由になり、自由の上に構造が生まれる。

JavaScriptモジュールは、書き方ではなく、語り口そのものである。