Contenu connexe Similaire à FIRST STEP to Haxe/JavaScript (20) FIRST STEP to Haxe/JavaScript2. 目次
• 自己紹介
• Haxeとは
• なぜJavaScriptコードを生成したいのか
• Haxeと他のJavaScript生成言語
• Haxe/JavaScriptの開発環境
• Hello World
• 基本的な構文・構造
• JavaScriptとの連携
• Haxeならではの機能・構文
• まとめ
4. 得意な技術領域
• ギョーム系DataGridの実装に定評があります。
• JavaScriptで2回
• Haxe/JavaScriptで1回
• Silverlightで1回
• ここ数年はクライアントサイド開発が中心。
• でもシステムアーキテクチャ設計がたぶん本業。
• キーワード
Windows 8, .NET, WinRT, MSIL, F#,
JavaScript, Haxe, TypeScript, Android,
分散システム, Cassandra, …
5. Haxeと私
• Haxe歴は1年ほど。
• わりと大きなプロジェクトにHaxeを投入。
• 大規模なギョームシステムにHaxeを採用してみた話
http://www.slideshare.net/terurou/haxe-15006171
• はてブ 200超え
• でもこのスライド、発表当日に実質2時間ぐらいで
書き上げたヤツなんだよね…
• 今も開発継続中、Haxe部分だけで5-6万行程度。
• Pure JavaScriptで書いている部分も数万行規模。
• サーバサイドも数万から10万程度はあるはず。
11. 原因1: JavaScriptの言語仕様が良くない
• モジュールシステムが存在しない。
• ライブラリや実行環境(ブラウザ、Node.jsなど)に
よって書き方が大きく変わる。
• prototypeベースオブジェクト指向を筆頭にして、
言語仕様が柔らかすぎる。
• 初心者がprototypeチェーンを覚えることが大変
• 「classのようなもの」の書き方がたくさんある。
• グローバルオブジェクトのprototype上書き問題
• グローバル汚染+varの付け忘れバグ
• strictモードを使えばある程度マシになるが…。
25. エディタ・IDE
• おすすめ
• Flash Develop(Windowsのみ)
• Sublime Text(有償) + haxe-sublime-bundle
• 実用レベルだが少し動作が重い
• IntelliJ IDEA Ultimate(有償) + haXe plugin
• FDT(Eclilseベース、フリー版と有償版がある)
• 使ったことはないがイケてそう
• Vim + vim-haxe
• Vim + Vaxe
• Emacs + haxe-mode
28. Sublime Text + haxe-sublime-bundle
• Sublime Text
• 公式ページ
http://www.sublimetext.com/
• インストール時に難しいことは特になし。
• haxe-sublime-bundle
• Sublime Package Controlからのインストールが楽。
• インストール方法と使い方
http://wbond.net/sublime_packages/package_control/installation
• Package Controlで haxe と入力して選択するだけで
パッケージがインストールされる。
32. 基本的な流れ
• プロジェクト(.hxmlファイル)の作成
• hxml = Haxe標準の簡易ビルドスクリプト
• Flash Developの場合は、.hxmlファイルがなくても
開発できるが、他環境を考えると作成した方が良い。
• ここではFlash DevelopとSublime Textの手順を解説。
• プログラムを記述
• とりあえず alert() を表示するだけ。
• ビルド・実行
• ついでにデバッガを使ってみる。
34. プロジェクトの作成(Flash Develop)- 2
• ビルド設定の変更
• menu→プロジェクト→プロジェクト設定
• 書き出しタブ→コンパイルターゲット
• カスタムビルドに変更
• ビルドコマンドタブ
→ビルド前に実行するコマンドライン
$(CompilerPath)¥haxe.exe $(ProjectDir)¥build.hxml
35. プロジェクトの作成(Flash Develop)- 3
• ビルドスクリプトの作成
• プロジェクトルート直下にbuild.hxmlを作成
• bin/index.html の修正
• build.hxml-jsで設定したJavaScriptファイル名を
指定する。
–main Main
-cp src
-js bin/main.js
-debug
<script src="main.js"></script>
36. プロジェクトの作成(Sublime Text)- 1
• プロジェクトのディレクトリツリー
• プロジェクトファイルの作成
• menu→Project→Save Project As ...
• プロジェクトのルートディレクトリに保存
$project_root/
src/
bin/
37. プロジェクトの作成(Sublime Text)- 2
• プロジェクトファイルの編集
• menu→Project→Edit Project
http://qiita.com/amay077/items/570beb096056d6f16f2a
• folders.older_exclude_patterns は好みで追加。
{
"folders": [
{
"path":"."
//, "folder_exclude_patterns": ["bin"]
}
],
"build_systems": [
{
"name":"haxe",
"working_dir":"${project_path:Default}",
"cmd":["haxe", "build.hxml"]
}
]
}
38. プロジェクトの作成(Sublime Text)- 3
• ビルドスクリプトの作成
• プロジェクトルート直下にbuild.hxmlを作成
• bin/index.html を作成
• build.hxml -jsで設定したJavaScriptファイル名を
指定する。
-main Main
-cp src
-js bin/main.js
-debug
<!DOCTYPE html>
<script src="main.js"></script>
39. プログラムを記述
• src/Main.hxを作成
• haxeでは { を行頭に置くことが多い(C#風)
• Flash Develop、Sublime Text共にデフォルト設定
• 普通に行末に { 置くことも多いので好みで。
package;
import js.Lib;
class Main
{
static function main()
{
Lib.alert("hello");
}
}
40. ビルド・実行
• ビルド
• Flash Develop
• menu→プロジェクト→プロジェクトをビルド
• F8
• ツールバーの歯車アイコン
• Sublime Text
• Ctrl + B
• 実行
• bin/index.htmlをブラウザで開く。
• alert()が表示されれば成功。
41. Chromeのデバッガの使い方
• Developer Toolsを開く
• menu→ツール→Developer Tools or Ctrl+Shift+I
• Sourcesタブの左上の をクリック
• ソースツリーが表示されるので、breakpointを
仕掛けたい位置を設定
• ソースツリーペイン右上の をクリックすると
ペインを開いたままにしておくことが可能。
44. trace()
• trace() = console.log()
package;
import js.Lib;
class Main
{
static function main()
{
trace("hello");
}
}
45. 変数の宣言
• var 変数名 : 型名;
• var 変数名 : 型名 = 初期値;
• 型推論により、var 変数名 = 初期値; でも可。
var foo : Int;
foo = 1;
foo = "abc"; //コンパイルエラー
var foo : Int = 100;
var foo = 100;
50. クラス
• クラス名は必ず先頭を大文字にする
class Point
{
// インスタンス変数
var x : Int;
var y : Int;
// コンストラクタ
public function new(x, y)
{
this.x = x;
this.y = y;
}
// メソッド
public function toString() : String
{
return "Point(" + x + "," + y + ")";
}
}
53. 継承
class Foo
{
public function new() {}
public function method() {}
}
class Bar extends Foo
{
public function new() {
super();
}
override public function method()
{
super.method();
}
}
54. interface
interface IPoint
{
var x : Int;
var y : Int;
function toString() : String;
}
class Foo implements IPoint
{
public x : Int;
public y : Int;
public function new() {}
public function toString() { /* ... */ }
}
60. 条件分岐
• if, switch, 三項演算子(cond ? a : b)
• switchのcaseには break は書かない。
• 全て式なので、代入式の右辺にもできる
if (foo > 0)
{
}
else if (foo == 0)
{
}
else
{
}
switch (foo)
{
case "abc": //...
case "xyz": //...
default: //...
}
var foo = (cond) ? 100 : 0;
var bar = if (cond) 100 else 0;
var baz = switch (x) { case "abc": 100; default: 0; }
61. ループ構造
• for, while, do-while
• breakも利用可能
• forにはiteratorしか指定できないので注意
for (i in 0...100)
{
}
while (cond)
{
}
do
{
} while (cond);
68. jQuery
• js.JQuery
• jQueryのextern
• jQueryをHTMLにインクルードしておく必要あり
• ただし、コンパイルオプション(build.hxml)に
-D embed_js を追加すると自動で生成物にjQueryを
埋め込む(はず、ソースを見ただけで未確認)
import js.JQuery;
var btn = new JQuery("button");
btn.click(function (e) { /* ... */ });
70. インラインJavaScript
• untyped __js__()
• JavaScriptのif文を組み立てることも可能
• JavaScriptから戻り値を受け取る
untyped __js__("alert('hello')");
var count = 100;
untyped __js__("for (var i = 0; i < count;++i) {");
trace("hello");
untyped __js__("}");
var text = "100px";
var num = untyped __js__("parseInt(text, 10)");
79. enumでツリー構造(よくある例)
enum TreeNode<T>
{
Node(children : Array<TreeNode<T>>);
Leaf(value : T);
}
var root = Node(children: [
Node(children: [ Leaf("A"), Leaf("B") ]),
Leaf("C")
]);
function visit<T>(tree : TreeNode<T>)
{
switch (tree)
{
case Node(children):
for (x in children) visit(x);
case Leaf(value):
trace(value);
}
}
C
A B
81. その他(今回は説明を省略)
• 構造的部分型(Structural Subtyping)
• 型安全なダックタイピング。
• interfaceを使う機会がかなり減る。
• http://haxe.org/manual/struct
• using mixin
• C#の拡張メソッドそのもの。
• http://haxe.org/manual/using
• マクロ
• コンパイルタイムにゴニョゴニョする。
• ASTで弄れるので高度なゴニョりが可能。
• http://haxe.org/manual/macros
83. まとめ
• JavaScriptはいろいろつらい
• 特にメンテナンス性が低すぎる。
• Haxeを使えば大抵の問題が解決する
• 「なじみの深い」構文のおかげで、開発時に必要な
最低限度の構文を学習するコストも低い。
• Haxeの型システムやマクロなどをうまく使えば
メンテナンス性とパフォーマンスを更に高められる。
• Haxeの構文・機能について書きたいことは
たくさんあるが、全てを書ききれずに力尽きた。
• 公式ドキュメント見てね http://haxe.org/doc