ASP.NET SPA開発をはじめよう～今と未来とステップアップ

2. このセッションのゴール SPAを実現する技術の全体像の今と未来をイメージする  書籍「はじめてのASP.NET SPA開発入門」のカバー範囲を理解する  今、どこから学習を始めるべきか？イメージする  未来に、よりステップアップするには？を事前にイメージする自分のチームでASP.NET SPA 開発を始められるようになる！ 2 Single Page Application

3. 自己紹介 3 古賀慎一 Microsoft MVP for Visual Studio and Development Technologies アバナード株式会社マネージャー  Visual Studio を使用した開発標準の策定・EVM による進捗管理・教育  前職ではクラウドサービス開発で TFS 導入事例 http://tech.surviveplus.net/archives/1114  「仕組み」作りで如何に高品質・低コストで早い開発を実現できるか？  書籍執筆日経BP社より発売中

4. アジェンダ  SPAとは？  SPAを実現する技術の全体像  クライアント技術  サーバー技術  基礎・実践から効率化・生産性へ  まとめ 4

5. SPAとは？シングルページアプリケーションの仕組みと実例 5

6. SPAとは  ページ遷移なしに  Web API でサーバーとデータをやり取りして  クライアントのJavaScriptで画面を更新して  動作するWebアプリケーション例：Azure管理ポータル, VSTS, Office 365, Facebook, Twitter・・・ 6

10. 10

11. ブラウザ画面1を表示 Webサーバーリクエスト1 (URL1・パラメータ) レスポンス1 (HTML1・CSS) ユーザー操作（ボタンクリック）画面2を表示リクエスト2 (URL2・パラメータ) レスポンス2 (HTML2・CSS) 処理1実行表示されるデータ1を作成データ1を埋め込んだHTMLを作成ユーザー操作（ページを表示）処理2実行表示されるデータ2を作成データ2を埋め込んだHTMLを作成ユーザー操作（ボタンクリック）画面3を表示リクエスト3 (URL3・パラメータ) レスポンス3 (HTML3・CSS) 処理3実行表示されるデータ3を作成データ3を埋め込んだHTMLを作成旧来動作 11

12. ブラウザ画面1を表示 Webサーバーリクエスト1 (URL・パラメータ) レスポンス1 (HTML・CSS・JS) 画面を変更 (JavaScriptにより DOMを動的に変更) リクエスト2 (URL2・パラメータ) レスポンス2 (JSON2) 処理1実行 HTMLとJavaScriptを返すユーザー操作（ページを表示）処理2実行表示されるデータ2を作成データ2をJSONで返すユーザー操作（ボタンクリック）リクエスト3 (URL3・パラメータ) レスポンス3 (JSON3) 処理3実行表示されるデータ3を作成データ3をJSONで返すデータ2を表示 (JavaScriptにより DOMを動的に変更) 自動的に動作開始（ページ表示完了・タイマー）画面を変更 (JavaScriptにより DOMを動的に変更) データ3を表示 (JavaScriptにより DOMを動的に変更) SPA動作 12

13. SPAであれば  デスクトップやスマートフォンのアプリと同様に  ユーザーの操作に応じて非常にレスポンスよく動作する  使いやすいWebアプリケーションを作れる 旧来のWebアプリケーションとは開発方法が大きく異なる どのようにアプリを作ればいいのか？ 13

14. SPAを実現する技術の全体像（主なものを抜粋） 14 HTML CSS JavaScript TypeScript jQuery Knockout 3rd Party AngularJS ASP.NET 4.6 C# LINQ Entity Framework SQL Database / SQL Server MVC Web API ASP.NET Core 1.0 / 1.1 Azure App Service (Web Site) Docker Nano Server Visual Studio Visual Studio Team Services / Team Foundation Server NuGet npm Bower Grunt gulp webpack DOM MVVM Web Authentication

15. とてつもなく広いどこから始めればいいの？ 15

16. 始め方とステップアップ（お奨め） 16 HTML CSS JavaScript TypeScript jQuery Knockout 3rd Party AngularJS ASP.NET 4.6 C# LINQ Entity Framework SQL Database / SQL Server MVC Web API ASP.NET Core 1.0 / 1.1 Azure App Service (Web Site) Docker Nano Server Visual Studio Visual Studio Team Services / Team Foundation Server NuGet npm Bower Grunt gulp webpack DOM MVVM ■基礎（別途勉強が必要） ■本書のカバー範囲 ■最低限カバー ■ステップアップ Web Authentication

17. クライアント技術 jQuery + Knockout (MVVM) から始めよう！ 17

18. まずは HTML, CSS, JavaScript  最も基本的な技術  本書の範囲外  自分でデザインするのは難しいが、理解して扱うことができるように 18

19. JavaScript の代わりに TypeScriptを使おう  TypeScript をビルドすると JavaScript が作られる（エラー時は作られない）  熟練者がコード規約に従ってJavaScriptを書くのと同じ効果 19 .ts TypeScript ファイル Visual Studio （コンパイル） .js JavaScript ファイル .html HTML ファイル（参照）ブラウザに表示・動作エラー（型・構文の問題を表示）成功 .html

20. SPAでは JavaScript よりTypeScriptの方が簡単  JavaScript の問題を沢山解決している（いわゆる「地雷」が少ない）  サーバー側で使うC#に近い・データ型も大切  最終的にJSになるので安心  JSの方が参考になるソースが沢山あるが、参考にならない（バグ・古い・アプリ開発用じゃない）ソースもたくさんある 20

21. クライアント側のフレームワークは  なし＝「JavaScriptだけ」は非常に難・手間  jQueryでDOM操作（初級基礎）  Knockout でMVVM（中級基礎）  サードパーティーは図表など目的に合わせて（中級～上級・応用）  AngularJSなどは高度なアプリに（上級・応用） 21 本書の範囲

22. MVVMは他のアプリを作るときも基本的な作り方  jQuery で画面要素の構築 & 画面表示に動きを付ける（DOM操作）  Knockout でデータを表示 & ユーザーの入力を受け取る（データバインド）  本書ではこの方法を詳しく解説  これができればおおよそのエンタープライズアプリは作れます 22

23. jQuery と Knockout が使いこなせるようになってからステップアップを考えよう  高度なチャートやグリッドを表示したくなったらサードパーティー製を検討  高度な画面遷移が必要になったらAngularJSなどを検討  他のフレームワークと共存できないモノ、採用したら簡単には変更できないモノも  十分に特性・目的を理解してどれを採用するか？決めていく必要がある池原大然さんのセッション「JavaScript/HTML UI ライブラリーを利用し Web アプリケーションをリッチに」 23 ステップアップをイメージ！

24. サーバー技術 ASP.NETとデータベース技術を習得から！ 24

25. サーバー側はASP.NET  MVCでHTML・CSS・JSを返す  Web API でデータを返す＆データを保存する  DBを使うなら LINQ, Entity Framework 25 本書の範囲

26. SQL Server は別途勉強が必要です  本書では Azure SQL Database の開発方法を解説  テーブル設計については最低限しか扱わないので、別途勉強が必要  LINQ、Entity Framework の習得は必須  現代ではプログラムから扱いやすいテーブル設計が重要  正規化や省サイズよりも、プログラムで扱いやすく高速なことが重要 26

27. 時代は ASP.NET 4.6 から ASP.NET Core 1.1へ  開発も実行もマルチプラットフォーム ( Visual Studio for Mac も登場！）  ASP.NET が様々な環境で動く！  だけじゃなく、新しいオープンソースの文化も取り入れた開発方法へ 27

28. ずっと以前のASP.NETの印象  ずっと以前は完全に Microsoft 独自路線（良くも悪くも）  Visual Studio がすべてやってくれる  代わりに「世界の流行りに乗りにくい」  でも「これさえやればOK」が明確だった  エンタープライズ開発向け生産性重視（現代では機能不足）  デザイン・高度な機能は省略される傾向・重い etc... 28

29. 今まさに進化する ASP.NET！（印象です）  オープンソースの文化を取り入れ流行りに乗れる！  それでもVisual Studioがすべてやってくれる（or VSから簡単に扱える）  内部で使われる技術は独自路線ではなく世界の主流へ  今まさに完成形へ  これからは「最新への変化」と「安定」が常に繰り返すかも  最新機能はまだVSが全部やってくれないとか、すぐに仕様が変わるとか  現代のエンタープライズ開発もコンシューマー向け開発もOK！ 29

30. ASP.NET Core が使えるなら使おう！  いち早く取り入れている人が身近にいるチームでは採用しよう！  過渡期は情報（細かいノウハウ）があっという間に古くなる  Visual Studio 2017 / Visual Studio for Mac の情報に注目！そろそろ落ち着くはず  独学やASP.NET 4.6の資産が多いチームでは、ほんの少しだけ待ちかも  本書では ASP.NET 4.6 を扱う  基本は同じ（近い将来 ASP.NET Coreへステップアップ！） 30

31. さらにASP.NET が動く環境も変わっていく！  AzureやオンプレWindowsサーバー（IIS）で動く  これからはマイクロサービス対応  細かい機能ごとにWeb API群を分けてリリースするイメージ  Nano Server (超最小のWindows Server 2016)、Docker (コンテナ) でもASP.NETは動く  本書では Azure App Service (Web Site) を扱う  基本は同じ・設計は工夫が必要（近い将来マイクロサービスへステップアップ！） 31

32. 基礎・実践から効率化・生産性へ流行りのタスクランナーとDevOpsへステップアップ 32

33. 本書で作るサンプル基礎編：  アプリの作り方・動作確認の方法・Azure にデプロイする方法  jQuery + Knockout MVVM （データバインド・DB更新などの最低限の動作）実践編：  バリデーション・フィルタ（検索）などの実務アプリに必要な機能の実装方法  単体テストの作り方  パッケージ管理や継続的デリバリーなど作り方の効率化 SPAでは特に重要、もっとステップアップできる！ 33

34. パッケージ管理  インターネット上のライブラリをどうやって自分のアプリに入れるか？  依存関係・バージョンの管理を手間なく！  本書ではNuGetパッケージの使い方・作り方・チームでの共有方法を扱う  Webの世界的な主流は npm（開発環境系）と Bower（実行環境系）  使いたいパッケージ・実現したいことに応じてステップアップ！ 34

35. ビルドタスク・タスクランナー  ソースコードのビルド、JavaScript の圧縮・結合などをどれだけ自動化・効率化できるか？  本書ではMSBuildタスクでJavaScriptとCSSファイルをmin化する方法を扱う  Webの世界的な主流は Grunt, gulp, webpack  実現したいことに応じてステップアップ！矢後比呂加さんセッション「ASP.NET フロント最適化入門」 35 ステップアップをイメージ！

36. 継続的デリバリ・DevOps 2.0  開発・テスト・リリースのリードタイムを限りなく０へ  DevOps 2.0 では一日に何度もリリース！  TFS/VSTS Build & Release  本書では Build でソース管理～ビルド～Azure デプロイの最低限を扱う  さらに使いこなしてステップアップ！関満徳さんセッション「VSTS(Visual Studio Team Services)で始めるアジャイル開発 - Build & Release編」 36 ステップアップをイメージ！

37. まとめ ASP.NET SPA 開発を始めよう！ 37

38. まとめ（SPA開発の始め方）  クライアントは jQuery + Knockout (MVVM) から初めてサードパーティー製やAngularJSなどのフレームワークにステップアップ！  サーバーは ASP.NET 4.6 + Azure + LINQ + Entity Framework から初めて ASP.NET Core、マイクロサービス対応（Nano Server、Docker）へ  効率化・生産性はパッケージ管理・タスクランナー・継続的デリバリへエンタープライズ開発の資産がある場合はうまく活用しながら始めよう 38

39. あらためてCM（書籍情報）はじめてのASP.NET SPA開発入門  古賀慎一（著）  日経BP社  ISBN978-4-8222-9881-4  定価（本体3000円＋税）  http://amzn.to/2eQKaUa 39

ASP.NET SPA開発をはじめよう～今と未来とステップアップ

慎一 古賀

ASP.NET SPA開発をはじめよう～今と未来とステップアップ

慎一古賀