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

by Atria

Slide 1

Slide 1 text

タスク管理を行うSPAを "C#で"作ってみた。 Blazor WebAssembly を用いたSPA開発 Speaker:@AtriaSoft 2020/05/09(土)第４回バーチャル学生 LT On YouTube LIVE

Slide 2

Slide 2 text

スライドの撮影 SNSへの投稿OK Speaker : @AtriaSoft Speaker:@AtriaSoft

Slide 3

Slide 3 text

Atria（あとりあ）です。 • 公立はこだて未来大学B2 – 北海道にある情報系大学！ • C#が大好きなんでもC#で書く悪い癖持ち • 最近Blazorにドハマリしています • オンライン授業まだ慣れてない • 早く大学行って精進したい @AtriaSoft http://atriasoft.work/ Atria64 Speaker:@AtriaSoft

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Speaker:@AtriaSoft

Slide 6

Slide 6 text

Slide 7

Slide 7 text

オンライン授業、どうですか？ Speaker:@AtriaSoft

Slide 8

Slide 8 text

オンライン授業、どうですか？直接触れられない分課題の管理が難しくなったアクセスしなきゃいけないページが多い学習プラットフォームが統一されてない授業の存在を忘れてた…

Slide 9

Slide 9 text

オンライン授業、どうですか？直接触れられない分課題の管理が難しくなったアクセスしなきゃいけないページが多い学習プラットフォームが統一されてない授業の存在を忘れてた… さまざまな問題がある

Slide 10

Slide 10 text

全部まとめる “オレオレ”タスク管理ツールがほしい Speaker:@AtriaSoft

Slide 11

Slide 11 text

作ろう Speaker:@AtriaSoft

Slide 12

Slide 12 text

Speaker : @AtriaSoft Blazorで Webアプリ作ってみた Speaker:@AtriaSoft

Slide 13

Slide 13 text

Speaker : @AtriaSoft Blazor Speaker:@AtriaSoft

Slide 14

Slide 14 text

Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ • オープンソースのフレームワーク • かなり新しい技術 • Razor構文で記述できる(ASP.NET利用者に優しい) • 豊富な.NET資産を使える(多くのライブラリやNuGet) Speaker:@AtriaSoft

Slide 15

Slide 15 text

Blazor Speaker : @AtriaSoft C# でSPA開発ができる今熱いフレームワーク！ • オープンソースのフレームワーク • かなり新しい技術 • Razor構文で記述できる(ASP.NET利用者に優しい) • 豊富な.NET資産を使える(多くのライブラリやNuGet) シングルページアプリケーション（Single Page Application）単一のWebページでアプリケーションを構成する設計構造の名称「なんかいい感じのやつ」と捉えておけばいいと思います Speaker:@AtriaSoft

Slide 16

Slide 16 text

できたもの Speaker:@AtriaSoft

Slide 17

Slide 17 text

円グラフで進捗状況を表示その他雑多な機能ふたつ Speaker:@AtriaSoft

Slide 18

Slide 18 text

タスクの状況はこのように確認できる Speaker:@AtriaSoft

Slide 19

Slide 19 text

アプリについての説明ページも作成 Speaker:@AtriaSoft

Slide 20

Slide 20 text

スマートフォンなど小さい画面にも対応アプリケーションのURL https://todomanager-7196c.web.app/ PWA対応はできてません (頑張れば対応できます) Speaker:@AtriaSoft

Slide 21

Slide 21 text

Blazorの”ポテンシャル” 感じますよね? Speaker:@AtriaSoft

Slide 22

Slide 22 text

どういう仕組みなの？ Speaker:@AtriaSoft

Slide 23

Slide 23 text

JavaScriptの代わりに .NETでUIを構築している DOM Speaker:@AtriaSoft

Slide 24

Slide 24 text

DOM JavaScriptの実装無しで SPA開発が可能 JavaScriptの代わりに .NETでUIを構築している Speaker:@AtriaSoft

Slide 25

Slide 25 text

DOM JavaScriptの実装無しで SPA開発が可能ただし複雑なことをやるならJavaScriptの実装が必要… JavaScriptの代わりに .NETでUIを構築している Speaker:@AtriaSoft

Slide 26

Slide 26 text

DOM JavaScriptの実装無しで SPA開発が可能ただし複雑なことをやるならJavaScriptの実装が必要… 逆を取れば、 JavaScriptを呼び出せばなんだってできる JavaScriptの代わりに .NETでUIを構築している Speaker:@AtriaSoft

Slide 27

Slide 27 text

Blazorの紹介 Speaker:@AtriaSoft

Slide 28

Slide 28 text

Blazorで用いる“Razor構文”は C#とhtml/cssの融合系 • Razor->レイザー(かっこいいね) • “@”を起点として C#コードを混ぜて記述できる • 条件分岐や繰り返しはお手のもの • ラムダ式だって使えちゃう • 慣れるとめちゃくちゃ便利 Speaker:@AtriaSoft

Slide 29

Slide 29 text

UIコンポーネントが充実 • 標準でBootstrapが使える • 今回の開発には Radzen-Blazorを使った。 – なんと無料！ • .NETにはNuGet があるので導入が超簡単 Speaker:@AtriaSoft

Slide 30

Slide 30 text

Blazorが可愛がられている .NET Conf Focus on Blazor Blazorオンリーイベント、MSがかなり力入れてる

Slide 31

Slide 31 text

Blazorの未来 BlazorはWebからDesktop+Mobileへ Speaker:@AtriaSoft

Slide 32

Slide 32 text

[News]Blazorでモバイルネイティブ? • Mobile Blazor Bindings – まだ試験段階 – Blazorの感覚でモバイルネイティブアプリが作れる – それもクロスプラットフォームで作れる • 新規開拓分野 • (走らせた感想)結構ちゃんと動いた • 興味を持ってほしい ※2020/05/09時点での情報です Speaker : @AtriaSoft Speaker:@AtriaSoft

Slide 33

Slide 33 text

Blazorまとめ • Blazorを使うと”C#”でSPA開発が可能 – フロントエンド、バックエンドをC#で一貫して書ける • 豊富な.NETの資産を利用できる • 難しいことしなければC#の知識だけで組めるかも • C#からJavaScriptを呼び出すこともできる – つまり理論上不可能なことがない(はず) • 将来性があり、めちゃくちゃ熱い – 派遣握れるポテンシャルある気がする Speaker:@AtriaSoft

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Blazor流行れ Speaker:@AtriaSoft

Slide 37

Slide 37 text

タスク管理を行うSPAを "C#で"作ってみた。 Blazor WebAssembly を用いたSPA開発 Speaker:@AtriaSoft 2020/05/09(土)第４回バーチャル学生 LT On YouTube LIVE