JavaScript使いのためのTypeScript実践入門
Download as pptx, pdf19 likes5,593 views
JavaScript書ける人向けの、実践的なTypeScript入門です。 「書いて学ぶ」をコンセプトとして、TypeScriptの文法全般学べる内容にしてみました。スライド通りコピペで進めて頂ければ、10分くらいでTypeScriptの全容を知ることができると思います。 TechFeed (https://techfeed.io) 開発を行う上で得た知見 (エディタは何を使うか、WebpackやTSのメリット・デメリットなど) も盛り込んであります。 2016/8/26 html5jビギナー部主宰の勉強会で話した内容です。
![ES.nextな部分を試してみる:
配列
• spread演算子
– 配列の中身をいい感じに展開
• for...of
– 配列（正確にはイテレータ）をループ処理
let a ='Hello';
const b = 'World';
const c = `${a}, ${b}`;
const d = [a, b];
const e = [1, 2, ...d]; // [1, 2, 'Hello', 'World']
e.push(...d); // [1,2,'Hello','World','Hello','World']
for (let f of e)
console.log(f); // 1, 2, Hello, World](https://image.slidesharecdn.com/javascripttypescript-160825024023/85/JavaScript-TypeScript-12-320.jpg)
![ES.nextな部分を試してみる:
オブジェクトリテラル
• Property Shorthand
– 変数名と同名のプロパティを簡単に定義
– {a: a} みたいなのを {a} で宣言できる
– 個人的には異様に便利
• Computed PropertyNames
– {[式]: 値} とすることで、プロパティ名に式を使用できる
• Method properties
– オブジェクトのメンバーに関数を指定するのが楽になった
let a ='Hello';
const b = 'World';
const c = {a, b}; // {a: Hello, b: World}
const d = {[a]: a}; // {Hello: Hello}
const f = {
method() {}
};](https://image.slidesharecdn.com/javascripttypescript-160825024023/85/JavaScript-TypeScript-13-320.jpg)
![ES.nextな部分を試してみる:
デストラクチャリング
• 配列やオブジェクトの中身を変数に展開
するのがとても楽に
• オブジェクトも配列も展開可能
const fullName =
{firstName: 'Shumpei', lastName: 'Shiraishi'};
// Destructuring
const {firstName, lastName} = fullName;
const array = [firstName, lastName];
// Destructuring
const [first, last] = array;](https://image.slidesharecdn.com/javascripttypescript-160825024023/85/JavaScript-TypeScript-14-320.jpg)
![ES.nextな部分を試してみる:
関数2
• Rest Parameter
– 関数の最後の仮引数を「...仮引数名」とすること
で、可変長引数を配列として扱うことが可能
• Spread Operator
– 「...配列」とすることで、配列を関数の引数に展
開できる
// 可変長引数を取る関数
const join = (s, ...rest) => [s, ...rest].join(' ');
let s = ['Wor', 'ld'];
// 配列を引数に展開
join('Hello,', ...s);](https://image.slidesharecdn.com/javascripttypescript-160825024023/85/JavaScript-TypeScript-16-320.jpg)
![型+αを試してみる:
ジェネリクス
• 型情報の一部をパラメータ化する機能
• 例えば、配列内容の具体的な型は、コー
ディング時に初めて決定する
// 文字列型の配列を宣言
let a: Array<string> = [];
// 配列については、以下のようにも指定可能
// let a: string[] = [];
a = 1; // 型が合わないためエラー
// 右辺の型から、型推論も行われる
let b = [1, 2, 3]; // numberの配列と推論される
b = 'a';](https://image.slidesharecdn.com/javascripttypescript-160825024023/85/JavaScript-TypeScript-23-320.jpg)
JavaScript使いのためのTypeScript実践入門
- 2. 本日のアジェンダ • 自己紹介 • 書きながら学ぶTypeScript • TypeScriptを仕事で使う • TypeScriptのメリット・デメリット • まとめ • おまけ
- 3. 自己紹介 • html5jファウンダー • HTML5 Experts.jp編集長 • 株式会社オープンウェブ・テクノロジー CEO – TechFeedというサービスをやっています
- 4. TechFeed • エンジニア向けキュレーションサービス – 世界中からテック情報収集してランク付けしてます。 • 速い、深い、面白い！ • モバイルアプリはTypeScript（Angular2）で作ってます。 ぜひ使ってみてください。 http://techfeed.io
- 7. TypeScriptとは？ ES.next + 型 + α ざっくり言い過ぎると
- 9. ES.nextな部分を試してみる • ECMAScript6以降で導入された言語仕様は多 岐に登るが、その中でも特に仕様頻度が高い ものを紹介 – 変数 – 文字列 – 配列 – オブジェクトリテラル – デストラクチャリング – 関数 – クラス
- 10. ES.nextな部分を試してみる: 変数 • letやconstが使えます。 – let: スコープが {...} に限定された変数の定義 • varは、関数スコープしか持たない – const: 再代入不可のlet • 正直、varの出番はもうありません – ぼくらは、「基本const、たまにlet」というルールでやっ てます let a ='Hello'; const b = 'World'; b = 'Error'; // 再代入不可
- 11. ES.nextな部分を試してみる: 文字列 • テンプレート文字列 – バッククォートで囲んだ文字列内では、"${ }" を使って式を埋め込める let a ='Hello'; const b = 'World'; const c = `${a}, ${b}`;
- 12. ES.nextな部分を試してみる: 配列 • spread演算子 – 配列の中身をいい感じに展開 • for...of – 配列（正確にはイテレータ）をループ処理 let a ='Hello'; const b = 'World'; const c = `${a}, ${b}`; const d = [a, b]; const e = [1, 2, ...d]; // [1, 2, 'Hello', 'World'] e.push(...d); // [1,2,'Hello','World','Hello','World'] for (let f of e) console.log(f); // 1, 2, Hello, World
- 13. ES.nextな部分を試してみる: オブジェクトリテラル • Property Shorthand – 変数名と同名のプロパティを簡単に定義 – {a: a} みたいなのを {a} で宣言できる – 個人的には異様に便利 • Computed PropertyNames – {[式]: 値} とすることで、プロパティ名に式を使用できる • Method properties – オブジェクトのメンバーに関数を指定するのが楽になった let a ='Hello'; const b = 'World'; const c = {a, b}; // {a: Hello, b: World} const d = {[a]: a}; // {Hello: Hello} const f = { method() {} };
- 14. ES.nextな部分を試してみる: デストラクチャリング • 配列やオブジェクトの中身を変数に展開 するのがとても楽に • オブジェクトも配列も展開可能 const fullName = {firstName: 'Shumpei', lastName: 'Shiraishi'}; // Destructuring const {firstName, lastName} = fullName; const array = [firstName, lastName]; // Destructuring const [first, last] = array;
- 15. ES.nextな部分を試してみる: 関数1 • アロー関数 – ( ) => { 関数本体 } という形式で関数定義可能 – 関数本体が単一の式な場合、中括弧を省略可能 • デフォルト引数 – 関数の仮引数に「= デフォルト値」と指定することで、 引数のデフォルト値を指定可能 const sum = (a = 0, b = 0) => { return a + b; }; // 上と同義 // const sum = (a = 0, b = 0) => a + b;
- 16. ES.nextな部分を試してみる: 関数2 • Rest Parameter – 関数の最後の仮引数を「...仮引数名」とすること で、可変長引数を配列として扱うことが可能 • Spread Operator – 「...配列」とすることで、配列を関数の引数に展 開できる // 可変長引数を取る関数 const join = (s, ...rest) => [s, ...rest].join(' '); let s = ['Wor', 'ld']; // 配列を引数に展開 join('Hello,', ...s);
- 17. ES.nextな部分を試してみる: クラス • クラス定義 • コンストラクタ class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } }
- 18. ES.nextな部分を試してみる: クラス • 継承 – 親クラスのメンバーを引き継いだ新たなクラ スを作れる ...(略)... class MorningGreeter extends Greeter { greet() { return "Good morning, " + this.greeting; } }
- 19. ES.nextな部分を試してみる: async/await • Promiseベースの非同期なコードを、あたかも同期的なコードであるかのように記述できるようになる – 処理は依然として非同期なので、並列度が下がることもない – 一度使うとやめられないくらい便利。 • asyncキーワードは関数に指定する。 – 指定した関数内ではawaitを使える – async関数の戻り値はPromiseとなる • awaitキーワードは、Promiseを返す関数呼び出しの前に付与する – Promiseを返す関数の結果を戻り値として受け取れる。 – エラーをtry-catchできる。 • TypeScriptのコンパイルターゲットをES6にしないと使えない（Promiseやyieldが必要なので） // 指定したミリ秒待つ関数 function waitFor(millis): Promise<void> { return new Promise(resolve => setTimeout(resolve, millis)); } // 非同期関数 async function hello(seconds) { try { // awaitで、Promiseの終了を待ち合わせ await waitFor(seconds * 1000); alert('Hello'); } catch (e) {} } hello(3); // 3秒後に「Hello」が表示される
- 20. 型+αを試してみる • 型定義、型推論、ダックタイピング • ジェネリクス • クラス • 抽象クラス • インターフェース • Enum（列挙型）
- 21. 型+αを試してみる: 型定義、型推論、ダックタイピング • 「変数名: 変数の型」という記述で変数の型 を明示的に指定可能 • 型を明示的に指定しない場合も、右辺から型 推論される。 • 型のORも可能（型Aもしくは型B) let a: string ='Hello'; // 型を明示的に指定 const b = 'World'; // 型推論 b = 1; // 型が合わないためエラー // 文字列もしくは数値型 let c: string | number = 'Hello'; c = 1; // 数値も代入可能
- 22. 型+αを試してみる: 型定義、型推論、ダックタイピング • 無名の型を簡単に宣言できる • ダックタイピング – 「もしもそれがアヒルのように歩き、アヒルのように鳴く のなら、それはアヒルである」 – 宣言された型とは無関係のオブジェクトでも、インター フェースが一致していれば同じ型だとみなされる // 無名の型をアドホックに宣言 function hello(person: {name: string}): void { alert(`Hello, ${person.name}`); } // 上の型と一致するオブジェクトを引数に指定 hello({name: 'shiraishi'});
- 23. 型+αを試してみる: ジェネリクス • 型情報の一部をパラメータ化する機能 • 例えば、配列内容の具体的な型は、コー ディング時に初めて決定する // 文字列型の配列を宣言 let a: Array<string> = []; // 配列については、以下のようにも指定可能 // let a: string[] = []; a = 1; // 型が合わないためエラー // 右辺の型から、型推論も行われる let b = [1, 2, 3]; // numberの配列と推論される b = 'a';
- 24. 型+αを試してみる: クラス • アクセス修飾子 – private: そのクラス内でのみ利用可能 – protected: そのクラス、もしくは子クラスから利用可能 – public: あらゆる場所から利用可能 • コンストラクタでのプロパティ指定 – コンストラクタの仮引数に、アクセス修飾子をつけると、 クラスのプロパティ宣言を省略できる class Greeter { constructor(private greeting: string) { } greet() { return "Hello, " + this.greeting; } }
- 25. 型+αを試してみる: 抽象クラス • abstractキーワードをクラスに指定すると抽象クラス となる。 – 抽象クラスはnewできない – 抽象クラスには抽象メソッド（中身なしのメソッド）を定 義できる • 抽象クラスを継承するクラスは、抽象メソッドの実装 が求められる abstract class Greeter { constructor(private greeting: string) { } abstract greet(); } // 抽象メソッドを実装していないのでエラー class MorningGreeter extends Greeter {}
- 26. 型+αを試してみる: インターフェース • interfaceキーワードを使用すると、インターフェース を定義できる • インターフェースは全てのメソッドが抽象メソッドと なる • implementsキーワードでインターフェースを実装する クラスを作成可能 – 継承とは異なり、複数のインターフェースを実装可能 interface Greeter { greet(); } // 抽象メソッドを実装していないのでエラー class MorningGreeter implements Greeter {}
- 27. 型を試してみる: Enum（列挙型） • ひとまとまりの定数を型としてまとめら れる機能 • Enumとは異なるが、代入可能な文字列を 型として定義する機能もある // 0から始まる定数が割り振られる enum RGB {RED, GREEN, YELLOW}; // 定数値を指定することも可能 // enum RGB {RED = 1, GREEN, YELLOW}; const color: RGB = RGB.RED; // red/blue/yellowに限定した文字列型 let s: 'red' | 'blue' | 'yellow'; s = 'black';
- 28. TypeScriptを仕事で使う
- 29. TypeScriptを仕事で使う • 仕事で使う、とは？ – 毎日書く→良いエディタが必要 – 複数人で書く→コーディングスタイルの統一 が必要 – コードが大規模→モジュール型開発 – 可能な限り自動化する→ビルドの自動化
- 30. TypeScriptを書くためのエディタ エディタ 良い点（主観） 悪い点（主観） Visual Studio Code そつなし 設定がJSON WebStorm 多機能 重い Atom そつなし 設定がGUI ファイル検索・イン デックスが重い Sublime Text （あんまり使ってない） そつなし 設定がJSON
- 31. コーディングスタイルの統一 • tslintをつかおう – コーディングスタイルについてかなり細かい レベルまで設定可能 • ESLintには敵わないが
- 32. モジュール型開発 • モジュール構文（import/export）を使用 – TypeScriptは、モジュール構文を様々なスタ イルのJavaScriptコードに変換可能 • モジュール分割すると、それをまとめ上 げる必要も生じる – →モジュールバンドラー必須
- 33. モジュールバンドラー • モジュールバンドラーで、import/exportを JSコードに変換 import {Component} from 'angular2/core' ↓ (TypeScriptコンパイラ) var Component = require('angular2/core').Component; ↓ (モジュールバンドラーがrequireをブラウザ上で使えるよう変 換) var component_1 = __webpack_require__(1);
- 34. モジュールバンドラー • TechFeedではWebpackを選択 – 実績豊富 – React界隈でのデファクト – なんでもできそう – 既に下調べが済んでいた • その他の選択肢について – Browserify…最古参 – System.js • 現在のところAngular2公式？ • 後発なため情報が少なめ • JSPMも組み合わせる必要あり？ • 参考文献 – http://webpack.github.io/docs/comparison.html – http://ilikekillnerds.com/2015/07/jspm-vs-webpack/
- 35. ビルドの自動化 • コード修正→再ビルド→（ビルド終了を 待って）ブラウザリロードを自動化する 必要がある • TechFeedではgulp+Webpackを組み合わ せ – Webpackは超多機能だが、gulpで書くほうが 楽なことも多数
- 36. 初公開！TechFeedのビルド環境 • Angular2 • Ionic • gulp • Webpack • (Cordova)
- 38. TypeScriptのメリット • 最新の言語仕様を思う存分使える • 静的型付け言語である – コンパイラによるコードの静的解析 – コードがより文書的 – ツールによるコーディング補助 • 入力補完 • リファクタリング
- 39. TypeScriptのデメリット • ツールチェインがまだ未成熟 – WebStormといえどもまだまだ • JavaScriptコードとの統合はやはりつらい – 基本的には型定義ファイル（d.ts）必要 – JSとTSの間には浅くない溝がある – なので、プロジェクトの一部をTSで…というのは厳 しい • 静的型付け言語である – 記述が冗長になりがち – JSほど気楽に書き下させない – ビルドが速くない（これはBabelでも同じだが…）