JavaScriptの名前空間の書き方

Question

###前提・実現したいこと
名前空間について調べたのですが、色々な書き方が有ったり古かったりするのでどう書けばいいのかよくわかりません。es6で書く場合はこんな感じでいいですか。

###該当のソースコード

const namespace = {};
namespace.a = 'a';// 変数
namespace.function = function() {// 関数
  console.log('test');
};
namespace.class = class {// クラス
  constructor(params) {
    this.params = params;
  }
};

Answer 1

ES5以前のJavaScriptにおいて、名前空間(namespace)という概念がそもそもありませんでした。各ファイルは単に結合されるだけだったため、グローバル変数の重複等による諸問題が発生する状態でした。その回避のために即時関数の使用や擬似的な名前空間の作成等のテクニックが編み出されました。

ES6(ES2015)から名前空間の概念が追加されました。ただ、ここで追加された名前空間は、一つのファイルないで名前空間を分けるという手法では無く、複数のファイルについて、それぞれが名前空間を持つ方式です。これがES6から追加されたモジュール(module)です。

ES6からモジュールとしてスクリプトファイルを読み込むという動作ができるようになりました。これまで、JavaScriptをHTML内で羅列した場合、それは単なるファイルの結合に過ぎませんでした。しかし、モジュールベースになった場合、それぞれが独立し、必要なものだけをやり取りできるようにしました。モジュールは次の点で通常のスクリプトファイルとは異なります。

1. トップレベルのvar変数定義や関数定義がグローバルオブジェクトのプロパティ(グローバル変数)にはなりません。グローバルオブジェクトのプロパティとして明示的に作成しない限り、ファイル間で変数名や関数名の重複は発生しません
2. 指定した変数、関数、クラスしか公開されません。トップレベルの変数であっても、公開しなければ、アクセス方法がありません。
3. 自動的にstrictモードになります。'use strict';の汚染もありません。

このように、スクリプトファイル一つ一つが独自の名前空間を作成し、公開された名前を通してしか、やり取りできないようにしています。これがモジュールであり、ES6から追加された名前空間です。

モジュールの公開や読み込みにはexportとimportという新しい構文を使用します。exportでそのファイルにある変数等についてどれを公開するのか指定し、importで指定した名前で他のファイルをモジュールとして読み込みます。

まずは、公開する側を見てみましょう。"myNamespace.js"というファイルを次のように作ってみます。

var x = 'ex'
export var a = 'a';// 変数
export function f() {// 関数
  console.log(x);
};
export class K {// クラス
  constructor(params) {
    this.params = params;
  }
};

これを読み込んで、使用するには次のように書きます。

import * as myNS from './myNamespace.js';
var x = 'in'
console.log(myNS.a); // => 'a'
myNS.f(); // => 'ex'
let k = new myNS.K(0);
console.log(k.params); // => 0
console.log(x); // => 'in'

注目して欲しいのは、varで宣言されたxです。もし、この二つのファイルが単なる結合であれば、xは重複しているため、同じ物になるはずです。しかし、myNS.f()での出力は'ex'ですし、その後のxは'in'と違っています。これは、二つのファイルでxはそれぞれ別の物として扱われるからです。つまり、名前空間がファイルによって異なると言うことです。

"myNamespace.js"のうち、直接アクセスできるのはexportで明示的に公開しているa、f、Kに限定されます。import文は色々書き方があるのですが、今回はmyNSを最初に付けた形でそれらにアクセスするという風にしました。これで、公開された各変数、関数、クラスにアクセスできるようになり、また、それらが他のものと被ることもありません。

では、これはどうやって使えば良いのかというと、とっても簡単です。<script type="module">というようにscriptタグのtype属性に"module"を指定するだけで、通常のJavaScriptではなく、このモジュールベースのJavaScriptとしてブラウザが読み込んでくれます。自動的にstrictモードになるなど、嬉しい機能が満載ですので、使わないという選択肢は無いでしょう。

ここで、残念なお知らせがあります。この素晴らしいモジュールの機能ですが、2017年7月11日現在正式に対応しているブラウザはSafariのみです。対応表を見ると、Edge、Firefox、Chromeは実験的に対応しているので、そのうち使えるようになりますが、IEが対応することはありません。なぜなら、IEの開発は既に終了しているからです。IEを捨てるという素敵な決断ができない場合はどうすれば良いのでしょうか？

ご安心ください。Babelで変換して、WebpackやBrowserifyで結合すれば同じ事ができます。Babelはrequire等を用いたCommonJSの形式にimportとexportを変換してくれます。あとは、CommonJSに対応したツールで一つにまとめれば良いのです。このとき、モジュール特有の名前空間も考慮して、一つにまとめてくれるので、IEでも(たぶん)うまく動いてくれるでしょう。

もうひとつ。Node.jsもまだ未対応です。ただ、こちらはそのうち対応する可能性が高いですが、それまでは同じくBabelで変換するしかありません。

Comments

[zohnam]

IEってやっぱり窓から投げ捨てるべき存在ですよね…

Answer 2

typescriptをjavascriptに変換すると以下のようなコードとなります。
nekojiroさんのコードでも大筋問題はないと思います。

namespace hoge {
    const _a = 'a';

    const _func = () => {
        console.log('func');
    }

    export class _class {
        constructor(params) {
            this.params = params;
        }
    }
}

↓

var hoge;
(function (hoge) {
    var _a = 'a';
    var _func = function () {
        console.log('func');
    };
    var _class = (function () {
        function _class(params) {
            this.params = params;
        }
        return _class;
    }());
    hoge._class = _class;
})(hoge || (hoge = {}));