TypeScript Academy · レッスン

ES Modules(namedとdefault)、再エクスポート

namedとdefaultのexport/importを理解し、再エクスポートで整理されたモジュール境界を構築します

レッスン 1/38 ステップ

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

導入

目標:ES Modulesを自信を持って使えるようにします。名前付きシンボルとデフォルトシンボルをエクスポート・インポートし、再エクスポートで整理された公開APIを構成します。

名前付きエクスポート/インポート

名前付きエクスポートでは、宣言の前にexportを置き、波括弧でインポートします: import { name }。

// file: math.ts
export function add(a: number, b: number): number { return a + b }
export const PI = 3.14159

// file: app.ts
import { add, PI } from "./math"
console.log(add(2, 3), PI) // 5 3.14159

デフォルトエクスポート/インポート

デフォルトエクスポートはモジュールの主要な値です。波括弧を付けずにインポートします: import Foo from "./mod"。

// file: greet.ts
export default function greet(name: string) { console.log(`Hello, ${name}`) }

// file: app.ts
import greet from "./greet"
greet("Ada")

デフォルトと名前付きの併用

モジュールでは、1つのデフォルトエクスポートと複数の名前付きエクスポートを組み合わせ、両方をまとめてインポートできます。

// file: color.ts
export default "black"
export const palette = [ "red", "green", "blue" ]

// file: app.ts
import baseColor, { palette } from "./color"
console.log(baseColor, palette.length)

再エクスポート(バレル)

再エクスポート(export { x } from/export * from)によってバレルを作成できるため、利用側は単一のエントリーポイントからインポートできます。

// file: math/add.ts
export const add = (a: number, b: number) => a + b

// file: math/index.ts (barrel)
export { add } from "./add"
export * from "./more"

// file: app.ts
import { add } from "./math"
console.log(add(1, 2))

ヒントと注意点

ヒント:

  • 名前付きエクスポートは、見つけやすく名前変更も一貫して行えるため、優先して使います。
  • モジュールに「メイン」となるものが1つだけある場合は、デフォルトエクスポートを使います。
  • パッケージの境界にバレルを作り、循環インポートは避けます。

デフォルトインポートの確認

簡単な確認: デフォルトエクスポートに対応するインポートはどれでしょうか?

まとめ

まとめ: 複数のエクスポートには名前付きを、単一の主要な値にはデフォルトを使い、すっきりしたエントリーポイントを提供するには再エクスポートを使います。

無料で開始

AI チューターと学ぶ TypeScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
101
レッスン
352

よくある質問

「ES Modules(namedとdefault)、再エクスポート」レッスンは無料ですか?

はい。「ES Modules(namedとdefault)、再エクスポート」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「ES Modules(namedとdefault)、再エクスポート」で何を学びますか?

namedとdefaultのexport/importを理解し、再エクスポートで整理されたモジュール境界を構築します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか?

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

「ES Modules(namedとdefault)、再エクスポート」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. ES Modules(namedとdefault)、再エクスポート
  2. Ambient declarations(.d.ts)とサードパーティの型定義
  3. パスマッピングとモジュール解決
← TypeScript Academyに戻る