ES Modules(namedとdefault)、再エクスポート
namedとdefaultのexport/importを理解し、再エクスポートで整理されたモジュール境界を構築します
「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フィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ES Modules(namedとdefault)、再エクスポート
- Ambient declarations(.d.ts)とサードパーティの型定義
- パスマッピングとモジュール解決