TypeScript について

2014 年 08 月 02 日

© 越後屋 1

自己紹介

© 越後屋 2

長濱　義道

別名、越後屋です。

主に BtoB プロジェクトの PM やってます。PMP(Project Management Professional) #1416635

コーディングは好きですが、第一線は退いています。 ( という体 )プレイングマネージャなんてものは身も心もプロジェクトも潰します。

最近は技術者のはずなのにしゃべって食べている感がとてもあります。

Twitter ： gnanormal真面目に仕事関係のつぶやきをしています。

Agenda

• はじめに• TypeScript とは• 他の AltJS との比較• 結果• まとめ

© 越後屋 3

はじめに

概要説明が主目的のため、　サンプルソースなどは用意していません

TypeScript の細かい言語仕様、文法については　割愛させていただきます

AngularJS については　 @itoKami1123さんへ

© 越後屋 4

TypeScript とは

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

応 )© 越後屋 5

TypeScript じゃなきゃダメ？

CoffeeScript　 TypeScript と直接競合する言語

Haxe　福岡では結構盛んな高機能言語

Dart　訴訟に関係してか Google が力を入れている言語

JSX　ゲームを主眼とした DeNA 開発言語

© 越後屋 6

TypeScript じゃなきゃダメ？

© 越後屋 7

出典：今、本当に人気がある「 JavaScriptライブラリ＆ツール」を調べてみた　デジタルアドバンテージ　一色　政彦

TypeScript じゃなきゃダメ？

© 越後屋 8

比較

メリット デメリット

CoffeScript ・実績が多い ・文法、生成物に難あり・型なし

Haxe ・厳格な型・成熟度

・１つのファイルに出力

Dart ・高機能 ・主要ブラウザ非対応・コンパイラに難あり

JSX ・高速処理 ・外部参照しにくい・依存関係に問題

© 越後屋 9

※いろいろ言いすぎると各方面からお叱りを受けそうなのでこれくらいにさせてください

つまり…

TypeScript はBtoB プロジェクトに一番適している

　・機能分割がしやすい※ 1

　・生産効率が高い　・学習コストが低い※ 2

　・保守性が高い　　※ 1 　特に TypeScript + AngularJS の場合　　※ 2 　 AngularJS はちと高い

© 越後屋 10

ここからは…

TypeScript をもう少しだけ詳しく

© 越後屋 11

　

TypeScript はBtoB プロジェクトに一番適している

　・機能分割がしやすい　・生産効率が高い　・学習コストが低い　・保守性が高い

© 越後屋 12

機能分割

© 越後屋 13

・外部モジュールやファイルなどの呼出しが　容易にできます

・ AngularJS との併用でさらにモジュール分割を明確に行えます

・派生クラスの記述、差別化がしやすいです

　

TypeScript はBtoB プロジェクトに一番適している

　・機能分割がしやすい　・生産効率が高い　・学習コストが低い　・保守性が高い

© 越後屋 14

生産効率

© 越後屋 15

・ Visual Studio との親和性がとても高いです　 ( インテリセンス、デバッグ機能が超強力 )

・オーバーロードできます

・元々あった JavaScript の移植が簡単です

・これからもっと使いやすくなります　 (C# 寄りの機能が増えていく予定のようです )　※直近では async/await ？

　

TypeScript はBtoB プロジェクトに一番適している

　・機能分割がしやすい　・生産効率が高い　・学習コストが低い　・保守性が高い

© 越後屋 16

学習コスト

© 越後屋 17

・ JavaScript の知識は必須です　⇒ JavaScript の知識があればすぐに使えます

　　 JavaScript を知らない場合でも　　 Java や C# の文法を知っていれば　　意外に敷居は低いです　　 (JavaScript の理解が必要になりますが… )

・ IDE のインテリセンス機能が　かなりサポートしてくれます

　

TypeScript はBtoB プロジェクトに一番適している

　・機能分割がしやすい　・生産効率が高い　・学習コストが低い　・保守性が高い

© 越後屋 18

保守性

© 越後屋 19

・コンパイラが強力なため、　実行時のエラーを極力減らせます

・名前空間、クラスや継承が明示化されています

・ TypeScript と生成された JavaScript の対比が　しやすいです (JavaScript は最適化されませ

ん )

・機能別に管理できるため　部分リリースしやすいです　

　

でも、 MicroSoft だしお高いんでしょう…

© 越後屋 20

IDE

© 越後屋 21

・ Visual Studio※(無償版あり )・ WebStorm(30 日評価版あり )・ Eclipse・ Net Beans

どの IDEもプラグインなどで機能拡張が必要です

※Web Essentials(無償 ) を追加するとさらに強力になります

まとめ

© 越後屋 22

・用途に応じていろいろな AltJS を選択できます

・ BtoB だったら TypeScript(+ AngularJS) が　現時点で一番使いやすいかと思います

・ Microsoft が絡んでいるからといって　拒否反応を示さないでください

・ TypeScript が廃れたとしても損はしません

採用するかはご自身の責任で (笑 )

　

© 越後屋 23

ご清聴ありがとうございました。

なにかありましたらお気軽に声をかけてください。

参考書籍・ 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