0Pricing
Frontend Academy · レッスン

ES モジュール：import・export・dynamic import

名前付きエクスポート、デフォルトエクスポート、名前空間インポートを使い、dynamic import() でコードを遅延読み込みしてパフォーマンスを高めます。

「ES モジュール：import・export・dynamic import」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

復習: ES Module の基本

ES Modulesでは、すべてのファイルが独自のスコープを持ちます。名前付きエクスポートでは特定の値を共有し、デフォルトエクスポートでは主要な値を共有します。バンドラーまたはブラウザーが、読み込み時にインポートを解決します。

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

Tree Shaking — 名前付きエクスポートが重要な理由

バンドラー（Rollup、esbuild、Vite）は、使用されていないエクスポートを削除します。{ formatDate } だけをインポートすると、バンドラーはそれ以外をバンドルから削除します。名前付きエクスポートはTree Shakingを可能にしますが、import * as utils はそれを妨げることがあります。

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

動的 import() — 遅延読み込み

動的な import() はPromiseを返します。モジュールはコードが実行されたときにだけ取得されます。バンドラーはこれらを自動的に別のチャンクに分割します。

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

エラーハンドリング付きの動的 import

動的インポートをtry/catchで囲み、ネットワーク障害や存在しないモジュールを適切に処理します。

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

import.meta には、現在のモジュールに関するメタデータが含まれます。主なプロパティは、import.meta.url（絶対URL）、import.meta.env（Viteの環境変数）、import.meta.resolve() です。

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

モジュールの実行 — 1回だけ

ES Modulesは、何度インポートされても1回だけ評価されます。同じモジュールをインポートするすべてのコードが、同じインスタンスを共有します。そのため、モジュールはシングルトン（ストアやイベントバス）に適しています。

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

循環依存

2つのモジュールが互いにインポートし合うことがあります。JavaScriptはこれを処理できますが、評価の順序によっては、最初に使用した時点で値が undefined になることがあります。ほとんどの場合、循環を避けるように構成を変更してください。

TypeScriptの型のみのインポート

import type { ... } を使うと、型だけをインポートできます。これらはコンパイル時に消去されるため、出力バンドルには現れません。型だけの参照が原因となる循環依存を避けるために使用します。

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

再エクスポートとバレルファイル

バレルファイルは複数のモジュールから再エクスポートし、便利な単一のインポートポイントを作成します。ただし、大規模なアプリではバレルファイルに注意してください。Tree Shakingの妨げになることがあります。

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

// Consumer:
import { Button, Input } from '@/components';

ブラウザーでの script type=module

scriptタグに type="module" を追加すると、バンドラーなしでブラウザー上で直接ESモジュール構文を使えます。モジュールはデフォルトで遅延実行され、独自のスコープを持ちます。

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

CommonJSとESMの相互運用

Node.jsは両方をサポートしています。ESMファイルでは .mjs を使うか、package.jsonで "type": "module" を設定します。ESMからCommonJSパッケージを使用する場合、デフォルトエクスポートは module.exports の値になります。バンドラーがこの違いを透過的に処理します。

クイックチェック

単一のデフォルトエクスポートオブジェクトよりも名前付きエクスポートを使うことで得られる、主なパフォーマンス上の利点は何ですか。

まとめ: ES Modules 詳細

モジュールは1回だけ実行され、すべてのインポート元が同じインスタンスを共有します。Tree Shakingにより、使用されていない名前付きエクスポートが削除されます。動的な import() により、遅延読み込みとコード分割が可能になります。import.meta からモジュールのコンテキストを取得できます。バレルファイルは便利ですが、Tree Shakingの妨げになることがあります。TypeScriptの型のみのインポートは出力を生成しません。

よくある質問

「ES モジュール：import・export・dynamic import」レッスンは無料ですか？

はい。「ES モジュール：import・export・dynamic import」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「ES モジュール：import・export・dynamic import」で何を学びますか？

名前付きエクスポート、デフォルトエクスポート、名前空間インポートを使い、dynamic import() でコードを遅延読み込みしてパフォーマンスを高めます。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「ES モジュール：import・export・dynamic import」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ES モジュール：import・export・dynamic import
  2. npm と package.json：dependencies・scripts
  3. Vite：開発サーバーとビルド
  4. バンドルの概念：tree shaking・コード分割
← Frontend Academyに戻る