React の学習を進めていると「export default App」のような記述を目にするかと思います。
しかし、export default について説明がないまま登場することが多く、よく分からないまま使っている方も多いのではないでしょうか。
また、時には import xxxと import { xxx }のように、import 方法にも差があるので違いが気になりますよね。
そこで今回は、主に React を例にして以下の内容を説明します！
- export default の意味
- export と export default の違い、メリット・デメリット
- export default の使用シーン
- export の使用シーン
いつもメンティー（＝初心者）に教え、すっきり理解してもらえる説明をさらに丁寧にしているので、きっと今回でご理解いただけるはずです。
このあたりを理解するとフロントエンドのスキルが 1段階アップできますので、しっかり押さえていきましょう！
React で登場する「export default」について
React をはじめとして export default という記述が非常によく使われます。
import React from 'react';
const Hello = () => {
return <h1>Hello, world!</h1>;
}
export default Hello;上記の Hello コンポーネントは、他のファイルから以下のように import して（読み込んで）利用できます。
import Hello from './Hello';
// Helloコンポーネントを描画
<Hello />ここで何をやっているか、少しずつ説明します。
まず前提知識として Reactは、JavaScriptのライブラリの一つで、コンポーネント という独立した部品を作成し、それらを組み合わせることでウェブページを構築します。
export default は、これらのコンポーネントを他のファイルから参照できるようにするための命令文です。
言い換えると、他のコンポーネントやファイルから「このコンポーネントを使ってもいいよ」と教えているのです。
この点を理解するために、exportとexport defaultとの違いを見ていきましょう。
export とは？
export は、あるJavaScriptのファイルから、変数や関数、クラスなどを他のファイルから利用できるようにする機能です。
例えば、Message.jsというファイルで、message という定数と number という定数を定義していたとします。
export const message = "Hello, world!";
export const number = "This is number.";上記の例では、messageとnumberをそれぞれexport しているので、どちらの定数もを他のファイルから参照できます。
例えば messageだけを使用したいときは、以下のように {} 付きで import します。
import { message } from './Message.js';
console.log(message); // "Hello, world!" が出力されますまた、messageとnumberの両方を使いたいときは、以下のように {}内でカンマ区切りで import します。
import { message, number } from './Message.js';
// ...この {}付きで import するという点と、複数 import できるという点を覚えておいてください。
export defaultとは？
export default はexport の一種ですが、特に一つのファイルから一つのモジュール（クラスや関数など）だけをエクスポートしたいときに使います。
例えば、Message.jsというファイルで、以下のように export default を使用すると、この message という定数を他のファイルから参照できます。
const message = "Hello, world!";
export default message;しかし、この時の import の書き方が少し異なります。
import message from './Message.js';
console.log(greeting); // "Hello, world!" が出力されますmessageを export defaultでエクスポートしているため、Message.js から import する定数を特に指定することなく、import することができるのです。
exportとexport defaultの違い
主な違いは、export が複数の値をエクスポートできるのに対して、export default は一つの値しかエクスポートできないという点です。
また、importの書き方も少し違いました。
もう一つの違いは、export default を使うと、importする際に名前を自由に決めることができる点です。
これは、他の開発者がコードを読む際にわかりやすい名前をつけられる利点があります。
例えば、messageという定数名で定義していたとしても、以下のように別な名前で import できます。
複数のコンポーネントや定数・関数を import する際、識別しやすくなりますね。
import greeting_message from './Message.js';export default のメリット・デメリット
export default のメリットは、1つのファイルから1つのモジュールをエクスポートする際のシンプルさと、インポートする際の名前を自由につけられる柔軟性です。
一方で、デメリットとしては、複数のモジュールをエクスポートすることができないという制限があります。
そのため、1つのファイルに複数のモジュールがある場合、または将来的に複数のモジュールが追加される可能性がある場合、export の方が適している場合もあります。
export と export default どっちを使うべき？
多くの場合、特に React プロジェクトでは1つのファイルで1つのコンポーネントだけを定義するかと思います。
そのため、基本的には export defaultを使っておけば問題ありません。
しかし、プロジェクトが大きくなってくると、いろんなコンポーネントで使うような関数・オブジェクトを別ファイルに切り出すことがあります。
例：
- ボタンの色を定義するオブジェクト
- 線の色を定義するオブジェクト
- 文字に応じて背景色を計算して返す関数
上記のようなものは色に関する関数・オブジェクトとしてを 1ファイルで管理すると、「色関係はこのファイル」と分かりやすくなりますよね。
例えば color_utilities.jsという名前で 1ファイルを作り、上記のようなオブジェクト・関数、または定数などを定義します。
そして、それぞれを exportすれば、必要な分だけを他ファイルから使えるようになります。
export const buttonColorObject = {
alert: '#0056b3',
// ...
};
export const lineColorObject = {
base: '#6c757d',
// ...
};
export function backgroundColorByText(text) {
// text に対して色を表す文字列を返す処理など
}import する側は、以下のように {} 付きで、必要な定数・オブジェクト・関数だけ import して使うことになります。
import { buttonColorObject, backgroundColorByText } from './color_utilities.js';デザイン上の理由で指定色が変わるときも、1ファイルをいじるだけで済むのでメンテナンスがとても楽になります。
このように export や export defaultを使いこなすことで、より実践的なソースコードを書けるようになりますので、ぜひ意識してみてください！
JavaScriptを効率的に身につける勉強法は？
JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。
- JavaScript を身に付けてエンジニアになるには何をすればいい？
- 何から勉強すればいいんだろう？
- 効率よく勉強するには？
JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。
そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？
