JavaScriptのexport defaultを5分で完全理解！初心者が絶対に知っておくべき3つのポイント

こんにちは、とまだです。

JavaScriptでモジュールを作っていて、「export defaultとは？」「exportとどう違うの？」と混乱したことはありませんか？

実は私も最初、この違いがさっぱり分からず、エラーメッセージとにらめっこする日々でした。プログラミングスクールで教えていた時も、受講生の多くがここでつまずいていたんです。

でも安心してください。今回は、export defaultを「レストランのおすすめメニュー」に例えながら、誰でも理解できるように解説していきます。

export defaultとは？レストランのおすすめメニューで理解する

JavaScriptのexport defaultって、難しそうに聞こえますよね。

でも実は、 レストランの「本日のおすすめ」 と同じような仕組みなんです。

レストランを想像してみてください。

• メニューにはたくさんの料理があります
• でも「本日のおすすめ」は1つだけ
• お客さんは「おすすめください」と言えば、すぐに注文できます

JavaScriptのモジュールも同じです。

// restaurant.js（レストランのメニュー）

// 通常のメニュー（named export）
export const pasta = "カルボナーラ";
export const pizza = "マルゲリータ";
export const salad = "シーザーサラダ";

// 本日のおすすめ（default export）
const todaysSpecial = "特製ハンバーグ";
export default todaysSpecial;

ここで、todaysSpecialが「本日のおすすめ」にあたります。1つのファイルにdefault exportは1つだけしか設定できません。

なぜexport defaultが必要なのか

「普通のexportだけじゃダメなの？」

そう思うかもしれません。

でも、export defaultがあることで、コードがとてもシンプルになるんです。

export defaultを使わない場合：

// math.js
export function calculate(a, b) {
  return a + b;
}

// main.js（使う側）
import { calculate } from './math.js';  // {}が必要

export defaultを使う場合：

// math.js
function calculate(a, b) {
  return a + b;
}
export default calculate;

// main.js（使う側）
import calculate from './math.js';  // {}が不要でスッキリ！

特に、1つの主要な機能だけを提供するモジュールでは、export defaultを使うことで、import文がシンプルになります。

export defaultの基本的な使い方

それでは、実際の使い方を見ていきましょう。

関数をexport defaultする

最もよく使うパターンです。

// greet.js
function greet(name) {
  return `こんにちは、${name}さん！`;
}

export default greet;

または、直接export defaultと一緒に定義することもできます。

// greet.js
export default function greet(name) {
  return `こんにちは、${name}さん！`;
}

使う側はこうなります。

// main.js
import greet from './greet.js';

console.log(greet("とまだ"));  // "こんにちは、とまださん！"

クラスをexport defaultする

Reactコンポーネントなどでよく使われるパターンです。

// User.js
export default class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `私は${this.name}、${this.age}歳です`;
  }
}

// main.js
import User from './User.js';

const user = new User("花子", 25);
console.log(user.introduce());  // "私は花子、25歳です"

オブジェクトをexport defaultする

設定値などをまとめて出力する時に便利です。

// config.js
const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  retryCount: 3
};

export default config;

// main.js
import config from './config.js';

console.log(config.apiUrl);  // "https://api.example.com"

named exportとdefault exportの違いと使い分け

ここが一番混乱しやすいポイントです。

でも、お弁当屋さんを思い浮かべると分かりやすくなります。

named export = 単品メニュー

// bento.js
export const karaage = "唐揚げ";
export const tempura = "天ぷら";
export const sushi = "寿司";

// 注文する時（import）
import { karaage, tempura } from './bento.js';

単品メニューは、名前を指定して注文する必要があります。

default export = 日替わり弁当

// bento.js
const higawariBento = {
  main: "焼き魚",
  side: "煮物",
  rice: "ごはん"
};

export default higawariBento;

// 注文する時（import）
import bento from './bento.js';  // 名前は自由につけられる

日替わり弁当は、「日替わりください」と言えばOK。名前も自由につけられます。

使い分けのポイント

default exportを使うべき場合：

• モジュールの主要な機能が1つの時
• Reactコンポーネントなど、1ファイル1機能の時
• 使う側にシンプルなインターフェースを提供したい時

named exportを使うべき場合：

• 複数の関数や定数を提供する時
• ユーティリティ関数の集まり
• 定数のコレクション

よくあるエラーと解決方法

エラー1：importの書き方を間違える

// ❌ よくある間違い
import { myFunction } from './module.js';  // default exportなのに{}を使っている

// ✅ 正しい書き方
import myFunction from './module.js';

覚え方のコツ：

• default export = {}なし（おすすめは1つだから）
• named export = {}あり（メニューから選ぶから）

エラー2：複数のdefault exportを書く

// ❌ エラーになる
export default function func1() {}
export default function func2() {}  // 2つ目のdefault exportはエラー！

// ✅ 正しい書き方
export default function func1() {}
export function func2() {}  // 2つ目はnamed export

レストランの「本日のおすすめ」が2つあったら混乱しますよね。それと同じです。

エラー3：export defaultの位置を間違える

// ❌ よくある間違い
function myFunction() {
  export default "何か";  // 関数の中でexportはできない！
}

// ✅ 正しい書き方
function myFunction() {
  return "何か";
}
export default myFunction;

exportは必ずファイルの最上位レベルで行います。

実践的な使用例：簡単なユーティリティモジュールを作る

理解を深めるために、実際に使えるモジュールを作ってみましょう。

// dateUtils.js
// メインの機能：日付を見やすくフォーマットする
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');

  return `${year}年${month}月${day}日`;
}

// サブ機能：曜日を取得
export function getDayOfWeek(date) {
  const days = ['日', '月', '火', '水', '木', '金', '土'];
  return days[date.getDay()];
}

// サブ機能：今日かどうか判定
export function isToday(date) {
  const today = new Date();
  return date.toDateString() === today.toDateString();
}

// メインの機能をdefault export
export default formatDate;

使う側のコード：

// main.js
import formatDate, { getDayOfWeek, isToday } from './dateUtils.js';

const now = new Date();

console.log(formatDate(now));        // "2025年07月29日"
console.log(getDayOfWeek(now));     // "火"
console.log(isToday(now));          // true

このように、メインの機能はdefault export、補助的な機能はnamed exportという使い分けが一般的です。

まとめ：export defaultは「モジュールの顔」

JavaScriptのexport defaultについて、理解できましたでしょうか。

今日学んだポイント：

• export defaultは「本日のおすすめ」のようなもの
• 1つのファイルに1つだけ設定できる
• importする時は{}が不要でシンプル
• メインの機能をdefault exportにすると使いやすい

export defaultを理解すれば、モジュールの設計がグッと上手になります。

特にReactやVue.jsなどのフレームワークを使う時には必須の知識です。基礎をしっかり理解しておくことで、フレームワークの学習もスムーズに進みます。

もっと体系的にJavaScriptを学びたい方は、Learning NextのJavaScriptコースがおすすめです。export/importはもちろん、モジュールシステム全体を練習問題を解きながら確実にマスターできますよ。

さあ、今すぐVS Codeを開いて、あなたの最初のモジュールを作ってみましょう！