Reactのexportとimportを全解説｜default export・named exportの違いと使い方

exportとimportいろいろ

Reactを使っていると、default exportというコードをかならず目にします。最後の行です。

const App = () => {
    return (
        <div>
            <h1>こんにちは</h1>
        </div>
    )
}

export default App

そうかと思えば、単にexportだけのコードを見ることもあります。

export const addData = (userName) => {
    return userName
}

そしてこれらをimportする場面では、次のように{ }付きのものと、無しのものがあります。

import Header from "./components/Header"
import { useDarkMode } from "./hooks/useDarkMode" 

これらの違いと使い分けをサクッと紹介しましょう。

違いを表でまとめると…

まず名前です。

default付きのものはそのまま「default export（デフォルトexport）」、無しのものは「named export（名前付きexport）」と呼ばれます。

後ほどコードを見ますが、最初に違いを表にまとめると次のようになります。

では、コードで確認していきましょう。

⚫︎ monotein.base.shop/p/00005

コードで確認しよう

まずデフォルトexportの例です。

const myDefaultFunction = () => {
    ...
}

export default myDefaultFunction

Reactコンポーネントでよく見るコードです。

これをexportしてみましょう。

import myDefaultFunction from "./myDefaultFunction.js"

これもReactでよく目にするコードです。

しかしデフォルトexportでは、import時に任意の名前を使えます。

import tokyo from "./myDefaultFunction.js"

次は名前付きexportを見ましょう。

名前付きexportは、ひとつのファイルで複数使えます。

export const myNamedFunction1 = () => {
    ...
}

export const myNamedFunction2 = () => {
    ...
}

そしてこれをimportするときには{ }が必要です。

import { myNamedFunction1 } from "./myNamedFunctions.js"

import { myNamedFunction1, myNamedFunction2 } from "./myNamedFunctions.js"

一括でimportしたいときは次のように書きます。

import * as MainFunctions from "./myNamedFunctions.js"

そして次のように使います。

MainFunctions.myNamedFunction1()
MainFunctions.myNamedFunction2()

import時に任意の名前を使う場合はasを使います。

import { myNamedFunction1 as tokyo } from "./myNamedFunctions.js"

default exportと普通のexportの使い分け

明確な基準はありませんが、目安として、ファイルから大きな機能をひとつexportするときには「デフォルト・エクスポート」。

小〜中規模の複数の機能をexportしたいときは「名前付きエクスポート」が使われます。

なおReact自体に難しさを感じている人は、こちらのガイドも参考にしてください▼

よくある質問（FAQ）

Q1. Reactコンポーネントのファイルは、なぜほぼ必ずexport defaultで書かれているのですか？

Reactコンポーネントは「1ファイルに1つ」というのが基本的な設計のためです。

1ファイルから大きな機能をひとつexportするケースにはデフォルトexportが向いており、Reactコンポーネントのファイルはその典型例です。

Q2. 1つのファイルにデフォルトexportと名前付きexportを混在させることはできますか？

できます。

ただし、デフォルトexportは1ファイルに1つだけという制限は変わりません。

名前付きexportは複数あっても問題ないため、用途に応じて使い分けることができます。

Q3. カスタムフック（useDarkModeなど）のimportに{ }がついているのはなぜですか？

カスタムフックは名前付きexportで書かれることが多いためです。

名前付きexportをimportするときは必ず{ }が必要になります。

逆に{ }がないものはデフォルトexportと判断できます。

TypeScriptで開発する場合、exportとimportを使ったコンポーネントには型が関わってきます。

React開発でのTypeScriptの使い方を体系的にまとめたガイドはこちらです▼

Q4. React学習を進めていくステップを知りたい。

学習ガイドを用意してあります。

参考にしてください▼

Q5. Reactを使うにはどうすればいいですか？

まずは現在の主流であるReact + Viteに触ってみましょう。

3分で済みます。

下記記事を参考に進めてください▼

上記記事ではJavaScriptを使っていますが、TypeScriptを使う場合は下記記事をどうぞ▼

しかしこれらの記事が扱っているのは「初歩の初歩」です。

実際の開発で必要な実践的なReactスキル、そしてTypeScriptスキルを身に付けたい方は、下記教材を使ってください▼

⚫︎ monotein.base.shop/p/00005