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.

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

48,784 views

Published on

もしJavaScriptを扱う開発をこれから新たに始めるのであれば、ぜひ、TypeScriptを習得してください。TypeScriptを使うと、簡単に高品質で扱いやすいJavaScriptのコードを作成することができます。TypeScriptの概要と書籍「TypeScript実践マスター」がカバーする範囲、あるいは本書ではカバーできないその先の内容について紹介します。TypeScriptを新しいプロジェクトに採用できるかどうかイメージしていただけます。

Published in: Technology
  • Be the first to comment

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

×