JavaScriptを使った開発を始めるなら！TypeScriptをはじめよう～ステップアップ

TypeScriptをはじめよう
～ステップアップ
JavaScriptを使った開発を始めるなら！
1
アバナード株式会社マネージャー（ Microsoft MVP ）古賀慎一
2018年1月27日（土）
Copyright© 2018 Shin-ichi Koga All Rights Reserved.

このセッションのゴール
TypeScript がJavaScriptの開発に使えることを知る
 書籍「TypeScript実践マスター」のカバー範囲を理解する
 ステップアップするとどんなことができるようになるか？イメージする
自分のチームでTypeScriptを採用すべきか判断できるようになる！
2
とても

自己紹介
3
古賀慎一
Microsoft MVP for Visual Studio and Development Technologies
アバナード株式会社マネージャー
 Visual Studio を使用した開発標準の策定・EVM・アジャイル推進
 エンタープライズ開発の現場で実際にTypeScriptを使用して開発
 「仕組み」作りで如何に高品質・低コストで早い開発を実現できるか？
 書籍執筆日経BP社より発売中

アジェンダ
 TypeScriptとは
JavaScriptの弱点を補ってとても使いやすくする言語
 どうやってTypeScriptを始めれば良いか？
環境構築・開発プロセス・言語仕様
 ステップアップ
TypeScriptでどんなことができるようになるか？
4

TypeScriptとは
JavaScriptの弱点を補ってとても使いやすくする言語
5

TypeScriptはビルドするとJavaScriptになる言語
6
.ts
TypeScript
ファイル
Visual Studio
ビルド
.js
JavaScript
ファイル
.html
HTML
ファイル
（参照）
ブラウザに表示・動作エラー
（型・構文の問題を表示）
成功
Node.jsで動作
コードをTypeScriptで書いて、ビルド後に作られた JavaScriptを実行する

TypeScriptはオープンソースのプログラム言語
 JavaScriptに「型」を扱う機能などを追加（ほぼJavaScriptのまま、弱点を補う）
 JavaScriptが実行できる環境で使える（Node.js やブラウザなど）
 Microsoftによって開発された言語（追加された文法は C# に近い）
 慎重に、素早く、新しい機能が追加される
 2017年4月にはGoogleの社内標準言語に追加（本格的な開発に適している）
7

JavaScript（だけ）で本格的な開発は難しい
 最も愛されているプログラム言語のひとつ
 しかし最も扱いやすい言語とは言えない部分がいくつかある
 最も扱いにくいポイントは「変数の型を明確に宣言しない」ということ
8

【問題】変数 c の値は？
var a = 10;
var b = 10;
b = “20”;
var c = (a + b) / 10;
※書籍「TypeScript実践マスター」では変数や演算子を使った計算など、基礎的な内容も学習できます
最初の時点で、この内容が詳しくわからなくても大丈夫です！ 9

【解答】変数 c の値は 3 ではなく 102
var a = 10;
var b = 10;
b = "20"; // エラーにならない
var c = (a + b) / 10;
※数値 10 と文字列 "20" を文字列結合して "1020" さらに数値に自動変換して10で割って 102
※一般的なイメージでは (10 + 20) / 10 = 3 になりそう 10

JavaScriptでは「変数の型を明確に宣言しない」
 データ型（真偽値、数値、文字列、日付型 etc... ）は存在する
 変数の型は明確にしない＝後で、最初と違うデータ型の値も入れられる
 必要に応じて自動的に変換される
意図した通りに動作しない＝「問題」が実行してみないと分からない
＝複数人のチーム開発・複雑な開発に膨大なコストがかかる
11

代わりにTypeScriptを使うと実行前に気づける
let a = 10;
let b = 10;
b = "20"; // ビルドエラー
let c = (a + b) / 10;
「型 ‘number’ に割り当てることはできません。」というビルドエラーになる
「問題」が実行しなくても分かる（コードを書きながら気づける）
12

ビルドエラーを修正＝実行前に修正できる
 実行されるのはJavaScript
 ビルドエラーを無視してそのまま実行すると、問題が起きる
 ビルドエラーを解決して、エラーが起きない様にコードを修正する
＝複数人のチーム開発・複雑な開発をコストをかけずに行える
※ビルドするJavaScript のバージョンや使用する機能によって、
TypeScriptのビルドエラーの箇所がそのままJavaScriptでも実行時エラーになる場合もある 13
注意！

JavaScriptでも自分が「気をつければいい」？
 JavaScriptを完全に習得できるか
 チーム開発ではそうはいかない（全員が同じ様にできるか？）
 誰も気付かないところで壊れているかもしれない（常に完璧にできるか？）
 気をつけるのにコストがかかる（その間に「価値」は増えていない）
気をつけるのはTypeScriptにやらせて、もっと価値を生み出す事に時間を
14

JavaScriptはバージョンによる違いが大きい
ES5以前とES2015以降で大きく機能・書き方が違う部分
 変数のスコープ、let による宣言
 戻り値を返す yield
 非同期処理 Promise
 クラス class
常に最新の実行環境（ブラウザ、Node.js など）を使えればいいが・・・
15
ECMAScript

TypeScriptでは常に最新の（楽な）書き方ができる
TypeScriptはES2015以降のJavaScriptと同様の書き方
 ES2015以降にビルドするとそのまま
 ES5以前にビルドすると不足した機能を補うコードが挿入
 どのバージョンでも（おおよそ）同じ機能が使える！
実装時にJavaScriptのバージョンを意識しなくていい
16

TypeScriptではもっと楽な書き方ができる
 匿名関数 function の代わりにラムダ式 () => { ... } で短く書ける
 非同期処理 Promise を async / await でシンプルに扱える
 型の宣言は実は不要＝強力な型推論
C# 開発者にはなじみがある文法で、すぐに簡単に扱える工夫がされている
複雑なエンタープライズ開発に慣れた経験者をJavaScriptの開発の即戦力に
※ JavaScript固有の「気を付けなければならない」ことはTypeScriptのビルドエラーに任せられる 17

TypeScriptとは（まとめ）
 ビルドするとJavaScriptになる言語
 変数の型を明確に扱うので
ビルドエラーで（実行する前に）問題を発見・修正できる
 実行環境のJavaScriptのバージョンを意識する必要がなく
常に最新の書き方で実装ができる（C#ライクな簡単な書き方もできる）
TypeScriptとは JavaScriptの弱点を補ってとても使いやすくする言語 18

どうやってTypeScriptを始めれば良いか？
環境構築・開発プロセス・言語仕様
19

TypeScriptを始めるために必要なもの
 コードをビルド出来る環境（テキストエディタ・統合開発環境）
 ビルドしたJavaScriptを実行環境へ配置する方法の習得
 TypeScript言語仕様の習得
書籍「TypeScript実装マスター」ではこの内容をカバー
20

コードをビルド出来る環境
 テキストエディタ（＋ツール）Visual Studio Code
 統合開発環境 Visual Studio 2017
 追加で必要なツール・フレームワーク・ライブラリをインストール
※ 書籍では Windows、Mac OS、Linux での準備の仕方を解説
※他にお気に入りのOS、エディタがある場合はVisual Studio Codeの解説を参考に
21

Visual Studio Code（テキストエディタ＋ツール）
 Windows、Mac OS、Linux で実行可能
 ツールを自分で組み合わせる（自分好みにカスタマイズできる）
22

Visual Studio 2017（統合開発環境）
 Windows で実行可能
 オールインワンで用意されている（世界標準の開発方法）
23

Visual Studio for Mac（統合開発環境？）
 Mac OS で実行可能だが、まだTypeScriptには向かない
 Xamarin（モバイル）やASP.NETのWebアプリ開発が可能
24
要チェック

コードをビルドするにはプロジェクトを構成する
 初期のTypeScriptはビルド準備が面倒だった？（古い情報に注意）
 最新TypeScriptでは簡単に準備できる
 プロジェクト（フォルダと設定ファイル）を作成してビルドを実行
25

コードを完成させるには単体テスト
 コードを書いて機能を作る
 機能が完成していることを確認するコード単体テストを作る
 入力値と戻り値（期待値）の組み合わせ
 単体テストでエラーがなくなるまでコードを修正して完成させる
単体テストのフレームワークをインストールし、実行するように構成
※書籍では Node.js＋Mocha、Webブラウザ＋QUnit を解説
26

デバッグで問題を解決する
 JavaScriptの実行中に、一時停止
 TypeScriptの該当箇所で変数の内容を確認できる
プロジェクトにデバック実行の方法を構成
※書籍では Visual Studio Code と Visual Studio 2017 × Node.jsとWebブラウザのデバッグ構成を解説
27

コードの保存と本番環境への配置をクラウドで（CI）
 ソースバージョン管理 GitHub と Visual Studio Team Services (VSTS)
 運用環境 Azure
 GitHub or VSTS から Azure へ配置（Node.jsとWebアプリ）
ローカル環境で完成させ、ソース管理に保存すると、自動的にデプロイ
28
continuous integration

使いたいフレームワークがTypeScriptで使えるか？
 コードが書けるか？
 型の定義、ビルドエラー、インテリセンスなどエディタの支援
 ソースバージョン管理、パッケージの復元
 ビルドできるか？（ビルドしたJavaScriptは動作するか？）
 単体テスト、デバッグ、デプロイは容易か？
開発プロセスを試してTypeScriptを採用できるか判断しよう
※書籍では単体テスト、ASP.NET Webアプリ、Bot Framework のフレームワークを使用。参考にして、同じ様に出来るかを確認してください。
29

TypeScript言語仕様の習得
 コードの書き方、実行順序、変数の宣言、基本的なデータ型、制御構文
 配列とクエリ、繰り返し処理
 関数と変数・引数・戻り値の扱い、高度なデータ型
 エラー処理
 ジェネリック
 非同期処理
 オブジェクト指向プログラミング
※書籍ではJavaScriptや他のプログラム言語を未経験で、TypeScriptだけを学習してもプログラム開発ができるように順に学習
30

JavaScript はもともとオブジェクト指向ではなかった
 ES2015以降 class ( TypeScript での書き方）
 ES5以前は工夫してクラスを実現（ TypeScript では自動的に変換）
 クラスを前提にしていない設計が多い
オブジェクト指向を最初に学習 or 最終目標にしなくてよい
⇒ 使用するフレームワーク・ライブラリにあわせる
31

クラスを本格的に使うかどうか？検討する
 コードの書き方、実行順序、変数の宣言、基本的なデータ型、制御構文
 配列とクエリ、繰り返し処理、プロパティだけのクラス
 関数と変数・引数・戻り値の扱い、高度なデータ型（共用体、交差型など）
 エラー処理
 ジェネリック
 非同期処理
 オブジェクト指向プログラミング（メソッドのあるクラス、継承など）
32

どうやってTypeScriptを始めれば良いか？（まとめ）
 コードをビルド出来る環境構築（テキストエディタ・統合開発環境）
 実装、デバッグ、実行環境へ配置するまでの開発プロセスの理解
 使用したいフレームワーク・ライブラリで検証
 TypeScript言語仕様の習得
 オブジェクト指向、高度なデータ型が必要かどうか？
33

ステップアップ
TypeScriptでどんなことができるようになるか？
34

はじめてのTypeScriptコーディング
 Console アプリ
 ASP.NET Core Web アプリ
 Bot Framework アプリ
35
単体テストで作成した「挨拶を表示する機能」を追加
※書籍では、フレームワークをTypeScriptで扱う方法の基本的な部分を解説

本格的にアプリケーションを開発するためには
 アプリの開発スキルが必要
 「シングルアプリケーション（SPA）」としてWebアプリを構築するには？
セッション2. TypeScript + Angular で Todo アプリを作ってみよう（桐生達嗣さん）
 Botアプリに「自然言語による対話」を実装するには？
セッション3. Microsoft Bot Framework とTypeScript を使った BOT 開発（物江修さん）
単にJavaScriptで出来ることがTypeScriptで出来るだけじゃなく...
36

あらためてCM（書籍情報）
TypeScript実践マスター
 古賀慎一（著）
 日経BP社
 ISBN978-4-8222-9897-5
 定価（本体3200円＋税）
 http://amzn.to/2ip4IXO
37

JavaScriptを使った開発を始めるなら！TypeScriptをはじめよう～ステップアップ

More Related Content