モジュールシステム

// モジュールシステムが無い時代のパターン

// 問題: グローバルスコープの汚染
// <script src="lib-a.js"></script> → var utils = { ... };
// <script src="lib-b.js"></script> → var utils = { ... }; // 衝突！

// 回避策1: 名前空間パターン
var MyApp = MyApp || {};
MyApp.utils = {
  formatDate: function(date) {
    return date.toLocaleDateString("ja-JP");
  }
};

// 回避策2: IIFE + グローバル変数
var MyModule = (function() {
  var privateVar = "秘密";
  return {
    getSecret: function() { return privateVar; }
  };
})();

console.log(MyApp.utils.formatDate(new Date()));
console.log(MyModule.getSecret()); // "秘密"

// math.js — モジュールのエクスポート
function add(a, b) {
  return a + b;
}

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

module.exports = { add, subtract };

// app.js — モジュールのインポート
const { add, subtract } = require("./math");
console.log(add(10, 5));      // 15
console.log(subtract(10, 5)); // 5

// デフォルトエクスポート的な使い方
// logger.js
class Logger {
  log(msg) { console.log(`[LOG] ${msg}`); }
}
module.exports = Logger;

// app.js
const Logger = require("./logger");
const logger = new Logger();
logger.log("起動しました");

// utils.js — 名前付きエクスポート
export const PI = 3.14159;

export function circleArea(r) {
  return PI * r * r;
}

export function circlePerimeter(r) {
  return 2 * PI * r;
}

// Logger.js — デフォルトエクスポート
export default class Logger {
  log(msg) {
    console.log(`[${new Date().toISOString()}] ${msg}`);
  }
}

// app.js — インポート
import Logger from "./Logger.js";           // デフォルト
import { circleArea, PI } from "./utils.js"; // 名前付き
import * as utils from "./utils.js";         // 名前空間

const logger = new Logger();
logger.log(`面積: ${circleArea(5)}`);
logger.log(`PI = ${utils.PI}`);

// 動的インポートの例
async function loadChart() {
  // ユーザーがグラフ表示ボタンを押した時だけ読み込む
  const { Chart } = await import("./chart-library.js");
  const chart = new Chart("#canvas");
  chart.render();
}

// 条件付きインポート
async function loadLocale(lang) {
  const locale = await import(`./locales/${lang}.js`);
  return locale.default;
}

// 複数モジュールの並列読み込み
async function loadPlugins() {
  const [auth, analytics] = await Promise.all([
    import("./plugins/auth.js"),
    import("./plugins/analytics.js")
  ]);
  auth.init();
  analytics.track("page_view");
}

// バレルファイルのパターン

// utils/string.js
// export function capitalize(str) { ... }
// export function truncate(str, len) { ... }

// utils/array.js
// export function unique(arr) { ... }
// export function flatten(arr) { ... }

// utils/index.js（バレルファイル）
// export { capitalize, truncate } from "./string.js";
// export { unique, flatten } from "./array.js";

// 使う側: ディレクトリ名だけでインポート
// import { capitalize, unique } from "./utils";

// ブラウザ環境での模倣
const utils = {
  capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
  },
  truncate(str, len) {
    return str.length > len ? str.slice(0, len) + "..." : str;
  },
  unique(arr) {
    return [...new Set(arr)];
  }
};

console.log(utils.capitalize("hello")); // "Hello"
console.log(utils.unique([1, 2, 2, 3])); // [1, 2, 3]