【Reactビギナー向け】default exportとexportの種類をすべて解説
2024.3.15
この記事は約2分で読めます

この記事の筆者:三好アキ
🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ!Next.js/React開発入門(翔泳社/*韓国でも出版)』著者。
▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2
最初にお知らせです。
【最後のReact教材】をリリースしました。
▼ 購入はこちらから
👉 monotein.base.shop/p/00005(Baseショップ)
👉 monotein.booth.pm/items/5611184(Boothショップ)
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するときにはデフォルト・エクスポートが使われます。
▼【無料フロントエンド・ガイド】は下記ページで受け取れます。

🟩 フロントエンド開発者入門ガイド【無料配布中】
最初にこれが知りたかった!
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
(*名前不要・メールアドレスだけで受け取り可能です)