ES Modulesが使えるようになるまでの変遷 #JavaScript

どーも、フロントエンドエンジニアをしているズッキーです。

学生時代のアルバイトも含めると、
2014年ごろからフロントエンドに関わってます。

今や、ないと仕事にならない、ES Modulesですが
昔はデザインパターンなどでどうにかして解決していたなぁと思い、
変遷をまとめてみました。

はじめに：ここが辛いよJavaScript

名前空間サポートされておらずすぐ競合する💥

// one.js
var hoge = 123;

// two.js
var hoge = "文字列";

// three.js
hoge * 10; //NaN

依存関係を気にしないといけない😎

<!-- 読み込み順を変えたらバグる -->
<script src="js/vender/jquery.min.js"></script>
<script src="js/vender/jquery.cookie.js"></script>
<script src="js/vender/jquery-ui.js"></script>

1.デザインパターンやAMD形式

IIFE (即時実行関数式)でモジュール化

IIFE は、独立したスコープを持つことができるため、
モジュール化として利用できます。

// IIFE によるモジュール定義
var myModule = (function() {
  // モジュール内で定義される関数
  function myMethod() {
    // 関数の処理を記述する
  }

  // モジュールを返す
  return {
    myMethod: myMethod
  };
})();

AMD形式

define 関数を用いてモジュールを実現する方法
AMD 形式では、モジュールは以下のように define 関数を使用して定義されます。
define() 関数の第一引数には依存するモジュールを指定し、第二引数にはそれらのモジュールが読み込まれた後に実行される処理を指定します。

define([ 'dep1', 'dep2' ], function(dep1, dep2) {
    // モジュールの本体
    // dep1, dep2 は依存するモジュール
    return {
        // モジュールのインタフェース パブリックで使わないならreturnしない
    };
});

2.バンドルツールが出てきてNode.js側の構文が使えるようになる

Browserify

Browserifyを使うと、Node.jsの構文でブラウザの操作が行えるようになります。
これはBrowserifyがブラウザ実行可能な形式にトランスパイルを行う事により実現されます。

よってNode.jsのrequire構文がフロント側で使用可能になった。

エクスポート側

// utils.js
const message = "Hello, World!";
module.exports = {
  message: message
};

インポート側

const utils = require("./utils");
console.log(utils.message); // "Hello, World!"

webpack

Browserifyに比べてimgファイルや、.scssファイルなど幅広くトランスパイルが可能。
現在ではBrowserifyに比べて広く普及している。

3.ついにES Modulesが使えるようになった

JavaScriptの言語仕様として、require構文ライクにモジュールが定義できるように🎉

各ブラウザのサポート状況の差を、webpackがIEも含めて使えるように、
トランスパイルが可能となったので、広く使われるようになった認識。