2020/05/09(土)第４回バーチャル学生LT On YouTube LIVE Connpass -> https://student-lt.connpass.com/event/174185/ 作ったToDoリストアプリ -> https://todomanager-7196c.web.app/
タスク管理を行うSPAを"C#で"作ってみた。Blazor WebAssembly を用いたSPA開発Speaker:@AtriaSoft2020/05/09(土)第４回バーチャル学生LT On YouTube LIVE
View Slide
スライドの撮影SNSへの投稿OKSpeaker : @AtriaSoftSpeaker:@AtriaSoft
Atria（あとりあ）です。• 公立はこだて未来大学B2– 北海道にある情報系大学！• C#が大好きなんでもC#で書く悪い癖持ち• 最近Blazorにドハマリしています• オンライン授業まだ慣れてない• 早く大学行って精進したい@AtriaSofthttp://atriasoft.work/Atria64Speaker:@AtriaSoft
Speaker:@AtriaSoft
オンライン授業、どうですか？Speaker:@AtriaSoft
オンライン授業、どうですか？直接触れられない分課題の管理が難しくなったアクセスしなきゃいけないページが多い学習プラットフォームが統一されてない授業の存在を忘れてた…
オンライン授業、どうですか？直接触れられない分課題の管理が難しくなったアクセスしなきゃいけないページが多い学習プラットフォームが統一されてない授業の存在を忘れてた…さまざまな問題がある
全部まとめる“オレオレ”タスク管理ツールがほしいSpeaker:@AtriaSoft
作ろうSpeaker:@AtriaSoft
Speaker : @AtriaSoftBlazorでWebアプリ作ってみたSpeaker:@AtriaSoft
Speaker : @AtriaSoftBlazorSpeaker:@AtriaSoft
BlazorSpeaker : @AtriaSoftC# でSPA開発ができる今熱いフレームワーク！• オープンソースのフレームワーク• かなり新しい技術• Razor構文で記述できる(ASP.NET利用者に優しい)• 豊富な.NET資産を使える(多くのライブラリやNuGet)Speaker:@AtriaSoft
BlazorSpeaker : @AtriaSoftC# でSPA開発ができる今熱いフレームワーク！• オープンソースのフレームワーク• かなり新しい技術• Razor構文で記述できる(ASP.NET利用者に優しい)• 豊富な.NET資産を使える(多くのライブラリやNuGet)シングルページアプリケーション（Single Page Application）単一のWebページでアプリケーションを構成する設計構造の名称「なんかいい感じのやつ」と捉えておけばいいと思いますSpeaker:@AtriaSoft
できたものSpeaker:@AtriaSoft
円グラフで進捗状況を表示その他雑多な機能ふたつSpeaker:@AtriaSoft
タスクの状況はこのように確認できるSpeaker:@AtriaSoft
アプリについての説明ページも作成Speaker:@AtriaSoft
スマートフォンなど小さい画面にも対応アプリケーションのURLhttps://todomanager-7196c.web.app/PWA対応はできてません(頑張れば対応できます)Speaker:@AtriaSoft
Blazorの”ポテンシャル”感じますよね?Speaker:@AtriaSoft
どういう仕組みなの？Speaker:@AtriaSoft
JavaScriptの代わりに.NETでUIを構築しているDOMSpeaker:@AtriaSoft
DOMJavaScriptの実装無しでSPA開発が可能JavaScriptの代わりに.NETでUIを構築しているSpeaker:@AtriaSoft
DOMJavaScriptの実装無しでSPA開発が可能ただし複雑なことをやるならJavaScriptの実装が必要…JavaScriptの代わりに.NETでUIを構築しているSpeaker:@AtriaSoft
DOMJavaScriptの実装無しでSPA開発が可能ただし複雑なことをやるならJavaScriptの実装が必要…逆を取れば、JavaScriptを呼び出せばなんだってできるJavaScriptの代わりに.NETでUIを構築しているSpeaker:@AtriaSoft
Blazorの紹介Speaker:@AtriaSoft
Blazorで用いる“Razor構文”はC#とhtml/cssの融合系• Razor->レイザー(かっこいいね)• “@”を起点としてC#コードを混ぜて記述できる• 条件分岐や繰り返しはお手のもの• ラムダ式だって使えちゃう• 慣れるとめちゃくちゃ便利Speaker:@AtriaSoft
UIコンポーネントが充実• 標準でBootstrapが使える• 今回の開発にはRadzen-Blazorを使った。– なんと無料！• .NETにはNuGetがあるので導入が超簡単Speaker:@AtriaSoft
Blazorが可愛がられている.NET Conf Focus on BlazorBlazorオンリーイベント、MSがかなり力入れてる
Blazorの未来BlazorはWebからDesktop+MobileへSpeaker:@AtriaSoft
[News]Blazorでモバイルネイティブ?• Mobile Blazor Bindings– まだ試験段階– Blazorの感覚でモバイルネイティブアプリが作れる– それもクロスプラットフォームで作れる• 新規開拓分野• (走らせた感想)結構ちゃんと動いた• 興味を持ってほしい※2020/05/09時点での情報ですSpeaker : @AtriaSoftSpeaker:@AtriaSoft
Blazorまとめ• Blazorを使うと”C#”でSPA開発が可能– フロントエンド、バックエンドをC#で一貫して書ける• 豊富な.NETの資産を利用できる• 難しいことしなければC#の知識だけで組めるかも• C#からJavaScriptを呼び出すこともできる– つまり理論上不可能なことがない(はず)• 将来性があり、めちゃくちゃ熱い– 派遣握れるポテンシャルある気がするSpeaker:@AtriaSoft
Blazor流行れSpeaker:@AtriaSoft
atria
yucamm124
syossan27
pangmoo
maimux2x
stewemetal
gishi_yama
kumamotone
sagawa23
ymotongpoo
pineapplecandy
koba04
microcms
kneath
palkan
sugarenia
danielanewman
brettharned
keathley
marktimemedia
sstephenson
eitanlees
lemiorhan
carmenintech
chriscoyier