モダンなJSの話──importとexport

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。

exportとは

exportは、指定のファイルから関数、変数、オブジェクト、クラス(クラスはプロトタイプベース継承の糖衣構文であり、関数の一種。詳しくは モダンなJSの話──クラス)などを受け取り、任意のファイルでそれらを使えるようにするための文です。

exportには主に2種類の使い方があります。

Named exports

exportしたい要素の名前を付けてexportする方法です。

こんな感じで要素をexportすることができます。 変数のexportvarletも使うことができます。

Default exports

exportしたいデフォルトの要素を決めておきたいときにdefaultキーワードを使ってexportする方法です。

varletconstexport defaultで使うことができないので注意です。

importとは

importは、別ファイルからexportされた関数や変数、オブジェクトを読み込み、それらを使えるようにするための文です。

importされた要素のスコープについてですが、原則的には現在のスコープ(ローカルスコープ)になります。

export defaultで定義されたdefaultの要素をimportする方法

シンプルにdefaultを呼び出す場合はこんな感じです。

名前付きの要素を一緒にimportしたい場合は、default importの後に定義します。

classをexport/importする例

クラスをexportする場合はimport先またはexport先でnew呼び出しをするのを忘れないようにしましょう。

import先でnew呼び出しする例はこんな感じです。

export.js

import.js

呼び出し元でnew呼び出ししておく場合はこんな感じです。

export.js

import.js

まとめ

Vue.jsやReactといった最近のフレームワークでは当たり前のように使われているので今一度仕様をしっかりと理解しておくと良いでしょう。

参考