実践：モジュール設計
実践：モジュール設計 とは
複数のモジュールに分割されたコードを正しく組み立てよう。本レッスンでは、実践：モジュール設計 の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
実践：モジュール設計
複数のモジュールの依存関係を整理し、プロジェクト構造を分析する力を身につけましょう。
エントリーポイントとリーフモジュール
- エントリーポイント ── 他のモジュールからimportされない（ツリーの起点、例として main.js）
- リーフモジュール ── 自身が他のモジュールをimportしない（依存がない末端）
バレルファイル（index.js）
JavaScript
// utils/index.js - 複数モジュールの再エクスポート
export { add, subtract } from './math.js';
export { formatDate } from './date.js';この問題では、モジュール定義のリストから依存関係グラフを構築し、構造を分析する関数を実装しましょう。
よくある質問
Q. 実務ではどんな場面でこの知識を使いますか？
A. API クライアントの実装、フロントエンドのフレームワーク内ロジック、Node.js のサーバーサイドなど幅広く登場します。React/Vue などのフレームワークもこの基礎の上に成り立っているため、ここで身につけた知識は資産になります。
Q. コードレビューで指摘されやすいポイントは？
A. var の使用、== の使用、無駄なネストの深さ、命名の曖昧さなどが頻出指摘です。Linter（ESLint）と Prettier を導入すれば機械的に防げる指摘が多いため、まずはツールで自動化するのが効率的です。
Q. 次に学ぶべき内容は何ですか？
A. Promise・async/await が理解できたら、fetch を使った API 連携、Web フレームワーク（React/Vue/SvelteKit）、ビルドツール（Vite/Webpack）に進むのがおすすめです。実プロジェクトでアウトプットしながら学ぶと定着が早まります。
次のレッスン
次は 同期と非同期 で、時間のかかる処理を待たずに進める非同期処理の考え方を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 実践：モジュール設計 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 実践：モジュール設計 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
入出力例
test-cases.txt
buildModuleGraph([{"exports":["app"],"imports":[],"name":"main"},{"exports":["add","subtract"],"imports":[],"name":"utils"},{"exports":["fetchData"],"imports":["utils"],"name":"api"}]) → {"entryPoints":["main","utils"],"graph":{"api":{"exports":["fetchData"],"imports":["utils"],"isEntry":false},"main":{"exports":["app"],"imports":[],"isEntry":true},"utils":{"exports":["add","subtract"],"imports":[],"isEntry":true}},"leafModules":["main","api"],"totalModules":3}
buildModuleGraph([{"exports":["func"],"imports":[],"name":"standalone"}]) → {"entryPoints":["standalone"],"graph":{"standalone":{"exports":["func"],"imports":[],"isEntry":true}},"leafModules":["standalone"],"totalModules":1}