[haXe][js] “Flasher だけど js 案件増えてきたなー” みたいな人は haXe かじってみてもいいんじゃね？

Categorie:{ haXe, javascript }　Tag:{flash, haXe, javascript, memo}　Comments:{ No Comments }
Posted:{ 2012.01.19 03:26:23 }

最近ちょくちょく haXeで js を試しているのでメモ。
※haXeは、エックス（とかヘックス）とか呼ばれてる。

そもそも haXe って？

haXe ってなに？って人のためにざっくり説明。
haXe は1言語で、Flash (AS2/AS3) 、 js 、PHP、C++、NekoVM、にかきだせる言語。（.hxファイルをコンパイラオブションで出し分ける）
haXe – haXe の紹介

記述は AS3 とか JAVA に似ていて、サーバー側もクライアント側も1言語でかけるってのが、特にメリット（かな？）。
※「1言語」ってのは「ワンソース」と同義ではないです。念のため。

特に、 haXe に興味を持った個人的理由は下記。
・(私自身が) オブジェクト指向 (AS3 or JAVA) に慣れている。
・ js に慣れていない。
・ js を仕事で書くことになった。
・ js でも AS3 みたいに継承とか書きたい。(prototype ふぁっこふ）
・ js は、コンパイルチェック（や型チェック）がないからデバッグがめんどい。
・いつも使ってる FDT が haXe の開発に対応している。（FlashDevelopも対応しているとのこと）

これはやってみるしかない(・∀・)

という感じ。

このご時世で「Flasherだけど js 案件増えてきたなー」みたいな人は、 haXe かじってみるのはあり？かもしれない。
「すべての道はインタラクションデザインに通ず」。

開発環境の準備

とりあえず無料で整う。

Mac なら FDT5 Free
Win でも FDT5 Free or FlashDevelop。
※ほかにもあるのかな？

それぞれのIDEのhaXeチュートリアルをみればいいんじゃないかな。

FDT での haXe js プロジェクトチュートリアル動画は下記。
[1] haXe in action, check out a sample haXe project in FDT 5
[2] Complex HaXe example

ということで、以下、 js を書きだすメモ。
(とくに js に限ったものではないメモも混じっています)

コンストラクタ

.hxクラスのコンストラクタは new() 関数

public function new(){
    //コンストラクタ
}

上記の例外として、「メインの.hxファイル」(AS3でいうドキュメントクラス)は main()関数がコンストラクタより先に実行される。※エントリポイント

ex) Main.hx

class Main {
    public static function main() {
        //ここで自身をnewする
        new Main();
    }
    public function new(){
        //コンストラクタ
    }
}

windowのonloadイベント

windowのonloadイベントを取得

 js .Lib.window.onload = onOnLoad;
function onOnLoad(){
    trace("laoded!")
};

継承する

これ簡単。普通にAS3みたいにオブジェクト指向で記述できる。
これが個人的に haXe で js やる理由の1つ。

ex) ExtendClass.hx

//Exendsされるクラス
class ExtendClass {
    public var myString:String;
    public function new(){
            myString = "fugafuga";
    }
}

ex) MyClass.hx

package;
class MyClass extends ExtendClass{
	public var name:String;
    override public function new (){
	    super();
        name = "hogehoge";
	}
}

ex)Main.hx

//〜略〜
var myclass:MyClass = new MyClass();
trace("myclass.name = " + myclass.name);//hogehoge
trace("myclass.myString = " + myclass.myString);//fugafuga

htmlのボタン要素を取得してイベントを付加する

var button:Button;
untyped{
    button=  js.Lib.document.getElementById("button");
    button.value="hello button";
    button.onclick= function(evt : Event)
    {
         js .Lib.alert("click");
    }
}

タイマー処理する

/**
 * 1000ミリ秒ごとに動作するタイマー
 * @see http://haXe.org/api/ haXe /timer
 */
  var t: haXe .Timer  = new Timer(1000);
  t.run = function (){trace("update");};

タイマーキュー

 /**
　* add された関数を、指定ミリ秒間隔で１度だけ実行
　* @see http://haXe.org/api/ haXe /timerqueue
　*/
var tq:TimerQueue = new TimerQueue(2000);
tq.add(function(){trace("added func1");});
tq.add(function(){trace("added func2");});
tq.add(function(){trace("added func3");});

jQueryを使う

以前のエントリを参照下さい。
[haXe][js] haXe で jQuery を使う方法 | R o m a t i c A : Blog : Archive

最後に

間違っている所もあるかも & つっこみあったら@itoz宛てに教えていただけるとありがたいです。