Javascript

【JavaScript・export・import】モジュールについて理解をまとめる

 

こんにちは、ともです。

この記事ではES6からの構文であるimportについて理解をまとめたいと思います。

ES5の知識すらほぼ無かった状態でVue.jsをやってしまった僕は何となく動くものは作れるけど深くは理解できないという感覚でした。このような方は多いのではないでしょうか。

その状態から脱却するためにimportについて勉強していきます。

外部ファイルのクラスの読み込み

アプリケーションが大きくなるとモジュール毎に機能を管理していく必要があります。

そのようなモジュールを読み込むためにimportを利用します。PHPであればrequireという構文があります。

他のファイルに記述されたクラスを読み込む際にimportを利用します。

ファイルを準備

モジュールとしてMemberクラスを『./lib/Util.js』に定義しました。

// ./lib/Util.js
const AUTHOR = 'YAMADA, Yoshihiro'

class Member {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }

  getName() {
    return this.firstName + this.lastName
  }
}

このクラスを利用するファイルとして『./js/index.js』を作成しました。

./js/index.js
var m = new Member('太郎', '山田')
console.log(m.getName())

しかし、これは動作しません。

何故なら、index.jsでMemberクラスが定義されていないからです。

このように外部ファイルに記述されたクラスを読み込むために『import』を利用します。

export/importを利用する

  • 外部クラスにexportをつけてimport可能を許可
  • importで外部クラスを読み込む

読み込ませたいクラスにexportを付ける

モジュールを読み込めるようにするために『export』を利用します。

外部で利用したいクラスに『export』を付けることで『import』が可能となります。

export class Member {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }

  getName() {
    return this.firstName + this.lastName
  }
}

importで外部クラスを読み込む

import { 'module name' } from 'path to module'

上記のような記述方法でimportを行います。

import { Member } from '../lib/Util'

var m = new Member('太郎', '山田')
console.log(m.getName()) // 田中太郎

importの記法

importで外部モジュールを読み込みますが様々な記述方法があります。

  • モジュール内の全てのクラスをインポート
  • モジュール内のクラスに別名を付ける
  • デフォルトのエクスポート

全てのクラスをインポート

MemberクラスとAreaクラスをexportしておく。

// lib/Util.js
const AUTHOR = 'YAMADA, Yoshihiro'

export class Member { }

export class Area { }

import側では『*』により全てのクラスをインポートし『as』で別名を付ける

import * as app from '../lib/Util'

var m = new app.Member()
var a = new app.Area()

asで別名を与える

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

上記のコードはMDNから拝借致しました。

上記のような長いクラス名に『as』で別名を与えることで扱い易くできます。

デフォルトのexport

エクスポート方法は、名前付きとデフォルトの 2 種類あります。

  • export class Member {} ・・・名前付きexport
  • export defualt class {}・・・デフォルトのexport

名前付きでexportした場合、exportしたクラス名をimportする必要がありました。

defaultのexportの場合、importする際に任意の名前を与えることができます。

名前付きexport

// Util.js
export class Member {
  constructor() { }
}
// index.js
import { Member } from '../lib/Util'//MemberクラスをexportしたらMemberで読み込む

var m = new Member()

Memberクラスをexportしている場合はimport { Member } でクラスを読み込みます。

defaultのexport

// Util.js
export default class {
  constructor() { }
}
import Hoge from '../../lib/Util' // 自由に名前をつけてimportできる（この場合Hogeとしてimport）

var h = new Hoge()

defaultでexportした場合、任意の名前をつけてimportすることができます。

名前付きでのexportとの違いは{ }で囲う必要がないです。

ブラウザで利用するために

import/exportの構文は一部のブラウザでしか対応していません。

Babelでトランスパイルする必要があります。Babelでトランスパイルした場合、Node.jsのrequire関数を利用するため、Browserifyでブラウザで利用できるように再変換する必要があります。

まとめ

JavaScriptのモジュールのimportとexportについて理解をまとめました。

importやexportといった記法を利用することでモジュールという単位に分割することができますね。今は一部のブラウザで未対応ですが一般的になることでしょう。

関連記事はこちら