※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。
exportとは
exportは、指定のファイルから関数、変数、オブジェクト、クラス(クラスはプロトタイプベース継承の糖衣構文であり、関数の一種。詳しくは モダンなJSの話──クラス)などを受け取り、任意のファイルでそれらを使えるようにするための文です。
exportには主に2種類の使い方があります。
Named exports
exportしたい要素の名前を付けてexportする方法です。
こんな感じで要素をexportすることができます。
変数のexportはvar、letも使うことができます。
Default exports
exportしたいデフォルトの要素を決めておきたいときにdefaultキーワードを使ってexportする方法です。
var、let、constはexport 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といった最近のフレームワークでは当たり前のように使われているので今一度仕様をしっかりと理解しておくと良いでしょう。