lvncerpedia

Import methods

import時の {} の有無は、相手（エクスポート側）の書き方で決まります。

{} なし

相手が export default している場合（1ファイル1機能に多い）

import Header from './Header';

const Header = () => { ... };
export default Header;

{} あり

相手が export している場合（1ファイルに複数機能ある場合に多い）

import { Header } from './components';

export const Header = () => { ... };

別れた背景

歴史的な背景と、設計思想（コードの書きやすさと安全性）の違いからこのように分かれています。

1. 思想の違い：主役と脇役

  • export default（{} なし）
  • 思想: 「このファイルの主役はこれ！」という設計です。
    • 理由: 1ファイル1機能のモジュール（コンポーネントなど）を、最も短いコードでシンプルに使えるようにするためです。
  • export（{} あり）
  • 思想: 「このファイルには便利な道具が色々あるよ」という設計です。
    • 理由: ユーティリティ関数集やアイコン集のように、必要なものだけを明示的に選んで取り出せるようにするためです。

2. 名前の自由度（柔軟性 vs 厳格性）

  • export default は「値」を渡す
  • 名前のないデータ（匿名関数やオブジェクト）もエクスポートできます。
    • そのため、インポート側が「君の名前は今日から Header ね」と自由に命名できます。
  • export は「変数名」を縛る
  • 名前付きエクスポートは、コードのタイポ（打ち間違い）を防ぐために厳格です。
    • {} を使うことで、エディタの自動補完（オートコンプリート）が効きやすくなり、大人数の開発でも名前がブレないメリットがあります。