✍️
export / importまとめ
javascriptのexport・importには大きく分けて下記の2種類がある。
- 名前付きimport・export(Named export・import)
- default import・export
この記事ではそれぞれの書き方についてまとめます📝
Named import / export
基本の書き方
user.js
const name = '太郎';
const age = 30;
export { name, age };
index.js
import { name, age } from './user.js';
const message = `${name}さんの年齢は${age}歳です。`:
宣言と同時にexport
user.js
export const name = '太郎';
export const age = 30;
// 関数もexportできる
export function isOver20(age) {
if(age > 20) return true;
return false;
}
宣言と同時にexportしつつ、まとめてexportとの併用も可能
user.js
// 宣言と同時にexport
export const name = '太郎';
const age = 30;
function isOver20(age) {
if(age > 20) return true;
return false;
}
// 一部だけまとめてexport
export { age, isOver20 };
エイリアスを使用し、別名をつけてexportする
変数 as 別名
として書く
エイリアスをつける場合は宣言と同時にexportする形では書くことができないので、 {}
の中に書く
user.js
const name = '太郎';
const age = 30;
export { name as firstName, age };
index.js
import { firstName, age } from './user.js';
const message = `${firstName}さんの年齢は${age}歳です。`:
import側でエイリアスをつける
user.js
const name = '太郎';
const age = 30;
export { name, age };
index.js
import { name as firstName, age } from './user.js';
const message = `${firstName}さんの年齢は${age}歳です。`:
import・exportどちらでもエイリアスは使える
大変ややこしいが、下記のようなことも可能
user.js
const name = '太郎';
const age = 30;
export { name as firstName, age };
index.js
import { firstName as Taro, age } from './user.js';
const message = `${Taro}さんの年齢は${age}歳です。`:
default export・import
export default 変数;
のような書き方をする。
Named exportは複数exportすることができるが、default exportは1モジュールにつき1回しか使えない。
user.js
const name = '太郎';
const age = 30;
export { age };
export default name;
また、importは {}
の中ではなく、むき出しの状態で書く
index.js
import name, { age } from './user.js';
const message = `${name}さんの年齢は${age}歳です。`:
エイリアスを使わずとも自由な名前をつけてimportすることができる
index.js
import Taro, { age } from './user.js';
const message = `${Taro}さんの年齢は${age}歳です。`:
なぜか?
nameという変数自体をexportしているのではなく、評価された後の値自体をexportしているため。
今回で言うと、実際にexport defaultしているのは太郎
と言う文字列になる
↓実際にはこんなイメージ
export default '太郎';
Named exportしたものを、default exportすることも可能
このような使われ方はないと思いますが、可能です。
user.js
const name = '太郎';
const age = 30;
export { age }; // ageをNamed export
export default age; // Named exportしたageをここでdefault exportしている
index.js
import old, { age } from './user.js';
console.log(old === age); // trueになる
関数をdefault exportする
user.js
export const name = '太郎';
export const age = 30;
function isOver20(age) {
if(age > 20) return true;
return false;
}
export default isOver20;
index.js
import checkOver20, { name, age } from './user.js';
checkOver20(age);
default exportの場合、宣言と一緒にexportできるのは関数もしくはclassのみ
変数に対して宣言と同時にdefault exportはできない。
user.js
// エラーになる
export default const name = '太郎';
// エラーにならない
export default function isOver20(age) {
if(age > 20) return true;
return false;
}
なぜか?
変数宣言の場合、カンマ区切りで複数変数を定義することができてしまうため、default exportの仕様と相性が悪いため
user.js
const name = '太郎',
age = 40,
business = '会社員'; // 複数の定義が可能
値をそのままexportすることもできる
user.js
export default '太郎';
宣言と同時にdefault exportする場合は識別子がいらない
user.js
export default function (age) { // isOver20を削除
if(age > 20) return true;
return false;
}
Discussion