JavaScript
es6
reactjs
webpack

ES6のExportとImportについて

More than 1 year has passed since last update.

ES6のexportとimportについて把握しきれていないところがあったので調べてみました。


exportの使い方


export 文は、指定したファイル (またはモジュール) から関数、オブジェクト、プリミティブをエクスポートするために使用 引用元:MDN - Export


ここでいうエクスポートとは、何かを定義するという意味合いに近いかと思います。

エクスポートには2種類の方法があります。


名前付きエクスポート

export { hogeFunction };  // 宣言済みの関数をエクスポート

export const hoge = 1; // 定数をエクスポート letやvarも可。

fromを使ってエクスポートすることもできます。

export * from 'Hoge'; // ワイルドカード

export { hoge, moge, huge } from 'hogemogehuge'; // 複数エクスポート
export { importHoge as hoge, importMoge as moge } from 'hogemoge'; // エイリアス


デフォルトエクスポート

export default function() {}

export default class() {}

defaultとは、 「importする際に特に指定がなければそのクラスや関数を呼ぶ」というものです。

importする際にdefault以外のクラスや関数を呼び出したいときは、{}でクラスやファイル名を指定して呼び出してあげます。


importの使い方


import 文 は、外部モジュールや他のスクリプトなどからエクスポートされた関数、オブジェクト、プリミティブをインポートするために使用します。 引用元:MDN - Import


インポートにも2種類の方法があります。


 名前指定のインポート

import * as hoge from "Hoge"; // ワイルドカード

import {hoge} from "Hoge"; // 指定の1つだけをインポート
import {hoge, moge} from "HogeMoge"; // 複数インポート
import {hogeHoge as aliasHoge} from "HogeHoge"; // ※1
import {hogeHoge as aliasHoge, mogeMoge as aliasMoge} from "MogeMoge"; // ※2
import "Hoge"; // 全モジュールをインポート

// ※1 全モジュールをインポートし、さらに一部のメンバーを指定する。
// ※2 メンバー名を指定してインポートする。

厳密にはスコープの話が関わってきますが、そちらについては参考サイトをご確認ください。


デフォルトのインポート

import hoge from "Hoge"; // defaultのメンバーが呼び出される。


注意

デフォルト指定されたメンバーを名前指定でインポートするとエラーになります。


所感

モダンなjavascriptはまだまだキャッチアップしきれていない気がするので勉強しなくては・・


参考


その他

bmf-tech.com