プログラミング生放送勉強会 第53回＠GMOインターネット（大阪） https://atnd.org/events/99236

1. Blazor 触ってみた
プログラミング生放送勉強会 第53回
＠GMOインターネット (大阪)
2018/09/01 SQLWorld お だ

2. 今日のゴール
Blazor についてふんいきわかるー
Blazor ちょっとできる

3. Blazor ってなに？

4. Blazor って何？
https://blazor.net/
Blazor is an experimental .NET web
framework using C# and HTML that runs in
the browser.
ブラウザで動く C# と HTML を使った .NET
の 「実験的な」 Web フレームワーク

5. ブラウザで動くって？
Web アプリもブラウザで動いてない？
ASP.NET (MVC) と何が違うん？

6. ブラウザで動くって？
Web アプリもブラウザで動いてない？
ASP.NET (MVC) と何が違うん？
サーバー側で動作するコードを実装して、サー
バー側で動かした結果をブラウザで表示している
クライアント側(ブラウザ)で動作する
コードを実装するのが Blazor！

7. Q: Is this Silverlight all over again?
No, Blazor is a .NET web framework
based on HTML and CSS that runs in
the browser using open web standards.
It requires no plugin and works on
mobile devices and older brow
https://github.com/aspnet/Blazor/wiki/FAQ

8. WASM(WebAssembly)で動く！
WASM ベースの .NET ランタイムを使っ
て「通常の .NET アセンブリ」を動か
す！
C# で書いたコードが WASM になるわけで
は無い

10. https://blazor.net/

11. 開発環境

12. Setup
.NET Core 2.1 SDK (2.1.300 or later)
VS 2017 (15.7 or later)
ASP.NET web development workload
selected
Blazor Language Services extension
VS Marketplace から

13. 色々あるぞ
Blazor

14. SPA Framework
シングルページアプリケーション のため
の機能が標準搭載
A component model for building composable UI
Routing
Layouts
Forms and validation
Dependency injection
JavaScript interop
Server-side rendering
…
https://github.com/aspnet/Blazor

15. Razor 構文
Blazor = Browser + Razor = Blazor！
View は Razor で書く

16. 実際に見てみよう

17. 今日のお題
function authenticateUser(username, password) {
var accounts = apiService.sql(
"SELECT * FROM users"
);
for (var i = 0; i < accounts.length; i++) {
var account = accounts[i];
if (account.username === username &&
account.password === password) {
return true;
}
}
if ("true" === "true") {
return false;
}
}

18. 今日のお題
<script>
function authenticateUser(username, password) {
var accounts = apiService.sql(
"SELECT * FROM users"
);
for (var i = 0; i < accounts.length; i++) {
var account = accounts[i];
if (account.username === username &&
account.password === password) {
return true;
}
}
if ("true" === "true") {
return false;
}
}
$('#login').click(function() {
var username = $("#username").val();
var password = $("#password").val();
var authenticated = authenticateUser(username, password);
if (authenticated === true) {
$.cookie('loggedin', 'yes', { expires : 1 });
} else if (authenticated === false) {
$("error_message").show();
}
});
</script>

19. 今日のお題
世界最悪のログイン処理コード？
https://twitter.com/hassy_nz/status/1027
890455940198400
HTML + JavaScript だと？！
クライアントから任意の SQL 投げれそう
クライアントに users データ全部持ってく
るのはアカン
Cookie に簡単な値入れるだけで、認証済に
なる
…

20. Blazor で実装したら…
.NET の dll になるので…
簡単にバレない！セーフ？
Blazor でもアウトです。やらないように！
今回使ったいくつかの機能を紹介します

21. Component

22. Routing

23. Layout

24. Binding

25. DI

26. JavaScript interop

27. .NET アセンブリなら何でも動く？
WASM:[System.PlatformNotSupported
Exception] System.Data.SqlClient is
not supported on this platform.
SqlClient に限らず対応してないものも
あって、それは実行時に
PlatformNotSupportedException

28. まとめ
まだ「実験的」なプロジェクト
全ての Web 開発者用というわけではない
と思う
クライアント側の技術なので、サーバー
側は C#(.NET) で無くてもよい
そういうとこで採用するかは別として
サーバー側とのコード共有 (Req/Res の型)
は大きなメリット

29. ガンガン使って、
Feedback しよう！

30. 参考資料
Welcome to the Blazor
https://blazor.net/
GitHub – aspnet/Blazor
https://github.com/aspnet/Blazor
Blazor アプリケーションプログラミング自習書
https://github.com/jsakamoto/self-learning-materials-for-
blazor-jp