0
TypeScriptで作る
型安全FirefoxOSアプリ
2013/7/19 関東Firefox OS勉強会 2nd
ぷろぐれ
アジェンダ
• 自己紹介
• なぜTypeScriptなのか
• 実際のコードとデモ
CreateJSも使って
ゲーム?を作ってみまし
た
自己紹介
• ぷろぐれ @progremaster
• HP: http://www.prgrssv.net
• 新卒3年目
• C#とかJavaとかが好き モバイルはほとんどやってない
• PeerCastというストリーミング配信ソフトで
ラ...
なぜ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
{
....
互換性 型
付
き
API 構文
CoffeeScript ○ × ×
Haxe × △ ○
JSX △ △ ○
Dart × × ○
TypeScript ○ ○ ○
なぜTypeScriptなのか
なぜTypeScriptなのか
• その他
• アンダース・ヘルスバーグ氏率いるMicrosoftが開発
• 出力JavaScriptが美しい
• 良いJavaScriptコードのお手本レベル
• Node・RequireJSのモジュールを出力...
実際のコードとデモ
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/
...
参考資料
• JavaScriptを書くならTypeScriptを使え! - 部屋とボー
ドゲームと私と酒と泪と男と女
• https://sites.google.com/site/jun1sboardgames/programming/ty...
ご清聴ありがとうございました
Upcoming SlideShare
Loading in...5
×

TypeScriptで作る型安全FirefoxOSアプリ

2,476

Published on

関東Firefox OS勉強会 2nd

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,476
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
8
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "TypeScriptで作る型安全FirefoxOSアプリ"

  1. 1. TypeScriptで作る 型安全FirefoxOSアプリ 2013/7/19 関東Firefox OS勉強会 2nd ぷろぐれ
  2. 2. アジェンダ • 自己紹介 • なぜTypeScriptなのか • 実際のコードとデモ CreateJSも使って ゲーム?を作ってみまし た
  3. 3. 自己紹介 • ぷろぐれ @progremaster • HP: http://www.prgrssv.net • 新卒3年目 • C#とかJavaとかが好き モバイルはほとんどやってない • PeerCastというストリーミング配信ソフトで ライブコーディング配信を5年くらいやっています。 http://dp.prgrssv.net ライブコーディングをやっていただける プロい方を探しています
  4. 4. なぜTypeScriptなのか
  5. 5. @dynamitter http://www.slideshare.net/dynamis/firefox-os-app- dev
  6. 6. FirefoxOSのアプリ JavaScriptです。 JavaScriptです。 JavaScriptです。 大事なこと3回
  7. 7. JavaScript 他のモバイルアプリの言語と違う 使いにくい • 型がない • クラスがない • 即時関数 • その他落とし穴多数 エンバグしやす い 柔軟すぎる Javaと か Objective-Cとか C#とか
  8. 8. JavaScript JavaScript 怖い ↓ Webアプリ怖い ↓ FirefoxOSアプリ怖い 何とかできないか?
  9. 9. • CoffeeScript • Haxe • JSX • Dart altJS altJS = コンパイルしてJavaScriptになる言語 型が無い… 型はあるけど 別言語… • TypeScript
  10. 10. なぜTypeScriptなのか • APIが完全互換・構文が上位互換(一部ES6互換) • JavaScriptのノウハウが活きる • 型付き • エラーチェックで品質を底上げできる • インテリセンス(入力補完) class Xxxx { ... } () => { ... } Visual Studio WebStorm 他
  11. 11. 互換性 型 付 き API 構文 CoffeeScript ○ × × Haxe × △ ○ JSX △ △ ○ Dart × × ○ TypeScript ○ ○ ○ なぜTypeScriptなのか
  12. 12. なぜTypeScriptなのか • その他 • アンダース・ヘルスバーグ氏率いるMicrosoftが開発 • 出力JavaScriptが美しい • 良いJavaScriptコードのお手本レベル • Node・RequireJSのモジュールを出力可能 • ゆるいinterface Delphi C#の父
  13. 13. 実際のコードとデモ TypeScript/CreateJS+RequireJS パッケージ型アプリ
  14. 14. プロジェクト ディレクトリ FirefoxOSアプリ TypeScript 型定義 (C言語の ヘッダーに相当) ビルド設定 テスト用Webサーバー (割愛) https://github.com /progre/hiyokorun
  15. 15. TypeScript JavaScript
  16. 16. デモ https://marketplace.firefox.com/app/chickens-race/
  17. 17. 所感 • 型があると安心 • VisualStudioのバグ • メモリリーク・型情報の引き当て • Webアプリそのまんま過ぎ • この勉強会何の勉強会だっけ? V1.0に期待!
  18. 18. まとめ TypeScript = 型があってクラスがあって怖くないJavaScript ↓ Webアプリ怖くない! ↓ FirefoxOSアプリ怖くない!
  19. 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. 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. 21. ご清聴ありがとうございました
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×