JSXのちょっとしたまとめ

jsdo.it JSX

jsdo.itで動作させるものをJSXで書くためのメモとか。

JSXをコンパイルできる環境を整える

JSXを動かすためにnode.jsが必要で、JSXをリポジトリからクローンするのにGitが必要。（Gitはまあ必須じゃないけど）


最初にGitのインストールから。
Windowsなら最近出たばかりのGitHub for Windows使うとか、msysgit使うとか。前者の方がいろいろ楽かな。
MacならGitHub for Mac使うとか、homebrewからインストールするとか、公式のインストーラでインストールするとか。
Ubuntuなら

$ sudo apt-get install -y git-core

かなー。最近だとgit-coreじゃなくてgitで良くなったんだっけ？


続いてnode.jsのインストールを。
Windowsはここから適当なバージョンのnode.exeとここから適当なバージョンのnpmを落としてきて、パスを通してあげればOKなのです。
Perlは面倒だから入れない。


MacとUbuntuはnodebrewから。nodebrewのインストールは別エントリで。
nodebrewはPerl製でMacにもUbuntuにも最初から入ってるし、node.jsだけじゃなくnpmも一緒にいれてくれるのでラクチン。

JSXのインストールとセットアップをする

Gitとnode.jsが用意できたら

$ git clone git://github.com/jsx/JSX.git

でリポジトリをクローンする。


で、Windowsの場合はPerlを入れていないので

> cd .\JSX
> npm install

で依存モジュールをインストール。


MacやUbuntuの場合は

$ make setup

でセットアップ。Ubuntuは……build-essentialとか入れておかないとMake入ってないんだったかな？


ちゃんと使えるかどうか、試しに

$ bin/jsx --version

もしくは

> node bin\jsx --version

を実行してバージョン番号が表示されれば普通に動くんじゃないでしょうか。

コードを書く

以下はコードのメモ。自分はこう書いてる、的なもの。


ほぼ必ず書くことになるであろうimport文。

import "js/web.jsx";

これでHTMLの要素が扱えるようになる。HTMLCanvasElementとかCanvasRenderingContext2Dとか。


エントリポイントとして_Mainクラスを書く。

final class _Main {

  static function main(args: string[]): void {
    (new Stage()).tick();
  }

}

Javaっぽい。このmainが最初に実行される。
mainに書いたのはJSX - a faster, safer, easier JavaScriptにあったShootingのソースを真似たやつだったかな？

final class Stage {

  var canvas: HTMLCanvasElement;
  var context: CanvasRenderingContext2D;

  function constructor() {
    this.canvas = dom.createElement('canvas') as HTMLCanvasElement;
    this.context = this.canvas.getContext('2d') as CanvasRenderingContext2D;

    this.canvas.width = dom.window.innerWidth;
    this.canvas.height = dom.window.innerHeight;

    dom.window.document.body.appendChild(this.canvas);
  }

  function tick(): void {

    //
    // なにかコンテキストをいじる処理
    //

    // ループ
    dom.window.setTimeout(function (): void {
      this.tick();
    }, 1000 / 60);
  }

}

canvasを動的に生成してサイズをウィンドウのサイズに合わせ、documentに追加し、tickを呼び出し続けるコード。
コンストラクタはconstructorで、戻り値の型を書かない。
チュートリアルによると、オーバーロードできるみたい。

var a = []: Array.<number>;
a[0] = 1;
a[1] = 2;
a[3] = 3;

とか。には当然、自作のクラスなども入れられる。
（number[]とArray.の違いをまだわかっていない……）

var i: number = Math.random();
var j: int = i * 2;

でコンパイルすると

/** @type {!number} */
var i;
/** @type {!number} */
var j;
i = Math.random();
j = (i * 2 | 0);

となり、intは(| 0)で整数にされる。整数しか使わないのならintで宣言すると速いかも。

var sakura = []: Array.<Sakura>;

sakura.sort(function (a: MayBeUndefined.<Sakura>, b: MayBeUndefined.<Sakura>): int {
  return a.size - b.size;
});

sortで関数を渡すときはこう書くみたい。MayBeUndefinedってなんだろ？


困ったら

$ git grep '探したい文字列'

でなんとか探す！w
テストコードとか割といろいろ引っかかるので以外と参考になる。


とかとか。面倒になったからここまで。
まだまだわかんないところたくさん！