1

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

アバナード株式会社 マネージャー（ Microsoft MVP ）古賀 慎一

2016 年 12 月 17 日（土）

Copyright© 2016 Shin-ichi Koga All Rights Reserved.

2

このセッションのゴール

SPA を実現する技術の全体像の今と未来をイメージする

書籍「はじめての ASP.NET SPA 開発入門」のカバー範囲を理解する

今、どこから学習を始めるべきか？イメージする

未来に、よりステップアップするには？を事前にイメージする

自分のチームで ASP.NET SPA 開発を始められるようになる！

Single Page Application

3

自己紹介古賀 慎一

Microsoft MVP for Visual Studio and Development Technologies

アバナード株式会社 マネージャー

Visual Studio を使用した開発標準の策定・ EVM による進捗管理・教育

前職ではクラウドサービス開発で TFS 導入事例

http://tech.surviveplus.net/archives/1114

「仕組み」作りで　如何に高品質・低コストで早い開発を実現できるか？

書籍執筆 日経 BP 社より発売中

4

アジェンダ

SPA とは？

SPA を実現する技術の全体像

クライアント技術

サーバー技術

基礎・実践から効率化・生産性へ

まとめ

5

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

6

SPA とは

ページ遷移なしに

Web API でサーバーとデータをやり取りして

クライアントの JavaScript で画面を更新して

動作する Web アプリケーション

例： Azure 管理ポータル , VSTS, Office 365, Facebook, Twitter ・・・

7

8

9

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 を作成

旧来動作

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 動作

13

SPA であれば

デスクトップやスマートフォンのアプリと同様に

ユーザーの操作に応じて非常にレスポンスよく動作する

使いやすい Web アプリケーションを作れる

旧来の Web アプリケーションとは開発方法が大きく異なる

どのようにアプリを作ればいいのか？

14

SPA を実現する技術の全体像（主なものを抜粋）

　

HTML CSSJavaScrip

tTypeScrip

t 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

とてつもなく広い

どこから始めればいいの？

16

始め方とステップアップ（お奨め）

　

HTML CSSJavaScrip

tTypeScrip

t 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) から始めよう！

18

まずは HTML, CSS, JavaScript

最も基本的な技術

本書の範囲外

自分でデザインするのは難しいが、理解して扱うことができるように

19

JavaScript の代わりに TypeScript を使おう

TypeScript をビルドすると JavaScript が作られる（エラー時は作られない）

熟練者がコード規約に従って JavaScript を書くのと同じ効果

.ts

TypeScriptファイル

Visual Studio（コンパイル）

.js

JavaScriptファイル

.html

HTMLファイル

（参照）

ブラウザに表示・動作 エラー（型・構文の問題を表示）

成功.htm

l

20

SPA では JavaScript より TypeScript の方が簡単

JavaScript の問題を沢山解決している（いわゆる「地雷」が少ない）

サーバー側で使う C# に近い・データ型も大切

最終的に JS になるので安心

JS の方が参考になるソースが沢山あるが、

参考にならない（バグ・古い・アプリ開発用じゃない）ソースもたくさんある

21

クライアント側のフレームワークは

なし＝「 JavaScript だけ」 は非常に難・手間

jQuery で DOM 操作（初級基礎）

Knockout で MVVM （中級基礎）

サードパーティーは図表など目的に合わせて（中級～上級・応用）

AngularJS などは高度なアプリに（上級・応用）

本書の範囲

22

MVVM は他のアプリを作るときも基本的な作り方

jQuery で画面要素の構築 & 画面表示に動きを付ける （ DOM 操作）

Knockout でデータを表示 & ユーザーの入力を受け取る（データバインド）

本書ではこの方法を詳しく解説

これができればおおよそのエンタープライズ アプリは作れます

23

jQuery と Knockout が使いこなせるようになってからステップアップを考えよう高度なチャートやグリッドを表示したくなったらサードパーティー製を検討

高度な画面遷移が必要になったら AngularJS などを検討

他のフレームワークと共存できないモノ、採用したら簡単には変更できないモノも

十分に特性・目的を理解してどれを採用するか？決めていく必要がある

池原 大然 さんのセッション

「 JavaScript/HTML UI ライブラリーを利用し Web アプリケーションをリッチに」

ステップアップをイメージ！

24

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

25

サーバー側は ASP.NET

MVC で HTML ・ CSS ・ JS を返す

Web API でデータを返す＆データを保存する

DB を使うなら LINQ, Entity Framework

本書の範囲

26

SQL Server は別途勉強が必要です

本書では Azure SQL Database の開発方法を解説

テーブル設計については最低限しか扱わないので、別途勉強が必要

LINQ 、 Entity Framework の習得は必須

現代ではプログラムから扱いやすいテーブル設計が重要

正規化や省サイズよりも、プログラムで扱いやすく高速なことが重要

27

時代は ASP.NET 4.6 から ASP.NET Core 1.1 へ

開発も実行もマルチプラットフォーム ( Visual Studio for Mac も登場！）

ASP.NET が様々な環境で動く！

だけじゃなく、新しいオープンソースの文化も取り入れた開発方法へ

28

ずっと以前の ASP.NET の印象

ずっと以前は完全に Microsoft 独自路線（良くも悪くも）

Visual Studio がすべてやってくれる

代わりに「世界の流行りに乗りにくい」

でも 「これさえやれば OK 」が明確だった

エンタープライズ開発向け　生産性重視（現代では機能不足）

デザイン・高度な機能は省略される傾向・重い etc...

29

今まさに進化する ASP.NET ！（印象です）

オープンソースの文化を取り入れ流行りに乗れる！

それでも Visual Studio がすべてやってくれる（ or VS から簡単に扱える）

内部で使われる技術は独自路線ではなく世界の主流へ

今まさに完成形へ　

これからは「最新への変化」と「安定」が常に繰り返すかも

最新機能はまだ VS が全部やってくれないとか、すぐに仕様が変わるとか

現代のエンタープライズ開発もコンシューマー向け開発も OK ！

30

ASP.NET Core が使えるなら使おう！

いち早く取り入れている人が身近にいるチームでは採用しよう！

過渡期は情報（細かいノウハウ）があっという間に古くなる

Visual Studio 2017 / Visual Studio for Mac の情報に注目！そろそろ落ち着くはず

独学や ASP.NET 4.6 の資産が多いチームでは、ほんの少しだけ待ちかも

本書では ASP.NET 4.6 を扱う

基本は同じ（近い将来 ASP.NET Core へステップアップ！）

31

さらに ASP.NET が動く環境も変わっていく！

Azure やオンプレ Windows サーバー（ IIS ）で動く

これからはマイクロサービス対応

細かい機能ごとに Web API群を分けてリリースするイメージ

Nano Server (超最小の Windows Server 2016) 、 Docker ( コンテナ ) でもASP.NET は動く

本書では Azure App Service (Web Site) を扱う

基本は同じ・設計は工夫が必要（近い将来 マイクロサービスへステップアップ！）

32

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

33

本書で作るサンプル

基礎編：

アプリの作り方・動作確認の方法・ Azure にデプロイする方法

jQuery + Knockout MVVM （データバインド・ DB 更新 などの最低限の動作）

実践編：

バリデーション・フィルタ（検索）などの実務アプリに必要な機能の実装方法

単体テストの作り方

パッケージ管理や継続的デリバリーなど作り方の効率化

SPA では特に重要、もっとステップアップできる！

34

パッケージ管理

インターネット上のライブラリをどうやって自分のアプリに入れるか？

依存関係・バージョンの管理を手間なく！

本書では NuGet パッケージの使い方・作り方・チームでの共有方法を扱う

Web の世界的な主流は npm （開発環境系） と Bower （実行環境系）

使いたいパッケージ・実現したいことに応じてステップアップ！

35

ビルドタスク・タスクランナー

ソースコードのビルド、 JavaScript の圧縮・結合などをどれだけ

自動化・効率化できるか？

本書では MSBuild タスクで JavaScript と CSS ファイルを min 化する方法を扱う

Web の世界的な主流は Grunt, gulp, webpack実現したいことに応じてステップアップ！

矢後 比呂加 さんセッション「 ASP.NET フロント最適化 入門」

ステップアップをイメージ！

36

継続的デリバリ・ DevOps 2.0

開発・テスト・リリースのリードタイムを限りなく０へ

DevOps 2.0 では一日に何度もリリース！

TFS/VSTS Build & Release

本書では Build でソース管理～ビルド～ Azure デプロイの最低限を扱う

さらに使いこなしてステップアップ！

関 満徳 さんセッション

「 VSTS(Visual Studio Team Services) で始めるアジャイル開発 - Build & Release編」

ステップアップをイメージ！

37

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

38

まとめ（ SPA 開発の始め方）

クライアントは jQuery + Knockout (MVVM) から初めて

サードパーティー製や AngularJS などのフレームワークにステップアップ！

サーバーは ASP.NET 4.6 + Azure + LINQ + Entity Framework から

初めて

ASP.NET Core 、マイクロサービス対応（ Nano Server 、 Docker ）へ

効率化・生産性はパッケージ管理・タスクランナー・継続的デリバリへ

エンタープライズ開発の資産がある場合はうまく活用しながら始めよう

39

あらためて CM （書籍情報）

はじめての ASP.NET SPA 開発入門

古賀 慎一（著）

日経 BP 社

ISBN978-4-8222-9881-4定価（本体 3000円＋税）

http://amzn.to/2eQKaUa

Copyright© 2016 Shin-ichi Koga All Rights Reserved. 40

Plus Programming .net 勉強会http://www.facebook.com/PlusProgramming.net