TypeScript 勉強会

TypeScript 勉強会

@v vakame

Saturday, January 26, 13

俺の名前を言ってみろ

わかめまさひろ
@v vakame
GoogleAppEngine

Android

alterJS

アンケート

• JavaScriptバリバリです

• Java+Servletバリバリです

• Java+Androidバリバリです

• C言語ならまかせろー！

• ハードウェアなら任せろー！


今日の約束

• 話の途中でも質問して良い

• 挙手はする

• JavaScriptの質問でもまぁよし

• Twitterをちょっと盛る

• #tsjpstudy


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


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


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


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


型がある
• リファクタリングした時安心

• IDEが賢くなる余地が大きい

• シンボルのリネーム

• メソッドシグニチャの変更

• 100%アクセス可能な要素のみ補完

• 作り始めた時 != 設計の決定


TypeScript以外は？

• まとめて alterJS と呼ばれるらしい

• CoffeeScript
• Dart
• JSX
• Haxe


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


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

JSXは？
• DeNAが作ってる

• 動作速度最優先！強力な最適化！

• それなりにES6っぽい見た目


• 開発のリソースがちょっと足りなさげ


Haxeは？
• OCamlで書かれている

• 言語仕様的にはかなり美しい


• 色々な言語に変換できる

• 優秀なIDEがWindowsにしかない


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

残念ながら…

JavaScriptわからずに開発できるほど甘くはないぜ
JavaScriptも基本教養として学習しましょう。
TypeScriptを踏み台にするのは大アリ


TypeScriptの実践へ


既存資産の活用
• 型指定ファイルを作成

• xxx.d.ts という拡張子

• お手本はたくさんある

• 普通のtsコンパイルで.d.tsの出力も

• Roadmapでは0.9.xで集積サイトが


TypeScript実装
• この後松崎さんから詳しく

• TypeScriptはTypeScriptで書かれてる

• コンパイラ = JavaScript

• ブラウザ上でコンパイラが動く！

• Playground
• あとまぁNode.jsでも動く


構造的部分型

• シグニチャあってればまぁいいか

• interface Hoge { name: string }
• function foo(hoge: Hoge) { ... }
• foo({ name: “羊”}); // OK！

• このお陰で既存資産の活用が現実的


ライブコーディング！

• 時間ある？

• GAE/J&Slim3 + TypeScript&AngularJS
• 作りかけのアプリに1機能追加してみる


参考
• G+ TypeScript
• http://vvaka.me/U0LuCB
• わかめはてブ

• http://vvaka.me/WOYMmL
• TypeScript クイックガイド

• http://phyzkit.net/typescript/


参考
• Playground
• http://www.typescriptlang.org/
Playground/
• Spec
• http://vvaka.me/UL7KUz
• DeﬁnitelyTyped
• http://vvaka.me/WYHzGT
• 今日の元ネタ
• http://vvaka.me/VokmDn


TypeScript 勉強会

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie TypeScript 勉強会

Ähnlich wie TypeScript 勉強会 (20)

Mehr von Masahiro Wakame

Mehr von Masahiro Wakame (20)

TypeScript 勉強会