altJS福岡勉強会第１回で使用したスライド ※発表用なので言葉足らずな部分あり http://www.zusaar.com/event/6467004

1. TypeScriptについて
2014年08月02日
©越後屋 1

2. 自己紹介
©越後屋 2
長濱 義道
別名、越後屋です。
主にBtoBプロジェクトのPMやってます。
PMP(Project Management Professional) #1416635
コーディングは好きですが、第一線は退いています。(という体)
プレイングマネージャなんてものは身も心もプロジェクトも潰します。
最近は技術者のはずなのにしゃべって食べている感がとてもあります。
Twitter：gnanormal
真面目に仕事関係のつぶやきをしています。

3. Agenda
• はじめに
• TypeScriptとは
• 他のAltJSとの比較
• 結果
• まとめ
©越後屋 3

4. はじめに
 概要説明が主目的のため、
サンプルソースなどは用意していません
 TypeScriptの細かい言語仕様、文法については
割愛させていただきます
 AngularJSについては @itoKami1123さんへ
©越後屋 4

5. TypeScriptとは
・JavaScriptのシンタックスシュガー
(CoffeeScriptの後発)
・大規模開発向け
(設計思想として明文化)
・JavaScript / C# / Javaを混ぜたカンジ
(言語仕様 / 文法 / 文法)
・オープンソース(Apache Lisence2.0)
・ECMAScript準拠(3/5/6※6は草案、一部先行対応)
©越後屋 5

6. TypeScriptじゃなきゃダメ？
CoffeeScript
TypeScriptと直接競合する言語
Haxe
福岡では結構盛んな高機能言語
Dart
訴訟に関係してかGoogleが力を入れている言語
JSX
ゲームを主眼としたDeNA開発言語
©越後屋 6

7. TypeScriptじゃなきゃダメ？
©越後屋 7
出典：今、本当に人気がある「JavaScriptライブラリ＆ツール」を調べてみた デジタルアドバンテージ 一色 政彦

8. TypeScriptじゃなきゃダメ？
©越後屋 8

9. 比較
メリット デメリット
CoffeScript ・実績が多い ・文法、生成物に難あり
・型なし
Haxe ・厳格な型
・成熟度
・１つのファイルに出力
Dart ・高機能 ・主要ブラウザ非対応
・コンパイラに難あり
JSX ・高速処理 ・外部参照しにくい
・依存関係に問題
©越後屋 9
※いろいろ言いすぎると各方面からお叱りを受けそうなのでこれくらいにさせてください

10. つまり…
TypeScriptは
BtoBプロジェクトに一番適している
・機能分割がしやすい※1
・生産効率が高い
・学習コストが低い※2
・保守性が高い
※1 特にTypeScript + AngularJSの場合
※2 AngularJSはちと高い
©越後屋 10

11. ここからは…
TypeScriptを
もう少しだけ詳しく
©越後屋 11

12. TypeScriptは
BtoBプロジェクトに一番適している
・機能分割がしやすい
・生産効率が高い
・学習コストが低い
・保守性が高い
©越後屋 12

13. 機能分割
©越後屋 13
・外部モジュールやファイルなどの呼出しが
容易にできます
・AngularJSとの併用でさらにモジュール分割を
明確に行えます
・派生クラスの記述、差別化がしやすいです

14. TypeScriptは
BtoBプロジェクトに一番適している
・機能分割がしやすい
・生産効率が高い
・学習コストが低い
・保守性が高い
©越後屋 14

15. 生産効率
©越後屋 15
・Visual Studioとの親和性がとても高いです
(インテリセンス、デバッグ機能が超強力)
・オーバーロードできます
・元々あったJavaScriptの移植が簡単です
・これからもっと使いやすくなります
(C#寄りの機能が増えていく予定のようです)
※直近ではasync/await？

16. TypeScriptは
BtoBプロジェクトに一番適している
・機能分割がしやすい
・生産効率が高い
・学習コストが低い
・保守性が高い
©越後屋 16

17. 学習コスト
©越後屋 17
・JavaScriptの知識は必須です
⇒JavaScriptの知識があればすぐに使えます
JavaScriptを知らない場合でも
JavaやC#の文法を知っていれば
意外に敷居は低いです
(JavaScriptの理解が必要になりますが…)
・IDEのインテリセンス機能が
かなりサポートしてくれます

18. TypeScriptは
BtoBプロジェクトに一番適している
・機能分割がしやすい
・生産効率が高い
・学習コストが低い
・保守性が高い
©越後屋 18

19. 保守性
©越後屋 19
・コンパイラが強力なため、
実行時のエラーを極力減らせます
・名前空間、クラスや継承が明示化されています
・TypeScriptと生成されたJavaScriptの対比が
しやすいです(JavaScriptは最適化されません)
・機能別に管理できるため
部分リリースしやすいです

20. でも、MicroSoftだし
お高いんでしょう…
©越後屋 20

21. IDE
©越後屋 21
・Visual Studio※(無償版あり)
・WebStorm(30日評価版あり)
・Eclipse
・Net Beans
どのIDEもプラグインなどで機能拡張が必要です
※Web Essentials(無償)を追加するとさらに強力になります

22. まとめ
©越後屋 22
・用途に応じていろいろなAltJSを選択できます
・BtoBだったらTypeScript(+ AngularJS)が
現時点で一番使いやすいかと思います
・Microsoftが絡んでいるからといって
拒否反応を示さないでください
・TypeScriptが廃れたとしても損はしません
採用するかはご自身の責任で(笑)

23. ©越後屋 23
ご清聴ありがとうございました。
なにかありましたら
お気軽に声をかけてください。

24. 参考
書籍
・TypeScript入門 クラスと型チェック機能を加えたJavaScriptの拡張言語 川俣晶
・TypeScriptリファレンス わかめ まさひろ
Webサイト
・TypeScript
・Playground
・TypeScript早わかりチートシート
・TypeScript クイックガイド
・モダンな言語でHTML5を開発しよう！ 俯瞰して理解するaltJSの比較 (前篇 –
TypeScript, CoffeeScript, Haxe)
・3日時間をもらったのでTypeScriptを触ってみた
・TypeScript + AngularJS「リソースを使う」
・TypeScript + AngularJSでASP.NETのForm認証を行う
・第 6 回 業開中心会議で ASP.NET と Visual Studio 2013 について話してきました
©越後屋 24