JavaScript書ける人向けの、実践的なTypeScript入門です。 「書いて学ぶ」をコンセプトとして、TypeScriptの文法全般学べる内容にしてみました。スライド通りコピペで進めて頂ければ、10分くらいでTypeScriptの全容を知ることができると思います。 TechFeed (https://techfeed.io) 開発を行う上で得た知見 (エディタは何を使うか、WebpackやTSのメリット・デメリットなど) も盛り込んであります。 2016/8/26 html5jビギナー部主宰の勉強会で話した内容です。

1. JavaScript使いのための
TypeScript実践入門
2016/08/24
株式会社オープンウェブ・テクノロ
ジー
白石 俊平

2. 本日のアジェンダ
• 自己紹介
• 書きながら学ぶTypeScript
• TypeScriptを仕事で使う
• TypeScriptのメリット・デメリット
• まとめ
• おまけ

3. 自己紹介
• html5jファウンダー
• HTML5 Experts.jp編集長
• 株式会社オープンウェブ・テクノロジー
CEO
– TechFeedというサービスをやっています

4. TechFeed
• エンジニア向けキュレーションサービス
– 世界中からテック情報収集してランク付けしてます。
• 速い、深い、面白い！
• モバイルアプリはTypeScript（Angular2）で作ってます。
ぜひ使ってみてください。
http://techfeed.io

5. TechFeed
http://techfeed.io
http://facebook.com/techfeedapp
http://twitter.com/techfeedapp
最先端が、ここにある。

6. 書きながら学ぶTypeScript

7. TypeScriptとは？
ES.next + 型 + α
ざっくり言い過ぎると

8. ライブコーディング
• https://goo.gl/zferqi にアクセス
TypeScript Playground

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)

37. TypeScriptの
メリット・デメリット

38. TypeScriptのメリット
• 最新の言語仕様を思う存分使える
• 静的型付け言語である
– コンパイラによるコードの静的解析
– コードがより文書的
– ツールによるコーディング補助
• 入力補完
• リファクタリング

39. TypeScriptのデメリット
• ツールチェインがまだ未成熟
– WebStormといえどもまだまだ
• JavaScriptコードとの統合はやはりつらい
– 基本的には型定義ファイル（d.ts）必要
– JSとTSの間には浅くない溝がある
– なので、プロジェクトの一部をTSで…というのは厳
しい
• 静的型付け言語である
– 記述が冗長になりがち
– JSほど気楽に書き下させない
– ビルドが速くない（これはBabelでも同じだが…）

40. まとめ
TypeScriptはよい言語だがちとつらい