Zenn
✍️

export / importまとめ

2023/02/07に公開
JavaScript
tech

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