typescriptをオススメする理由

ありがとうございます！資料を作るに当たり参考にさせていただきました。

自己紹介

仲裕介（なかゆうすけ）Yusuke Naka

Twitter : @Tukimikage

今日の流れ

altJSの概要を知る

TypeScriptをオススメする理由を知る

TypeScriptを知る

TypeScript開発に必要な環境を知る

TypeScriptが書きたくなる

Webは進化している

Webは文書を作成、閲覧する技術として登場

1992CERN

1993NTT

Webは進化している HTML5の登場でアプリとしての役割を担うようになる

Googleドキュメント(オフィス)

BioDigital Human(教育)

JavaScriptの進化は緩やか進化はエンジン次第

• JavaScript Interpreter（engine）

• JavaScriptコードを実行する

• ブラウザベンダ毎に異なる

• ECMAScriptという共通仕様にもとづいて実装されている

ブラウザの主要構成要素

引用元：http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/

JavaScriptの進化は緩やか ECMAScriptの進化はお世辞にも早いとはいえない・・・

策定時期名称状況

1999年12月 ECMAScript3最新バージョンは3.1

今もIEの旧バージョンなど一部のブラウザのJavaScriptエンジンのベースになっている

2000年頃 ECMAScript4→破棄策定打ち切り

2007年頃 ECMAScript4→破棄大規模且つ複雑なアプリ開発に対応しようとしたが、意見がまとまらず打ち切り

2009年12月 ECMAScript5最新バージョンは5.1

StrictモードやJSONのサポート等を実施し、主要モダンブラウザは軒並み対応している

現在策定中 ECMAScript6 2014年末策定完了、2015年3月から公式発行スタート予定次世代のJavaScript仕様として、大規模開発を意識した様々な機能拡張を実施する

JavaScriptの進化は緩やかモダンブラウザのエンジンは軒並みECMAScript 5.1準拠

ブラウザ JavaScriptエンジン準拠するECMAScript

IE（IE9+） Chakra ECMA-262 5.1

Chrome（23+） V8 ECMA-262 5.1

Opera（15+） V8 ECMA-262 5.1

Firefox（21+） Spidermonkey ECMA-262 5.1

Safari（6+） Nitro ECMA-262 5.1

詳しい準拠状況：http://kangax.github.io/compat-table/es5/

JavaScriptの進化は緩やか WebとJavaScriptの進化にはギャップが・・・

WebとJavaScript

進化のギャップを埋める手段としてaltJSが登場

GAPを埋めるにゃん

http://nobuya-yoshida.sblo.jp/article/37330329.html

altJSの比較言語設計/開発登場時期影響をうけた言語

CoffeScript Jeremy Ashkenas, et al. 2009 JavaScript,Python,Ruby,Haskell

TypeScript Microsoft 2012 JavaScript,Java,C#

Haxe Haxe FoundationNicolas Cannasse

2005 ActionSctipt,OCaml

Dart Google 2011 Java,C++,JavaScript,CoffeScript,Go

JSX DeNA 2012 JavaScript,ActionScript

引用元：https://html5experts.jp/clockmaker/2183/

altJSの比較言語設計/開発登場時期影響をうけた言語

CoffeScript Jeremy Ashkenas, et al. 2009 JavaScript,Python,Ruby,Haskell

TypeScript Microsoft 2012 JavaScript,Java,C#

Haxe Haxe FoundationNicolas Cannasse

2005 ActionSctipt,OCaml

Dart Google 2011 Java,C++,JavaScript,CoffeScript,Go

JSX DeNA 2012 JavaScript,ActionScript

引用元：https://html5experts.jp/clockmaker/2183/

今回はこの３つについて紹介

CoffeScript特徴

・文法はRuby（Rails 3.1から採用されている）

・コード量が少なく可読性の高いコードが書ける

・動的型付け言語

・Class機構をサポート

・既存JSライブラリをそのまま活用できる

・少人数、小規模な開発に向いている

・採用実績が多い（GitHubも大好き？）

window.onload = ->

countManager = new CountManager

$("#btn").click -># カウントを更新

countManager.addCount()# CSSの角度を計算

rot = countManager.getCount() * 90# エレメントに適用

$("#effect").css("transform", "rotateX(#{rot}deg)”)

class CountManager

_count: 0

addCount: ->

@_count++

getCount: ->

return @_count

CoffeScript

TypeScript特徴

・JavaScript（ECMAScript5ベース）を拡張した仕様で、ECMAScript6の仕様も取り入れている

・静的型付け言語（型推論有り）

・JavaやC#をベースに言語機能が豊富

・出力されるJavaScriptとはほぼ１：１、コメントも含めて出力されるので可読性が高い

・既存JSライブラリ利用には型定義ファイルが必要

・JavaScriptを知っていれば学習コストが低い

・コンパイルに時間が掛かる

・多人数・大規模開発に向く

/// <reference path="jquery/jquery.d.ts" />

window.onload = ()=> {

var countManager:CountManager = new CountManager();

$("#btn").click(()=> {// カウントを更新

countManager.addCount();// CSSの角度を計算

var rot:number = countManager.getCount() * 90;// エレメントに適用

$("#effect").css("transform", "rotateX(" + rot + "deg)");

});

}

class CountManager {

private _count:number = 0;

constructor() {

}

addCount() {

this._count++;

}

getCount() {

return this._count;

}

}

TypeScript

Haxe特徴

・汎用プログラミング言語（オブジェクト指向）

・JavaScript、ActionScript、C++、C#、Java、PHPへの変換が可能

・厳格な静的型付け言語（動的型付けも可）

・言語機能が豊富

・出力されるJSファイルが１つ

・既存JSライブラリ利用には専用IFファイルが必要

・コンパイルが高速

・多人数・大規模開発に向く

package ;

import js.Browser;

import js.JQuery;

class Main {

static function main() {

new Main();

}

function new () {

Browser.window.onload = init;

}

function init(e:Dynamic){

var countManager:CountManager = new CountManager();

new JQuery("#btn").click(function():Void {

// カウントを更新countManager.addCount();

// CSSの角度を計算var rot:Int = countManager.getCount() * 90;

// エレメントに適用new JQuery("#effect").css("transform", "rotateX(" + rot + "deg)");

});

}

}

class CountManager {

private var _count:Int = 0;

public function new () {

}

public function addCount():Void {

_count ++;

}

public function getCount():Int {

return _count;

}

}

Haxe

まとめ：altJSの概要を知る WebとJavaScriptの進化のギャップを埋める手段として、2010年ごろか

ら登場し始めた

それ以前に存在していた汎用プログラミング言語もJavaScriptへの対応を契機にaltJSとして括られる

JavaScriptを生成する中間言語と、その他の言語への変換にも対応する汎用言語の２種類がある

規模が大きくなっても効率よく開発できる様々な工夫クラス機構や静的型付け等

沢山あってどれがいいか迷う

今日の流れ



TypeScriptを知る



何を使えばいいか分からない

http://free-photos.gatag.net/

altJSはたくさん種類があるし・・・・

そうです、みんな迷います


決めの問題です！

面倒な比較表なんか作りません


私は自信を持って

TypeScriptをオススメします！

TypeScriptをオススメする理由１

学習コストが低い JavaScript初心者にやさしい

○ コンパイル時に多くのバグを検出できる例えば、未宣言変数の警告を行う“strict mode”と同じことが実行時ではなく、コンパイル

時に出来る

○ JavaやC#と同じくクラスベースオブジェクト指向言語 JavaScriptはprototypeベースのオブジェクト指向言語・・ちょっと変

○ TypeScriptと変換後のJavaScriptを見比べることで、JavaScriptの一般的なイディオムを身につけることが可能 JavaScriptをちゃんと書くって意外と大変・・・


学習コストが低い

JavaScript初心者にやさしい

var Hello;

(function (Hello) {

function world() {

console.log('Hello World');

}

Hello.world = world;

})(Hello || (Hello = {}));

JavaScript



JavaScript初心者にやさしい

module Hello {

export function world(){


}

}

TypeScript

TypeScriptをオススメする理由２


JavaScript経験者にやさしい

○ 言語仕様の大半はJavaScriptを踏襲しているちょっと便利な機能や制約がついたJavaScriptぐらいのイメージで書ける

○ 構文の多くはECMAScript5に準じたものか6を先取りしたもの

○ DOM操作についてもJavaScriptから使う場合とほぼ同じ

TypeScriptをオススメする理由３

生産効率が高い

機能分割がやりやすいためチーム開発に向いている

○ 内部module機能：名前空間を容易に分割することが可能

○ 外部module機能：import構文にて外部モジュールを利用可能

「CommonJS」、「AMD」形式に対応



静的型付けにより高精度なコード補完、開発支援機能等が実現可能

○ Microsoft製だけあってVisualStudioはオフィシャルサポート

○ JetBrains製IDE（WebStorm等）も手厚くサポート



型推論による静的型付けを導入しても損なわれない記述性

// Javaの場合// 型の省略は出来ない

String str = “hello”;

//TypeScriptの場合// 型のを省略可能

var str = "hello";

var str: string = "hello";

参考にさせていただいたサイト：http://mzsm.me/2014/12/23/advent-calendar-2014-typescript/



SouceMap対応でブラウザ上でのデバッグも可能

AngularJS等のMV○○フレームワークと組み合わせ利用可能

既存JavaScriptライブラリを有効活用

○ 型定義ファイルを用意することで既存コードに対して型チェック機能が働く

○ 型定義ファイルは公式リポジトリからダウンロード可能

TypeScriptを進める理由３生産効率が高い



TypeScript Definition manager for DefinitelyTyped

TypeScriptを進める理由３生産効率が高い



あなたもコミッター！新しいライブラリは習熟を兼ねて型定義ファイルを書こう！

TypeScriptをオススメする理由４

保守性が良い

静的型付け言語なので変化を恐れない堅牢なコードが書ける

○ コンパイル時に行う型の整合性チェックが未知のバグを防ぐ

○ “strict mode”と合わせて、”—noImplicitAny”をコンパイラにつけることで、any型を禁止してより厳格な言語仕様にすることも可能

○ 特にリファクタリングや機能追加時に威力を発揮する

○ テストを用意せずともある程度の品質が担保できる

（もちろんあるに越したことはない）

TypeScriptをオススメする理由４

保守性が良い

TypeScriptとほぼ１：１に対応するJavaScriptコードを生成

○ 生成後のコードで簡単にデバッグすることが出来る

○ コメントまで含めて出力される

○ TypeScriptの利用を辞めた場合でも、そのままメンテナンスが出来る

○ 実行時に別途ランタイムを必要としないため、コードサイズが膨らまない

TypeScriptをオススメする理由５

ECMAScript6に準拠

次世代のJavaScriptの仕様を基に設計されているため、修得するためにかけた学習コストが無駄にならない（はず）

まとめ：TypeScriptをオススメする理由

TypeScriptは・・・


○ JavaScript初心者、JavaScript経験者にオススメ


○ チーム開発に向いている

保守性が良い

○ 万が一TypeScriptを捨ててもなんとかなる安心感

ECMAScript6に準拠

○ 未来志向、学習コストが無駄にならない

今日の流れ



TypeScriptを知る



TypeScriptを知る

TypeScriptの機能とてもじゃないけどここでは紹介しきれないので・・

TypeScript handbook（公式）

• http://www.typescriptlang.org/Handbook• 最新版1.4の情報あり

http://www.typescriptlang.org/Handbook


TypeScript Quick Guid（日本語）

• http://phyzkit.net/typescript/• 情報は古く0.9ベースだが、ベーシックな機能は網羅している

http://phyzkit.net/typescript/


TypeScriptリファレンス（日本語書籍）

• http://www.amazon.co.jp/dp/484433588X/r

ef=pd_lpo_sbs_dp_ss_2?pf_rd_p=187205609

&pf_rd_s=lpo-top-

stripe&pf_rd_t=201&pf_rd_i=4822298353&pf_r

d_m=AN1VRQENFRJN5&pf_rd_r=1S66WT6P6

H5WY8FX8GF8• オススメ本！

http://www.amazon.co.jp/dp/484433588X/ref=pd_lpo_sbs_dp_ss_2?pf_rd_p=187205609&pf_rd_s=lpo-top-stripe&pf_rd_t=201&pf_rd_i=4822298353&pf_rd_m=AN1VRQENFRJN5&pf_rd_r=1S66WT6P6H5WY8FX8GF8


TypeScriptリファレンス Ver.1.0対応（日本語書籍）• 著者のわかめさん

（https://twitter.com/vvakame）は日本のTypeScriptエバンジェリスト的な人

https://twitter.com/vvakame

今日の流れ



TypeScriptを知る



開発するために必要なもの１ tsc（typescript compiler）

コンパイラ

インストールにはnode.jsが必要

セルフホスティング（TypeScriptで書かれている）なので、OSに依存せずどの環境でも動く

遅いと有名だったが、1.1からいくらか改善

// インストール

$ npm install typescript

// コンパイル

$ tsc hello.ts

開発するために必要なもの２ tsd（typescript definiteiy）

型定義ファイル管理ツール

型定義ファイルの検索、インストール、構成管理ができる

ツールを使わずに手動でやっても大丈夫

// インストール

$ npm install tsd

// 設定ファイル（tsd.json）作成

$ tsd init

// 型定義ファイル検索

$ tsd search jquery

// 型定義ファイルインストール

$ tsd query jquery –s -a install

開発するために必要なもの２型定義ファイルの利用方法

/// <reference path="jquery/jquery.d.ts" />

typings/tsd.d.ts

/// <reference path="typings/tsd.d.ts" />

module Hello {

export function world(){


}

}

main.ts

開発するために必要なもの３チーム開発ではタスクランナーを活用

typescript: {base: {

src: [‘./src/*.ts'],dest: ‘./js/’,options: {

basePath: ’./',sourceMap: true

}}

}grunt.loadNpmTasks('grunt-typescript');

grunt

var tsc = require('gulp-typescript-compiler');

gulp.task(’tsc', function () {return gulp.src(‘./src/*.ts')

.pipe(tsc({module: '',sourcemap: true,logErrors: true

})).pipe(gulp.dest(‘./js/')

);});

gulp

開発するために必要なもの３ IDEサポート

Visual Studio

○ http://codezine.jp/article/detail/8421

WebStorm

○ http://qiita.com/hkusu/items/54af02c93fda7996788c

http://codezine.jp/article/detail/8421

http://qiita.com/hkusu/items/54af02c93fda7996788c

まとめ：TypeScript開発に必要な環境を知る

必要なツールは２つだけ tsc（コンパイラ）

tsd（型定義ファイル管理ツール）

node.jsでパッケージ管理

タスクランナーを活用してチームの開発環境を共通化 grunt、gulpで利用可能

IDEサポート VisualStudioとWebStormでは手厚いサポートが受けられる

今日のまとめ



TypeScriptを知る



TypeScript書いてみたいと思った人手を上げて！

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

typescriptをオススメする理由

Internet