JSX のご紹介

0206thumbnail.jpg

みなさまはじめまして。Kです。後姿で失礼します。

普段は主に新規のブラウザゲームの開発を担当しております。

HTML5関連でなにか紹介を、と依頼を受けましたので、僭越ながら今回はJSXというプログラミング言語を紹介させて頂きたいと思います。

 

 

 

はじめに

JSXとは、JavaScriptに変換して実行される、JavaScriptの代替言語です。いくつかのDeNA内製タイトルでも実際に利用しています。

今回はそんなJSXがゲーム開発の一助になればと、簡単に紹介させて頂きます。

ちなみにJSXは DeNAによって開発された言語ですが、私自身はJSXの開発には関わっておりません。

実際にHTMLベースのゲーム開発をする中でJSXを利用した経験を踏まえて、ゲーム開発者の視点からお話しさせて頂きます。

JavaScript開発の大規模化

一昔前と違い最近では、ブラウザゲームでもHTML上でぐりぐり動いてインタラクティブな操作が出来て、、というゲームが出てきました。

そのようなゲームを作るには、JavaScript でゲームのロジックをバリバリ実装する事になります。

簡単なミニゲームくらいであれば大して問題にならないのですが、がっつりゲームを作ろうとすると開発の規模がどんどん大きくなります。

  • 数千〜数万行のソースコード

  • 複数人で並行開発

  • 複雑なゲームロジックの実装

こうなってくると、JavaScriptのデメリットが顕在化してきます。

  • 言語仕様が柔軟すぎる

    • 人によって書き方がバラバラ(になりやすい)

  • エラー発生時にデバッグがしづらい

  • 実行速度の低下

  • prototypeベース

    • 実装パターンがよくわからない、、、

    • 結局クラスベースっぽく実装出来るようなモジュールを自作したり、、、

  • etc...

もちろん JavaScript での実装でも出来なくは無いのですが、辛く苦しい戦いとなります。

そこで今回はその解決策の一つとしてJSXがあります。

JSXって?

JSXには以下のような特徴があります。

  • 静的型付け

  • クラスベースオブジェクト指向

  • コンパイラによる最適化で、実行効率が上がる

静的型付けなので、コンパイル時のエラーチェックが強力です。これにより、規模が大きくなっても変数名やメソッド名の変更に怯える必要はありません。

簡単なサンプルコードです。

class Point {
    var x = 0;
    var y = 0;

    function constructor() {
    }

    function constructor(x : number, y : number) {
        this.set(x, y);
    }

    function constructor(other : Point) {
        this.set(other);
    }

    function set(x : number, y : number) : void {
        this.x = x;
        this.y = y;
    }

    function set(other : Point) : void {
        this.set(other.x, other.y);
    }
}

実際に見て頂ければわかりますが、Javaっぽいですね。大丈夫です何も怖くありません。(私は昔にJavaでの開発経験があったので、割とすんなり慣れる事が出来ました)

導入手順

次に、導入の手順になります。

npmで install できます。

$ npm install [-g] jsx

そして、jsx コマンドで JSXファイルを JavaScriptに変換します。

以下は、JSXで作成したClassをJavaScriptから利用する例です。

myClass.jsx

    __export__ class MyClass {
        ….
        ….
        function play() {
            // do something...
        }
    }

 compile コマンド

 以下の例だと、 MyClass.js というファイルが生成されます。

$ jsx --release --minify --output myClass.js myClass.jsx

呼び出し側のHTML

<script src="myClass.js"></script>

<script>
         var MyClass = JSX.require("myClass.jsx").MyClass;
         var obj = new MyClass;
         obj.play();
</script>

compile オプションに ‘--executable web’ を指定すると、DOMContentLoaded イベントで Main._main([]) を実行するような js ファイルに変換出来ます。

  myApp.jsx

class Main {
    static function _main(args : string[]) : void {
        // do something...
    }
}
  $ jsx --release --minify --executable web --output myApp.js myApp.jsx

以上となります。

導入までのイメージがつきましたでしょうか?

■ 最後に

非常に簡単な紹介になってしまいましたが、少しでも興味をもたれた方は以下のドキュメントなど見て頂ければと思います。

公式ドキュメント http://jsx.github.io

チュートリアル     http://jsx.github.io/doc/tutorial.html

今回はあまり詳細まで紹介出来ませんでしたが、さらにJSXの関連情報が知りたい場合はこちらがオススメです。

http://qiita.com/advent-calendar/2013/jsx
 

それではここまで読んで頂いたみなさまありがとうございました。