関東Firefox OS勉強会 2nd

1. TypeScriptで作る
型安全FirefoxOSアプリ
2013/7/19 関東Firefox OS勉強会 2nd
ぷろぐれ

2. アジェンダ
• 自己紹介
• なぜTypeScriptなのか
• 実際のコードとデモ
CreateJSも使って
ゲーム?を作ってみまし
た

3. 自己紹介
• ぷろぐれ @progremaster
• HP: http://www.prgrssv.net
• 新卒3年目
• C#とかJavaとかが好き モバイルはほとんどやってない
• PeerCastというストリーミング配信ソフトで
ライブコーディング配信を5年くらいやっています。
http://dp.prgrssv.net ライブコーディングをやっていただける
プロい方を探しています

4. なぜTypeScriptなのか

5. @dynamitter http://www.slideshare.net/dynamis/firefox-os-app-
dev

6. FirefoxOSのアプリ
JavaScriptです。
JavaScriptです。
JavaScriptです。
大事なこと３回

7. JavaScript
他のモバイルアプリの言語と違う
使いにくい
• 型がない
• クラスがない
• 即時関数
• その他落とし穴多数
エンバグしやす
い
柔軟すぎる
Javaと
か
Objective-Cとか C#とか

8. JavaScript
JavaScript 怖い
↓
Webアプリ怖い
↓
FirefoxOSアプリ怖い
何とかできないか？

9. • CoffeeScript
• Haxe
• JSX
• Dart
altJS
altJS = コンパイルしてJavaScriptになる言語
型が無い…
型はあるけど
別言語…
• TypeScript

10. なぜTypeScriptなのか
• APIが完全互換・構文が上位互換（一部ES6互換）
• JavaScriptのノウハウが活きる
• 型付き
• エラーチェックで品質を底上げできる
• インテリセンス（入力補完）
class Xxxx
{
...
}
() => { ... }
Visual Studio
WebStorm
他

11. 互換性 型
付
き
API 構文
CoffeeScript ○ × ×
Haxe × △ ○
JSX △ △ ○
Dart × × ○
TypeScript ○ ○ ○
なぜTypeScriptなのか

12. なぜTypeScriptなのか
• その他
• アンダース・ヘルスバーグ氏率いるMicrosoftが開発
• 出力JavaScriptが美しい
• 良いJavaScriptコードのお手本レベル
• Node・RequireJSのモジュールを出力可能
• ゆるいinterface
Delphi C#の父

13. 実際のコードとデモ
TypeScript/CreateJS+RequireJS
パッケージ型アプリ

14. プロジェクト
ディレクトリ
FirefoxOSアプリ
TypeScript
型定義
(C言語の
ヘッダーに相当)
ビルド設定
テスト用Webサーバー
（割愛）
https://github.com
/progre/hiyokorun

15. TypeScript JavaScript

16. デモ
https://marketplace.firefox.com/app/chickens-race/

17. 所感
• 型があると安心
• VisualStudioのバグ
• メモリリーク・型情報の引き当て
• Webアプリそのまんま過ぎ
• この勉強会何の勉強会だっけ？
V1.0に期待！

18. まとめ
TypeScript = 型があってクラスがあって怖くないJavaScript
↓
Webアプリ怖くない！
↓
FirefoxOSアプリ怖くない！

19. 参考資料
• 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/

20. 参考資料
• 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

21. ご清聴ありがとうございました