SlideShare a Scribd company logo
C# で Single Page Web アプリを
開発できる Blazor ― その魅力
AD61
C# ASP.NET Core MVC
TypeScript Angular 5
• JavaScript
• むしろ好きなほう
スピーカーのプロフィール
そんなスピーカーが虜になった
"Blazor" とは?
Blazor とは
SPA フレー
ムワーク
実行環境
開発環境
トランスパイラではありません
C#プログラムがブラウザで動作する!?
※本セッション中では、"C#" ばかり連呼してますが、このような動作原理なので、実は VB や F#
はじめ、とにかく .NET アセンブリであれば Blazor アプリ内から参照して実行することができます。
(但しスピーカー自身は未検証)
.dll がブラウザに次々とロードされていきますw
スマホもPCも、有名どころは WebAssembly OK!
https://caniuse.com/#feat=wasm
• SPA フレームワーク
込み
"C# がブラウザで動く" だけではありません
http://blazor-flight-finder.azurewebsites.net/
Visual Studio
IDE 用の Add-In
"C# がブラウザで動く" だけではありません
ActiveX などのプラグイン技術ではない
HTMLテンプレートは Razor 構文で記述
• 静的コンテンツ
Blazor で作るのは SPA!
2.1
2017 v.15.7
拡張
Blazor Language Services
Blazor で SPA 開発するのに必要な環境
※Linux/macOS では現時点では IDE 支援はありませんが、dotnet CLI での開発が可能なはずです (但しスピーカーは未確認)。
プロジェクトの新規作成から、すぐに作れる!
スピーカーはなぜ "Blazor" の虜に
なったのか?
学習コストが小さい
開発支援
共有
Blazor は開発者負担を減らす!
1. C# 開発者に対し
追加の学習コストが小さい
C# 開発者に対し、追加の学習コストが小さい
JavaScript/TypeScript やっ
てない C#開発者
SPA デビューできる可能性も?
C# のプロジェクト。
NuGet
C# 開発者に対し、追加の学習コストが小さい
2. Visual Studio IDE による
開発支援
Visual Studio IDE による開発支援
Visual Studio IDE による開発支援
Visual Studio IDE による開発支援
※Visual Studio の Professional 版以上だと、当然、Code Lens 機能でも参照を追えます。
3. サーバー/クライアント間での
型と手続きの共有
サーバー/クライアント間の、型と手続きの共有
サーバー/クライアント間の、型と手続きの共有
日時型に限ら
ず、メソッドや計算プロパ
ティも含めて、サーバー側
と同じオブジェクトが復元
サーバー/クライアント間の、型と手続きの共有
同じ型情報を共有・
使用可能
それほど良いものなら、なぜ
"Blazor" を今すぐ使わないのか?
まだ実験的プロジェクトだから…!
https://twitter.com/danroth27/status/970174117109424128
魅力薄い…
他にもある、Blazor のちょっと残念な点…
…とはいえ。
スピーカーは思う。
"Blazor は良いものだ"
をもっと共有したい!
そこで Blazor 自習書を作ってみました
GitHub で公開 https://j.mp/selflearn-blazor-jp
ソースコードも同梱
Blazor が描く開発生産性向上の可能性を評価
この自習書に沿って実際に開発することで…
まとめ
実験的プロジェクト
今日時点でも Blazor を体験することには
価値がある
Blazor は良いものだ
願わくば…
なぜ、広く伝えたいのか?
なぜならば、
Blazor を選ぶことで
自分は Happy になれる
予感がしたからです。
この思いに
共感した方が
もしこの中にいらっしゃれば、
次は、あなたが
その思いを Share しましょう!
Lean, Practice, Share.
© 2018 Junichi Sakamoto All rights reserved.
本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。
本情報の内容 (添付文書、リンク先などを含む) は、de:code 2018 開催日 (2018年5月22~23日) 時点のものであり、予告なく変更される場合があります
Happy Coding. :)

More Related Content

PDF
Blazor 触ってみた
PDF
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
PDF
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
ODP
MVC の Model を考える
PDF
Serverless時代のJavaについて
PDF
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
PDF
202110 AWS Black Belt Online Seminar AWS Site-to-Site VPN
PPTX
Universal Links対応をした話
Blazor 触ってみた
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
MVC の Model を考える
Serverless時代のJavaについて
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
202110 AWS Black Belt Online Seminar AWS Site-to-Site VPN
Universal Links対応をした話

What's hot (20)

PDF
AWSでDockerを扱うためのベストプラクティス
PDF
コンテナの作り方「Dockerは裏方で何をしているのか?」
PDF
AWS Black Belt Online Seminar 2018 Amazon DynamoDB Advanced Design Pattern
PDF
WebブラウザでC#実行 WebAssemblyの技術
PDF
AWS Wavelengthと大阪リージョンのご紹介20210414
PDF
あの日見たMVCを僕たちはまだ知らない for RoR
PDF
マイクロサービス 4つの分割アプローチ
PDF
The Twelve-Factor Appで考えるAWSのサービス開発
KEY
やはりお前らのMVCは間違っている
KEY
塹壕よりLivetとMVVM
PDF
ASP.NETの進化とASP.NET Core Blazorの凄さ
PDF
IT エンジニアのための 流し読み Windows 10 - Windows のネットワーク最適化機能
PPTX
AWS VM import / export ハンズオン
PPTX
Jakarta EE + MicroProfile との付き合い方
PDF
AWSのログ管理ベストプラクティス
PPTX
Wpfと非同期
PDF
ドメイン駆動で開発する ラフスケッチから実装まで
PDF
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
PDF
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
PPTX
WPF MVVM Review
AWSでDockerを扱うためのベストプラクティス
コンテナの作り方「Dockerは裏方で何をしているのか?」
AWS Black Belt Online Seminar 2018 Amazon DynamoDB Advanced Design Pattern
WebブラウザでC#実行 WebAssemblyの技術
AWS Wavelengthと大阪リージョンのご紹介20210414
あの日見たMVCを僕たちはまだ知らない for RoR
マイクロサービス 4つの分割アプローチ
The Twelve-Factor Appで考えるAWSのサービス開発
やはりお前らのMVCは間違っている
塹壕よりLivetとMVVM
ASP.NETの進化とASP.NET Core Blazorの凄さ
IT エンジニアのための 流し読み Windows 10 - Windows のネットワーク最適化機能
AWS VM import / export ハンズオン
Jakarta EE + MicroProfile との付き合い方
AWSのログ管理ベストプラクティス
Wpfと非同期
ドメイン駆動で開発する ラフスケッチから実装まで
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
WPF MVVM Review
Ad

Similar to C# で Single Page Web アプリを 開発できる Blazor ― その魅力 (20)

PDF
C# で SPA を作る BLAZOR WEBASSEMBLY の進化 - そしてその先へ
PPTX
モノづくりBlazor勉強会1回目資料_Blazorについて.pptx
PPTX
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
PPTX
Blazor Web Assembly (C#) を触ってみた
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...
PPTX
7 つの Blazor
PDF
New Features of DotNet 6 Blazor WASM
PDF
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
PPTX
Blazor でアプリを作ろう! ~テンプレートインストールから最初のデバッグ実行まで~
PPTX
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
PPTX
Blazor WebAssembly と Windows Forms でのロジック共有例
PDF
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
PDF
2024/07/04 Blazor+ローコードで実現する.NET資産のモダナイズ
PDF
Static Web AppsとBlazor WebAssemblyのすすめ
PDF
Blazor Server テンプレート解説
PPTX
burikaigi2023
PPTX
Interoperability of webassembly with javascript
C# で SPA を作る BLAZOR WEBASSEMBLY の進化 - そしてその先へ
モノづくりBlazor勉強会1回目資料_Blazorについて.pptx
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
Blazor Web Assembly (C#) を触ってみた
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...
7 つの Blazor
New Features of DotNet 6 Blazor WASM
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
Blazor でアプリを作ろう! ~テンプレートインストールから最初のデバッグ実行まで~
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
Blazor WebAssembly と Windows Forms でのロジック共有例
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
2024/07/04 Blazor+ローコードで実現する.NET資産のモダナイズ
Static Web AppsとBlazor WebAssemblyのすすめ
Blazor Server テンプレート解説
burikaigi2023
Interoperability of webassembly with javascript
Ad

More from Jun-ichi Sakamoto (20)

PDF
Pre-render Blazor WebAssembly on static web hosting at publishing time
PDF
WebAssemblyが切り拓くフロントエンドWeb開発の未来
PDF
Azure Application Insights + Angular5+ - Global azure boot camp 2019@sapporo LT
PDF
Azure App Service Authentication
PDF
ライトニングトーク - とある LINE Bot の開発記「とても腹立たしいことがあったのです」
PDF
「ゆるくLTをしよう勉強会@旭川」jsakamoto 予告編
PDF
Ohotech特盛#14 セッション4 予告編
PDF
CLR/H 第99回勉強会ライトニングトーク
PDF
Ohotech特盛#13 スマホで操作する カメラ付きWi-Fiラジコンカー ― C#とラズパイとWebアプリの技術で作っちゃおう! ―
PDF
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
PDF
息子たちがローマ字勉強するための <s>HTML5</s> Web標準 アプリ作ってみた
PDF
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
PDF
One horror stories around NuGet
PDF
How to automated test a web application with sending e mail feature
PDF
Introduction of "MarkdownPresenter"
PDF
セッション中に Twitter につぶやく!
PDF
Ohotech特盛#5予告 - タートルグラフィックでいろんな模様を描いてみよう!
PDF
ASP.NET SignalR によるクイズWebアプリ 「みんなで同時プレイするWebアプリでCodeQuizに挑戦!」
PDF
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
PDF
ASP.NET で作るとあるTwitter Bot -開発環境からネット公開までぜんぶ無料だよ!-
Pre-render Blazor WebAssembly on static web hosting at publishing time
WebAssemblyが切り拓くフロントエンドWeb開発の未来
Azure Application Insights + Angular5+ - Global azure boot camp 2019@sapporo LT
Azure App Service Authentication
ライトニングトーク - とある LINE Bot の開発記「とても腹立たしいことがあったのです」
「ゆるくLTをしよう勉強会@旭川」jsakamoto 予告編
Ohotech特盛#14 セッション4 予告編
CLR/H 第99回勉強会ライトニングトーク
Ohotech特盛#13 スマホで操作する カメラ付きWi-Fiラジコンカー ― C#とラズパイとWebアプリの技術で作っちゃおう! ―
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
息子たちがローマ字勉強するための <s>HTML5</s> Web標準 アプリ作ってみた
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
One horror stories around NuGet
How to automated test a web application with sending e mail feature
Introduction of "MarkdownPresenter"
セッション中に Twitter につぶやく!
Ohotech特盛#5予告 - タートルグラフィックでいろんな模様を描いてみよう!
ASP.NET SignalR によるクイズWebアプリ 「みんなで同時プレイするWebアプリでCodeQuizに挑戦!」
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
ASP.NET で作るとあるTwitter Bot -開発環境からネット公開までぜんぶ無料だよ!-

C# で Single Page Web アプリを 開発できる Blazor ― その魅力