JSX

この項目では、DeNAが開発したプログラミング言語について説明しています。Metaが開発したJavaScript拡張構文については「JSX (JavaScript)」を、ジャカルタ証券取引所については「インドネシア証券取引所」をご覧ください。

JSX は、DeNAによって開発されたウェブアプリケーション向けのプログラミング言語である。ECMAScript 4から影響を受けた構文を持ち、静的型付けなのが特徴。ウェブブラウザ組み込みのスクリプト言語であるJavaScriptのデメリットを解消することを目的に作られている。またJSXのソースコードは最適化されたJavaScriptコードに変換して実行され、同等のJavaScriptプログラムと比較して10%以上高速になるとされる^[3][1]。

JSX

パラダイム	オブジェクト指向[1]
登場時期	2012年5月31日 (2012-05-31)[1]
設計者	DeNA, Co., Ltd.
開発者	DeNA, Co., Ltd.
評価版リリース	0.9.89 / 2014年5月20日 (10年前) (2014-05-20)[2]
型付け	静的型付け[1]
影響を受けた言語	JavaScript
プラットフォーム	クロスプラットフォーム
ライセンス	MIT License
ウェブサイト	jsx.github.io
拡張子	.jsx

なお、Reactで用いられるJavaScriptの拡張構文JSXや、Adobe社製ソフトウェアに搭載されているJavaScriptマクロは、同じく「JSX」という名前がつけられているが、全くの別物である。

言語仕様

JSXの特徴は以下の点が挙げられる。

• クラス構文のサポート
• モジュール機構
• テンプレート（総称型）のサポート
• 関数オーバーロードのサポート
• アロー関数式
• レキシカルスコープをもつthis
• デフォルト引数
• 最適化で削除されるassert文
• プロファイラ（スマートフォンでも利用可能）
• source mapのサポート
• nullを許容しないプリミティブ型(number, boolean, string)

例

Hello worldプログラムは、以下のとおりである^[4]。JSXプログラムは _Main.main(:string[]) : void がアプリケーションのエントリポイントとなる。

 class _Main {
     static function main(args : string[]) : void {
         log "Hello, world!";
     }
 }

JSXでは、継承関係にないクラスに総称的な操作をするためにはインターフェイスを使う。インターフェイスを使ったプログラムは以下のようになる^[4]。

// an example for class inheritance and interfaces

interface Flyable {
    abstract function fly() : void;
}

abstract class Animal {
    function eat() : void {
      log "An animal is eating!";
    }
}

class Bat extends Animal implements Flyable {
    override function fly() : void {
        log "A bat is flying!";
    }
}

abstract class Insect {
}

class Bee extends Insect implements Flyable {
    override function fly() : void {
        log "A bee is flying!";
    }
}

class _Main {
    static function main(args : string[]) : void {
        // fo bar
        var bat = new Bat();

        var animal : Animal = bat; // OK. A bat is an animal.
        animal.eat();

        var flyable : Flyable = bat; // OK. A bat can fly
        flyable.fly();

        // for Bee
        var bee = new Bee();

        flyable = bee; // A bee is also flyable
        flyable.fly();
    }
}

関連項目

• JavaScript
• ECMAScript
• ActionScript
• Haxe
• Dart
• TypeScript