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
Web開発者が始める .NET MAUI Blazor App
PDF
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
PDF
Web開発者にお勧め .NET MAUI Blazor App
PDF
いつやるの?Git入門 v1.1.0
PDF
DockerとPodmanの比較
PDF
インフラエンジニアってなんでしたっけ(仮)
PPTX
深い親子関係のテーブル設計
PDF
MagicOnion入門
Web開発者が始める .NET MAUI Blazor App
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
Web開発者にお勧め .NET MAUI Blazor App
いつやるの?Git入門 v1.1.0
DockerとPodmanの比較
インフラエンジニアってなんでしたっけ(仮)
深い親子関係のテーブル設計
MagicOnion入門

What's hot (20)

PDF
ゼロからはじめるKVM超入門
PDF
シリコンバレーの「何が」凄いのか
PDF
これからSpringを使う開発者が知っておくべきこと
PDF
Dockerfile を書くためのベストプラクティス解説編
PDF
WebSocket / WebRTCの技術紹介
PDF
知っているようで知らないPAMのお話
PPTX
Redisの特徴と活用方法について
PDF
Concourseで快適な自動化の旅
PPTX
OS入門
PDF
エンジニアから飛んでくるマサカリを受け止める心得
PDF
CSI Driverを開発し自社プライベートクラウドにより適した安全なKubernetes Secrets管理を実現した話
PDF
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
PDF
GPU仮想化最前線 - KVMGTとvirtio-gpu -
PDF
Grafana LokiではじめるKubernetesロギングハンズオン(NTT Tech Conference #4 ハンズオン資料)
PPTX
サポート エンジニアが語る、Microsoft Azure を支えるインフラの秘密
PDF
.NET 7におけるBlazorの新機能
PDF
こわくない Git
PDF
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
PDF
マイクロサービスに至る歴史とこれから - XP祭り2021
PPTX
Dockerからcontainerdへの移行
ゼロからはじめるKVM超入門
シリコンバレーの「何が」凄いのか
これからSpringを使う開発者が知っておくべきこと
Dockerfile を書くためのベストプラクティス解説編
WebSocket / WebRTCの技術紹介
知っているようで知らないPAMのお話
Redisの特徴と活用方法について
Concourseで快適な自動化の旅
OS入門
エンジニアから飛んでくるマサカリを受け止める心得
CSI Driverを開発し自社プライベートクラウドにより適した安全なKubernetes Secrets管理を実現した話
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
GPU仮想化最前線 - KVMGTとvirtio-gpu -
Grafana LokiではじめるKubernetesロギングハンズオン(NTT Tech Conference #4 ハンズオン資料)
サポート エンジニアが語る、Microsoft Azure を支えるインフラの秘密
.NET 7におけるBlazorの新機能
こわくない Git
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
マイクロサービスに至る歴史とこれから - XP祭り2021
Dockerからcontainerdへの移行
Ad

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

PDF
Application development with c#, .net 6, blazor web assembly, asp.net web api...
PDF
【BS2】.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
New Features of DotNet 6 Blazor WASM
PDF
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
PDF
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
PDF
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
PDF
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
PDF
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
PDF
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
PDF
.NETアプリケーションのクラウド最適化
PDF
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
PDF
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
PPTX
Interoperability of webassembly with javascript
PDF
[Japan Tech summit 2017] APP 001
PDF
XDev2010 WindowsAzure
PDF
どっちの VS ショー / 伝統の Visual Studio 2019、人気の Visual Studio Code
PDF
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
Application development with c#, .net 6, blazor web assembly, asp.net web api...
【BS2】.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...
New Features of DotNet 6 Blazor WASM
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
【de:code 2020】 Build 2020 最新情報 〜 Azure & Visual Studio & .NET 〜
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
.NETアプリケーションのクラウド最適化
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
Interoperability of webassembly with javascript
[Japan Tech summit 2017] APP 001
XDev2010 WindowsAzure
どっちの VS ショー / 伝統の Visual Studio 2019、人気の Visual Studio Code
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
Ad

More from Akira Inoue (20)

PDF
New Features in C# 10/11
PDF
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
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 アプリ開発の技術トレンドとツールの進化
PDF
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発
PDF
Angular ユーザーなら押さえておきたい! TypeScript と Visual Studio Code の基礎と活用
New Features in C# 10/11
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
.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 アプリ開発の技術トレンドとツールの進化
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発
Angular ユーザーなら押さえておきたい! TypeScript と Visual Studio Code の基礎と活用

.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 の⽶国およびその他の国における登録商標または商標です。 その他、記載されている会社名および製品名は、⼀般に各社の商標です。