📥
特殊なimport / export
import * as 構文
インポート先のモジュール全てをオブジェクトとして取得できる構文
user.js
const name = '太郎';
const age = 30;
export { name, age };
上でエクスポートしたname、ageというプロパティをもつuserオブジェクトとしてインポートしている
index.js
import * as user from './user.js';
const message = `${user.name}さんの年齢は${user.age}歳です。`:
Re-Export + Named Export
他のモジュールでエクスポートされたものを他のファイルでもエクスポートすること
例えば、下記のようなディレクトリ構造だったとする
├── index.js
├── user
│ ├── user.js
│ ├── index.js
user/user.js
const name = '太郎';
const age = 30;
export { name, age };
user/index.js
// user.jsのエクスポートされた変数をさらにそのままエクスポートしている
export * from './user.js' // user
index.js
import * as user from './user/index.js'; // user/index.jsからインポート
const message = `${user.name}さんの年齢は${user.age}歳です。`:
asで名前をつけつつRe-Exportする
user/index.js
// user.jsのエクスポートされた変数をさらにそのままエクスポートしている
export * as member from './user.js'
index.js
import * as user from './user/index.js'; // user/index.jsからインポート
const message = `${user.member.name}さんの年齢は${user.member.age}歳です。`:
この場合、export時に member
オブジェクトとしてエクスポートしているのに対し、さらに * as user
でインポートすることで userオブジェクトの中にさらにmemberオブジェクトが入っているという構造になる
exportするものを選びつつ一部の値だけをexportする
user/index.js
// nameだけをエクスポートする
export { name } from './user.js'
ageはエクスポートしていないので、user.ageは参照できずundefinedになる
index.js
import * as user from './user/index.js';
// user.nameは参照できるがuser.ageはundefinedになる
const message = `${user.name}さんの年齢は${user.age}歳です。`:
一部の値をRe-Export + エイリアス
user/index.js
// nameだけをエクスポートする
export { name as firstName, age as thirty } from './user.js'
index.js
import * as user from './user/index.js';
const message = `${user.firstName}さんの年齢は${user.thirty}歳です。`:
Re-Export + Default Export
Default ExportをそのままDefaultとしてExport
user/user.js
const name = '太郎';
export default name;
エクスポートした変数名ではなく、default
と書くことでデフォルトエクスポートのままエクスポートができる
user/index.js
export { default } from './user.js'
デフォルトエクスポートの場合はimport時にasを使わなくても名前をつけることができるので、今回はtaroとしてインポートする
index.js
import taro from './user/index.js';
const message = `${taro}さん、こんにちは`:
Default Exportは実はNamed Exportのようなことをしている
as defaultでNamed Exportしているようなもの
user/user.js
const name = '太郎';
export { name as default };
ただし、Named Exportのようにそのまま default
でインポートできるかというとそれはできない。
下記はエラーになる🙅🏻♀️
index.js
import { default } from './user/index.js';
defaultは予約語のためインポート時に変数として使うことは出来ない
index.js
import { default as name } from './user/index.js';
上記ならOK🙆🏻♀️
Default ExportをNamed Exportに変えてExport
user/user.js
const name = '太郎';
export default name; // Default Export
user/index.js
export { default as name } from './user.js'
index.js
import { name } from './user/index.js';
const message = `${name}さん、こんにちは`:
Named ExportをDefault Exportに変えてExport
user/user.js
const name = '太郎';
export { name }; // Named Export
as defaultすることで、デフォルトエクスポートに変えることができる
user/index.js
export { name as default } from './user.js'
index.js
import Taro from './user/index.js';
const message = `${Taro}さん、こんにちは`:
Side Effect Import
変数や関数をインポートすることなく、モジュール自体をインポートするもの
side-effect.js
alert('side-effect.jsがimportされました');
index.js
import './side-effect.js' // side-effect.js内の処理が実行される
side-effect.js自体をインポートしており、side-effect.js
内のalertが実行されます。
Discussion