【Reactビギナー向け】default exportとexportの種類をすべて解説
2024.3.15
この記事は約2分で読めます
この記事の筆者：三好アキ
🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。
🔹 自身のJavaScript挫折経験をもとに、HTMLとCSSの知識だけで本格的なアプリ開発を始められる入門書を多数執筆中。合計著作は22冊を超える。
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
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 myDefaultFunctionReactコンポーネントでよく見るコードです。
これを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を書けるようになる本】
販売ページに移動する
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信はいつでも停止できます）
関連記事
