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