トップ > Javascript > import/exportについて

import/exportについて

Javascript

exportの構文

export - JavaScript | MDN

名前付きエクスポート

  • モジュール毎に複数持てる。
  • インポートする時は、対応するオブジェクトと同じ名前を使用しなければならない。
const x = 1;
const y = 2;

export { x, y }; // 事前に宣言された機能のエクスポート
export const z = 10; // 個別の機能のエクスポート(var, let, const, function, classが可能)

デフォルトエクスポート

  • モジュール毎に一つのエクスポート。
  • インポート先では、任意の名前を使用できる。
const x = 1;
const y = 2;

export default x;

importの構文

import - JavaScript | MDN

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name")
  • defaultExport : モジュールからのデフォルトのエクスポートを参照する名前。
  • module-name: インポートするモジュール
  • name: 名前空間のように用いられるモジュールオブジェクトの名前
  • exportN: インポートするエクスポートの名前
  • aliasN : 指定されたインポートを参照する名前

モジュールのコンテンツを全てインポートする

import * as myModule from '/modules/my-module.js';

エクスポートにアクセスする際はモジュール名を名前空間として使用する。

// myModuleのfoo()にアクセスしたい場合
myModule.foo();

モジュールからエクスポートを1つ/複数インポートする

// mymodule/export.js

export const ONE = 1;
export const TWO = 2;

// mymodule/import.js
import { ONE  } from ./import // 1つの場合
import { ONE, TWO } from ./import // 複数の場合

インポートする際、名前を変える

// mymodule/export.js

export const ONE = 1;
export const TWO = 2;

// mymodule/import.js
import { ONE  as one} from ./import // 1つの場合
import { ONE as one, TWO as two } from ./import // 複数の場合