Blazorと踊ろう

MYSELF •松井 敏 A.K.A 森理 麟 BELONG CODEER •MY COMMUNITY : C#読書会 2

前提 •約1.5年前からホリデープロジェクトとしてコツコツとWEBサー ビスを作っている •去年、MEETUP APP OSAKA@2で「AZURE WEBJOBS四方山話」を 話しました •WEBJOBSで自動スクレイピングをしている話です。もちろん今 日も自動スクレイピングは続いている。 3

HTTP://MANGA-YONDA.COM •「マンガ読んだ！！」はクリックするだけで簡単に 読んだマンガを記録できるサービス 作者やシリーズ全部でまとめて1回で登録も簡単！ マンガは集英社、講談社、小学館などから 8万冊 以上！毎日自動更新で、日々増加中！！ • • 4

• http://manga-yonda.com/

前提 •去年の時点でΑ版。その後最低限必要と思って いた機能を入れたΒ版までは公開済み。 •その時点から技術見直しを行う •ASP.NET MVCからVUE.JS。 5

SINGLE PAGE APPLICATION •SPA。簡単に言うとHTMLをJSでバンバン動的に書き 換えて作られたAPPLICATION。 •どれだけ動きがあってもHTML1枚なのでSINGLE PAGE。 •が、僕はどうにもこうにもJSつらくなった。 6

SINGLE PAGE APPLICATION •そこでBLAZOR! •BLAZORはWEB ASSEMBLYを使った.NETで動くSPAフ レームワーク JSをほぼほぼ使わずC#で動的ページが作れま す！ • 7

BLAZOR. 8

BLAXOR •BLAZOR(ASP.NET CORE HOSTED) を選びます 9

SERVER,CLIENT,SHARED •SERVER, CLIENT, SHAREDの3つのプロジェクトが 作られる。 •SERVERはASP.NET WEB API。CLIENTがクライアント でBLAZOR本体。SHAREDが共通。 10

RAZOR •BLAZORはRAZORがベース。 •RAZORはビューエンジン。C#言語用のCSHTML でHTMLに@で直接C#を書ける 11

BLAZOR •BLAZORはFUNCTIONSの中でプロパティやメソッド が定義出来る。それをCSHTMLから呼ぶことが 出来る。 12

SOURCE Routing cshtml • RR Functions (c#) 13

BIND •CHECKBOXなどはBINDで双方向バインディング 14

EVENT 15

COMPNENT •コンポーネントですよ。コンポーネント。これが 最強です。 16

HTTPS://MANGAYONDA.AZUREWEBSITES.N ET/ •こんな感じです 17

DEMERIT •まだEXPERIMENTAL •ASSEMBLYと言っても特に速くもない。起動はむしろ 遅いぐらい？ •サンプルも少ないし、ほぼ英語。ライブラリもあんま ない 18

DEMERIT •例えばPAGENATIONもないので作った •ASP.NET IDENTITYは画面が書けない。BLAZORは タグヘルパー対応してないので、認証どうしよう。 •COOKIEもよくわかってない。JSかな。 19

DEMERIT •特にIDEのサポートがまだまだ感。 •普通にDEBUGも出来ないし。 •コンパイルがよく応答不能になるし。←これが一番不便。 •OBJとBINの中にクリーンしても残るゴミができたり。 •リネームが失敗してCSHTMLではもうヤラナイ。。 20

MERIT •C#で書ける！ 21

まとめ •JSはつらかった。VSの世界観とは違うものを無理に乗っ けただけで使っている感じ。 •CSHTMLでもそういうところはあるけれど、言語切り替え なくて書けるのが本当に楽。 C#で書けるのが楽しい！ •C#大統一理論でより良いBLAZORライフを踊ろう！ 22

最後に •踊ろうと書いたのは、正直踊らされる可能性はある。それなり に。 •でも、SPAのノウハウは結構そのままJSに使える。もしBLAZOR が駄目でも他のWEBASSEMBLYフレームワークは出ると思う •踊る阿呆にみる阿呆同じ阿呆なら踊らにゃ損損かなーと 23