TypeScriptで作る型安全FirefoxOSアプリ

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 ライブコーディングをやっていただける
プロい方を探しています

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

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

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 ○ ○ ○

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

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

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

デモ
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アプリ

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to TypeScriptで作る型安全FirefoxOSアプリ (20)

TypeScriptで作る型安全FirefoxOSアプリ