第 1 回目の技術記事を書かせていただきます、e-dash 株式会社でフロントエンドを担当している tom です。BtoB の SaaS プロダクトを開発しています。
モジュールのエクスポートについて、プロジェクトによってさまざまではありますが、弊社のプロダクトでは名前付きexport(named export)で統一しています。普段何気なく export を使っているとは思いますが、種類と利点などを一度まとめたいと思いました。
1. export の種類
JavaScript ではモジュールから機能をエクスポートするために2つの主要な方法があります。
デフォルトエクスポート(default export) と名前付きエクスポート(named export) です。
2. それぞれの特徴
デフォルトエクスポート
- 一つのモジュールから一つの値をエクスポートします。
- インポートする際には、任意の名前をつけることができます。
- シンプルな単一値のエクスポートに適しています。
const Button = () => {
return <Button>ボタン</Button>;
};
export default Button;
名前付きエクスポート
- 複数の値を同じモジュールからエクスポートできます。
- エクスポートする際には、それぞれ固有の名前が必要です。
- インポートする際には、その固有の名前を使用します。
export function Button() {
return <Button>ボタン</Button>;
}
3. なぜ名前付きエクスポートを推すのか
弊社では名前付きエクスポートに統一しています。
名前付きエクスポートを利用するメリットは様々あるとは思いますが、私が考える大きなメリットは以下の３つです。
- 明確性と予測可能性が高い： エクスポートされる各機能には固有の名前があるかと思いますので、何がエクスポートされているかが明確になります。これにより可読性やメンテナンス性が向上するというメリットがあると考えます。
- 機能の再利用性とモジュールの組織化に寄与してくれる： 複数の機能や変数を１つのモジュールからエクスポートできるため、関連機能をグループ化しやすくする役割があると考えています。これにより、プロジェクト全体での再利用性が向上するという利点があります。
- リファクタリングのしやすさ： 名前付きエクスポートを使用すると、モジュール内の変更が他のファイルに与える影響を最小限に抑えられます。特定の機能のみをインポートしているため、影響範囲が少なくなると考えます。
4. 結論
名前付きエクスポート(named export) は、モジュールをより個別に管理しやすくするメリットがあります。また、import 時にも export と同一名になり、モジュールの役割が明確になります。
プロジェクトスケールが大きくなることが考えられる場合や、複数機能を提供するモジュールは、名前付きエクスポートの方が適しています。
デフォルトエクスポートを選択した場合、import 時に、任意の命名で読み込むことができるため、必ずしも機能名と一致せず、どのファイルからどの機能を import しているのか分かりにくくなるデメリットがあります。
この点を考慮すると、何か特定な理由がない限りは名前付きexportを選択すると間違いないのではないかと思います。
5. 参考
採用情報
e-dash エンジニアチームは現在一緒にはたらく仲間を募集中です！
同じ夢について語り合える仲間と一緒に、環境問題を解決するプロダクトを作りませんか？
Discussion