TypeScript Academy · レッスン

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

indexファイルを作成してimportパスを簡潔にします。

レッスン 2/413 ステップ

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

ようこそ

バレルファイル(index.ts)はモジュールの内容を集約して再エクスポートし、ディレクトリのシンプルな公開APIを作成します。これにより、利用側はよりすっきりしたインポートパスを使えます。

バレルファイルとは

バレルとは、同じディレクトリにあるすべての内容を再エクスポートするindex.tsです。利用側は個々のファイルではなく、ディレクトリからインポートします。
// src/models/index.ts (barrel)
export { User } from './user';
export { Product } from './product';
export { Order } from './order';

バレルの利用

個々のファイルではなくバレルからインポートすると、パスをすっきりさせられます。
// Before barrel:
import { User } from '../models/user';
import { Product } from '../models/product';

// After barrel:
import { User, Product } from '../models';

export *によるワイルドカード再エクスポート

`export *`を使用して、モジュールの名前付きエクスポートをすべて再エクスポートします。
// index.ts
export * from './utils';
export * from './helpers';
export * from './validators';

再エクスポート時の名前変更

再エクスポートするときに、エクスポート名を変更できます。
export { default as MyButton } from './Button';
export { Button as Btn } from './Button';

型のみの再エクスポート

実行時への影響なしに型を再エクスポートします。
export type { User, UserRole } from './user.types';

機能モジュールのバレルファイル

大規模なアプリケーションの機能フォルダーには、公開範囲だけを公開するバレルファイルを置くことがよくあります。
// features/auth/index.ts
export { AuthProvider } from './AuthProvider';
export { useAuth } from './useAuth';
export type { AuthUser } from './types';

循環依存のリスク

同じバレル内のファイルがindexを経由して間接的に互いをインポートすると、バレルファイルによって循環依存が発生することがあります。この点に注意してください。

ツリーシェイキングとバレル

最新のバンドラー(Webpack、Rollup、Vite)はバレルの再エクスポートをツリーシェイクします。実際に使用されるエクスポートだけがバンドルに含まれます。

深いバレルと浅いバレル

バレルを入れ子にします。各サブディレクトリに独自のindex.tsを置き、親のバレルからサブディレクトリのバレルを再エクスポートします。
// src/index.ts
export * from './models';
export * from './services';
export * from './utils';

バレルファイルとTypeScriptのパフォーマンス

深く入れ子になったバレルファイルは、TypeScriptのコンパイルを遅くすることがあります。大規模なプロジェクトでは、構造を平坦化するか、代わりにpathsエイリアスを使用することを検討してください。

確認問題

バレルファイル(index.ts)を使用する主なメリットは何ですか?

まとめ

バレルファイル(index.ts)はディレクトリから再エクスポートし、整理されたインポートパスを作成します。一括再エクスポートには`export *`を、型だけには`export type`を使用し、大規模なプロジェクトでは循環依存のリスクに注意してください。
無料で開始

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

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

コース
101
レッスン
352

よくある質問

「再エクスポートとBarrelファイル」レッスンは無料ですか?

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

「再エクスポートとBarrelファイル」で何を学びますか?

indexファイルを作成してimportパスを簡潔にします。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「再エクスポートとBarrelファイル」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. ES Module構文:importとexport
  2. 再エクスポートとBarrelファイル
  3. 型専用のImportとExport
  4. NamespaceとModule:現代的な使い方
← TypeScript Academyに戻る