タスク管理を行うSPAを"C#で"作ってみた / I made a task management SPA "in C#".

2020/05/09(土)第４回バーチャル学生LT On YouTube LIVE
Connpass -> https://student-lt.connpass.com/event/174185/
作ったToDoリストアプリ -> https://todomanager-7196c.web.app/

Transcript

1. タスク管理を行うSPAを "C#で"作ってみた。 Blazor WebAssembly を用いたSPA開発 Speaker:@AtriaSoft 2020/05/09(土)第４回バーチャル学生 LT On YouTube LIVE
2. スライドの撮影 SNSへの投稿OK Speaker : @AtriaSoft Speaker:@AtriaSoft
3. Atria（あとりあ）です。 • 公立はこだて未来大学B2 – 北海道にある情報系大学！ • C#が大好き なんでもC#で書く悪い癖持ち • 最近Blazorにドハマリしています • オンライン授業まだ慣れてない • 早く大学行って精進したい @AtriaSoft http://atriasoft.work/ Atria64 Speaker:@AtriaSoft
4. Atria（あとりあ）です。 • 公立はこだて未来大学B2 – 北海道にある情報系大学！ • C#が大好き なんでもC#で書く悪い癖持ち • 最近Blazorにドハマリしています • オンライン授業まだ慣れてない • 早く大学行って精進したい @AtriaSoft http://atriasoft.work/ Atria64 Speaker:@AtriaSoft
5. Speaker:@AtriaSoft
6. Atria（あとりあ）です。 • 公立はこだて未来大学B2 – 北海道にある情報系大学！ • C#が大好き なんでもC#で書く悪い癖持ち • 最近Blazorにドハマリしています • オンライン授業まだ慣れてない • 早く大学行って精進したい @AtriaSoft http://atriasoft.work/ Atria64 Speaker:@AtriaSoft
7. オンライン授業、どうですか？ Speaker:@AtriaSoft
8. オンライン授業、どうですか？ 直接触れられない分 課題の管理が難しくなった アクセスしなきゃいけない ページが多い 学習プラットフォームが 統一されてない 授業の存在を忘れてた…
9. オンライン授業、どうですか？ 直接触れられない分 課題の管理が難しくなった アクセスしなきゃいけない ページが多い 学習プラットフォームが 統一されてない 授業の存在を忘れてた… さまざまな 問題がある
10. 全部まとめる “オレオレ”タスク管理ツールがほしい Speaker:@AtriaSoft
11. 作ろう Speaker:@AtriaSoft
12. Speaker : @AtriaSoft Blazorで Webアプリ作ってみた Speaker:@AtriaSoft
13. Speaker : @AtriaSoft Blazor Speaker:@AtriaSoft
14. Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ • オープンソースのフレームワーク • かなり新しい技術 • Razor構文で記述できる(ASP.NET利用者に優しい) • 豊富な.NET資産を使える(多くのライブラリやNuGet) Speaker:@AtriaSoft
15. Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ • オープンソースのフレームワーク • かなり新しい技術 • Razor構文で記述できる(ASP.NET利用者に優しい) • 豊富な.NET資産を使える(多くのライブラリやNuGet) シングルページアプリケーション （Single Page Application） 単一のWebページでアプリケーションを構成する 設計構造の名称 「なんかいい感じのやつ」と捉えておけばいいと思います Speaker:@AtriaSoft
16. できたもの Speaker:@AtriaSoft
17. 円グラフで進捗状況を表示 その他雑多な機能ふたつ Speaker:@AtriaSoft
18. タスクの状況は このように確認できる Speaker:@AtriaSoft
19. アプリについての 説明ページも作成 Speaker:@AtriaSoft
20. スマートフォンなど 小さい画面にも対応 アプリケーションのURL https://todomanager-7196c.web.app/ PWA対応はできてません (頑張れば対応できます) Speaker:@AtriaSoft
21. Blazorの”ポテンシャル” 感じますよね? Speaker:@AtriaSoft
22. どういう仕組みなの？ Speaker:@AtriaSoft
23. JavaScriptの代わりに .NETでUIを構築している DOM Speaker:@AtriaSoft
24. DOM JavaScriptの実装無しで SPA開発が可能 JavaScriptの代わりに .NETでUIを構築している Speaker:@AtriaSoft
25. DOM JavaScriptの実装無しで SPA開発が可能 ただし複雑なことを やるならJavaScriptの実装が必要… JavaScriptの代わりに .NETでUIを構築している Speaker:@AtriaSoft
26. DOM JavaScriptの実装無しで SPA開発が可能 ただし複雑なことを やるならJavaScriptの実装が必要… 逆を取れば、 JavaScriptを呼び出せばなんだってできる JavaScriptの代わりに .NETでUIを構築している Speaker:@AtriaSoft
27. Blazorの紹介 Speaker:@AtriaSoft
28. Blazorで用いる“Razor構文”は C#とhtml/cssの融合系 • Razor->レイザー(かっこいいね) • “@”を起点として C#コードを混ぜて記述できる • 条件分岐や 繰り返しはお手のもの • ラムダ式だって使えちゃう • 慣れるとめちゃくちゃ便利 Speaker:@AtriaSoft
29. UIコンポーネントが充実 • 標準でBootstrapが使える • 今回の開発には Radzen-Blazorを使った。 – なんと無料！ • .NETにはNuGet があるので導入が超簡単 Speaker:@AtriaSoft
30. Blazorが可愛がられている .NET Conf Focus on Blazor Blazorオンリーイベント、MSがかなり力入れてる
31. Blazorの未来 BlazorはWebからDesktop+Mobileへ Speaker:@AtriaSoft
32. [News]Blazorでモバイルネイティブ? • Mobile Blazor Bindings – まだ試験段階 – Blazorの感覚でモバイルネイティブアプリが作れる – それもクロスプラットフォームで作れる • 新規開拓分野 • (走らせた感想)結構ちゃんと動いた • 興味を持ってほしい ※2020/05/09時点での情報です Speaker : @AtriaSoft Speaker:@AtriaSoft
33. Blazorまとめ • Blazorを使うと”C#”でSPA開発が可能 – フロントエンド、バックエンドをC#で一貫して書ける • 豊富な.NETの資産を利用できる • 難しいことしなければC#の知識だけで組めるかも • C#からJavaScriptを呼び出すこともできる – つまり理論上不可能なことがない(はず) • 将来性があり、めちゃくちゃ熱い – 派遣握れるポテンシャルある気がする Speaker:@AtriaSoft
34. Blazorまとめ • Blazorを使うと”C#”でSPA開発が可能 – フロントエンド、バックエンドをC#で一貫して書ける • 豊富な.NETの資産を利用できる • 難しいことしなければC#の知識だけで組めるかも • C#からJavaScriptを呼び出すこともできる – つまり理論上不可能なことがない(はず) • 将来性があり、めちゃくちゃ熱い – 派遣握れるポテンシャルある気がする Speaker:@AtriaSoft
35. Blazorまとめ • Blazorを使うと”C#”でSPA開発が可能 – フロントエンド、バックエンドをC#で一貫して書ける • 豊富な.NETの資産を利用できる • 難しいことしなければC#の知識だけで組めるかも • C#からJavaScriptを呼び出すこともできる – つまり理論上不可能なことがない(はず) • 将来性があり、めちゃくちゃ熱い – 派遣握れるポテンシャルある気がする Speaker:@AtriaSoft
36. Blazor流行れ Speaker:@AtriaSoft
37. タスク管理を行うSPAを "C#で"作ってみた。 Blazor WebAssembly を用いたSPA開発 Speaker:@AtriaSoft 2020/05/09(土)第４回バーチャル学生 LT On YouTube LIVE