八角研究所 : クライアント（ブラウザ）もサーバも同一言語で書ける haXe を使ってみる（5）

クライアント（ブラウザ）もサーバも同一言語で書ける haXe を使ってみる（5） - haXe と JavaScript ライブラリ「ExtJS」を連携させてみる

どうも、あかさたです。前回は haXe の文法を掘り下げて紹介しました。今回からはより実践的な内容に触れていきたいと思います。まずは、haXe と JavaScript ライブラリの連携方法について紹介します。

概要

haXe が JavaScript, Flash, サーバー（NekoVM）上で動作するソースコードを記述できるプログラミング言語と言うことはわかりました。便利なことはわかりますが、一つ不安もあります。

おそらく、Web プログラミングをしている人は、すでにある程度のソースコード資産を持っていてそれを再利用したいと考えている人もいるでしょうし、次々と出てくるライブラリを活用したいと考えている人もいるはずです。

haXe は動的な側面を多少持っているとはいえ、静的な型付き言語です。haXe のコードから JavaScript のライブラリを呼ぼうとしても、haXe で定義された型がない以上、コンパイラの型チェックによりコンパイルすることができません。つまり、haXe と JavaScript の既存ライブラリは連携できないのではないかという不安があるのです。

haXe にはこのようなケースを回避する言語機能があるので、この記事ではその機能を使用して外部ライブラリを呼び出すコードを紹介します。対象とする外部ライブラリは「ExtJS」です。

（ExtJS については、クジラ飛行机さんの記事を参照してください。）

ExtJS を haXe から呼び出す

ExtJS を介してメッセージボックスを表示するコードを考えてみましょう。ExtJS には Ext.MessageBox というオブジェクトが定義されているので、それを haXe のコードから呼び出すことができれば、メッセージボックスを表示することができます。

「コンパイルできないコード」

class WithExtJS {
    static function main() {
        Ext.MessageBox.alert("from haXe", "haXe with ExtJS");
    }
}

上記のコードをコンパイルすることはできません。Ext という識別子はどこにも定義されていないからです。コンパイラの存在は、コーディング時には非常に心強いのですが、その反面、融通が利かないというデメリットもあります。

コンパイラの型チェックが問題なのですから、コンパイラの型チェックを取り外してやればいいのです。前回の記事で、「untyped」という構文を紹介しました。「untyped」はコンパイラによる型チェックを回避してコンパイルしてくれます。「untyped」で JavaScript に対応するコードを括ってみましょう。

「untyped で括ったコード」

class WithExtJS {
    static function main() {
        untyped {
            Ext.MessageBox.alert("from haXe", "haXe with ExtJS");
        }
    }
}

すると、今度はコンパイルすることができました。js ファイルも出力されています。これが実際に動くかどうか検証してみましょう。以下のような html ファイルを準備します。ExtJS は html と同じフォルダ内に「ext」フォルダを作成して、そこに配置してあります。

「コンパイルした js ファイルを実行する html ファイル」

<html>
    <head>
        <title>haXe with ExtJS</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    </head>
<body>

<h3>haXe with ExtJS</h3>

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript" src="withExtJS.js"></script>

</body>
</html>

「実行結果」

無事実行されました。このことから、haXe から JavaScript の外部ライブラリを使用する際は、「untyped」で括ってやればよいことがわかりました。

haXe が出力する JavScript のコードを見てみる

とはいえ、型チェックをオフにしてコンパイルを通して動作させるという行為に少し気持ち悪さを感じます。気持ち悪さを軽減するためにも、untyped で括られたコードがどのように出力されるのか、確認してみましょう。

「haXe によって出力された js コード（抜粋）」

WithExtJS.main = function() {
	{
		Ext.MessageBox.alert("from haXe","haXe with ExtJS");
	}
}

意外と、そのまま出力されていることがわかります。コンパイラによる型チェックがなくなるというコーディング上のマイナスはあるものの、書いたコードがほぼそのまま JavaScript に出力されるというのは注目に値するでしょう。

むしろ問題になりそうなのは、haXe が出力する js ファイルは、ルートに「js」「Std」などのオブジェクトを生成してしまうので既存のオブジェクトと衝突する恐れがあると言うことでしょうか。既存のコードとオブジェクトが衝突していないかさえ注意すれば、haXe と JavaScript の連携は問題なく行うことができます。

まとめ

以上、「untyped」構文を使って、haXe と ExtJS の連携について紹介しました。既存の JavaScript コードと haXe の連携は、一手間かかるものの、大きな障害なく行うことができます。既存のコードと連携できるとなれば、haXe への移行は（心理的にも実際の工数的にも）それほど問題なく進めることができるでしょう。

次回は、Flash と haXe について紹介します。それでは！

Series Navigation«少し文法を掘り下げるhaXe で Flash クライアントを記述する»

Posted by あかさた | 2008年03月19日 06:55 | permalink