1. TypeScript 勉強会
@v vakame
Saturday, January 26, 13

2. 俺の名前を言ってみろ
わかめ まさひろ
@v vakame
GoogleAppEngine
Android
alterJS
Saturday, January 26, 13

3. アンケート
• JavaScriptバリバリです
• Java+Servletバリバリです
• Java+Androidバリバリです
• C言語ならまかせろー！
• ハードウェアなら任せろー！
Saturday, January 26, 13

4. 今日の約束
• 話の途中でも質問して良い
• 挙手はする
• JavaScriptの質問でもまぁよし
• Twitterをちょっと盛る
• #tsjpstudy
Saturday, January 26, 13

5. Webアプリの時代
• Webアプリがどんどんリッチに
• Google Maps
• GoogleApps
• Facebook
• 大規模開発の必要性
• コードたくさん
• 関係者多数
• サーバの土管化 (JSON吐く機械)
Saturday, January 26, 13

6. JavaScript sucks!
• JavaScriptは確かに良い言語だよ
• しかし腐ってる部分もクソ多い
• packageとかnamespaceとかない
• 綺麗なコード書ける＝上級者
• prototypeのOOP？？ナニソレ
• 型( ﾟ!ﾟ)ｸﾚ 動的型付とかないわ
• なのにブラウザ上で動くのはJSだけ
Saturday, January 26, 13

7. TypeScriptって？
• Anders Hejlsberg開発
• MSのC#の作者
• JavaScriptに変換して実行する
• ECMAScript6を意識
• 未来が来ないなら俺が行く！
• 現行ブラウザは 3.1 がほとんど
• JavaScriptはイケてない！
Saturday, January 26, 13

8. TypeScript the Great
• JSのSuperSet(上位互換)だよ！
• 全てのJSはTypeScriptである
• 可読性の高い変換後JSコード
• moduleあるよ！
• classもあるよ！継承もあるよ！
• 型もあるよ！
• 既存の資産も捨てなくて済むよ！
• TypeScriptはロックインもされない！
Saturday, January 26, 13

9. 型がある
• リファクタリングした時安心
• IDEが賢くなる余地が大きい
• シンボルのリネーム
• メソッドシグニチャの変更
• 100%アクセス可能な要素のみ補完
• 作り始めた時 != 設計の決定
Saturday, January 26, 13

10. TypeScript以外は？
• まとめて alterJS と呼ばれるらしい
• CoffeeScript
• Dart
• JSX
• Haxe
Saturday, January 26, 13

11. CoffeeScriptは？
• Better JavaScript
• インデントベース
• 可読性の高い変換後JSコード
• Railsで標準採用
• classベースのOOP
• 既存の資産も活かせる
• TG社でもみんなが使ってる
• 惜しむらくは型がない！
Saturday, January 26, 13

12. Dartは？
• Google先生が作ってる
• 将来的にJavaScriptを完全に置き換え
• 全く別言語からの変換
• 変換後JSはかなり読めない
• Dartにロックインされる
• IDEが並行で開発されている！！
• 言語仕様が後発のくせに芋っぽい
Saturday, January 26, 13

13. JSXは？
• DeNAが作ってる
• 動作速度最優先！強力な最適化！
• それなりにES6っぽい見た目
• 変換後JSはかなり読めない
• 開発のリソースがちょっと足りなさげ
Saturday, January 26, 13

14. Haxeは？
• OCamlで書かれている
• 言語仕様的にはかなり美しい
• 変換後JSはかなり読めない
• 色々な言語に変換できる
• 優秀なIDEがWindowsにしかない
Saturday, January 26, 13

15. まとめ
CoffeeScript
僕Python派閥なんで…
Dart
そもそもJavaScript捨てる予定だしー
JSX
お前に足りないものは情熱思想理念頭脳気品優
Haxe
僕JS以外にも狙い定めてるし僕の言語仕様
超美しいよ！なんてったってOCamlだしね！
TypeScript
JavaScript後進の優等生ざます
Saturday, January 26, 13

16. 残念ながら…
JavaScriptわからずに開発できるほど甘くはないぜ
JavaScriptも基本教養として学習しましょう。
TypeScriptを踏み台にするのは大アリ
Saturday, January 26, 13

17. TypeScriptの実践へ
Saturday, January 26, 13

18. 既存資産の活用
• 型指定ファイルを作成
• xxx.d.ts という拡張子
• お手本はたくさんある
• 普通のtsコンパイルで.d.tsの出力も
• Roadmapでは0.9.xで集積サイトが
Saturday, January 26, 13

19. TypeScript実装
• この後松崎さんから詳しく
• TypeScriptはTypeScriptで書かれてる
• コンパイラ = JavaScript
• ブラウザ上でコンパイラが動く！
• Playground
• あとまぁNode.jsでも動く
Saturday, January 26, 13

20. 構造的部分型
• シグニチャあってればまぁいいか
• interface Hoge { name: string }
• function foo(hoge: Hoge) { ... }
• foo({ name: “羊”}); // OK！
• このお陰で既存資産の活用が現実的
Saturday, January 26, 13

21. ライブコーディング！
• 時間ある？
• GAE/J&Slim3 + TypeScript&AngularJS
• 作りかけのアプリに1機能追加してみる
Saturday, January 26, 13

22. 参考
• G+ TypeScript
• http://vvaka.me/U0LuCB
• わかめはてブ
• http://vvaka.me/WOYMmL
• TypeScript クイックガイド
• http://phyzkit.net/typescript/
Saturday, January 26, 13

23. 参考
• Playground
• http://www.typescriptlang.org/
Playground/
• Spec
• http://vvaka.me/UL7KUz
• DefinitelyTyped
• http://vvaka.me/WYHzGT
• 今日の元ネタ
• http://vvaka.me/VokmDn
Saturday, January 26, 13