DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法

2. ROOM
B

3. 本セッションはかなりヘビーです！
最終セッションですが、頑張りましょう！

4. 




• 必要に応じてサーバと連携するが...
• ページ全体がリロードされることはない

7. Web ブラウザ Web サーバ DB サーバ
コントローラ
ビュー
EF
DACUI
※ 細かいコードは理解しなくて OK です
（本日のサンプルコードは後日配布します）

8. [Table("authors")]
public class Author {
[Column("au_id"), Required, MaxLength(11), Key]
public string AuthorId { get; set; }
[Column("au_fname"), Required, MaxLength(20)]
public string AuthorFirstName { get; set; }
[Column("au_lname"), Required, MaxLength(40)]
public string AuthorLastName { get; set; }
...
}
public class PubsEntities : DbContext {
protected override void OnConfiguring(DbContextOptionsBuilder options) {
options.UseSqlServer("...(接続文字列)...");
}
public DbSet<Author> Authors { get; set; }
...
}
DAC
EF

9. public class Sample01Controller : Controller
{
[HttpGet]
public ActionResult ShowAllAuthors()
{
using (PubsEntities pubs = new PubsEntities())
{
ViewData["Authors"] = pubs.Authors.ToList();
}
return View();
}
}
コントローラ
UI

10. <table class="...">
<thead>...</thead>
<tbody>
@foreach (Author a in (ViewData["Authors"] as List<Author>))
{
<tr>
<td>@a.AuthorId</td>
<td>@a.AuthorFirstName @a.AuthorLastName</td>
<td>@a.Phone</td>
<td>@a.State</td>
...
</tr>
}
</tbody>
</table>
ビュー
UI
サーバで
描画処理

11. Web サーバ DB サーバ
Web API EF
DACSI
JavaScriptHTML
Web ブラウザ
※ 細かいコードは理解しなくて OK です
（本日のサンプルコードは後日配布します）
UI

12. [Table("authors")]
public class Author {
[Column("au_id"), Required, MaxLength(11), Key]
public string AuthorId { get; set; }
[Column("au_fname"), Required, MaxLength(20)]
public string AuthorFirstName { get; set; }
[Column("au_lname"), Required, MaxLength(40)]
public string AuthorLastName { get; set; }
...
}
public class PubsEntities : DbContext {
protected override void OnConfiguring(DbContextOptionsBuilder options) {
options.UseSqlServer("...(接続文字列)...");
}
public DbSet<Author> Authors { get; set; }
...
}
DAC
EF

13. public class Sample02Controller : Controller
{
[HttpGet]
public List<Author> GetAllAuthors()
{
using (PubsEntities pubs = new PubsEntities())
{
return pubs.Authors.ToList();
}
}
}
Web API
SI
サーバは
データ返信のみ

14. <script type="text/javascript">
$(function () {
var viewModel = {
Authors: ko.observableArray()
};
ko.applyBindings(viewModel);
$.getJSON("/Sample02/GetAllAuthors",
null,
function (result) {
viewModel.Authors(result);
});
});
</script>
サーバから
データ取得
UI
JavaScript

15. <table id="tblAuthors" class="table ...">
<thead> ... </thead>
<tbody data-bind="foreach: Authors">
<tr>
<td data-bind="text: AuthorId"></td>
<td data-bind="text: AuthorFirstName + ' ' + AuthorLastName"></td>
<td data-bind="text: Phone"></td>
<td data-bind="text: State"></td>
...
</tr>
</tbody>
</table>
UI
HTML
描画は
ブラウザ側で

16. HTML ファイル
DB サーバ
Web サーバ
Web ブラウザ
BC DACSI
UI
ASP.NET
Web API
EF
UI
SPA 型
jQuery
など データ
返信のみ
UI 処理

17. 




難しい！

18. 大きな
ギャップ

19. 

20. 
1. クライアント側
のライブラリ選択
3. Web API 接続
2. サーバ側の
ページ構築

21. HTML ファイル
DB サーバ
Web サーバ
Web ブラウザ
BC DACSI
UI
ASP.NET
Web API
EF
UI
SPA 型
1. クライアント側
のライブラリ選択
3. Web API 接続
2. サーバ側の
ページ構築

22. 


jQuery,
Bootstrap
knockout.js
AngularJS,
jQuery
React,
jQuery
jQuery,
Kendo UI
Professional
ユーザアプリ ユーザアプリ ユーザアプリ
HTML5, CSS3,
JavaScript
HTML5, CSS3,
JavaScript
ユーザアプリ
HTML5, CSS3,
JavaScript
HTML5, CSS3,
JavaScript
ランタイム
フロントエンド
ライブラリ
ユーザアプリ
互換性
なし
異なる
スキル

25. <div class="table-responsive">
<table id="tblAuthors" class="table ...">
<thead> ... </thead>
<tbody data-bind="foreach: Authors">
<tr>
<td data-bind="text: AuthorId"></td>
<td data-bind="text: AuthorName"></td>
<td data-bind="text: Phone"></td>
<td data-bind="text: State"></td>
...
</tr>
</tbody>
</table>
</div>
テーブルとテンプレートを
用意しておく

26. $(function() {
var viewModel = {
Authors: ko.observableArray()
};
ko.applyBindings(viewModel);
$("#btnShowAuthors").click(function () {
$.getJSON("/Sample03/GetAuthorsByState",
{ state: $("#ddlStates").val() },
function (result) {
viewModel.Authors(result);
});
});
ViewModel を介して
データバインド

28. <div id="grdAuthors" class="k-grid"></div>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td>#= AuthorId #</td>
<td>#= AuthorName #</td>
<td>#= Phone #</td>
<td>#= State #</td>
<td>... </td>
</tr>
</script>

29. $(function() {
$("#btnShowAuthors").click(function () {
$.getJSON(
"/Sample04/GetAuthorsByState",
{ state: $("#ddlStates").val() },
function (result) {
$("#grdAuthors").kendoGrid({
rowTemplate: kendo.template($("#rowTemplate").html()),
columns: [
{ field: "AuthorId", title: "著者ID" },
{ field: "AuthorName", title: "著者名" },
{ field: "Phone", title: "電話番号" },
{ field: "State", title: "州" }, ...
],
dataSource: { data: result, pageSize: 10 },
});
});
});
});
書き方が
大きく違う！
.kendoGrid() 命令で
<div> をテーブルに変化

30. 


jQuery
AngularJS
jQuery UI
Modernizr
prototype
.js
React
jQuery
Mobile
Errorception
SASS
OOCSS
Kendo UI
Core
QUnit
LESS
SMACSKendo UI
Professional
Mocha
Type
Script
knockout
.js
Bootstrap
Jasmine
Coffee
Script
jQuery
Validation
Semantic
UI
JSLint
Stylus
BEM
YUI
Library
Karma
Dojo
toolkit
NPM
Reset
CSS
Wijmo
Ignite UI
Zino UI
Highcharts
SlickGrid
hammer
.js
Gulp
Grant
Yo 多すぎ！
選ぶのが
難しい！

31. 
古い仕様の言語を多少でも使い
やすくするもの
アプリの設計・実装方法を大き
く左右するもの
UI 部品を多少でも使いやすくす
るためのもの
開発作業を容易化するための周
辺ツール
① 言語拡張
③ 設計・実装方法論、フレ
ームワーク
② UI ライブラリ
④ 各種ツール、ユーティリ
ティ

32. 
古い仕様の言語を多少でも使いやすくするもの
アプリの設計・実装方法を大きく左右するもの
UI 部品を多少でも使いやすくするためのもの
開発作業を容易化するための周辺ツール
① 言語拡張
③ 設計・実装方法論、フレームワーク
② UI ライブラリ
④ 各種ツール、ユーティリティ
DOM 操作、
AJAX 処理
• jQuery
• prototype.js
各種フレームワーク
• AngularJS
• React
• knockout.js
• backbone.js
低水準 UI ライブラリ
• jQuery UI, Mobile
• Bootstrap
• Kendo UI Core
• Semantic UI, etc...
ユーティリ
ティライブラ
リ
• Modernizr,
etc...
CSS 命名規約
• OOCSS
• SMACS
• BEM
高水準 UI ライブラリ
• Kendo UI Pro
• highcharts
• Wijmo
• Ignite UI, etc...
CSS プリプロ
セッサ
• LESS
• SASS
• Stylus
周辺ツール
• NPM
• Gulp
• Grunt
• Bower, etc..
テストツール
• Jasmine
• JSLint
• QUnit
• Mocha, etc..
altJS
• TypeScript
• CoffeeScrip
t

33. 




HTML DOM 操作, 通信処理
CSS
基本言語仕様
（ECMAScript）
jQuery
CSS プリプロセッサ
LESS, SASS, Stylus など
altJS
TypeScript, CoffeeScript など
便利！

34. 


http://getbootstrap.com/examples/theme/
Bootstrap
http://demos.telerik.com/kendo-ui/financial/stock-history http://www.highcharts.com/demo
Kendo UI Professional Highcharts
ボタン、ラベル、
テキストボックスなど
グリッド、チャート、
地図など
ギャップ
有償製品が
多い

35. 



ベタ実装
抽象化ライブラリ
MVx フレームワーク
双方向バインド
コンポーネント指向
prototype.js
jQuery Backbone.js
knockout.js
Angular.js 1.0
React.js
Angular.js 2.0

36. 



ユーティリティライ
ブラリ
•Modernizr
•Errorception
•etc...
周辺ツール
•NPM
•Gulp, Grunt
•Bower
•Yo, etc..
テストツール
•Jasmine
•JSLint
•QUnit
•Mocha, etc..

37. 
古い仕様の言語を多少でも使いやすくするもの
アプリの設計・実装方法を大きく左右するもの
UI 部品を多少でも使いやすくするためのもの
開発作業を容易化するための周辺ツール
① 言語拡張
③ 設計・実装方法論、フレームワーク
② UI ライブラリ
④ 各種ツール、ユーティリティ
DOM 操作、
AJAX 処理
• jQuery
• prototype.js
各種フレームワーク
• AngularJS
• React
• knockout.js
• backbone.js
低水準 UI ライブラリ
• jQuery UI, Mobile
• Bootstrap
• Kendo UI Core
• Semantic UI, etc...
ユーティリ
ティライブラ
リ
• Modernizr,
etc...
CSS 命名規約
• OOCSS
• SMACS
• BEM
高水準 UI ライブラリ
• Kendo UI Pro
• highcharts
• Wijmo
• Ignite UI, etc...
CSS プリプロ
セッサ
• LESS
• SASS
• Stylus
周辺ツール
• NPM
• Gulp
• Grunt
• Bower, etc..
テストツール
• Jasmine
• JSLint
• QUnit
• Mocha, etc..
altJS
• TypeScript
• CoffeeScrip
t

38. 




ユーザアプリ
ライブラリ A ライブラリ B
ライブラリ P ライブラリ Q ライブラリ R
ライブラリ X
1.0.0 2.0.0
ver up
ver up
ver up

39. 


ユーザアプリ
SPA 開発
フレームワークBootstrap +
knockout.js
jQuery
JavaScript （ECMAScript）基本言語ランタイム
DOM 操作ライブラリ
基盤フレームワーク Angular.js
なし（要追加）高水準 UI 部品 なし（要追加）
ユーザアプリ ユーザアプリユーザアプリ

40. http://demos.telerik.com/kendo-ui/grid/index http://demo.grapecity.com/wijmo/5/Angular
/FlexChartIntro/FlexChartIntro/
http://jp.igniteui.com/
http://zinoui.com/charts http://docs.sencha.com/extjs/4.0.7/#!/exam
ple
http://www.highcharts.com/demo
Teleric Kendo UI
Professional
GrapeCity
Wijmo
Infragistics
Ignite UI
Zino UI Sencha Ext JS
Highsoft
Highcharts

41. ① OSS ライブラリ
組み合わせ型開発
② SPA フレームワーク
ライブラリ依存型開発

高水準 UI 部品を
必要とするか？
jQuery
TypeScript
CoffeeScript
prototype.js
jQuery UI
knockout
Bootstrap
AngularReact
Kendo UI
Professional
Wijmo
Ignite UI Zino UI
Sencha
Ext JS
Highcharts

42. 

① 言語拡張
③ 設計・実装
方法論、
フレームワーク
② UI ライブラリ
④ 各種ツール、
ユーティリティ
① OSS ライブラリ
組み合わせ型開発
② SPA フレームワーク
ライブラリ依存型開発

43. 

Web サーバWeb ブラウザ
完全な SPA 型
Web サーバWeb ブラウザ
サーバ技術の併用
SPA Web API
Web API
MVC
SPA

44. HTML ファイル


DB サーバ
Web サーバ
Web ブラウザ
BC DACSI
UI
ASP.NET
Web API
EF
UI
ASP.NET MVC
UI 処理は
こちらで

45. 

46. 

個別のページ
CSS （共通）
JavaScript ライブラリ（共通）
HTML （ヘッダー）
HTML （フッター）
jQuery
CSS （ページ固有）
JavaScript ライブラリ（ページ固有）
HTML （コンテンツ）
JavaScript コード （ページ固有）

47. 個別のページ
CSS （ページ固有）
JavaScript ライブラリ（ページ固有）
HTML （コンテンツ）
JavaScript コード （ページ固有）
*.cshtml個別のページ
CSS （ページ固有）
JavaScript ライブラリ（ページ固有）
HTML （コンテンツ）
JavaScript コード （ページ固有）
*.cshtml レイアウトページ
CSS （共通）
CSS （ページ固有）
JavaScript ライブラリ（共通）
JavaScript ライブラリ（ページ固有）
HTML （ヘッダー）
HTML （コンテンツ）
HTML （フッター）
JavaScript コード （ページ固有）
_Layout.cshtml
jQuery
Knockout
jQuery
Validation
入力フォーム
スタイルセット
よく使うものを
部品として用意

49. 共通レイアウトページ
個々の業務ページ
必要に応じて組み込む
ライブラリ

50. <!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="bootstrap.min.js"></script>
@RenderSection("Libraries", required: false)
@RenderSection("Styles", required: false)
</head>
<body>
... (次ページ) ...
</body>
</html>
個別ページの差分

51. <body>
<nav class="navbar ... ">
... (ヘッダー) ...
</nav>
<div class="contentWrapper">
<div class="container contentBody">
@RenderBody()
</div>
</div>
<footer class="footer">
... (フッター) ...
</footer>
@RenderSection("Scripts", required: false)
</body>
</html>
個別ページの差分
個別ページの差分

52. @{ ViewBag.Title = "州による著者一覧表示"; }
@section Libraries {
@Html.Partial("_ImportLibraryKnockout")
}
<h4>jQuery + Bootstrap + knockout.js による実装</h4>
<table id="tblAuthors" class="table ... "> ... </table>
@section Scripts {
<script type="text/javascript">
$(function () { ... };
</script>
}
個別ページの差分
個別ページの差分
個別ページの差分
個別ページの差分

53. 
DB サーバ
Web サーバ
Web ブラウザ
BC DACSI
UI
ASP.NET
Web API
EF単体入力
チェック
単体入力
再チェック

54. 




商品発注サービス
カタログ管理サービス
注文伝票
注文結果伝票
サービス
呼び出し
商品
口コミ
GET
PUT
DELETE
GET
PUT
DELETE
CRUD 処理
RESTful 設計 RPC スタイル設計
業務アプリではこちらの方が設計しやすい

55. 



Web サーバクライアント
jQuery ASP.NET Web API
Enum
Date
Time
JSON シリアル化

56. [HttpPost]
public GetRichMessageResult GetRichMessage(string name)
{
return new GetRichMessageResult(...);
}
public class GetRichMessageResult {
public ResultEnum Result { get; set; }
public string Message { get; set; }
public DateTime CurrentDateTime { get; set; }
}

57. コンテンツ application/json（JSON形式）
本文 (Body)
{"Result": 2,
"Message":"Hello World, Nobuyuki",
"CurrentDateTime":
"2015-10-06T11:09:23.385863+09:00"}
public class GetRichMessageResult {
public ResultEnum Result { get; set; }
public string Message { get; set; }
public DateTime CurrentDateTime { get; set; }
}
数値型

58. 


単体入力
チェック
単体入力
再チェック
ASP.NET
Web API

59. 



JSON データ
Web API
AuthorFirstName
AuthorLastName
Phone
ViewModel
クラス
カスタ
マイズ
チェック
ロジック

61. JSON データ
Web API
AuthorFirstName
AuthorLastName
Phone
ViewModel
クラス
カスタ
マイズ
チェック
ロジック

62. public class UpdateAuthorRequest
{
public string AuthorId { get; set; }
[Required(ErrorMessage = "著者名（名）は必須入力項目です。")]
[RegularExpression(@"^[¥u0020-¥u007e]{1,20}$",
ErrorMessage = "著者名（名）は半角 20 文字以内で指定してください。")]
public string AuthorFirstName { get; set; }
[Required(ErrorMessage = "著者名（姓）は必須入力項目です。")]
[RegularExpression(@"^[¥u0020-¥u007e]{1,40}$",
ErrorMessage = "著者名（姓）は半角 40 文字以内で指定してください。")]
public string AuthorLastName { get; set; }
...
}
AuthorFirstName
AuthorLastName
Phone
ViewModel
クラス
チェック
ロジック

63. @using (Html.BeginForm("EditAuthor", "Sample07", ...))
{
<dl>
<dt>著者名（名）</dt>
<dd>@Html.TextBoxFor(m => m.AuthorFirstName)
@Html.ValidationMessageFor(m => m.AuthorFirstName, "*")</dd>
</dl>
<dl>
<dt>著者姓（姓）</dt>
<dd>@Html.TextBoxFor(m => m.AuthorLastName)
@Html.ValidationMessageFor(m => m.AuthorLastName, "*")</dd>
</dl>
...
}

64. $("#btnUpdate").click(function () {
if ($("#frmInput").valid() == true) {
$.post(
"/Sample07/UpdateAuthor",
{
AuthorId: AuthorId,
AuthorFirstName: $("#AuthorFirstName").val(),
AuthorLastName: $("#AuthorLastName").val(),
...
},
function (result) { ... }
);
}
});
カスタ
マイズ

65. [HttpPost]
public void UpdateAuthor(
UpdateAuthorRequest request)
{
// 送信されてきたデータを再チェック
if (ModelState.IsValid == false)
{
throw new ArgumentException()
}
... データ更新処理 ...
}
単体入力
再チェック
JSON データ
Web API

66. 
DB サーバ
Web サーバ
Web ブラウザ
BC DACSI
UI
ASP.NET
Web API
EF単体入力
チェック
単体入力
再チェック

67. 



様々な
「方言」
基礎を
学ぶ

68. 
• 論理タグと物理タグの使
い分けなどを理解する
• HTML5 は後でよい
• 基礎的なコードの書き方
をしっかり理解する
• TypeScript は後でよい
• jQuery の使い方をしっ
かり理解する
• 割とよく使うので重要
• クラス設計の基本セオ
リーの理解が重要
• Bootstrap で学習する
JavaScript (DOM 操作)

69. 


• ランタイムとモデルバインディング機能を理解する
• レイアウトページの使い方を理解する
• LINQ to EF の書き方を理解する

70. 
• OSS の組み合わせで DB 参照アプリを作ってみる
例) サーバ側 : ASP.NET Web API + Entity Framework
クライアント側 : jQuery + Bootstrap + knockout.js
• 何らかの商用 SPA フレームワークライブラリを使って
上記と同じアプリを作ってみる

71. 

• AngularJS, ReactJS など
を使ってみる
• Canvas など HTML5 の
機能の活用を検討する
• TypeScript などでライ
ブラリを開発する
• NPM, Bower, Gulp など
で生産性を高める

72. 


その上で
活用
基礎を
学ぶ

73. 

1. クライアント側
のライブラリ選択
3. Web API 接続
2. サーバ側の
ページ構築
多彩な
技術重要

74. 皆さま、本当にお疲れ様でした！
またどこかでお会いしましょう！

75. アンケートにご協力ください。
●アンケートに 上記の Session ID のブレイクアウトセッションに
チェックを入れて下さい。
●アンケートはお帰りの際に、受付でご提出ください。
マイクロソフトスペシャルグッズと引換えさせていただきます。

76. ROOM B
Ask the Speaker のご案内
●本セッションの詳細は、EXPO 会場内
『Ask the Speaker』コーナー
Room B カウンタにてご説明させて
いただきます。是非、お立ち寄りください。
Ask the Speaker
EXPO会場MAP