haxe で始める createjs

Haxe で始める CreateJS

自己紹介

• 石上慎太郎

• クラスメソッド株式会社

• 開発部テクニカルスペシャリスト

• 元 Flash＆Flex 系エンジニア。フロントエンドがメイン。

• 最近は主に HTML＆JavaScript 担当。

アジェンダ

• CreateJS とは

• JavaScript 開発の問題点

• Haxe とは

• JavaScript の弱点に対する Haxe の答え

• Haxe で CreateJS を使う仕組み

• 事例

• 注意点

CreateJS とは

CreateJS とは

• HTML5 の canvas で、Flash っぽくいろいろできる EaselJS を中心としたライブラリ群

http://www.createjs.com/#!/EaselJS/demos

http://www.createjs.com/

CreateJS とは

• ソースコードはこんな感じです。

var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);

var shape = new createjs.Shape(graphics);

//Alternatively use can also use the graphics property of the Shape class to renderer the same as above.

var shape = new createjs.Shape();

shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);

ActionScript とクラス名やメソッド名が似ている。

CreateJS とは

• ActionScript の感覚で使ってみた。

→やはり JavaScript は JavaScript だった。（当たり前）

JavaScript 開発の問題点

JavaScript 開発の問題点

• コード補完が弱い。（IDE にもよるが…。）

• エラーチェックが弱い。動かすまで分からない。

• ヘタしたら動かしても分からない。

• クラスが作りにくい。Prototypeｪ…

• クラスごとに js ファイルを分けると読み込みが面倒。

• 依存管理も面倒。

• 1ファイルにしたらそれはそれでコーディングが面倒。

• 分業が面倒。

• 等々とにかく面倒。

JavaScript開発の問題点

そこで Haxe（ヘックス）です。

Haxe（ヘックス）とは


• ActionScript に似た文法の静的型付けオブジェクト指向言語。

• JavaScript 以外の複数の言語にもコンパイル可能。

• オープンソース＆フリー。

• 最近はやりの TypeScript と一部競合？


ActionScript 開発経験のあるエンジニア（わたしです）が、

ActionScript に似た言語である Haxe で、

ActionScript と似たクラスやメソッドを持つ CreateJS を使って開発してみた。

→すごく捗った！（実体験）

JavaScript の弱点に対する Haxe の答え


IDE はいろいろありますが、

私は FlashDevelop を使います。

・無料。

・ActionScript 開発で広く使われている。

（ただし Windows 版のみ。）

・個人的にも使用経験があった。


• コード補完

FlashDevelop のコード補完は「それなりに」有効。

自動インポート周りで若干の使いにくさはあるが、それでも十分使えます。

FlashBuilder 等と比べると若干見劣りしますが、今後に期待。


• エラーチェック

Haxe は「静的型付け言語」

その上、型推論も。

厳密なエラーチェックが行われるため、スペルミスや型の不一致からセミコロン抜けまで全てコンパイルエラー。


• クラス作成

クラスの作り方は、ActionScript とほぼ同じ。

継承もできます。Interface も作れます。

↑このカンマがAS3と異なる。

class MyClass extends FooClass, implements IBar {


• ソースファイル＆依存管理

Haxe は基本的に1クラス1ファイル。

（作ろうと思えばインナークラスも作れます。）

コンパイルされた JS は、1ファイルに纏まります。

依存管理の必要無し！

しかも、Chrome のソースマッピングを使用すると、Haxe ソースコード上でのデバッグさえも可能。

Haxe で CreateJS を使う仕組み


• CreateJS は JavaScript で作られたライブラリ。

→これを Haxe から使うには？


• CreateJS は JavaScript で作られたライブラリ。

→これを Haxe から使うには？

extern クラスを使います。


• extern クラスとは

Haxe の外部で定義され、実行時に利用可能となる機能の「インターフェース」を定義したクラス。


• CreateJS の extern クラス

自分で作る必要はありません。Haxelib で公開されているので、コマンド一発でインストール＆使用可能です。

>haxelib install createjs


• extern クラスを継承した新しいクラスも作れます。

import createjs.easeljs.Shape; class MyShape extends Shape { public function new() { super(); } ・・・ }


この他に、jQuery の extern クラス等も haxelib に公開されています。

また、使いたいライブラリの extern クラスを自分で作ることも可能。

オブジェクトや配列の操作で便利な Underscore.js の extern クラスを自作して使っています。

動作確認はユニットテスト。これも Haxe の標準機能。

事例

注意点

JavaScript に対する十分な理解無しで挑むとハマる恐れ有り。応用の幅も狭まります。

Haxe + CreateJS 開発メモ#5 removeEventListener が機能しない問題の回避方法

http://dev.classmethod.jp/ria/html5/haxe-createjs-5/






haxe で始める createjs

Technology