レガシー Web からの脱却～開発者が次に目指すべき Web アプリの姿とは？

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

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

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

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

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

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

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

Large scale JavaScript development is hard.

JavaScript (ECMAScript 3) の課題

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

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 など

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

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

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

But, DON’T want to write JavaScript …

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

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

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

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

クラウドネイティブとは？
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

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

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

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

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

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

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

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

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

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

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

.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

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 自動化

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

レガシー Web からの脱却～開発者が次に目指すべき Web アプリの姿とは？

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to レガシー Web からの脱却～開発者が次に目指すべき Web アプリの姿とは？

Similar to レガシー Web からの脱却～開発者が次に目指すべき Web アプリの姿とは？ (20)

More from Akira Inoue

More from Akira Inoue (20)