export constとexport defaultの違い
export const と export default は、JavaScript（特にES6以降のバージョン）でモジュールをエクスポートするための2つの異なる方法です。
これらの違いを理解するためには、各エクスポート方法の特徴と使用ケースを知ることが必要です。
export const
1. 複数エクスポート可能
- export constを使用すると、1つのファイルから複数のエクスポートを行うことができます。
- 各エクスポートされた項目は個別に名前を持ちます。
2. 名前付きエクスポート
- export constを使用すると、エクスポートされた項目は名前付きエクスポートとなります。
インポートする際には、エクスポートされた名前を使用する必要があります。
3. 使用方法
// module.js export const foo = 'foo'; export const bar = 'bar'; // import import { foo, bar } from './module.js';
export default
1. 1ファイルにつき1つのデフォルトエクスポート
- export defaultを使用すると、1つのファイルに対して1つのデフォルトエクスポートしかできません。
2. 名前の指定不要
- デフォルトエクスポートをインポートする際には、インポート側で任意の名前を指定することができます。
エクスポート側の名前は関係ありません。
3. 使用方法
// module.js const foo = 'foo'; export default foo; // import import myFoo from './module.js'; // 任意の名前でインポート可能
組み合わせて使用することも可能
同じモジュールでexport constとexport defaultを組み合わせて使用することもできます。
// module.js export const foo = 'foo'; const bar = 'bar'; export default bar; // import import bar from './module.js'; import { foo } from './module.js';
まとめ
- export const は複数の名前付きエクスポートを可能にし、それぞれの項目をインポートする際に名前を指定する必要があります。
- export default は1ファイルにつき1つのデフォルトエクスポートを提供し、インポートする際に任意の名前を指定できます。
この違いを理解して、必要に応じて適切なエクスポート方法を選ぶことが重要で、チームで開発する際には両者がバラバラにならないようにルールを制定しておくことが必要です。
