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