Upload
masahiro-wakame
View
9.393
Download
0
Embed Size (px)
Citation preview
TypeScript 勉強会
@vvakame
Saturday, January 26, 13
俺の名前を言ってみろ
わかめ まさひろ@vvakame
GoogleAppEngine
Android
alterJSSaturday, January 26, 13
アンケート
• JavaScriptバリバリです
• Java+Servletバリバリです
• Java+Androidバリバリです
• C言語ならまかせろー!
• ハードウェアなら任せろー!
Saturday, January 26, 13
今日の約束
• 話の途中でも質問して良い
• 挙手はする
• JavaScriptの質問でもまぁよし
• Twitterをちょっと盛る
• #tsjpstudy
Saturday, January 26, 13
Webアプリの時代• Webアプリがどんどんリッチに
• Google Maps• GoogleApps• Facebook
• 大規模開発の必要性• コードたくさん• 関係者多数
• サーバの土管化 (JSON吐く機械)
Saturday, January 26, 13
JavaScript sucks!• JavaScriptは確かに良い言語だよ• しかし腐ってる部分もクソ多い• packageとかnamespaceとかない
• 綺麗なコード書ける=上級者• prototypeのOOP??ナニソレ• 型( ゚!゚)クレ 動的型付とかないわ• なのにブラウザ上で動くのはJSだけ
Saturday, January 26, 13
TypeScriptって?• Anders Hejlsberg開発
• MSのC#の作者• JavaScriptに変換して実行する• ECMAScript6を意識
• 未来が来ないなら俺が行く!• 現行ブラウザは 3.1 がほとんど• JavaScriptはイケてない!
Saturday, January 26, 13
TypeScript the Great• JSのSuperSet(上位互換)だよ!
• 全てのJSはTypeScriptである• 可読性の高い変換後JSコード• moduleあるよ!• classもあるよ!継承もあるよ!• 型もあるよ!• 既存の資産も捨てなくて済むよ!• TypeScriptはロックインもされない!
Saturday, January 26, 13
型がある• リファクタリングした時安心
• IDEが賢くなる余地が大きい
• シンボルのリネーム
• メソッドシグニチャの変更
• 100%アクセス可能な要素のみ補完
• 作り始めた時 != 設計の決定
Saturday, January 26, 13
TypeScript以外は?
• まとめて alterJS と呼ばれるらしい
• CoffeeScript• Dart• JSX• Haxe
Saturday, January 26, 13
CoffeeScriptは?• Better JavaScript• インデントベース• 可読性の高い変換後JSコード• Railsで標準採用• classベースのOOP• 既存の資産も活かせる• TG社でもみんなが使ってる• 惜しむらくは型がない!
Saturday, January 26, 13
Dartは?• Google先生が作ってる
• 将来的にJavaScriptを完全に置き換え
• 全く別言語からの変換• 変換後JSはかなり読めない
• Dartにロックインされる• IDEが並行で開発されている!!
• 言語仕様が後発のくせに芋っぽい
Saturday, January 26, 13
JSXは?• DeNAが作ってる
• 動作速度最優先!強力な最適化!
• それなりにES6っぽい見た目
• 変換後JSはかなり読めない
• 開発のリソースがちょっと足りなさげ
Saturday, January 26, 13
Haxeは?• OCamlで書かれている
• 言語仕様的にはかなり美しい
• 変換後JSはかなり読めない
• 色々な言語に変換できる
• 優秀なIDEがWindowsにしかない
Saturday, January 26, 13
まとめCoffeeScript
僕Python派閥なんで…Dart
そもそもJavaScript捨てる予定だしーJSX
お前に足りないものは情熱思想理念頭脳気品優Haxe
僕JS以外にも狙い定めてるし僕の言語仕様超美しいよ!なんてったってOCamlだしね!
TypeScriptJavaScript後進の優等生ざます
Saturday, January 26, 13
残念ながら…
JavaScriptわからずに開発できるほど甘くはないぜJavaScriptも基本教養として学習しましょう。
TypeScriptを踏み台にするのは大アリ
Saturday, January 26, 13
TypeScriptの実践へ
Saturday, January 26, 13
既存資産の活用• 型指定ファイルを作成
• xxx.d.ts という拡張子
• お手本はたくさんある
• 普通のtsコンパイルで.d.tsの出力も
• Roadmapでは0.9.xで集積サイトが
Saturday, January 26, 13
TypeScript実装• この後松崎さんから詳しく
• TypeScriptはTypeScriptで書かれてる
• コンパイラ = JavaScript
• ブラウザ上でコンパイラが動く!
• Playground• あとまぁNode.jsでも動く
Saturday, January 26, 13
構造的部分型
• シグニチャあってればまぁいいか
• interface Hoge { name: string }• function foo(hoge: Hoge) { ... }• foo({ name: “羊”}); // OK!
• このお陰で既存資産の活用が現実的
Saturday, January 26, 13
ライブコーディング!
• 時間ある?
• GAE/J&Slim3 + TypeScript&AngularJS• 作りかけのアプリに1機能追加してみる
Saturday, January 26, 13
参考• G+ TypeScript
• http://vvaka.me/U0LuCB
• わかめはてブ
• http://vvaka.me/WOYMmL
• TypeScript クイックガイド
• http://phyzkit.net/typescript/
Saturday, January 26, 13
参考• Playground
• http://www.typescriptlang.org/Playground/
• Spec• http://vvaka.me/UL7KUz
• DefinitelyTyped• http://vvaka.me/WYHzGT
• 今日の元ネタ• http://vvaka.me/VokmDn
Saturday, January 26, 13