slide

description

Transcript

1. JavaScript の歴史とモジュール体系まとめ ES5/ES6・CommonJS・ESM・NodeNext 1
2. きっかけ CJSのリポジトリをESMに移行するチケットの対応をしました // package.json { "type": "module" } // tsconfig.json "compilerOptions": { "module": "NodeNext", "moduleResolution": "NodeNext", "esModuleInterop": true } //serverless.ts { target: "node18", bundle: true, format: "esm", } // jest.config.cjs { preset: "ts-jest/presets/default-esm", transform: { "^.+\\.tsx?$": ["ts-jest", { useESM: true }], }, } 2
3. きっかけ 何がなんだか分からなかったので調べたことをまとめました 少しお付き合いください 3
4. アジェンダ 1. ECMAScript とは？ 2. ESModule とは？ 3. CommonJS とは？ 4. ESM 移行のメリット・ポイント 5. Node.js における CJS / ESM 6. TypeScript における CJS / ESM 7. まとめ 4
5. ECMAScript とは？ JavaScript の標準仕様 Netscape が JS をブラウザに搭載した。その後、MicroSoft が JScript とかいう のを Internet Explorer に搭載。仕様がメチャクチャで困るので、外部機関の ECMA に提案して作ってもらった 略称 正式名 年 ES1 ECMAScript 1 1997 ES5 ECMAScript 5 2009 ES6 ECMAScript 2015 2015 ここで ESModule が導入される ES14 ECMAScrupt 2023 2023 最新 5
6. ES Modules (ESM) とは？ ES2015 で入った 言語標準のモジュールシステム 以前 のモジュール ES Modules (ESM) <!-- index.html --> <script src="a.js"></script> <script src="b.js"></script> <script> foo(); </script> // foo.mjs export const foo = 1; export default function bar() {} // main.mjs import bar, { foo } from "./foo.mjs"; グローバルスコープ汚染 順序依存 ファイルごとにスコープが分離 依存関係を明示的に宣言 6
7. CommonJS (CJS) とは？ モジュールの公式実装が遅すぎる… ESM 登場前から Node.js で使われてきたモジュールシステム そのままではブラウザで動かない（バンドラ必須） // foo.cjs const fs = require("fs"); module.exports = { read(path) { return fs.readFileSync(path, "utf8"); }, }; 7
8. ESM 移行 のメリット 近年では ESM 移行が進んでいる 言語標準のモジュールシステム 静的解析が可能 ツールによる最適化がしやすい 例: Tree Shaking ブラウザと共通のモジュールシステム フロントエンド / バックエンドで同じ構文が使える 将来的な互換性 新しい言語機能や最適化は ESM を前提にしていることが多い 8
9. ESM 移行 のポイント 現在 CJS / ESM 両対応の過渡期 package.json に "type": "module" を指定 → .js は ESM として扱われる "type": "commonjs" または未指定 → .js は CJS として扱われる 拡張子の使い分け .mjs → 常に ESM .cjs → 常に CJS → 同一プロジェクト内で CJS / ESM が混在可能 9
10. ESM 移行のポイント package.json の "type" 設定 拡張子の見直し ( .js / .mjs / .cjs ) モジュール系構文の置き換え import / export 構文に書き換え require() / module.exports の置換 __dirname / __filename の置き換え import.meta.url + url モジュール 使用しているパッケージの対応確認 ビルド / テスト / デプロイ設定の更新 10
11. TypeScript における CJS / ESM コンパイル前提の言語なので、設定で柔軟に対応可能 tsconfig.json の module オプション 出力されるモジュール形式を指定 例: CommonJS , ESNext , NodeNext , など moduleResolution オプション モジュール解決方法を指定 例: Node , NodeNext , など 11
12. TypeScript における CJS / ESM NodeNext, ESNext とは？ ESNext ECMAScript の次期バージョンの機能を指すことが多い TypeScript の tsconfig.json の target や lib オプションで使われる NodeNext TypeScript の tsconfig.json の module や moduleResolution オプショ ンで使われる 12
13. まとめ ES5 / ES6 / ESNext → 言語機能の世代 (構文・API) CommonJS / ESM → モジュールシステム (ファイル間の依存の張り方) Node.js の現状 CJS 文化を引きずりつつ、ESM への移行期 .cjs / .mjs / "type" / exports を組み合わせて運用 実務では 新規は ESM 基本 + NodeNext が選択肢 既存 CJS と混在する場合は 「ESM → CJS は簡単、CJS → ESM は import() が必要」 を押さえておくとハマりにくい 13
14. (おまけ) デュアルパッケージと exports フィールド 1 つの npm パッケージで CJS / ESM の両方を提供する例： { "name": "my-lib", "exports": { ".": { "import": "./dist/index.mjs", // ESM 用 "require": "./dist/index.cjs" // CJS 用 } } } ESM ( import ) → index.mjs CJS ( require ) → index.cjs → 利用側は「普通に import / require するだけ」でよい 14
15. (おまけ) Node バージョン指定の選択肢 target オプションで指定可能 例: node18 , node20 , es2020 nodeXX を指定すると、その Node バージョンでサポートされている最新の ECMAScript 機能が有効になる 例: node18 を指定すると、ES2021 相当の機能が有効になる lambda や serverless 環境で Node バージョンを指定したほうが安全な場合に有 効 15