blog-hero-img

【Reactビギナー向け】default exportとexportの種類をすべて解説

pen-icon2024.3.15

この記事は約2分で読めます

Profile Pic

この記事の筆者:三好アキ


🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。

🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。


Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録

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)」と呼ばれます。

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

デフォルトexport 名前付きexport
ファイルからexportできる数 1つ 複数可
import時の名前 任意の名前を利用可 export時と同じ名前(asで任意の名前利用可)
import時の記法 カッコなし カッコあり

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

コードで確認しよう

まずデフォルト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マスター Zero To Hero:自信をもってReactコードが書けるようになる本』では、デフォルト・エクスポートやimportといったJavaScript/Reactの基礎の基礎から、発展的内容まで広く解説をしているのでぜひご覧ください。

Reactマスター Zero To Hero:自信をもってReactコードが書けるようになる本

【JavaScript/Reactの基礎から発展的内容まで全範囲を網羅。自信をもってReactを書けるようになる本】

販売ページに移動する

Profile Pic

メルマガ配信中
(from 三好アキ/エンジニア)


React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)