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

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

1. 1. TypeScriptをはじめよう ～ ステップアップ JavaScriptを使った開発を始めるなら！ 1 アバナード株式会社 マネージャー（ Microsoft MVP ）古賀 慎一 2018年1月27日（土） Copyright© 2018 Shin-ichi Koga All Rights Reserved.
2. 2. このセッションのゴール TypeScript がJavaScriptの開発に 使えること を知る  書籍「TypeScript実践マスター」のカバー範囲を理解する  ステップアップすると どんなことができるようになるか？イメージする 自分のチームでTypeScriptを採用すべきか判断できるようになる！ 2 とても
3. 3. 自己紹介 3 古賀 慎一 Microsoft MVP for Visual Studio and Development Technologies アバナード株式会社 マネージャー  Visual Studio を使用した開発標準の策定・EVM・アジャイル推進  エンタープライズ開発の現場で実際にTypeScriptを使用して開発  「仕組み」作りで 如何に高品質・低コストで早い開発を実現できるか？  書籍執筆 日経BP社より発売中
4. 4. アジェンダ  TypeScriptとは JavaScriptの弱点を補ってとても使いやすくする言語  どうやってTypeScriptを始めれば良いか？ 環境構築・開発プロセス・言語仕様  ステップアップ TypeScriptでどんなことができるようになるか？ 4
5. 5. TypeScriptとは JavaScriptの弱点を補ってとても使いやすくする言語 5
6. 6. TypeScriptはビルドするとJavaScriptになる言語 6 .ts TypeScript ファイル Visual Studio ビルド .js JavaScript ファイル .html HTML ファイル （参照） ブラウザに表示・動作エラー （型・構文の問題を表示） 成功 Node.jsで動作 コードをTypeScriptで書いて、ビルド後に作られた JavaScriptを実行する
7. 7. TypeScriptはオープンソースのプログラム言語  JavaScriptに「型」を扱う機能などを追加（ほぼJavaScriptのまま、弱点を補う）  JavaScriptが実行できる環境で使える（Node.js やブラウザ など）  Microsoftによって開発された言語（追加された文法は C# に近い）  慎重に、素早く、新しい機能が追加される  2017年4月にはGoogleの社内標準言語に追加（本格的な開発に適している） 7
8. 8. JavaScript（だけ）で本格的な開発は難しい  最も愛されているプログラム言語のひとつ  しかし最も扱いやすい言語とは言えない部分がいくつかある  最も扱いにくいポイントは「変数の型を明確に宣言しない」ということ 8
9. 9. 【問題】変数 c の値は？ var a = 10; var b = 10; b = “20”; var c = (a + b) / 10; ※書籍「TypeScript実践マスター」では変数や演算子を使った計算など、基礎的な内容も学習できます 最初の時点で、この内容が詳しくわからなくても大丈夫です！ 9
10. 10. 【解答】変数 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
11. 11. JavaScriptでは「変数の型を明確に宣言しない」  データ型（真偽値、数値、文字列、日付型 etc... ）は存在する  変数の型は明確にしない ＝後で、最初と違うデータ型の値も入れられる  必要に応じて自動的に変換される 意図した通りに動作しない ＝ 「問題 」が実行してみないと分からない ＝複数人のチーム開発・複雑な開発に膨大なコストがかかる 11
12. 12. 代わりにTypeScriptを使うと実行前に気づける let a = 10; let b = 10; b = "20"; // ビルドエラー let c = (a + b) / 10; 「型 ‘number’ に割り当てることはできません。」というビルドエラーになる 「問題 」が実行しなくても分かる（コードを書きながら気づける） 12
13. 13. ビルドエラーを修正＝実行前に修正できる  実行されるのはJavaScript  ビルドエラーを無視してそのまま実行すると、問題が起きる  ビルドエラーを解決して、エラーが起きない様にコードを修正する ＝複数人のチーム開発・複雑な開発をコストをかけずに行える ※ビルドするJavaScript のバージョンや使用する機能によって、 TypeScriptのビルドエラーの箇所がそのままJavaScriptでも実行時エラーになる場合もある 13 注意！
14. 14. JavaScriptでも自分が「気をつければいい」？  JavaScriptを完全に習得できるか  チーム開発ではそうはいかない（全員が同じ様にできるか？）  誰も気付かないところで壊れているかもしれない（常に完璧にできるか？）  気をつけるのにコストがかかる（その間に「価値」は増えていない） 気をつけるのはTypeScriptにやらせて、もっと価値を生み出す事に時間を 14
15. 15. JavaScriptはバージョンによる違いが大きい ES5以前とES2015以降で大きく機能・書き方が違う部分  変数のスコープ、let による宣言  戻り値を返す yield  非同期処理 Promise  クラス class 常に最新の実行環境（ブラウザ、Node.js など）を使えればいいが・・・ 15 ECMAScript
16. 16. TypeScriptでは常に最新の（楽な）書き方ができる TypeScriptはES2015以降のJavaScriptと同様の書き方  ES2015以降にビルドするとそのまま  ES5以前にビルドすると不足した機能を補うコードが挿入  どのバージョンでも（おおよそ）同じ機能が使える！ 実装時にJavaScriptのバージョンを意識しなくていい 16
17. 17. TypeScriptではもっと楽な書き方ができる  匿名関数 function の代わりにラムダ式 () => { ... } で短く書ける  非同期処理 Promise を async / await でシンプルに扱える  型の宣言は実は不要 ＝ 強力な型推論 C# 開発者にはなじみがある文法で、すぐに簡単に扱える工夫がされている 複雑なエンタープライズ開発に慣れた経験者をJavaScriptの開発の即戦力に ※ JavaScript固有の「気を付けなければならない」ことはTypeScriptのビルドエラーに任せられる 17
18. 18. TypeScriptとは（まとめ）  ビルドするとJavaScriptになる言語  変数の型を明確に扱うので ビルドエラーで（実行する前に）問題を発見・修正できる  実行環境のJavaScriptのバージョンを意識する必要がなく 常に最新の書き方で実装ができる（C#ライクな簡単な書き方もできる） TypeScriptとは JavaScriptの弱点を補ってとても使いやすくする言語 18
19. 19. どうやってTypeScriptを始めれば良いか？ 環境構築・開発プロセス・言語仕様 19
20. 20. TypeScriptを始めるために必要なもの  コードをビルド出来る環境（テキストエディタ・統合開発環境）  ビルドしたJavaScriptを実行環境へ配置する方法の習得  TypeScript言語仕様の習得 書籍「TypeScript実装マスター」ではこの内容をカバー 20
21. 21. コードをビルド出来る環境  テキストエディタ（＋ツール）Visual Studio Code  統合開発環境 Visual Studio 2017  追加で必要なツール・フレームワーク・ライブラリをインストール ※ 書籍では Windows、Mac OS、Linux での準備の仕方を解説 ※他にお気に入りのOS、エディタがある場合はVisual Studio Codeの解説を参考に 21
22. 22. Visual Studio Code（テキストエディタ＋ツール）  Windows、Mac OS、Linux で実行可能  ツールを自分で組み合わせる（自分好みにカスタマイズできる） 22
23. 23. Visual Studio 2017（統合開発環境）  Windows で実行可能  オールインワンで用意されている（世界標準の開発方法） 23
24. 24. Visual Studio for Mac（統合開発環境？）  Mac OS で実行可能だが、まだTypeScriptには向かない  Xamarin（モバイル）やASP.NETのWebアプリ開発が可能 24 要チェック
25. 25. コードをビルドするにはプロジェクトを構成する  初期のTypeScriptはビルド準備が面倒だった？（古い情報に注意）  最新TypeScriptでは簡単に準備できる  プロジェクト（フォルダと設定ファイル）を作成して ビルド を実行 25
26. 26. コードを完成させるには単体テスト  コードを書いて機能を作る  機能が完成していることを確認するコード 単体テスト を作る  入力値と戻り値（期待値）の組み合わせ  単体テストでエラーがなくなるまでコードを修正して完成させる 単体テストのフレームワークをインストールし、実行するように構成 ※書籍では Node.js＋Mocha、Webブラウザ＋QUnit を解説 26
27. 27. デバッグで問題を解決する  JavaScriptの実行中に、一時停止  TypeScriptの該当箇所で変数の内容を確認できる プロジェクトにデバック実行の方法を構成 ※書籍では Visual Studio Code と Visual Studio 2017 × Node.jsとWebブラウザ の デバッグ構成 を解説 27
28. 28. コードの保存と本番環境への配置をクラウドで（CI）  ソースバージョン管理 GitHub と Visual Studio Team Services (VSTS)  運用環境 Azure  GitHub or VSTS から Azure へ配置 （Node.jsとWebアプリ） ローカル環境で完成させ、ソース管理に保存すると、自動的にデプロイ 28 continuous integration
29. 29. 使いたいフレームワークがTypeScriptで使えるか？  コードが書けるか？  型の定義、ビルドエラー、インテリセンスなどエディタの支援  ソースバージョン管理、パッケージの復元  ビルドできるか？（ビルドしたJavaScriptは動作するか？）  単体テスト、デバッグ、デプロイは容易か？ 開発プロセスを試してTypeScriptを採用できるか判断しよう ※書籍では単体テスト、ASP.NET Webアプリ、Bot Framework のフレームワークを使用。参考にして、同じ様に出来るかを確認してください。 29
30. 30. TypeScript言語仕様の習得  コードの書き方、実行順序、変数の宣言、基本的なデータ型、制御構文  配列とクエリ、繰り返し処理  関数と変数・引数・戻り値の扱い、高度なデータ型  エラー処理  ジェネリック  非同期処理  オブジェクト指向プログラミング ※書籍ではJavaScriptや他のプログラム言語を未経験で、TypeScriptだけを学習してもプログラム開発ができるように順に学習 30
31. 31. JavaScript はもともとオブジェクト指向ではなかった  ES2015以降 class ( TypeScript での書き方 ）  ES5以前は工夫してクラスを実現（ TypeScript では自動的に変換 ）  クラスを前提にしていない設計が多い オブジェクト指向を最初に学習 or 最終目標にしなくてよい ⇒ 使用するフレームワーク・ライブラリにあわせる 31
32. 32. クラスを本格的に使うかどうか？検討する  コードの書き方、実行順序、変数の宣言、基本的なデータ型、制御構文  配列とクエリ、繰り返し処理、プロパティだけのクラス  関数と変数・引数・戻り値の扱い、高度なデータ型（共用体、交差型など）  エラー処理  ジェネリック  非同期処理  オブジェクト指向プログラミング（メソッドのあるクラス、継承など） 32
33. 33. どうやってTypeScriptを始めれば良いか？（まとめ）  コードをビルド出来る環境構築（テキストエディタ・統合開発環境）  実装、デバッグ、実行環境へ配置するまでの開発プロセスの理解  使用したいフレームワーク・ライブラリで検証  TypeScript言語仕様の習得  オブジェクト指向、高度なデータ型 が必要かどうか？ 33
34. 34. ステップアップ TypeScriptでどんなことができるようになるか？ 34
35. 35. はじめてのTypeScriptコーディング  Console アプリ  ASP.NET Core Web アプリ  Bot Framework アプリ 35 単体テストで作成した「挨拶を表示する機能」を追加 ※書籍では、フレームワークをTypeScriptで扱う方法の基本的な部分を解説
36. 36. 本格的にアプリケーションを開発するためには  アプリの開発スキルが必要  「シングルアプリケーション（SPA）」としてWebアプリを構築するには？ セッション2. TypeScript + Angular で Todo アプリを作ってみよう（桐生 達嗣さん）  Botアプリに「自然言語による対話」を実装するには？ セッション3. Microsoft Bot Framework とTypeScript を使った BOT 開発（物江 修さん） 単にJavaScriptで出来ることがTypeScriptで出来るだけじゃなく... 36
37. 37. あらためてCM（書籍情報） TypeScript実践マスター  古賀 慎一（著）  日経BP社  ISBN978-4-8222-9897-5  定価（本体3200円＋税）  http://amzn.to/2ip4IXO 37
38. 38. 38Copyright© 2018 Shin-ichi Koga All Rights Reserved. Plus Programming .net 勉強会 http://www.facebook.com/PlusProgramming.net