Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TypeScript 入門
― 素のJavaScriptとはさようなら! ―
TypeScript 入門
― 素のJavaScriptとはさようなら! ―
このスライドは、オープンソースカンファレン
ス Hokkaido 2015 でのセミナー枠で使用し
たものです。
しかし、2017年9月現在、内容が現状に即して
いな...
TypeScriptとは
TypeScript はプログラミング言語
TypeScript ファイル (拡張子 .ts)
TypeScript コンパイラ (tsc コマンド)
JavaScript ファイル (拡張子 .js)
※"コンパイラ"(翻訳機)ではなく、"トランスパイラ"(変換器)と呼ばれることもある。
なにがうれしいの?
素の JavaScript だと...
早く作れない
早く変更できない
早く直せない
早く帰れない...
https://www.pakutaso.com/
新しい言語で対抗しよう!
• より高度・高級な仕様・機能をもつプログラミ
ング言語を設計・開発!
• この高機能言語でプログラムを書き、それを機
械で JavaScript に翻訳すれば、JavaScript の弱
点を克服できる!
☞ その ...
このコードと、
このコード、どっちがいい?
しかも、このコード、バグがあります。
見つけられました?
"input.value"
の誤り
"this." が抜け
ている
見つけられました?
"input.value"
の誤り
"this." が抜け
ている
さらに、TypeScript 1.6 から使えるようになった async/await 構文
を利用した比較例。どっちが読みやすい・保守しやすい?
app.p...
先輩たち
• JavaScript を生成する高級プログラミング言語
の先輩たち。
CoffeScript
Haxe
Dart
JSX
etc...
Scala.js
他と比べて TypeScript の特徴は?
• 元の TypeScript コードと 1 対 1 で対応するよ
うな、読みやすい JavaScript を生成します。
• jQuery や AngularJS といった、JavaScript ...
TypeScript の開発環境
TypeScript コンパイラ
• TypeScript コンパイラは、JavaScript で書かれ
ています。
• TypeScript Playground では、Webブラウザ上で
TypeScript コンパイラが動作しています。
...
TypeScript コンパイラの
インストール
• JavaScript の実行エンジンである Node.js と、
そのパッケージマネージャ "npm" をお使いの
PC にインストール。
• TypeScript コンパイラは、Node....
$ sudo apt-get install git
$ sudo apt-get install nodejs
$ sudo apt-get install nodejs-legacy
$ sudo apt-get install npm
$...
$ sudo apt-get install git
$ sudo apt-get install nodejs
$ sudo apt-get install nodejs-legacy
$ sudo apt-get install npm
$...
$ sudo apt-get install git
$ sudo apt-get install nodejs
$ sudo apt-get install nodejs-legacy
$ sudo apt-get install npm
$...
TypeScript コンパイラの使い方
• TypeScript コンパイラは、"tsc" というコマン
ドです。
$ echo console.log('Hello, World.') > hello.ts
$ tsc hello.ts
$...
Demonstration
tsc コマンドによる TypeScript から
JavaScript へのコンパイル
実際には自動タスクツールと組み
合わせてウォッチ&コンパイル
※詳しくは「grunt typescript」や「gulp typescript」などで検索して調べてみよう。
実際には自動タスクツールと組み
合わせてウォッチ&コンパイル
※詳しくは「grunt typescript」や「gulp typescript」などで検索して調べてみよう。
このスライドでは言及していませんが、昨今で
は import 文による...
エディタ
TypeScript を書くためのエディタ
• 著名なエディタであれば大抵、
TypeScript を書くためのアドイ
ンが流通しているようです。
• そのようなアドインを追加した
エディタであれば何でもよいで
しょう。
• もちろん統合開発環...
TypeScript を書くためのエディタ
• なお、TypeScript 用の支援がないエディタは、
せっかくの型付言語の利点が魅力半減!
オススメしません...。
リッチ系をピックアップ
Visual
Studio
• 利用資格に制限があるものの、無償
で使える Community Edition がある。
• TypeScript のみならず、HTML や
CSS など Web アプリ開発全般に強
い。
• 良くも悪くもオール...
WebStorm
• Windows / MacOS / Linux 上で動作
する統合開発環境。
• TypeScript のみならず、HTML や
CSS など Web アプリ開発全般に強
い。
• 有償。30日間 試用可能。
Atom
• Windows / MacOS / Linux 上で動作
するテキストエディタ。
• GitHub 主導で開発。オープンソース。
無償で利用可能。
• 豊富なアドイン(パッケージ)が流通。
• テキストエディタと言いながら起動
が...
Atom
• Windows / MacOS / Linux 上で動作
するテキストエディタ。
• GitHub 主導で開発。オープンソース。
無償で利用可能。
• 豊富なアドイン(パッケージ)が流通。
• テキストエディタと言いながら起動
が...
Atom による TypeScript 環境構築
• 以下のアドイン(パッケージ)をAtomにインス
トールすればOK!
•atomcomplete-plus
•linter
•atom-typescript
Demonstration
Atom エディタによる
TypeScript プログラミング
デモで触れた TypeScript 構文の
おさらい
• class 構文
• アロー関数
• テンプレート文字列
☞ いずれも ECMAScript6 で実現される。
じゃぁ、ECMAScript 6 がどこで
も使える時が来たら、TypeScript
は要らなくなっちゃうの?
いいえ。
TypeScript には
型
があります。
型は正義!
• TypeScript は "静的型付言語"。
• コンパイル時に、存在しない変数やメンバを参
照していないか、また、それらの型は適合して
いるか、などがチェックされます。
• 新規にプログラムを書き起こすときはもちろん、
機能の...
他の JavaScript ライブ
ラリの使用
使えます。が、"型定義" が必要!
• その JavaScript ライブラリに、どんなメンバ
や引数を持つ、どんな型のグローバルオブジェ
クトや関数があるのかがわからないと、
TypeScript コンパイラはコンパイルができま
せん。
"型定義" ファイルの登場
• そこで、TypeScript の構文で型情報のみを記
述した "専用のテキストファイル" を作ってお
き、これを参照してコンパイルする仕組みがあ
ります。
• その "専用のテキストファイル" が "型定義"
フ...
"型定義" ファイルの入手方法
• 著名な JavaScript ライブラリには、既に誰か
が TypeScript 用型定義ファイルを作成・公開
してくれてます。
• 型定義ファイルの集積所が DefinitelyTyped。
https:/...
"tsd" コマンド
• DefinitelyTyped サイトからの型定義の取得な
どを管理してくれる。
$ sudo npm install -g tsd
$ tsd install jquery
"tsd" コマンド
• DefinitelyTyped サイトからの型定義の取得な
どを管理してくれる。
$ sudo npm install -g tsd
$ tsd install jquery
TypeScript 2.x がリリース済...
"tsd" コマンド
• DefinitelyTyped サイトからの型定義の取得な
どを管理してくれる。
$ sudo npm install -g tsd
$ tsd install jquery
このように TypeScript の型定義...
"tsd" コマンド
• DefinitelyTyped サイトからの型定義の取得な
どを管理してくれる。
$ sudo npm install -g tsd
$ tsd install jquery
TypeScript 2.x では、こうし...
Demonstration
jQuery と TypeScript を使ったプログラミング
"型定義" を書く
• 型定義ファイルが作成・公開されてなくても、
自分で書けばOK
• 型定義ファイルといっても、型情報しか書かなかっ
ただけの、ただの TypeScript です。
• "declare" 構文をマスターすれば OK
• 場...
デバッガ
Webクライアント側開発における
Web 開発でのデバッグ作業は?
• Google Chrome をはじめとした Web ブラウ
ザに備え付けの、Ctrl + Shift + I 又は F12 開発
者ツールには、JavaScript デバッガが備わって
います。
• この ...
じゃぁ、TypeScript がコンパイル
して生成した JavaScript コードに
対してデバッグ作業をするの?
いいえ。
コンパイル元の TypeScript ソースコードに対して
ブレークポイントが張れます!
ステップ実行ができます!
変数ウォッチができます!
Souce Map
.mapファイルを生成すればOK!
• TypeScript コンパイラは、オプションスイッ
チ指定すれば、コンパイル時に source map
ファイル(.map) を同時生成します。
• TypeScript の特徴のひとつ、
"元の Ty...
Demonstration
Firefox の開発者ツールを使ったデバッグ作業
Open Source
GitHub で
開発が進められています
• Contributor License Agreement 結べば、
fork & commit & pull request できます。
CLA申請書
2日後に返信もらう
標準型定義ファイルについて
Issue & Pull Request
しくじった。
まとめ
TypeScript はオススメ
• 安全で読みやすいコードが書ける
• JavaScript の上位互換なので学習投資がムダに
ならない
• jQuery とか AngularJS とか普通に使える
• 強力なエディタ支援がある
• 普通にデ...
このセッションをとおして...
• JavaScript で直接書く代わりに TypeScript を
使ってコーディングする人が増えることで...
• 1人でも多くの方のコーディングがより楽しい
時間になれば幸いです。
定山渓温泉でまたお会いしましょう!
― Learn & Practice & Share ―
See you!
Upcoming SlideShare
Loading in …5
×

はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!

10,596 views

Published on

オープンソースカンファレンス Hokkaido 2015 におけるセッションスライドです。

Published in: Technology
  • Be the first to comment

はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!

  1. 1. TypeScript 入門 ― 素のJavaScriptとはさようなら! ―
  2. 2. TypeScript 入門 ― 素のJavaScriptとはさようなら! ― このスライドは、オープンソースカンファレン ス Hokkaido 2015 でのセミナー枠で使用し たものです。 しかし、2017年9月現在、内容が現状に即して いない点が散見されるようになりました。 そこで、このような注釈スライドを差し込んだ、 2017 年改訂版を新たに公開することにしまし た。
  3. 3. TypeScriptとは
  4. 4. TypeScript はプログラミング言語
  5. 5. TypeScript ファイル (拡張子 .ts) TypeScript コンパイラ (tsc コマンド) JavaScript ファイル (拡張子 .js) ※"コンパイラ"(翻訳機)ではなく、"トランスパイラ"(変換器)と呼ばれることもある。
  6. 6. なにがうれしいの? 素の JavaScript だと...
  7. 7. 早く作れない 早く変更できない 早く直せない 早く帰れない... https://www.pakutaso.com/
  8. 8. 新しい言語で対抗しよう! • より高度・高級な仕様・機能をもつプログラミ ング言語を設計・開発! • この高機能言語でプログラムを書き、それを機 械で JavaScript に翻訳すれば、JavaScript の弱 点を克服できる! ☞ その "高機能言語" が TypeScript
  9. 9. このコードと、
  10. 10. このコード、どっちがいい?
  11. 11. しかも、このコード、バグがあります。
  12. 12. 見つけられました? "input.value" の誤り "this." が抜け ている
  13. 13. 見つけられました? "input.value" の誤り "this." が抜け ている さらに、TypeScript 1.6 から使えるようになった async/await 構文 を利用した比較例。どっちが読みやすい・保守しやすい? app.post('/webhook', (req, res) => { ... let gotIntent = new Promise((resolve, reject) => { aiRequest.on('response', response => resolve(response)); aiRequest.end(); }) as any; let main = gotIntent .then(aiResponse => { if (aiResponse.result.action == 'recommendation') { dietitian.dietitian.replyRecommendation(event.replyToken); main.Cancel(); } else { return mecab.parse(event.message.text); } }) .then(res => { let gotAllNutrition = res .filter(r => r[1] == '名詞') .map(r => foodsDb.getNutrition(r[0])); return Promise.all(gotAllNutrition); }) .then(responseList => { ... }) app.post('/webhook', async (req, res) => { ... let aiResponse: any = await new Promise((re aiRequest.on('response', response => re aiRequest.end(); }); if (aiResponse.result.action == 'recommenda dietitian.dietitian.replyRecommendation return; } let res = await mecab.parse(event.message.t let gotAllNutrition = res .filter(r => r[1] == '名詞') .map(r => foodsDb.getNutrition(r[0])); let responseList = await Promise.all(gotAll ...
  14. 14. 先輩たち • JavaScript を生成する高級プログラミング言語 の先輩たち。 CoffeScript Haxe Dart JSX etc... Scala.js
  15. 15. 他と比べて TypeScript の特徴は? • 元の TypeScript コードと 1 対 1 で対応するよ うな、読みやすい JavaScript を生成します。 • jQuery や AngularJS といった、JavaScript で 書かれたライブラリも普通に使えます。 • アロー関数や class 構文など、現代の JavaScript では率直に書けない構文を提供しま すが、この構文が、来る ECMAScript 6 の構文 を先取り。 • TypeScript を学んだ経験が ES6 にも概ね活かせる!
  16. 16. TypeScript の開発環境
  17. 17. TypeScript コンパイラ • TypeScript コンパイラは、JavaScript で書かれ ています。 • TypeScript Playground では、Webブラウザ上で TypeScript コンパイラが動作しています。 • 通常は Node.js 上で TypeScript コンパイラを 実行・使用します。
  18. 18. TypeScript コンパイラの インストール • JavaScript の実行エンジンである Node.js と、 そのパッケージマネージャ "npm" をお使いの PC にインストール。 • TypeScript コンパイラは、Node.js のパッケー ジとして公開されているので、npm によって インストールします。
  19. 19. $ 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 なしでプロジェクトにインストールすることも。
  20. 20. $ 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 なしでプロジェクトにインストールすることも。 この手順でインストールされる Node.js の バージョンはおそらく v.4.x。 2017 年 9 月現在、Node.js の推奨版は v.6.11.2 LTS です。 推奨版をインストールする手順は、Node.js 公 式サイトを参照してください。 参考URL: https://nodejs.org/ja/download/package-manager/
  21. 21. $ 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 なしでプロジェクトにインストールすることも。 また、2017年9月現在では、TypeScript コン パイラのインストールにあたっては、特にバー ジョン指定せずにインストール (下記コマンド) することでよいでしょう。 現時点での TypeScript バージョンは v.2.5.2 です。 $ sudo npm install -g typescript
  22. 22. TypeScript コンパイラの使い方 • TypeScript コンパイラは、"tsc" というコマン ドです。 $ echo console.log('Hello, World.') > hello.ts $ tsc hello.ts $ ls -l hello.ts hello.js $ nodejs hello.js Hello, World.
  23. 23. Demonstration tsc コマンドによる TypeScript から JavaScript へのコンパイル
  24. 24. 実際には自動タスクツールと組み 合わせてウォッチ&コンパイル ※詳しくは「grunt typescript」や「gulp typescript」などで検索して調べてみよう。
  25. 25. 実際には自動タスクツールと組み 合わせてウォッチ&コンパイル ※詳しくは「grunt typescript」や「gulp typescript」などで検索して調べてみよう。 このスライドでは言及していませんが、昨今で は import 文によるモジュールインポートを、 ブラウザ用のスクリプトでも利用するようにな りました。 そのためのモジュールバンドラー、すなわち、 browserify や webpack、fuse-box といっ たツールが利用されるようになってきているよ うです。
  26. 26. エディタ
  27. 27. TypeScript を書くためのエディタ • 著名なエディタであれば大抵、 TypeScript を書くためのアドイ ンが流通しているようです。 • そのようなアドインを追加した エディタであれば何でもよいで しょう。 • もちろん統合開発環境(IDE)もオス スメ SublimeText Emacs Vim Brackets etc...
  28. 28. TypeScript を書くためのエディタ • なお、TypeScript 用の支援がないエディタは、 せっかくの型付言語の利点が魅力半減! オススメしません...。
  29. 29. リッチ系をピックアップ
  30. 30. Visual Studio • 利用資格に制限があるものの、無償 で使える Community Edition がある。 • TypeScript のみならず、HTML や CSS など Web アプリ開発全般に強 い。 • 良くも悪くもオールインワンパッ ケージ。Visual Studio をインストー ルすれば TypeScipt 環境も出来上が る。 • Windows OS 上でしか動作しない。
  31. 31. WebStorm • Windows / MacOS / Linux 上で動作 する統合開発環境。 • TypeScript のみならず、HTML や CSS など Web アプリ開発全般に強 い。 • 有償。30日間 試用可能。
  32. 32. Atom • Windows / MacOS / Linux 上で動作 するテキストエディタ。 • GitHub 主導で開発。オープンソース。 無償で利用可能。 • 豊富なアドイン(パッケージ)が流通。 • テキストエディタと言いながら起動 が激重とのもっぱらの評判
  33. 33. Atom • Windows / MacOS / Linux 上で動作 するテキストエディタ。 • GitHub 主導で開発。オープンソース。 無償で利用可能。 • 豊富なアドイン(パッケージ)が流通。 • テキストエディタと言いながら起動 が激重とのもっぱらの評判 2017 年 9 月現在のお薦めは、 Visual Studio Code ! • Windows / macOS / Linux で動作 • Microsoft が開発 • オープンソース • 無償で利用可能 • アドイン足さなくても、はじめから TypeScript コーディング支援機能搭載 済み! • コード補完 • ツールチップヘルプ表示 • リアルタイムエラー表示 • 参照元の数の表示や実装箇所へのジャンプ etc. https://code.visualstudio.com/
  34. 34. Atom による TypeScript 環境構築 • 以下のアドイン(パッケージ)をAtomにインス トールすればOK! •atomcomplete-plus •linter •atom-typescript
  35. 35. Demonstration Atom エディタによる TypeScript プログラミング
  36. 36. デモで触れた TypeScript 構文の おさらい • class 構文 • アロー関数 • テンプレート文字列 ☞ いずれも ECMAScript6 で実現される。
  37. 37. じゃぁ、ECMAScript 6 がどこで も使える時が来たら、TypeScript は要らなくなっちゃうの?
  38. 38. いいえ。
  39. 39. TypeScript には 型 があります。
  40. 40. 型は正義! • TypeScript は "静的型付言語"。 • コンパイル時に、存在しない変数やメンバを参 照していないか、また、それらの型は適合して いるか、などがチェックされます。 • 新規にプログラムを書き起こすときはもちろん、 機能の追加や変更、不具合修正で威力を発揮!
  41. 41. 他の JavaScript ライブ ラリの使用
  42. 42. 使えます。が、"型定義" が必要! • その JavaScript ライブラリに、どんなメンバ や引数を持つ、どんな型のグローバルオブジェ クトや関数があるのかがわからないと、 TypeScript コンパイラはコンパイルができま せん。
  43. 43. "型定義" ファイルの登場 • そこで、TypeScript の構文で型情報のみを記 述した "専用のテキストファイル" を作ってお き、これを参照してコンパイルする仕組みがあ ります。 • その "専用のテキストファイル" が "型定義" ファイルです。 • JavaScript のファイル名+".d.ts" という命名規 則 • 例) "jquery.d.ts"
  44. 44. "型定義" ファイルの入手方法 • 著名な JavaScript ライブラリには、既に誰か が TypeScript 用型定義ファイルを作成・公開 してくれてます。 • 型定義ファイルの集積所が DefinitelyTyped。 https://github.com/borisyankov/DefinitelyTyped
  45. 45. "tsd" コマンド • DefinitelyTyped サイトからの型定義の取得な どを管理してくれる。 $ sudo npm install -g tsd $ tsd install jquery
  46. 46. "tsd" コマンド • DefinitelyTyped サイトからの型定義の取得な どを管理してくれる。 $ sudo npm install -g tsd $ tsd install jquery TypeScript 2.x がリリース済みの 2017 年 9 月 現在、tsd はもちろん、その後に登場した typings も使われなくなりました。 代わりに npm で型定義をインストールします。 参照している JavaScript ライブラリの npmパッ ケージ名の頭に “@types/” 付けてインストールす れば、メジャーなライブラリならだいたい成功する。 $ npm install --save-dev @types/jquery
  47. 47. "tsd" コマンド • DefinitelyTyped サイトからの型定義の取得な どを管理してくれる。 $ sudo npm install -g tsd $ tsd install jquery このように TypeScript の型定義ファイルは、 types スコープの Node.js パッケージリポジ トリに集約されています。 参考URL: • https://www.npmjs.com/~types • http://microsoft.github.io/TypeSearch/
  48. 48. "tsd" コマンド • DefinitelyTyped サイトからの型定義の取得な どを管理してくれる。 $ sudo npm install -g tsd $ tsd install jquery TypeScript 2.x では、こうして node_modules/@types フォルダ以下にインス トールされた型定義ファイルを、既定で参照する ようになっています。 ※“///<reference path=“~”>” といった参照タグコメントを TypeScript ソースコード中に記述する必要はなくなりました。
  49. 49. Demonstration jQuery と TypeScript を使ったプログラミング
  50. 50. "型定義" を書く • 型定義ファイルが作成・公開されてなくても、 自分で書けばOK • 型定義ファイルといっても、型情報しか書かなかっ ただけの、ただの TypeScript です。 • "declare" 構文をマスターすれば OK • 場合によっては、.d.ts ファイルを作るまでも なく、本体の .ts ファイル中にインラインで型 定義を書いてもいいでしょう。
  51. 51. デバッガ Webクライアント側開発における
  52. 52. Web 開発でのデバッグ作業は? • Google Chrome をはじめとした Web ブラウ ザに備え付けの、Ctrl + Shift + I 又は F12 開発 者ツールには、JavaScript デバッガが備わって います。 • この Web ブラウザの開発者ツールで、デバッ グ作業ができます。
  53. 53. じゃぁ、TypeScript がコンパイル して生成した JavaScript コードに 対してデバッグ作業をするの?
  54. 54. いいえ。
  55. 55. コンパイル元の TypeScript ソースコードに対して ブレークポイントが張れます! ステップ実行ができます! 変数ウォッチができます!
  56. 56. Souce Map
  57. 57. .mapファイルを生成すればOK! • TypeScript コンパイラは、オプションスイッ チ指定すれば、コンパイル時に source map ファイル(.map) を同時生成します。 • TypeScript の特徴のひとつ、 "元の TypeScript コードと、概ね 1 対 1 で対応する ような JavaScript コードを生成する" が、副次的に、このようなデバッグのしやすさに効 いてきます。 ※source mapという仕組み上、完璧に TypeScript コード上でのデバッグができるわけではありません。
  58. 58. Demonstration Firefox の開発者ツールを使ったデバッグ作業
  59. 59. Open Source
  60. 60. GitHub で 開発が進められています • Contributor License Agreement 結べば、 fork & commit & pull request できます。
  61. 61. CLA申請書
  62. 62. 2日後に返信もらう
  63. 63. 標準型定義ファイルについて Issue & Pull Request
  64. 64. しくじった。
  65. 65. まとめ
  66. 66. TypeScript はオススメ • 安全で読みやすいコードが書ける • JavaScript の上位互換なので学習投資がムダに ならない • jQuery とか AngularJS とか普通に使える • 強力なエディタ支援がある • 普通にデバッガ使える • GitHub 上で開発にかかわれる
  67. 67. このセッションをとおして... • JavaScript で直接書く代わりに TypeScript を 使ってコーディングする人が増えることで... • 1人でも多くの方のコーディングがより楽しい 時間になれば幸いです。
  68. 68. 定山渓温泉でまたお会いしましょう! ― Learn & Practice & Share ― See you!

×