第11回 Plus Programming .net 勉強会で登壇したセッションの資料です。書籍「はじめてのASP.NET SPA開発入門」（日経BP社）発売を記念して、これからVisual StudioでWeb開発を始める方、あるいは既にWeb開発の経験がありこれからSPA（シングルページアプリケーション）の開発を始める方を対象に、SPA開発の始め方と今後のステップアップについてイメージ出来る勉強会を開催しました。 最初のセッションとして、SPA開発に必要な技術の全体像やVisual StudioとASP.NETの動向と共に、書籍「はじめてのASP.NET SPA開発入門」でカバーする範囲と、本書ではカバーできない、よりステップアップするために必要な範囲を紹介しました。

1. ASP.NET SPA開発を
はじめよう
～今と未来とステップアップ
1
アバナード株式会社 マネージャー（ Microsoft MVP ）古賀 慎一
2016年12月17日（土）
Copyright© 2016 Shin-ichi Koga All Rights Reserved.

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

7. 7

8. 8

9. 9

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

40. 40Copyright© 2016 Shin-ichi Koga All Rights Reserved.
Plus Programming .net 勉強会
http://www.facebook.com/PlusProgramming.net