Download - TypeScriptをオススメする理由
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/
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/
今回はこの3つについて紹介
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とはほぼ1:1、コメントも含めて出力されるので可読性が高い
・既存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ファイルが1つ
・既存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を生成する中間言語と、その他の言語への変換にも対応する汎用言語の2種類がある
規模が大きくなっても効率よく開発できる様々な工夫 クラス機構や静的型付け等
沢山あってどれがいいか迷う
TypeScriptをオススメする理由1
学習コストが低い JavaScript初心者にやさしい
○ コンパイル時に多くのバグを検出できる 例えば、未宣言変数の警告を行う“strict mode”と同じことが実行時ではなく、コンパイル
時に出来る
○ JavaやC#と同じくクラスベースオブジェクト指向言語 JavaScriptはprototypeベースのオブジェクト指向言語・・ちょっと変
○ TypeScriptと変換後のJavaScriptを見比べることで、JavaScriptの一般的なイディオムを身につけることが可能 JavaScriptをちゃんと書くって意外と大変・・・
TypeScriptをオススメする理由1
学習コストが低い
JavaScript初心者にやさしい
var Hello;
(function (Hello) {
function world() {
console.log('Hello World');
}
Hello.world = world;
})(Hello || (Hello = {}));
JavaScript
TypeScriptをオススメする理由1
学習コストが低い
JavaScript初心者にやさしい
module Hello {
export function world(){
console.log('Hello World');
}
}
TypeScript
TypeScriptをオススメする理由2
学習コストが低い
JavaScript経験者にやさしい
○ 言語仕様の大半はJavaScriptを踏襲している ちょっと便利な機能や制約がついたJavaScriptぐらいのイメージで書ける
○ 構文の多くはECMAScript5に準じたものか6を先取りしたもの
○ DOM操作についてもJavaScriptから使う場合とほぼ同じ
TypeScriptをオススメする理由3
生産効率が高い
機能分割がやりやすいためチーム開発に向いている
○ 内部module機能:名前空間を容易に分割することが可能
○ 外部module機能:import構文にて外部モジュールを利用可能
「CommonJS」、「AMD」形式に対応
TypeScriptをオススメする理由3
生産効率が高い
静的型付けにより高精度なコード補完、開発支援機能等が実現可能
○ Microsoft製だけあってVisualStudioはオフィシャルサポート
○ JetBrains製IDE(WebStorm等)も手厚くサポート
TypeScriptをオススメする理由3
生産効率が高い
型推論による静的型付けを導入しても損なわれない記述性
// Javaの場合// 型の省略は出来ない
String str = “hello”;
//TypeScriptの場合// 型のを省略可能
var str = "hello";
var str: string = "hello";
参考にさせていただいたサイト:http://mzsm.me/2014/12/23/advent-calendar-2014-typescript/
TypeScriptをオススメする理由3
生産効率が高い
SouceMap対応でブラウザ上でのデバッグも可能
AngularJS等のMV○○フレームワークと組み合わせ利用可能
既存JavaScriptライブラリを有効活用
○ 型定義ファイルを用意することで既存コードに対して型チェック機能が働く
○ 型定義ファイルは公式リポジトリからダウンロード可能
TypeScriptを進める理由3 生産効率が高い
既存JavaScriptライブラリを有効活用
○ 型定義ファイルは公式リポジトリからダウンロード可能
TypeScript Definition manager for DefinitelyTyped
TypeScriptを進める理由3 生産効率が高い
既存JavaScriptライブラリを有効活用
○ 型定義ファイルは公式リポジトリからダウンロード可能
あなたもコミッター!新しいライブラリは習熟を兼ねて型定義ファイルを書こう!
TypeScriptをオススメする理由4
保守性が良い
静的型付け言語なので変化を恐れない堅牢なコードが書ける
○ コンパイル時に行う型の整合性チェックが未知のバグを防ぐ
○ “strict mode”と合わせて、”—noImplicitAny”をコンパイラにつけることで、any型を禁止してより厳格な言語仕様にすることも可能
○ 特にリファクタリングや機能追加時に威力を発揮する
○ テストを用意せずともある程度の品質が担保できる
(もちろんあるに越したことはない)
TypeScriptをオススメする理由4
保守性が良い
TypeScriptとほぼ1:1に対応するJavaScriptコードを生成
○ 生成後のコードで簡単にデバッグすることが出来る
○ コメントまで含めて出力される
○ TypeScriptの利用を辞めた場合でも、そのままメンテナンスが出来る
○ 実行時に別途ランタイムを必要としないため、コードサイズが膨らまない
まとめ:TypeScriptをオススメする理由
TypeScriptは・・・
学習コストが低い
○ JavaScript初心者、JavaScript経験者にオススメ
生産効率が高い
○ チーム開発に向いている
保守性が良い
○ 万が一TypeScriptを捨ててもなんとかなる安心感
ECMAScript6に準拠
○ 未来志向、学習コストが無駄にならない
TypeScriptの機能 とてもじゃないけどここでは紹介しきれないので・・
TypeScript handbook(公式)
• http://www.typescriptlang.org/Handbook• 最新版1.4の情報あり
TypeScriptの機能 とてもじゃないけどここでは紹介しきれないので・・
TypeScript handbook(公式)
• http://www.typescriptlang.org/Handbook• 最新版1.4の情報あり
TypeScriptの機能 とてもじゃないけどここでは紹介しきれないので・・
TypeScript Quick Guid(日本語)
• http://phyzkit.net/typescript/• 情報は古く0.9ベースだが、ベーシックな機能は網羅している
TypeScriptの機能 とてもじゃないけどここでは紹介しきれないので・・
TypeScript Quick Guid(日本語)
• http://phyzkit.net/typescript/• 情報は古く0.9ベースだが、ベーシックな機能は網羅している
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• オススメ本!
TypeScriptの機能 とてもじゃないけどここでは紹介しきれないので・・
TypeScriptリファレンス Ver.1.0対応(日本語書籍)• 著者のわかめさん
(https://twitter.com/vvakame)は日本のTypeScriptエバンジェリスト的な人
開発するために必要なもの1 tsc(typescript compiler)
コンパイラ
インストールにはnode.jsが必要
セルフホスティング(TypeScriptで書かれている)なので、OSに依存せずどの環境でも動く
遅いと有名だったが、1.1からいくらか改善
// インストール
$ npm install typescript
// コンパイル
$ tsc hello.ts
開発するために必要なもの2 tsd(typescript definiteiy)
型定義ファイル管理ツール
型定義ファイルの検索、インストール、構成管理ができる
ツールを使わずに手動でやっても大丈夫
// インストール
$ npm install tsd
// 設定ファイル(tsd.json)作成
$ tsd init
// 型定義ファイル検索
$ tsd search jquery
// 型定義ファイルインストール
$ tsd query jquery –s -a install
開発するために必要なもの2 型定義ファイルの利用方法
/// <reference path="jquery/jquery.d.ts" />
typings/tsd.d.ts
/// <reference path="typings/tsd.d.ts" />
module Hello {
export function world(){
console.log('Hello World');
}
}
main.ts
開発するために必要なもの3 チーム開発ではタスクランナーを活用
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
開発するために必要なもの3 IDEサポート
Visual Studio
○ http://codezine.jp/article/detail/8421
WebStorm
○ http://qiita.com/hkusu/items/54af02c93fda7996788c
まとめ:TypeScript開発に必要な環境を知る
必要なツールは2つだけ tsc(コンパイラ)
tsd(型定義ファイル管理ツール)
node.jsでパッケージ管理
タスクランナーを活用してチームの開発環境を共通化 grunt、gulpで利用可能
IDEサポート VisualStudioとWebStormでは手厚いサポートが受けられる