SlideShare a Scribd company logo
マイクロソフト コーポレーション
グローバル ブラックベルト
Azure App Innovation スペシャリスト
井上 章 (いのうえ あきら) @chack411
.NET 6 と Blazor で作る
クロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
http://msft.it/6016Z6P98
.NET 6 を使ってみよう! | Azure ⼊⾨ 44 [#くらでべ]
https://youtu.be/9WR3eQAytO8
n .NET Core / Xamarin / .NET Framework アプリケーション モデルをサポート
n 統⼀プラットフォームへ向けた .NET Core の進化
n シングル SDK, ⼀つの BCL, 統⼀されたツール チェーン
n クロスプラットフォーム ネイティブ UI
n クロスプラットフォーム Web UI
n Cloud Native への投資
n パフォーマンス、サイズ、診断、Azure サービスの継続的な改善
n .NET 6 に含まれないアプリケーション モデル
n ASP
.NET Web Forms
n WCF (Windows Communication Foundation)
n WF (Windows Workflow Foundation)
– .NET 6
.NET Framework
Mono / Xamarin
.NET Core
.NET
One .NET vision
.NET has the best of breed solutions for all modern workloads
ASP.NET Core Blazor
n .NET (Razor Pages & C#) でフロントエンド Web UI を開発
n JavaScript, Angular, React, Vue などを知らなくても OK
n .NET の安定性と⼀貫性
n すべての WebAssembly 対応ブラウザーで動作
n ネイティブ パフォーマンス, プラグインなどは不要
n Client と Server 間での C# コードの共有、強く型付けされた開発
n 2 種類のホスティング モデル
n Blazor サーバー アプリ : サーバーサイドの .NET プロセスで実⾏、SignalR で通信
n Blazor WebAssembly アプリ : Web ブラウザーの WebAssembly で実⾏
https://blazor.net
Razor Components
.NET
WebAssembly
[参考] ASP
.NET Web Forms から Blazor への移行 | Microsoft Docs
Blazor – full stack web apps with .NET
Blazor サーバー Blazor WebAssembly
DOM
Blazor
WebAssembly
.NET
Razor Components
Blazor
.NET
Razor Components
DOM
SignalR
ü サーバー側機能へフルアクセス
ü ⾼速起動
ü コードはサーバー側で実⾏
ü 古いブラウザとシンクライアントをサポート
û 永続的なコネクションが必要
û UI レイテンシーが⾼い
ü完全にクライアント側で実⾏
üサーバー コンポーネントは不要
ü静的サイトでホスト
üオフライン実⾏可能
ûダウンロードサイズが⼤きい
û実⾏時パフォーマンスがサーバー側実⾏より低速
Blazor – full stack web apps with .NET
Blazor サーバー Blazor WebAssembly
DOM
Blazor
WebAssembly
.NET
Razor Components
Blazor
.NET
Razor Components
DOM
SignalR
ü サーバー側機能へフルアクセス
ü ⾼速起動
ü コードはサーバー側で実⾏
ü 古いブラウザとシンクライアントをサポート
û 永続的なコネクションが必要
û UI レイテンシーが⾼い
ü完全にクライアント側で実⾏
üサーバー コンポーネントは不要
ü静的サイトでホスト
üオフライン実⾏可能
ûダウンロードサイズが⼤きい
û実⾏時パフォーマンスがサーバー側実⾏より低速
Blazor WebAssembly ahead-of-time (AOT) compilation
Smaller Blazor WebAssembly app download size
Error boundaries
Razor component type inference & generic type constraints
Dynamic components
Blazor state persistence during prerendering
.NET 6
Hybrid apps with .NET & Blazor
Native desktop app
Web view
Native mobile app
Web view
.NET
.NET
Blazor
Blazor
ネイティブと Web の UI コンポーネントの再利⽤
.NET Multi-platform App UI 上に構築
ネイティブ アプリ コンテナーと埋め込みコントロール
2022 年 春頃に GA 予定
Hybrid apps with Blazor & .NET MAUI
.NET MAUI
Blazor
Can use native app
container & controls
iOS
macOS
.NET〜 すべてのアプリのための統⼀プラットフォーム
COMMON BASE LIBARIES/APIs
INFRASTRUCTURE
.NET 6
TOOLS
Visual Studio Code
CLI
Visual Studio
Visual Studio for Mac
WEB MOBILE GAMING IoT AI
ASP.NET
Blazor
.NET MAUI
Xamarin
Unity ARM32
ARM64
ML.NET
.NET for
Apache Spark
DESKTOP
.NET MAUI
WPF
WinForms
CLOUD
Azure
ECOSYSTEM
NuGet
GitHub
Components,
tools, library
vendors
n 本書に記載した情報は、本書各項⽬に関する発⾏⽇現在の Microsoft の⾒解を表明するものです。Microsoftは絶えず変化する市場に対応しなければならないため、ここに記載した情報
に対していかなる責務を負うものではなく、提⽰された情報の信憑性については保証できません。
n 本書は情報提供のみを⽬的としています。 Microsoft は、明⽰的または暗⽰的を問わず、本書にいかなる保証も与えるものではありません。
n すべての当該著作権法を遵守することはお客様の責務です。Microsoftの書⾯による明確な許可なく、本書の如何なる部分についても、転載や検索システムへの格納または挿⼊を⾏うこ
とは、どのような形式または⼿段(電⼦的、機械的、複写、レコーディング、その他)、および⽬的であっても禁じられています。これらは著作権保護された権利を制限するものではあ
りません。
n Microsoftは、本書の内容を保護する特許、特許出願書、商標、著作権、またはその他の知的財産権を保有する場合があります。Microsoftから書⾯によるライセンス契約が明確に供給さ
れる場合を除いて、本書の提供はこれらの特許、商標、著作権、またはその他の知的財産へのライセンスを与えるものではありません。
n Microsoft, Windows, その他本⽂中に登場した各製品名は、Microsoft Corporation の⽶国およびその他の国における登録商標または商標です。
その他、記載されている会社名および製品名は、⼀般に各社の商標です。

More Related Content

PDF
ASP.NETの進化とASP.NET Core Blazorの凄さ
PPTX
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
PPTX
ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発
PDF
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
PDF
Mavenの真実とウソ
PDF
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
PDF
ドメイン駆動設計をゲーム開発に活かす
PDF
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
ASP.NETの進化とASP.NET Core Blazorの凄さ
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
Mavenの真実とウソ
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
ドメイン駆動設計をゲーム開発に活かす
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは

What's hot (20)

PDF
Akkaとは。アクターモデル とは。
PDF
【BS2】.NET 6 最新アップデート
PDF
async/awaitダークサイド is 何
PDF
ネットワーク運用自動化の実際〜現場で使われているツールを調査してみた〜
PDF
WebSocket / WebRTCの技術紹介
PPTX
ぱぱっと理解するSpring Cloudの基本
PPTX
Redisの特徴と活用方法について
PDF
MagicOnion入門
PDF
WebブラウザでC#実行 WebAssemblyの技術
PDF
macOSの仮想化技術について ~Virtualization-rs Rust bindings for virtualization.framework ~
PDF
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
PDF
ドメイン駆動設計に15年取り組んでわかったこと
PDF
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
PPTX
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
PDF
PHPからgoへの移行で分かったこと
PDF
nginx入門
PDF
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
PDF
マイクロサービス 4つの分割アプローチ
PDF
ドメイン駆動設計の正しい歩き方
PDF
Docker Compose入門~今日から始めるComposeの初歩からswarm mode対応まで
Akkaとは。アクターモデル とは。
【BS2】.NET 6 最新アップデート
async/awaitダークサイド is 何
ネットワーク運用自動化の実際〜現場で使われているツールを調査してみた〜
WebSocket / WebRTCの技術紹介
ぱぱっと理解するSpring Cloudの基本
Redisの特徴と活用方法について
MagicOnion入門
WebブラウザでC#実行 WebAssemblyの技術
macOSの仮想化技術について ~Virtualization-rs Rust bindings for virtualization.framework ~
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
ドメイン駆動設計に15年取り組んでわかったこと
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
PHPからgoへの移行で分かったこと
nginx入門
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
マイクロサービス 4つの分割アプローチ
ドメイン駆動設計の正しい歩き方
Docker Compose入門~今日から始めるComposeの初歩からswarm mode対応まで
Ad

Similar to .NET 6 と Blazor で作るクロスプラットフォームアプリ概要 (20)

PDF
New Features of DotNet 6 Blazor WASM
PPTX
7 つの Blazor
PDF
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
PDF
Application development with c#, .net 6, blazor web assembly, asp.net web api...
PDF
Application development with c#, .net 6, blazor web assembly, asp.net web api...
PDF
Application development with c#, .net 6, blazor web assembly, asp.net web api...
PDF
Application development with c#, .net 6, blazor web assembly, asp.net web api...
PDF
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
PPTX
モノづくりBlazor勉強会1回目資料_Blazorについて.pptx
PDF
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
PPTX
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
PPTX
Interoperability of webassembly with javascript
PDF
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
PDF
C# で SPA を作る BLAZOR WEBASSEMBLY の進化 - そしてその先へ
PPTX
Blazor でアプリを作ろう! ~テンプレートインストールから最初のデバッグ実行まで~
PDF
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
PDF
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
PDF
.NET Framework アプリケーションの NET 5 への 移行を考える
PDF
Net6 Overview
PDF
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
New Features of DotNet 6 Blazor WASM
7 つの Blazor
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
モノづくりBlazor勉強会1回目資料_Blazorについて.pptx
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
Interoperability of webassembly with javascript
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
C# で SPA を作る BLAZOR WEBASSEMBLY の進化 - そしてその先へ
Blazor でアプリを作ろう! ~テンプレートインストールから最初のデバッグ実行まで~
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
.NET Framework アプリケーションの NET 5 への 移行を考える
Net6 Overview
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
Ad

More from Akira Inoue (20)

PDF
New Features in C# 10/11
PDF
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
PDF
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
PDF
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
PDF
.NET の過去、現在、そして未来
PDF
VS Code Live Share ~ 東京と大阪を繋いでみよう!
PDF
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
PDF
.NET の今と今後に思うこと (Tokyo Ver.)
PDF
.NET の今と今後に思うこと
PDF
.NET 最新ロードマップと今押さえておきたい技術要素
PDF
VS Code & Flaskで作るCloud NativeアプリとDevOps
PDF
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
PDF
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
PDF
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
PDF
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
PDF
.NET の今 ~ 最新アップデートと 2019 年の展望
PDF
.NET today and tomorrow
PDF
.NET の今とミライ (.NET Conf 2018 Japan Keynote)
PDF
Intelligent Mobile App と Cloud Native が創るアプリ開発の未来 ~ これからの時代のアプリケーション開発ビジョン ~
PDF
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化
New Features in C# 10/11
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
.NET の過去、現在、そして未来
VS Code Live Share ~ 東京と大阪を繋いでみよう!
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
.NET の今と今後に思うこと (Tokyo Ver.)
.NET の今と今後に思うこと
.NET 最新ロードマップと今押さえておきたい技術要素
VS Code & Flaskで作るCloud NativeアプリとDevOps
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
.NET の今 ~ 最新アップデートと 2019 年の展望
.NET today and tomorrow
.NET の今とミライ (.NET Conf 2018 Japan Keynote)
Intelligent Mobile App と Cloud Native が創るアプリ開発の未来 ~ これからの時代のアプリケーション開発ビジョン ~
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化

.NET 6 と Blazor で作るクロスプラットフォームアプリ概要

  • 1. マイクロソフト コーポレーション グローバル ブラックベルト Azure App Innovation スペシャリスト 井上 章 (いのうえ あきら) @chack411 .NET 6 と Blazor で作る クロスプラットフォームアプリ概要
  • 4. .NET 6 を使ってみよう! | Azure ⼊⾨ 44 [#くらでべ] https://youtu.be/9WR3eQAytO8
  • 5. n .NET Core / Xamarin / .NET Framework アプリケーション モデルをサポート n 統⼀プラットフォームへ向けた .NET Core の進化 n シングル SDK, ⼀つの BCL, 統⼀されたツール チェーン n クロスプラットフォーム ネイティブ UI n クロスプラットフォーム Web UI n Cloud Native への投資 n パフォーマンス、サイズ、診断、Azure サービスの継続的な改善 n .NET 6 に含まれないアプリケーション モデル n ASP .NET Web Forms n WCF (Windows Communication Foundation) n WF (Windows Workflow Foundation) – .NET 6 .NET Framework Mono / Xamarin .NET Core .NET One .NET vision .NET has the best of breed solutions for all modern workloads
  • 6. ASP.NET Core Blazor n .NET (Razor Pages & C#) でフロントエンド Web UI を開発 n JavaScript, Angular, React, Vue などを知らなくても OK n .NET の安定性と⼀貫性 n すべての WebAssembly 対応ブラウザーで動作 n ネイティブ パフォーマンス, プラグインなどは不要 n Client と Server 間での C# コードの共有、強く型付けされた開発 n 2 種類のホスティング モデル n Blazor サーバー アプリ : サーバーサイドの .NET プロセスで実⾏、SignalR で通信 n Blazor WebAssembly アプリ : Web ブラウザーの WebAssembly で実⾏ https://blazor.net Razor Components .NET WebAssembly [参考] ASP .NET Web Forms から Blazor への移行 | Microsoft Docs
  • 7. Blazor – full stack web apps with .NET Blazor サーバー Blazor WebAssembly DOM Blazor WebAssembly .NET Razor Components Blazor .NET Razor Components DOM SignalR ü サーバー側機能へフルアクセス ü ⾼速起動 ü コードはサーバー側で実⾏ ü 古いブラウザとシンクライアントをサポート û 永続的なコネクションが必要 û UI レイテンシーが⾼い ü完全にクライアント側で実⾏ üサーバー コンポーネントは不要 ü静的サイトでホスト üオフライン実⾏可能 ûダウンロードサイズが⼤きい û実⾏時パフォーマンスがサーバー側実⾏より低速
  • 8. Blazor – full stack web apps with .NET Blazor サーバー Blazor WebAssembly DOM Blazor WebAssembly .NET Razor Components Blazor .NET Razor Components DOM SignalR ü サーバー側機能へフルアクセス ü ⾼速起動 ü コードはサーバー側で実⾏ ü 古いブラウザとシンクライアントをサポート û 永続的なコネクションが必要 û UI レイテンシーが⾼い ü完全にクライアント側で実⾏ üサーバー コンポーネントは不要 ü静的サイトでホスト üオフライン実⾏可能 ûダウンロードサイズが⼤きい û実⾏時パフォーマンスがサーバー側実⾏より低速 Blazor WebAssembly ahead-of-time (AOT) compilation Smaller Blazor WebAssembly app download size Error boundaries Razor component type inference & generic type constraints Dynamic components Blazor state persistence during prerendering .NET 6
  • 9. Hybrid apps with .NET & Blazor Native desktop app Web view Native mobile app Web view .NET .NET Blazor Blazor
  • 10. ネイティブと Web の UI コンポーネントの再利⽤ .NET Multi-platform App UI 上に構築 ネイティブ アプリ コンテナーと埋め込みコントロール 2022 年 春頃に GA 予定 Hybrid apps with Blazor & .NET MAUI .NET MAUI Blazor Can use native app container & controls iOS macOS
  • 11. .NET〜 すべてのアプリのための統⼀プラットフォーム COMMON BASE LIBARIES/APIs INFRASTRUCTURE .NET 6 TOOLS Visual Studio Code CLI Visual Studio Visual Studio for Mac WEB MOBILE GAMING IoT AI ASP.NET Blazor .NET MAUI Xamarin Unity ARM32 ARM64 ML.NET .NET for Apache Spark DESKTOP .NET MAUI WPF WinForms CLOUD Azure ECOSYSTEM NuGet GitHub Components, tools, library vendors
  • 12. n 本書に記載した情報は、本書各項⽬に関する発⾏⽇現在の Microsoft の⾒解を表明するものです。Microsoftは絶えず変化する市場に対応しなければならないため、ここに記載した情報 に対していかなる責務を負うものではなく、提⽰された情報の信憑性については保証できません。 n 本書は情報提供のみを⽬的としています。 Microsoft は、明⽰的または暗⽰的を問わず、本書にいかなる保証も与えるものではありません。 n すべての当該著作権法を遵守することはお客様の責務です。Microsoftの書⾯による明確な許可なく、本書の如何なる部分についても、転載や検索システムへの格納または挿⼊を⾏うこ とは、どのような形式または⼿段(電⼦的、機械的、複写、レコーディング、その他)、および⽬的であっても禁じられています。これらは著作権保護された権利を制限するものではあ りません。 n Microsoftは、本書の内容を保護する特許、特許出願書、商標、著作権、またはその他の知的財産権を保有する場合があります。Microsoftから書⾯によるライセンス契約が明確に供給さ れる場合を除いて、本書の提供はこれらの特許、商標、著作権、またはその他の知的財産へのライセンスを与えるものではありません。 n Microsoft, Windows, その他本⽂中に登場した各製品名は、Microsoft Corporation の⽶国およびその他の国における登録商標または商標です。 その他、記載されている会社名および製品名は、⼀般に各社の商標です。