TypeScriptで作る
型安全FirefoxOSアプリ
2013/7/19 関東Firefox OS勉強会 2nd
ぷろぐれ
アジェンダ
• 自己紹介
• なぜTypeScriptなのか
• 実際のコードとデモ
CreateJSも使って
ゲーム?を作ってみまし
た
自己紹介
• ぷろぐれ @progremaster
• HP: http://www.prgrssv.net
• 新卒3年目
• C#とかJavaとかが好き モバイルはほとんどやってない
• PeerCastというストリーミング配信ソフトで
ライブコーディング配信を5年くらいやっています。
http://dp.prgrssv.net ライブコーディングをやっていただける
プロい方を探しています
なぜTypeScriptなのか
@dynamitter http://www.slideshare.net/dynamis/firefox-os-app-
dev
FirefoxOSのアプリ
JavaScriptです。
JavaScriptです。
JavaScriptです。
大事なこと3回
JavaScript
他のモバイルアプリの言語と違う
使いにくい
• 型がない
• クラスがない
• 即時関数
• その他落とし穴多数
エンバグしやす
い
柔軟すぎる
Javaと
か
Objective-Cとか C#とか
JavaScript
JavaScript 怖い
↓
Webアプリ怖い
↓
FirefoxOSアプリ怖い
何とかできないか?
• CoffeeScript
• Haxe
• JSX
• Dart
altJS
altJS = コンパイルしてJavaScriptになる言語
型が無い…
型はあるけど
別言語…
• TypeScript
なぜTypeScriptなのか
• APIが完全互換・構文が上位互換(一部ES6互換)
• JavaScriptのノウハウが活きる
• 型付き
• エラーチェックで品質を底上げできる
• インテリセンス(入力補完)
class Xxxx
{
...
}
() => { ... }
Visual Studio
WebStorm
他
互換性 型
付
き
API 構文
CoffeeScript ○ × ×
Haxe × △ ○
JSX △ △ ○
Dart × × ○
TypeScript ○ ○ ○
なぜTypeScriptなのか
なぜTypeScriptなのか
• その他
• アンダース・ヘルスバーグ氏率いるMicrosoftが開発
• 出力JavaScriptが美しい
• 良いJavaScriptコードのお手本レベル
• Node・RequireJSのモジュールを出力可能
• ゆるいinterface
Delphi C#の父
実際のコードとデモ
TypeScript/CreateJS+RequireJS
パッケージ型アプリ
プロジェクト
ディレクトリ
FirefoxOSアプリ
TypeScript
型定義
(C言語の
ヘッダーに相当)
ビルド設定
テスト用Webサーバー
(割愛)
https://github.com
/progre/hiyokorun
TypeScript JavaScript
デモ
https://marketplace.firefox.com/app/chickens-race/
所感
• 型があると安心
• VisualStudioのバグ
• メモリリーク・型情報の引き当て
• Webアプリそのまんま過ぎ
• この勉強会何の勉強会だっけ?
V1.0に期待!
まとめ
TypeScript = 型があってクラスがあって怖くないJavaScript
↓
Webアプリ怖くない!
↓
FirefoxOSアプリ怖くない!
参考資料
• altJS - Web coding without JavaScript.
• http://altjs.org
• Top Languages · GitHub
• https://github.com/languages/
• ES Wiki
• http://wiki.ecmascript.org/doku.php
• TypeScript
• http://www.typescriptlang.org/
参考資料
• JavaScriptを書くならTypeScriptを使え! - 部屋とボー
ドゲームと私と酒と泪と男と女
• https://sites.google.com/site/jun1sboardgames/programming/typescript
• TypeScriptクイックガイド
• http://phyzkit.net/typescript/index.html
• AngularJS+TypeScript
• http://www.slideshare.net/vvakame/angularjs-1year?from_search=11
ご清聴ありがとうございました

TypeScriptで作る型安全FirefoxOSアプリ