Hatena::ブログ(Diary)

四角革命前夜

2012年06月04日(月)

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>には当然、自作のクラスなども入れられる。

(number[]とArray.<number>の違いをまだわかっていない……)


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

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


とかとか。面倒になったからここまで。

まだまだわかんないところたくさん!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/sasaplus1/20120604/1338741824