2019/12/10 グレープシティ ECHO Tokyo 2019 セッション資料です。 https://grapecity-dev-tools.connpass.com/event/155759/

1. ～ レガシー Web からの脱却 ～
井上 章 (いのうえ あきら) @chack411
マイクロソフト コーポレーション
グローバル ブラックベルト
Azure Cloud Native テクニカル スペシャリスト

2. 井上 章 (いのうえ あきら)
http://aka.ms/chack
2008 年マイクロソフト入社。
主に .NET や Visual Studio, Microsoft Azure
などの開発技術を専門とするエバンジェリスト
として、技術書籍やオンライン記事などの執筆、
さまざまな技術イベントでの講演などを行う。
2018 年より Global Black Belt (GBB) という
技術専門組織に異動し、モバイルとクラウドを
中心としたアプリ開発技術の訴求活動に従事。

4. モノリシック アプリケーション
モノリシック
App
Large, all-inclusive app
UI
機能
A
機能
B
App
Data

5. • Model
データとビジネス ロジック を表現
• View
Model から取得したデータを
プレゼンテーション (UI) へ出力する
• Controller
ユーザーからの 入力 を受付け
View と Model を 制御 する
MVC パターン
V
C M
App
Data

6. シングル ページ アプリケーション (SPA)
フロントエンド バックエンド
JSON
XML
View Model
View
Async
HTML

7. JavaScript is the
Assembly Language of the Web.
by Scott Hanselman.

8. jQuery
高速・軽量な JavaScript ライブラリ
◼ AJAX (Asynchronous JavaScript + XML) がより容易に
参考: https://en.wikipedia.org/wiki/Timeline_of_web_browsers

9. Large scale JavaScript development is hard.

10. JavaScript (ECMAScript 3) の課題

11. TypeScript
Any browser. Any host. Any OS. Open Source.
JavaScript のスーパーセット
ES 3 以上の環境をサポート
静的型付けとオブジェクト指向
多くの開発ツールのサポート
最新 ES 言語仕様を先取り
JS 開発生産性を向上

12. TypeScript のコンパイルの流れ
TypeScript
ファイル
(*.ts)
TypeScript
コンパイラ
(tsc)
JavaScript
ファイル
(*.js)
TypeScript
型定義ファイル
(*.d.ts)
JavaScript
実行エンジン
Node.js または
WSH (WScript.Shell)
で実行
ECMAScript 3 (ES3)
ECMAScript 5 (ES5)
ECMAScript 2015+ (ES2015, ES2016, ES2017, ES2018, ES2019, ESNEXT)
Web ブラウザーや
Node.js など

13. JavaScript の 3 大フレームワークの選択
Facebook が開発 Google とコミュニティが開発 コミュニティ中心の開発

14. フロントエンド フレームワークの利点
• サイト/アプリの応答性を高める、より高速で効率的な DOM のリロードと更新
パフォーマンスの高速化
• プロジェクト、コンポーネント、テストなどを適切に定義するためのデザインパターン
メンテナンス性
• コンポーネントベースの設計: 自己完結型コンポーネントを使用してサイト コンテンツを設計構成可能
コンポーネントの再利用
• アプリケーションの状態をフレームワークのデータ モデル内で一元管理 (DOM 全体に分散しない)
データ管理
• Web フロントエンド開発に関するコミュニティ、開発ツールとオープンソースライブラリの巨大なエコシステム
エコシステム

15. ASP.NET Core の SPA プロジェクト テンプレート
.NET

16. But, DON’T want to write JavaScript …

17. ASP.NET Web フォームと ASP.NET MVC
Web フォーム
✓ 豊富なサーバー コントロール
✓ イベント駆動型プログラミング
ASP.NET MVC
✓ HTML ベースの UI 開発
✓ Model-View-Controller パターン
D & D 配置
容易な UI 開発
Web 標準志向
テスト駆動開発

18. https://...
JS

19. ◼
◼
◼
◼
◼
◼
◼
◼
◼
◼
◼
ASP.NET Core 3.0 Blazor
https://blazor.net
Razor Components
.NET
WebAssembly

20. https://...
DOM
Razor Components
.NET
WebAssembly
https...
DOM
ASP.NET Core
SignalR
Razor Components
.NET

21. https://...
DOM
Razor Components
.NET
WebAssembly
https...
DOM
ASP.NET Core
SignalR
Razor Components
.NET

22. Web アプリケーション アーキテクチャの選択
SPA + API
MVC
Hybrid
Blazor
フロントエンド バックエンド
View
View
Data
Data
Data

23. クラウド ネイティブとは？
CNCF Cloud Native Definition v1.0 (CNCF による定義)
Cloud native technologies empower organizations to build and run scalable applications in modern, dynamic environments such as public, private,
and hybrid clouds. Containers, service meshes, microservices, immutable infrastructure, and declarative APIs exemplify this approach.
These techniques enable loosely coupled systems that are resilient, manageable, and observable. Combined with robust automation, they allow
engineers to make high-impact changes frequently and predictably with minimal toil.
The Cloud Native Computing Foundation seeks to drive adoption of this paradigm by fostering and sustaining an ecosystem of open source, vendor-
neutral projects. We democratize state-of-the-art patterns to make these innovations accessible for everyone.
https://github.com/cncf/toc/blob/master/DEFINITION.md

24. 能力
エクスペリエンス
技術
アーキテクチャ
クラウド ネイティブ
アプリケーション
クラウド ネイティブを支える技術とアーキテクチャ
Cloud Native Definition v1.0

26. https://l.cncf.io

27. コンテナーとは？
コンテナー
• ハードウェア仮想化
• スケール単位は
仮想マシン (VM)
• OS の仮想化
• スケール単位は アプリ (コンテナー)
仮想マシンApp
Container
App
On-premises
Cloud
どこでも
Monolith
Microservice
どんな構成でも
.Net
Java
Python
Node
どんな言語でも
Linux
Windows
Linux でも
Windows でも
クラウドからオンプレミスまで
どこでも実行可能な高速で軽量な
コンテナー エンジン

29. Kubernetes ～ コンテナー オーケストレーター
• マイクロサービス アーキテクチャでは、アプリが比較的小規模の独立したサービスで構成され複数コンテナーを連携させる必要がある
• 複数コンテナーを管理する オーケストレーション機能 が重要な役割を担う
https://kubernetes.io/

30. マイクロサービスへのダイレクト コミュニケーション
ダイレクト コミュニケーションの課題
• バックエンドへのリクエストの最小化
• 認証、データ変換、動的な要求の
ディスパッチ
• 非インターネット対応プロトコルを使
用するサービスとの通信
• モバイル アプリ向けの通信の最適化

31. API ゲートウェイ パターン / BFF (Backend for Frontend)

32. .NET マイクロサービス アーキテクチャ リファレンス

33. dot.net/get-core3

34. 2014
Many
.NETs
.NET FRAMEWORK .NET CORE XAMARIN / MONO

35. 2014 2016
Many
.NETs
.NET
Standard
.NET FRAMEWORK .NET CORE XAMARIN / MONO

36. XAMARIN / MONO.NET FRAMEWORK .NET
2014 Next2016
Many
.NETs
.NET
standard
.NET
.NET CORE
.NET STANDARD

37. • 代替は Open source core workflow for Windows workflow (WF): https://github.com/UiPath/corewf
Introducing .NET 5
.NET
.NET STANDARD

38. .NET スケジュール
July 2019
.NET Core 3.0
Preview
Sept 2019
.NET Core 3.0
Dec 2019
.NET Core 3.1
LTS
Nov 2020
.NET 5.0
Nov 2021
.NET 6.0
LTS
Nov 2022
.NET 7.0
Nov 2023
.NET 8.0
LTS

39. Containers
& PaaS
Minimal code changes
Microservices Architecture
& Serverless
Architected for the cloud
modernized/rewrite
IaaS
“Lift & shift”
No code changes
On-Premises
Infrastructure Platform
移行 モダナイズ
既存
アプリ＆サービス
on-premises
Rehost
クラウド
インフラ対応
apps
クラウド
ネイティブ
apps
Rearchitect / Rebuild
クラウド
最適化
apps
PaaS & コンテナー利用
CI/CD 自動化

40. Microsoft Developers

41. © 2018 Microsoft Corporation. All rights reserved.
本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。
© 2019 Microsoft Corporation. All rights reserved.
本情報の内容 (添付文書、リンク先などを含む) は、本資料作成時点のものであり、予告なく変更される場合があります。
本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。