Your SlideShare is downloading. ×
  • Like
3日時間をもらったのでTypeScriptを触ってみた
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

3日時間をもらったのでTypeScriptを触ってみた

  • 19,361 views
Published

Microsoft社の新言語TypeScriptについて社内の自主研究発表会で発表した内容です。 …

Microsoft社の新言語TypeScriptについて社内の自主研究発表会で発表した内容です。
対象バージョンは V0.9(2013年10月時点の最新)。
比較対象としてCoffeeScript, Haxe, Dartなどにも触れています。

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
19,361
On SlideShare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
60
Comments
0
Likes
38

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 3日時間をもらったので TypeScriptを触ってみた イースト株式会社 コンテンツビジネス事業部 加藤靖 初版 2013年10月10日 最終更新 2013年10月15日
  • 2. AGENDA 1. TypeScriptとは 1. 概要 2. 視点 2. TypeScriptの言語機能 3. 比較 1. 2. CoffeeScript 3. Haxe 4. 4. C# Dart まとめ
  • 3. 前提知識  使用経験 JavaScript C# Visual Studio
  • 4. TypeScriptとは
  • 5. TypeScript概要  Microsoft謹製の新しいプログラミング言語  JavaScriptのスーパーセット  開発者は Anders Hejlsberg 氏=C#の生みの親  特徴  クラスベースオブジェクト指向  静的型付け  JavaScriptに変換されて動作する(トランスコンパイル型)  微妙な仕様はそのまま    アナウンスは行っているが いわゆる言語デザイナではなさそう。 (2013/10/15追記) 変数の巻き上げ、for文のスコープ、etc… ECMAScript 6の仕様を意識。 Node.jsとVisual Studio 2012/2013の公式パッケージ
  • 6. ライバル JavaScriptの代替となる言語をaltJSと俗称する。 よく話題になるのは以下。  CoffeeScript  ActionScript 3 (Adobe)  Haxe (AS3派生)  Dart (Google) 現時点ではCoffeeScriptが知名度・実用事例ともにNo. 1 。
  • 7. 視点  プログラミング言語の新地平  MicrosoftによるWeb界の領土拡大  従来のWindows/C#プログラマをWebプログラマに転身させる  よそのWebプログラマを自社陣営に取り込む Wiindows 8~ IE/Safari/Chrome/Firefox C# TypeScript JavaScript Visual Studio 201X
  • 8. TypeScriptとVisual Studioの足並み 2012/8/15 Visual Studio 2012リリース 2012/10/1 TypeScript発表。同時にVS2012に対応。 2013/6/20 TypeScript Ver. 0.9リリース。大幅な機能強化。 2013/6/26 Visual Studio 2013Previewリリース 2013/6/28 TypeScript Ver. 0.9.0.1リリース 2013/7/23 TypeScript VS2013Preview対応 2013/8/6 TypeScript Ver. 0.9.1リリース。 2013/8/21 TypeScript Ver. 0.9.1.1リリース。 2013/9/9 Visual Studio 2013RCリリース 2013/9/9 TypeScript VS2013RC対応
  • 9. VS2013とのシームレスな連携  プロジェクトテンプレート  コード補完  リアルタイムエラー表示  ビルド・デバッグ起動ボタン  デバッガ  Visual Studio上で TypeScriptのままデバッグできる
  • 10. Chromeでもデバッグできちゃいました SourceMaps を利用しているため ふつうにTypeScriptのままデバッグできます。 ※SourceMapsとは  もともとはJavaScriptやCSS(SCSS)ファイルの最小化・結合を行った際に、 ソースの対応づけを行う仕組み。  Chrome, Firefox, Operaがサポート。
  • 11. と思ったら CoffeeScript がいつのまにか SourceMaps に対応していた。 もうCoffeeScriptとChromeデバッガでいいのでは? 使い慣れた VS 上でデバッグできるのは TypeScript のみ。 また、型チェック・コード補間もろもろとのシナジーもある。 オールインワンの環境としては VS + TS に及ぶものはない。 専用IDEは、Haxe, Dart にもあるが(Flash Studio, Dart Editor―eclipse派生)、 VS 並に普及するのはだいぶ先だろう。
  • 12. TypeScriptの言語機能 自分で触りたい人はこちら↓
  • 13. 言語機能一覧(Ver. 0.9時点)  型アノテーション  構造的部分型  any型  引数プロパティ宣言  型アサーション  関数オーバーロード  クラス、インターフェース  デフォルト引数  継承、実現  可変長引数  ジェネリクス  定数によるオーバーロード  アクセス修飾子  アロー関数式  列挙型  モジュール機構  オブジェクト型リテラル  アンビエント宣言  型推論  ドキュメントコメント
  • 14. 静的型付け  型アノテーション  TypeScriptの心臓。  コンパイラによる型チェック  IDEによるコード補完  コンパイル後は残らない。  使わないというオプション。  any型 = ただのJavaScript Object
  • 15. クラス、インターフェースは慣れたもの ただしいくつか注意が必要 TypeScript JavaScript
  • 16. 継承、実現の記法がJava!  extends, implements キーワード  “:”ではない!  型アノテーションと重なったのか、 予約語があったからなのか…… ECMA Script 5 の仕様に従っただけと思われる。 (2013/10/15追記)
  • 17. アクセス修飾子はpublicとprivateだけ  protected はロードマップにある。  internal(package)は モジュール機構で制御する。
  • 18. Thisの意味とアロー関数式  通常のfunction式    Thisを引き継がない。 JavaScript互換。 アロー関数式  記法はC#のラムダ式に準ずる。  Thisを外のスコープから引き継ぐ。
  • 19. プロパティ(set/get)  本物のプロパティ。  JavaScriptの関数方式ではない。  実装はdefineProperty. (ECMAScript 5)  オールドブラウザでは動かない。
  • 20. オブジェクト型リテラル  ユニーク  C#の用語を使うと 「メンバへの代入が可能な 匿名インターフェース」  型安全性を保ったまま JS流のコードが書ける。   というかコード補完が効く。 右以外のシグニチャ  メソッドの代替記法 a():string / a: ()=>string  関数呼び出し ()  インデックス []  コンストラクタ new()
  • 21. 構造的部分型  クラスAがクラスBと継承関係になくても シグニチャさえ満たしていればBとして振る舞える機能。   関連:nominal typing, duck typing Ocaml(F#の元)の特徴。    C++テンプレート Scala オブジェクト型リテラルと組み合わせてJavaScript流儀のコードが書ける。 ※そもそもオブジェクト型リテラルにextends/implements書けない。  組み込み型やライブラリコードへの適用。
  • 22. 型推論は信じるに値しない • 宣言と同時に初期化される変数以外 すべて型アノテーションを付ける のが吉。 • 暇な人は 右のコードを試してみてください。
  • 23. 関数オーバーロードとその仲間たち  微妙 とだけ憶えてください。  定義部分は一つで、引数の型判別は 全部自分で書かないといけない。  あくまで外部向けという感じ。  仕様変更も多い。
  • 24. 定数オーバーロード  ユニーク  Ver. 0.9から。  引数の定数値で振り分ける オーバーロード。  Visual Studio上でも同様の 型チェック・コード補完が働く。
  • 25. JavaScriptでも使えた! TypeScriptプロジェクト内に限り、 JavaScriptで書いていても同じように認識される。 TypeScriptの新機能というよりは Visual Studioの機能強化ありきと見るべき?
  • 26. モジュールと名前空間 期待通りの振る舞い TypeScript ※名前空間のネストにも対応。 JavaScript
  • 27. import/export  コード例は略。  よろしくない。実装を急いだ感じ。  ECMAScript 6に劣る機能と互換性のない文法。  ロードマップにはECMAScript 6にあわせる旨がある。  Usingの見た目とNode.jsサポートを優先したのでは?
  • 28. JavaScriptのライブラリも使えます。  外部ファイルに型情報を記述する(アンビエント宣言という)。   有名どころは有志がメンテ。   ファイルの拡張子はd.ts jQuery, knockout, underscore, backbone, … 自社ライブラリはがんばるしかない。
  • 29. 他言語との比較 TypeScriptの何が不満なのか
  • 30. Microsoft言語の中核 ― C#  演算子オーバーロード  ユーザー定義型変換  abstract, sealed, override  readonly, const  ジェネリクスの制約。  yield   ECMAScript 6にiterator(for-of)とgenerator(function*, yield)がある。 LINQ  APIとしては同様のものがある(map/filter in ECMAScript 5)。   フォーラムではiterator/generatorでやるべきという意見も。 メタデータ(属性)   C#でも新しい機能(~>3.5)ばかり。 入るべきものは将来入るだろう。 ECMAScript 5, 6にプロパティ属性がある。あくまで処理系向けで、ユーザー定義のものではなかった気がするが。 拡張メソッド  mixinがロードマップにある。
  • 31. 明日から勉強しようと思ってX年 ― CoffeeScript  narrow arrow(->)  range型, 配列スライス  存在演算子(?)  文字列補間  ヒアドキュメント  if 修飾子  配列内包表記 どれも「とても便利なシンタックスシュガー」 機能としては負けてない。 TSとCSで姿勢が対極的。
  • 32. えー、これFlashなのぉ? ― Haxe 機能だけならaltJS随一。 Flashが地盤であることが惜しまれる。  Flash出力、Flash Studio対応。  C++出力、PHP出力、etc  強力な型推論  mixin  代数的データ型(Powerful enumと呼ばれる)  メタデータ  イテレータ  マクロ  インライン関数  最適化
  • 33. えっと、これもうJavaScriptじゃないですよね .NET共通言語基盤(CLI)の ― Dart 競合相手と見るべきでは。  ドキュメントコメントの markdown文法 final(readonly), const  エントリポイント(main関数) 組み込みのList, Mapとコレクション リテラル  並行実行モデル(Erlang-like)  専用のVM  ビット演算子  標準ライブラリ  カスケード演算子(..)  dart:collection, dart:io, dart:async  演算子オーバーロード  dart:html, dart:svg, dart:indexed_db  Lexical scope  文字列補間  typedef  メタデータ  C++/Java系の文法  抽象クラス    クライアントアプリケーション フレームワーク  モジュール化とオンライン共有  最適化
  • 34. まとめ
  • 35. MSDNのコードサンプルが C#とTypeScriptになってからが本番  あって当然の機能が揃ったところ。 プレ.NET 2.0感  強みはVisual Studio.  現状プロダクトユースに使うには怖い。  バグが多い。  破壊的変更も頻繁 Ver. 0.9でboolがbooleanに!
  • 36. 一方、その戦略的価値は高い ディベロッパ向けの戦略の情報源として  Microsoft は Web をどうするつもりなのか 将来の技術的礎の先取りとして  次期 Visual Studio の JavaScript サポート  .NETファミリーの新機能
  • 37. Appendix A 参考リンク
  • 38. ファーストガイド  インストール  まずはブラウザ上で動かしてみよう。   Visual Studio で動かしたい人はこちらから。   http://www.typescriptlang.org/Playground/ http://www.microsoft.com/en-us/download/details.aspx?id=34790 参考  MSDNの入門記事   http://msdn.microsoft.com/ja-jp/magazine/jj883955.aspx 公式チュートリアル  http://www.typescriptlang.org/tutorial/
  • 39. より詳しく知りたい人  公式ページ    http://www.typescriptlang.org/ http://typescript.codeplex.com/ TypeScript クイックガイド   http://phyzkit.net/typescript/ 日本 TypeScript ユーザー会  https://groups.google.com/forum/#!forum/typescript-japan
  • 40. altJS  CoffeeScript   Haxe   http://haxe.org/ref Dart   http://coffeescript.org/#language https://www.dartlang.org/docs/dart-up-and-running/contents/ch02.html 比較記事をいくつか   http://www.infoq.com/jp/news/2012/10/typescript-debate   http://html5experts.jp/clockmaker/2183/ http://codeforhire.com/2013/06/18/coffeescript-vs-typescript-vs-dart/ Thoughworks Rader  http://thoughtworks.fileburst.com/assets/technology-radar-may-2013.pdf CoffeeScriptがTrialに。Dartは今期Holdから落選。TypeScriptは触れられてもいない。
  • 41. Appendix B スライドで紹介できなかったTypeScriptの機能
  • 42. 型付けなしの世界  any型  すべての型チェックが スルーされる。  要はJavaScriptのObject.  用途  JavaScriptとのやり取り  戻り値の型が不定な関数(Mixed)  コンパイルエラーの回避
  • 43. 型変換  暗黙の型変換は基本なし。    安全より Date型とかで困る。 明示的に変換したい場合  演算子 <T>  型アサーションと呼ばれる。  コンパイル後は何も残らない。  Any経由でどんな変換も可能。
  • 44. スコープ  varなしはグローバル。  {}はスコープを作らない。  メンバ参照時はthis必須。  静的メンバ参照時はクラス名必須。  要するにイケてない。
  • 45. 引数プロパティ宣言  コンストラクタ引数に アクセス修飾子をつけると 自動的にメンバ変数ができる  CoffeeScriptを意識?  F#(Ocaml)のレコード型を思い出す
  • 46. 列挙型はC#そのまま    Ver. 0.9から。 列挙型自身はオブジェクトに、 列挙値はそのプロパティに コンパイルされる。 enum NodeType { ELEMENT_NODE = 1, ATTRIBUTE_NODE, TEXT_NODE, } 実行時の型はnumber.  相互変換が可能。  値の指定が可能。 if (node.nodeType == NodeType.ELEMENT_NODE) { ... }
  • 47. ジェネリクスもほぼC#  Ver. 0.9から  記法は<T>  関数、クラス、インターフェース、 クロージャ  Array<T>, NodeListOf<T>(DOM)  制約はまだextendsのみ?
  • 48. ドキュメントコメントはほぼC#  Visual Studioのサポート!  /** … */の形式。  /// はあるのか?  タグは現状@paramのみらしい。