<y>

Splatoonプレイヤー兼Webエンジニア

ES6におけるimport/exportメモ

ちゃんと知らなかったので、自分用にメモ程度。もちろん同じことを説明してる記事はたくさんあるけど、自分の言葉で書いてみることが大事だと思っている。
間違いとかあったらご指摘いただけるとうれしいです。

概要

  • ES6から搭載された、JavaScriptにおけるモジュール機能。今までは機能を分割するという概念がなかった
  • commomn.jsやnode.jsではrequire関数が定められ、import/exportに似た機能は他のライブラリなどでは実装されていた
  • ようやくこれらの機能が言語仕様として実装された

modules (import/export)の使い方

  • modulesの概念では、別のファイルに渡す変数や関数のことを「モジュール」と呼ぶ
  • 複数のモジュールを別のファイルに渡す際は、exportすることで呼び出し元で扱えるようにする
  • 呼び出し元ではimportを使うことで、そのファイル内でモジュールを有効化できる

Named export (名前付きのモジュール受け渡し)

  • 以下のmodule.jsで、外部のファイルで利用できるようにexportする
  • アロー関数の書き方、return文や括弧の省略などは以下を参照

developer.mozilla.org

// module.js

export const myStritg = "myString"

// ES5の古い書き方
// export var mergeString = function(str1, str2) {
//  return str1 + str2
// }

// ES6のアロー関数を使った書き方
export const mergeString = (str1, str2) => `${str1}${str2}`
  • 以下のmain.jsで、モジュールを利用するためにimportする
  • importの構文は、import [importするファイルで利用する変数名] from '[モジュールのファイルパス]'
  • exportされたオブジェクトに対し、エイリアスを設定することができる。その場合、import [元のオブジェクト名/関数名] as [エイリアス] from '[モジュールのファイルパス]'
// main.js

import { myString, merger as mergeString } from 'path/to/module'

console.log(myString) // myString
console.log(merger(myString, 'is here.')) // myString is here
  • 上記のimport文で*を使うことで、一つのオブジェクトのプロパティとしてモジュールを受け取ることができる
  • 構文は、import * as [importするファイルで利用するオブジェクト名] from '[モジュールのファイルパス]'
// main.js

import * as mod from 'path/to/module'

console.log(mod.myString) // myString
console.log(mod.mergeString(myString, 'is here.')) // myString is here

Default export (モジュールを一つだけ受け渡しする場合)

  • ファイル内でモジュールを一つだけ渡す場合、export defaultを利用する
  • export defaultは、一つのファイルの中で一度しか呼び出すことができない
  • モジュールを受け取る側の記述が簡潔でわかりやすくなるため、通常利用する場合はなるべくexport defaultを利用する
  • export defaultを使用する場合、var, let, constは利用できない
  • Default exportの場合は、importの際に自由な名前を設定できる。一つのモジュールにつき一つしか存在しないため、名前をexport側と合わせなくてもよい
  • export defalutでオブジェクトや関数に対して名前を設定していないこともある。そのため、Default exportの場合はimportした先で名前をつけてあげるという感覚
// module.js

export default (str1, str2) => `${str1}${str2}`
// main.js

import merger from 'path/to/module'

console.log(merger('aaa', 'bbb')) // aaabbb
  • また、クラス(正確にはprototypeの拡張だが)を渡すこともできる
  • Default exportなので、クラスもimportした先で名前を変えることができる
  • クラスについては以下を参照

developer.mozilla.org

  • クラス内のgetter/setterはES5、メソッド定義はES6の構文。詳しくは以下を参照

html5experts.jp

// class.js

export default class User {
  constructor(name) {
    this.name = name
  }

  get name() {
    return this._name
  }

  set name(name) {
    this._name = name
  }

  displayName() {
    console.log(`現在のユーザーは${this._name}です。`)
  }
}
// main.js

import User from 'path/to/class'

const user = new User('Bob')

console.log(user.name) // Bob
user.displayName() // 現在のユーザーはBobです。

user.name = "Michael"
user.displayName() // 現在のユーザはMichaelです。

その他参考ページ

neos21.hatenablog.com