Blazor Web Assembly (C#) を触ってみた

Naito Oshima
Naito OshimaSRE / ex-Support Escalation Engineer (Developer Support) um ex-Microsoft
Blazor Web Assembly (C#) を触っ
てみた
Naito Oshima
自己紹介
 Naito Oshima
 Developer Support Engineer
 ひたすらデバッグ、トラシュー、開発支援が仕事
 主に以下あたりが守備範囲
 Azure Bot Service (React、C# / Node.js、Azure Web
Apps etc…)
 ASP.NET / ASP.NET Core (C#)
 IIS
 Azure SignalR Service
フロントエンド開発, SPA 開発というと…
React, Vue, Angular etc…
いや
JS ライブラリ / フレームワーク以外の
選択肢も…
Blazor もあるよ!
Blazor とは…?
ざっくり言うと…
.NET (C#) を使って SPA 開発できる フレームワーク
今日の Goal は…
Blazor (C#) という選択肢を知ってもらう!
What is Blazor ?
• .NET で書ける SPA 向けフロントエン
ドフレームワーク
• Blazor WebAssembly (上) と Blazor
Server (下) の 2 種類
• Blazor WebAssembly は完全 SPAで、
wasm で書いた .NET ランタイム上で
動く
• Blazor Server は SignalR の技術を利用
して疑似的に SPA を実現
Blazor Web Assembly
• JavaScript ではなく C# でコードを記述
• .NET Runtime がブラウザで動くよ!
• コンポーネントは Razor コンポーネントと
いう機能で構成
• JavaScript interop で JS を介してブラウザ
の全機能にアクセス可能
• 例えば、HttpClient (.NET) は、ブラウザの
Fetch API を使用して実装
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1#blazor-webassembly
dotnet CLI で簡単にテンプレを動かせる
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/tooling?view=aspnetcore-3.1&pivots=linux
Blazor Web Assembly
• wasm の知識は基本いらず C# の知識さえあれば書けるよ!
• Razor コンポーネントは割と書きやすい印象 (個人的見解)
• クロスプラットフォーム動作の .NET を前提にしてるので、Mac
でも Linux でも開発可能だよ!Windows 要らず。
• 勿論 Mac の Microsoft Edge (based on Chromium) でも動く!
• 最近出た Azure Static Web Apps にデプロイ/ホストも可能
どんな人に嬉しいの?
• ASP.NET, ASP.NET Core あたりを触ることが多い方
• C# が割と得意な方
• 今後 SPA 開発に興味がある方
• Wasm で動く .NET ランタイム上の Blazor 開発に単純
に興味がある人
• 逆に、Angular / React etc… に慣れ親しんでいる、
もしくは既に稼働させてる人は API が ASP.NET Core
で動いているからといって無理して移行する必要はな
いと思ってます (あくまで個人的見解)
SPA 開発に Blazor (C#) の
選択肢を!
Hello World はこちら
5 分で Hello World できる Blazor WebAssembly (C#)
https://qiita.com/nt_tn/items/97c0bc75e3afe9e02997
1 von 17

Recomendados

VS Code Remote Containersを使った Angular開発 von
VS Code Remote Containersを使った Angular開発VS Code Remote Containersを使った Angular開発
VS Code Remote Containersを使った Angular開発ShuheiHonma
4.5K views8 Folien
React + Amplifyで アプリ開発 von
React + Amplifyで アプリ開発React + Amplifyで アプリ開発
React + Amplifyで アプリ開発虎の穴 開発室
5.3K views30 Folien
AWS amplify studioが変えるフロントエンド開発の未来とは von
AWS amplify studioが変えるフロントエンド開発の未来とはAWS amplify studioが変えるフロントエンド開発の未来とは
AWS amplify studioが変えるフロントエンド開発の未来とはKoitabashi Yoshitaka
262 views43 Folien
【PlayFab】UnityAdsのリワード広告を統合する方法 von
【PlayFab】UnityAdsのリワード広告を統合する方法【PlayFab】UnityAdsのリワード広告を統合する方法
【PlayFab】UnityAdsのリワード広告を統合する方法TakuyaNakajo
785 views31 Folien
GCPの画像認識APIの紹介 von
GCPの画像認識APIの紹介 GCPの画像認識APIの紹介
GCPの画像認識APIの紹介 虎の穴 開発室
332 views23 Folien
Lt 20150711 von
Lt 20150711Lt 20150711
Lt 20150711Tomoyuki Obi
653 views24 Folien

Más contenido relacionado

Was ist angesagt?

Visual studio 2019 updates pickup! von
Visual studio 2019 updates pickup!Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!一希 大田
2K views11 Folien
V8 Iginition Interpreter von
V8 Iginition InterpreterV8 Iginition Interpreter
V8 Iginition InterpreterTaketoshi 青野健利
1K views15 Folien
Capacitor von
CapacitorCapacitor
CapacitorMasayuki KaToH
125 views17 Folien
事前準備の手引書 von
事前準備の手引書事前準備の手引書
事前準備の手引書Makoto Oya
839 views14 Folien
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築 von
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築Joni
3.7K views37 Folien
はじめてのAWS CLI von
はじめてのAWS CLIはじめてのAWS CLI
はじめてのAWS CLINobuhiro Nakayama
1.1K views57 Folien

Was ist angesagt?(20)

Visual studio 2019 updates pickup! von 一希 大田
Visual studio 2019 updates pickup!Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
一希 大田2K views
事前準備の手引書 von Makoto Oya
事前準備の手引書事前準備の手引書
事前準備の手引書
Makoto Oya839 views
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築 von Joni
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
Joni 3.7K views
Flash Professional CS6 の新機能のご紹介 AIR編 von KinkumaDesign
Flash Professional CS6 の新機能のご紹介 AIR編Flash Professional CS6 の新機能のご紹介 AIR編
Flash Professional CS6 の新機能のご紹介 AIR編
KinkumaDesign2.2K views
明日からはじめられる Docker + さくらvpsを使った開発環境構築 von MILI-LLC
明日からはじめられる Docker + さくらvpsを使った開発環境構築明日からはじめられる Docker + さくらvpsを使った開発環境構築
明日からはじめられる Docker + さくらvpsを使った開発環境構築
MILI-LLC1.5K views
PhysXを使って 揺れものやってみた~UE版~ von poko ponmaru
PhysXを使って 揺れものやってみた~UE版~PhysXを使って 揺れものやってみた~UE版~
PhysXを使って 揺れものやってみた~UE版~
poko ponmaru284 views
React native vol3 von dcubeio
React native vol3React native vol3
React native vol3
dcubeio440 views
Realm,rx swift,repro を使ってみて von Daisuke Nagata
Realm,rx swift,repro を使ってみてRealm,rx swift,repro を使ってみて
Realm,rx swift,repro を使ってみて
Daisuke Nagata1.6K views
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた von Yasunori Kirimoto
ZappaでDBもパッケージしたサーバーレスAPIを構築してみたZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
Yasunori Kirimoto1.3K views
仮想サーバは、もう不要?!今からIoTやるなら 「サーバレス・コンピューティング」 von 真吾 吉田
仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」
仮想サーバは、もう不要?!今からIoTやるなら 「サーバレス・コンピューティング」
真吾 吉田1.1K views
Kubernetesのない世界 すべてがサーバーレスになる von 真吾 吉田
Kubernetesのない世界 すべてがサーバーレスになるKubernetesのない世界 すべてがサーバーレスになる
Kubernetesのない世界 すべてがサーバーレスになる
真吾 吉田33.6K views
CA流 フロントエンドエンジニアの働きかた von Kazunari Hara
CA流 フロントエンドエンジニアの働きかたCA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかた
Kazunari Hara834 views
JavaScriptでパワポを作ろう von Saki Homma
JavaScriptでパワポを作ろうJavaScriptでパワポを作ろう
JavaScriptでパワポを作ろう
Saki Homma4.6K views
Visual Studio Live Share で 猛暑を乗り切ろう! von Saki Homma
Visual Studio Live Share で猛暑を乗り切ろう!Visual Studio Live Share で猛暑を乗り切ろう!
Visual Studio Live Share で 猛暑を乗り切ろう!
Saki Homma753 views
こんなに使える!今どきのAPIドキュメンテーションツール von dcubeio
こんなに使える!今どきのAPIドキュメンテーションツールこんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio25.9K views

Similar a Blazor Web Assembly (C#) を触ってみた

Application development with c#, .net 6, blazor web assembly, asp.net web api... von
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...Shotaro Suzuki
355 views168 Folien
C# で Single Page Web アプリを 開発できる Blazor ― その魅力 von
C# で Single Page Web アプリを開発できる Blazor ― その魅力C# で Single Page Web アプリを開発できる Blazor ― その魅力
C# で Single Page Web アプリを 開発できる Blazor ― その魅力Jun-ichi Sakamoto
3.9K views47 Folien
Application development with c#, .net 6, blazor web assembly, asp.net web api... von
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...Shotaro Suzuki
223 views238 Folien
New Features of DotNet 6 Blazor WASM von
New Features of DotNet 6 Blazor WASMNew Features of DotNet 6 Blazor WASM
New Features of DotNet 6 Blazor WASMShotaro Suzuki
593 views33 Folien
Application development with c#, .net 6, blazor web assembly, asp.net web api... von
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...Shotaro Suzuki
316 views39 Folien
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela... von
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...Shotaro Suzuki
608 views34 Folien

Similar a Blazor Web Assembly (C#) を触ってみた(20)

Application development with c#, .net 6, blazor web assembly, asp.net web api... von Shotaro Suzuki
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...
Shotaro Suzuki355 views
C# で Single Page Web アプリを 開発できる Blazor ― その魅力 von Jun-ichi Sakamoto
C# で Single Page Web アプリを開発できる Blazor ― その魅力C# で Single Page Web アプリを開発できる Blazor ― その魅力
C# で Single Page Web アプリを 開発できる Blazor ― その魅力
Jun-ichi Sakamoto3.9K views
Application development with c#, .net 6, blazor web assembly, asp.net web api... von Shotaro Suzuki
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...
Shotaro Suzuki223 views
New Features of DotNet 6 Blazor WASM von Shotaro Suzuki
New Features of DotNet 6 Blazor WASMNew Features of DotNet 6 Blazor WASM
New Features of DotNet 6 Blazor WASM
Shotaro Suzuki593 views
Application development with c#, .net 6, blazor web assembly, asp.net web api... von Shotaro Suzuki
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...
Shotaro Suzuki316 views
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela... von Shotaro Suzuki
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Shotaro Suzuki608 views
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは von Jun-ichi Sakamoto
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とはがんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto21.8K views
Application development with c#, .net 6, blazor web assembly, asp.net web api... von Shotaro Suzuki
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...
Shotaro Suzuki413 views
.NET Coreから概観する.NETのOSSへの取り組み von Kouji Matsui
.NET Coreから概観する.NETのOSSへの取り組み.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Kouji Matsui5.7K views
はじめての Azure 開発 von Yoshitaka Seo
はじめての Azure 開発はじめての Azure 開発
はじめての Azure 開発
Yoshitaka Seo1.3K views
温故知新ローカルに検証環境を作ろう von 武彦 大山
温故知新ローカルに検証環境を作ろう温故知新ローカルに検証環境を作ろう
温故知新ローカルに検証環境を作ろう
武彦 大山587 views
ASP.NETの進化とASP.NET Core Blazorの凄さ von Sho Okada
ASP.NETの進化とASP.NET Core Blazorの凄さASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
Sho Okada6.5K views
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性 von Yamamoto Reki
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
Yamamoto Reki4.6K views
2016/12/17 ASP.NET フロントエンドタスク入門 von miso- soup3
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3756 views
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して von Akira Inoue
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
Akira Inoue2.6K views
サーバーレスの今とこれから von 真吾 吉田
サーバーレスの今とこれからサーバーレスの今とこれから
サーバーレスの今とこれから
真吾 吉田35.3K views
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース! von Akira Inoue
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
Akira Inoue900 views

Último

Windows 11 information that can be used at the development site von
Windows 11 information that can be used at the development siteWindows 11 information that can be used at the development site
Windows 11 information that can be used at the development siteAtomu Hidaka
80 views41 Folien
定例会スライド_キャチs 公開用.pdf von
定例会スライド_キャチs 公開用.pdf定例会スライド_キャチs 公開用.pdf
定例会スライド_キャチs 公開用.pdfKeio Robotics Association
97 views64 Folien
Web3 Career_クレデン資料 .pdf von
Web3 Career_クレデン資料 .pdfWeb3 Career_クレデン資料 .pdf
Web3 Career_クレデン資料 .pdfnanamatsuo
16 views9 Folien
SSH応用編_20231129.pdf von
SSH応用編_20231129.pdfSSH応用編_20231129.pdf
SSH応用編_20231129.pdficebreaker4
287 views13 Folien
SNMPセキュリティ超入門 von
SNMPセキュリティ超入門SNMPセキュリティ超入門
SNMPセキュリティ超入門mkoda
301 views15 Folien
JJUG CCC.pptx von
JJUG CCC.pptxJJUG CCC.pptx
JJUG CCC.pptxKanta Sasaki
6 views14 Folien

Último(11)

Windows 11 information that can be used at the development site von Atomu Hidaka
Windows 11 information that can be used at the development siteWindows 11 information that can be used at the development site
Windows 11 information that can be used at the development site
Atomu Hidaka80 views
Web3 Career_クレデン資料 .pdf von nanamatsuo
Web3 Career_クレデン資料 .pdfWeb3 Career_クレデン資料 .pdf
Web3 Career_クレデン資料 .pdf
nanamatsuo16 views
SSH応用編_20231129.pdf von icebreaker4
SSH応用編_20231129.pdfSSH応用編_20231129.pdf
SSH応用編_20231129.pdf
icebreaker4287 views
SNMPセキュリティ超入門 von mkoda
SNMPセキュリティ超入門SNMPセキュリティ超入門
SNMPセキュリティ超入門
mkoda301 views
今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -(PostgreSQL Conference Japan 20... von NTT DATA Technology & Innovation
今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -(PostgreSQL Conference Japan 20...今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -(PostgreSQL Conference Japan 20...
今、改めて考えるPostgreSQLプラットフォーム - マルチクラウドとポータビリティ -(PostgreSQL Conference Japan 20...
速習! PostgreSQL専用HAソフトウェア: Patroni(PostgreSQL Conference Japan 2023 発表資料) von NTT DATA Technology & Innovation
速習! PostgreSQL専用HAソフトウェア: Patroni(PostgreSQL Conference Japan 2023 発表資料)速習! PostgreSQL専用HAソフトウェア: Patroni(PostgreSQL Conference Japan 2023 発表資料)
速習! PostgreSQL専用HAソフトウェア: Patroni(PostgreSQL Conference Japan 2023 発表資料)
さくらのひやおろし2023 von 法林浩之
さくらのひやおろし2023さくらのひやおろし2023
さくらのひやおろし2023
法林浩之94 views
The Things Stack説明資料 by The Things Industries von CRI Japan, Inc.
The Things Stack説明資料 by The Things IndustriesThe Things Stack説明資料 by The Things Industries
The Things Stack説明資料 by The Things Industries
CRI Japan, Inc.51 views

Blazor Web Assembly (C#) を触ってみた