デフォルトエクスポートとは？初心者にも分かる使い方と違いを徹底解説共起語・同意語・対義語も併せて解説！

---

デフォルトエクスポートの基本

デフォルトエクスポートはモジュールの中からこのファイルの基本となる機能や値を外に出す仕組みです。1つだけのエクスポートを指定するのが特徴で、他のファイルから呼び出すときには名前を自由につけられます。日常の例えで言えば、教科書の本文のようにそのファイルの「核となる機能」を1つだけ外に出す役割と考えると分かりやすいです。

実際のコード例

例えばファイル A.js には次のように書きます。

export default function greet() {

console.log('こんにちは');

}

そして別のファイル B.js で使うときは、名前を自由に決めて呼ぶことができます。

import greet from './A';

greet();

別名で呼ぶ例も紹介します。

import hello from './A';

hello();

デフォルトエクスポートと名前付きエクスポートの違い

デフォルトエクスポートはファイルにつき1つだけです。これに対して名前付きエクスポートは複数作ることができます。使い分けの目安は次の表を見てください。

種類	特徴
デフォルトエクスポート	1つだけのエクスポート、import時に自由な名前を付けられる
名前付きエクスポート	複数の値を個別にエクスポート、import時には元の名前を使うか別名を付ける

名前付きの例を見てみましょう。

// ファイル A.js

export function add(x, y) {

return x + y;

}

export const PI = 3.14;

// ファイル B.js でのインポート

import { add, PI } from './A';

import { add as sum } from './A';

このように、デフォルトエクスポートは呼ぶ側で名前を変えられる点が特徴ですが、名前付きエクスポートは元の名前を使うか別名を付けて呼ぶ形になります。

実用上のポイントと注意点

デフォルトエクスポートを使うと、1ファイルにつき1つの“中心となる機能”を見つけやすくなります。クラスや機能、ライブラリのメインの機能をエクスポートするのに向いています。一方、複数の小さな機能をまとめて提供したいときは名前付きエクスポートを選ぶと分かりやすく、安全に使えます。

まとめと次のステップ

この記事を読んでデフォルトエクスポートの基本と、名前付きエクスポートとの違いが理解できたと思います。実際に自分でファイルを作ってimportとexportを試してみるのが一番の勉強法です。最初は簡単な関数や値から始め、徐々に複数の機能を扱えるように練習してみてください。

---

デフォルトエクスポートの同意語

デフォルトエクスポート

JavaScript のモジュール機能において、1 つのエクスポートを“デフォルト”として公開すること。import のときに名前を自由につけて受け取れるようにする export default を用いる。

既定エクスポート

デフォルトエクスポートの別称。意味は同じ。モジュールの“既定（デフォルト）”として公開されるエクスポートのこと。

既定のエクスポート

モジュールのエクスポートの中で“デフォルト”として扱われるものを指す表現。インポート時に特定の名前で受け取るかどうかに影響を与える仕組み。

export default

英語のキーワードそのもの。コード中でデフォルトエクスポートを指定する構文。

デフォルトとしてのエクスポート

エクスポートを“デフォルト”として行うことを表す言い回し。意味はデフォルトエクスポートと同じ。

デフォルト公開エクスポート

デフォルトとして公開（エクスポート）されることを指す、言い換え表現。実務ではあまり使われないこともあるが、説明時には見かけることがある。

---

デフォルトエクスポートの対義語・反対語

名前付きエクスポート

デフォルトエクスポートの対になる公開形式。モジュール内の値を個別名でエクスポートし、インポート時は import { Foo } from '...' のように名前を指定して参照します。例: export function Foo() {} や export { Foo, Bar };

エクスポートなし（未エクスポート）

モジュールから何も公開せず、外部のモジュールから参照できない状態。内部用途に限定する場合や、公開を後回しにしたい場合に使われます。

複数の名前付きエクスポート

名前付きエクスポートを複数定義して公開する設計。1つのモジュールから複数の識別子を個別名で取り出せるため、柔軟に使い分けできます。デフォルトエクスポートが1つだけを公開するのに対して、複数を同時に公開します。

ローカル/非公開のモジュール設計

モジュール内の値を外部へ公開せず、内部の実装に留める考え方。公開前提のデフォルトエクスポートとは反対の運用思想で、セキュリティやカプセル化を重視する場面で使われます。

---

デフォルトエクスポートの共起語

名前付きエクスポート

モジュール内で個別に名前を付けて公開する機能。import { something } from 'module' のように、特定の名前で値を取り出します。

エクスポート

モジュールから外部へ公開する機能の総称。デフォルトエクスポートと名前付きエクスポートを含みます。

export default

デフォルトエクスポートを宣言する構文。export default の後に関数・クラス・値などを置き、モジュールの“デフォルト”として公開します。

デフォルトインポート

別のモジュールにあるデフォルトエクスポートを受け取る import 文の形。例: import foo from './module';

ES6モジュール

ES6で導入されたモジュール機能。export と import を使って依存を明示的に管理します。

ES Modules

ES Modulesの略称・英語表記。現代JavaScriptの公式モジュール仕様です。

モジュール

コードを再利用可能な部品として分割する単位。エクスポートとインポートで結びます。

JavaScript

デフォルトエクスポートが使われる代表的なプログラミング言語。

JS

JavaScript の略称。記事内では短縮形として使われます。

ファイル名

デフォルトエクスポートは通常ファイル単位で公開され、ファイル名とエクスポート設計が関係することがあります。

コード例

実際の書き方のサンプル。例: export default function App() { } または export default App;

React

Reactのコンポーネントをデフォルトエクスポートとして公開するケースが多い文脈でよく登場します。

コンポーネント

UIの部品。デフォルトエクスポートとして提供されることが多い、特にReactで使われます。

関数

関数をデフォルトエクスポートとして公開するケースがあります。例: export default function sayHi() { }

クラス

クラスをデフォルトエクスポートとして公開するケースがあります。例: export default class User { }

インポート

他ファイルから値を取り込む行為。デフォルトエクスポートを受け取る際にも使われます。

名前付きインポート

名前付きエクスポートを import する形式。例: import { something } from 'module';

制限

モジュールごとにデフォルトエクスポートは1つだけ、という制約があります。

トランスパイラ

Babel などを使って新しい構文を古い環境に対応させる際、デフォルトエクスポートの表現も変換されます。

拡張子

モジュールファイルの拡張子。例: .js、.mjs、.ts など。

文法

デフォルトエクスポートの正しい書き方・ルールを理解するための要点です。

---

デフォルトエクスポートの関連用語

デフォルトエクスポート

モジュールから“主役”として公開される値。1つのモジュールにつき1つだけ定義でき、インポート時には任意の名前をつけて受け取ります。

名前付きエクスポート

モジュールが複数の値を個別の名前で公開する仕組み。受け取る側は import { 値名 } from './mod'; のように名前を指定して取り込みます。

デフォルトインポート

デフォルトエクスポートを取り込む方法。例: import X from './mod';

名前付きインポート

名前付きエクスポートを取り込む方法。例: import { A, B } from './mod';

エクスポート

モジュールから外部に値を公開する基本的な仕組み。デフォルトエクスポートと名前付きエクスポートの総称。

再エクスポート

別のモジュールからのエクスポートを再出力する機能。例: export { default } from './mod';

エイリアス

エクスポート名やインポート名に別名をつける機能。例: import { default as MyDefault } from './mod';

名前空間インポート

import * as Mod from './mod'; のように、モジュール全体を1つの名前空間オブジェクトとして取り込む方法。デフォルトエクスポートは Mod.default で使えます。

export default 構文

デフォルトエクスポートを宣言する構文。ファイル内で export default <値> と書くのが基本形です。

import 構文

モジュールから値を取り込む基本構文。デフォルトインポートと名前付きインポートの両方をサポートします。

ツリーシェイキング

未使用のエクスポートを削除してバンドルサイズを小さくする最適化。名前付きエクスポートの使い方が影響します。

1モジュール1デフォルトエクスポートの制約

原則として、1つのモジュールにつきデフォルトエクスポートは1つだけです。

モジュール設計の使い分け

モジュールが1つの主要な出力を提供する場合はデフォルトエクスポートを、複数の機能を公開する場合は名前付きエクスポートを使うと設計が分かりやすくなります。

---

デフォルトエクスポートのおすすめ参考サイト

• 【React】デフォルトエクスポートとは #JavaScript - Qiita

---