JSX の名前空間の仕組み

JSXには名前空間の仕組みがあります。ここで名前空間とは厳密に定義はせず、「同名の異なるクラスを同じスコープで使用する仕組み」とします。つまりJavaではパッケージ、C++では名前空間、 ES6/TypeScriptではモジュールと呼ばれるものですね。JSXの名前空間は宣言する構文こそありませんが、ファイルがその単位となっていて、必要であればそれを特定の名前空間に割り当てて使うことができます。

この「宣言構文がない」「必要なときのみ名前空間を割り当てる」という仕様のため普段意識することは少ないのですが、たとえばJavaのようにファイルシステム上の名前とpackage宣言の名前を一致させなければならないという冗長性がなくとてもシンプルで、私は気に入っています。

さて、使い方も軽く紹介しましょう。たとえば以下のように同名のクラスMyClassを定義している foo.jsx, bar.jsx があるとします。

// foo.jsx
class MyClass {
  static function getName() : string {
    return "MyClass@foo.jsx";
  }
}

// bar.jsx
class MyClass {
  static function getName() : string {
    return "MyClass@bar.jsx";
  }
}

これを同じアプリケーションで使うときは、import-into構文を使って特定の名前空間に割り当てます。

import "./lib/foo.jsx" into foo;
import "./lib/bar.jsx" into bar;

class _Main {
  static function main(args : string[]) : void {
    log foo.MyClass.getName(); // "MyClass@foo.jsx"
    log bar.MyClass.getName(); // "MyClass@bar.jsx"
  }
}

なお、上記のデモはJSX repositoryに入っているので、 JSX$ jsx --run example/module-demo.jsx で実行できます。

• module-demo.jsx
• foo.jsx
• bar.jsx