View
797
Download
4
Category
Preview:
Citation preview
TypeScript ファイル (拡張子 .ts)
TypeScript コンパイラ (tsc コマンド)
JavaScript ファイル (拡張子 .js)
※"コンパイラ"(翻訳機)ではなく、"トランスパイラ"(変換器)と呼ばれることもある。
新しい言語で対抗しよう!
•より高度・高級な仕様・機能をもつプログラミ
ング言語を設計・開発!
•この高機能言語でプログラムを書き、それを機
械で JavaScript に翻訳すれば、JavaScript の弱
点を克服できる!
☞その "高機能言語" が TypeScript
他と比べて TypeScript の特徴は?
•元の TypeScript コードと 1対 1で対応するよ
うな、読みやすい JavaScript を生成します。
• jQuery や AngularJS といった、JavaScript で
書かれたライブラリも普通に使えます。
•アロー関数や class 構文など、現代の
JavaScript では率直に書けない構文を提供しま
すが、この構文が、来る ECMAScript 6 の構文
を先取り。
• TypeScript を学んだ経験が ES6にも概ね活かせる!
TypeScript コンパイラ
• TypeScript コンパイラは、JavaScript で書かれ
ています。
• TypeScript Playground では、Webブラウザ上で
TypeScriptコンパイラが動作しています。
•通常は Node.js 上で TypeScript コンパイラを
実行・使用します。
TypeScript コンパイラのインストール
• JavaScript の実行エンジンである Node.jsと、
そのパッケージマネージャ "npm" をお使いの
PCにインストール。
• TypeScript コンパイラは、Node.js のパッケー
ジとして公開されているので、npmによって
インストールします。
$ sudo apt-get install git
$ sudo apt-get install nodejs
$ sudo apt-get install nodejs-legacy
$ sudo apt-get install npm
$ sudo npm install -g typescript@1.4
※2015年5月時点、Uuntu Desktop 14.10 上での例。
TypeScript v.1.5はまだAlphaバージョンだったのでv.1.4を明示的に指定。
プロジェクトごとに使用するTypeScript コンパイラのバージョンが違
う場合に備え、-g なしでプロジェクトにインストールすることも。
TypeScript コンパイラの使い方
• TypeScript コンパイラは、"tsc" というコマン
ドです。
$ echo console.log('Hello, World.') > hello.ts
$ tsc hello.ts
$ ls -l
hello.ts
hello.js
$ nodejs hello.js
Hello, World.
実際には自動タスクツールと組み合わせてウォッチ&コンパイル
※詳しくは「grunt typescript」や「gulp typescript」などで検索して調べてみよう。
TypeScript を書くためのエディタ
•著名なエディタであれば大抵、
TypeScript を書くためのアドイ
ンが流通しているようです。
•そのようなアドインを追加した
エディタであれば何でもよいで
しょう。
• もちろん統合開発環境(IDE)もオス
スメ
SublimeText
Emacs
Vim
Brackets
etc...
Visual Studio
• 利用資格に制限があるものの、無償
で使える Community Editionがある。
• TypeScript のみならず、HTML や
CSS などWeb アプリ開発全般に強
い。
• 良くも悪くもオールインワンパッ
ケージ。Visual Studio をインストー
ルすれば TypeScipt 環境も出来上が
る。
• Windows OS 上でしか動作しない。
WebStorm• Windows / MacOS / Linux 上で動作
する統合開発環境。
• TypeScript のみならず、HTML や
CSS などWeb アプリ開発全般に強
い。
• 有償。30日間試用可能。
Atom• Windows / MacOS / Linux 上で動作
するテキストエディタ。
• GitHub主導で開発。オープンソース。
無償で利用可能。
• 豊富なアドイン(パッケージ)が流通。
• テキストエディタと言いながら起動
が激重とのもっぱらの評判
Atomによる TypeScript 環境構築
•以下のアドイン(パッケージ)をAtomにインス
トールすればOK!
•atomcomplete-plus
•linter
•atom-typescript
型は正義!
• TypeScript は "静的型付言語"。
•コンパイル時に、存在しない変数やメンバを参
照していないか、また、それらの型は適合して
いるか、などがチェックされます。
•新規にプログラムを書き起こすときはもちろん、
機能の追加や変更、不具合修正で威力を発揮!
使えます。が、"型定義" が必要!
•その JavaScript ライブラリに、どんなメンバ
や引数を持つ、どんな型のグローバルオブジェ
クトや関数があるのかがわからないと、
TypeScript コンパイラはコンパイルができま
せん。
"型定義" ファイルの登場
•そこで、TypeScript の構文で型情報のみを記
述した "専用のテキストファイル" を作ってお
き、これを参照してコンパイルする仕組みがあ
ります。
•その "専用のテキストファイル" が "型定義"
ファイルです。
• JavaScript のファイル名+".d.ts" という命名規
則
• 例) "jquery.d.ts"
"型定義" ファイルの入手方法
•著名な JavaScript ライブラリには、既に誰か
が TypeScript 用型定義ファイルを作成・公開s
してくれてます。
•型定義ファイルの集積所が DefinitelyTyped。
https://github.com/borisyankov/DefinitelyTyped
"型定義" を書く
•型定義ファイルが作成・公開されてなくても、
自分で書けばOK
• 型定義ファイルといっても、型情報しか書かなかっ
ただけの、ただの TypeScript です。
• "declare" 構文をマスターすれば OK
•場合によっては、.d.ts ファイルを作るまでも
なく、本体の .tsファイル中にインラインで型
定義を書いてもいいでしょう。
Web開発でのデバッグ作業は?
• Google ChromeをはじめとしたWebブラウ
ザに備え付けの、Ctrl + Shift + I 又は F12 開発
者ツールには、JavaScript デバッガが備わって
います。
•このWebブラウザの開発者ツールで、デバッ
グ作業ができます。
.mapファイルを生成すればOK!
• TypeScript コンパイラは、オプションスイッ
チ指定すれば、コンパイル時に source map
ファイル(.map) を同時生成します。
• TypeScript の特徴のひとつ、
"元の TypeScript コードと、概ね 1 対 1 で対応する
ような JavaScript コードを生成する"
が、副次的に、このようなデバッグのしやすさに効
いてきます。
※source mapという仕組み上、完璧に TypeScript コード上でのデバッグができるわけではありません。
TypeScriptはオススメ
•安全で読みやすいコードが書ける
• JavaScriptの上位互換なので学習投資がムダに
ならない
• jQuery とか AngularJSとか普通に使える
•強力なエディタ支援がある
•普通にデバッガ使える
• GitHub 上で開発にかかわれる
このセッションをとおして...
• JavaScript で直接書く代わりに TypeScript を
使ってコーディングする人が増えることで...
• 1人でも多くの方のコーディングがより楽しい
時間になれば幸いです。
Recommended