--- title: Blazorと踊ろう tags: author: [松井 敏](https://www.docswell.com/user/binnmti) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/LE3RYG3575.jpg?width=480 description: Blazorと踊ろう published: October 09, 24 canonical: https://www.docswell.com/s/binnmti/5DNJV9-2024-10-09-111640 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/LE3RYG3575.jpg) # Page. 2 ![Page Image](https://bcdn.docswell.com/page/8EDY514YEG.jpg) MYSELF •松井 敏 A.K.A 森理 麟 BELONG CODEER •MY COMMUNITY : C#読書会 2 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/V7P6GQM2J8.jpg) 前提 •約1.5年前からホリデープロジェクトとしてコツコツとWEBサー ビスを作っている •去年、MEETUP APP OSAKA@2で「AZURE WEBJOBS四方山話」を 話しました •WEBJOBSで自動スクレイピングをしている話です。もちろん今 日も自動スクレイピングは続いている。 3 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/2JV3659XEQ.jpg) HTTP://MANGA-YONDA.COM •「マンガ読んだ！！」はクリックするだけで簡単に 読んだマンガを記録できるサービス 作者やシリーズ全部でまとめて1回で登録も簡単！ マンガは集英社、講談社、小学館などから 8万冊 以上！毎日自動更新で、日々増加中！！ • • 4 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/5EG3N6ZR7L.jpg) 前提 •去年の時点でΑ版。その後最低限必要と思って いた機能を入れたΒ版までは公開済み。 •その時点から技術見直しを行う •ASP.NET MVCからVUE.JS。 5 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/4JQ5Q4LY7P.jpg) SINGLE PAGE APPLICATION •SPA。簡単に言うとHTMLをJSでバンバン動的に書き 換えて作られたAPPLICATION。 •どれだけ動きがあってもHTML1枚なのでSINGLE PAGE。 •が、僕はどうにもこうにもJSつらくなった。 6 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/K749NQDZE1.jpg) SINGLE PAGE APPLICATION •そこでBLAZOR! •BLAZORはWEB ASSEMBLYを使った.NETで動くSPAフ レームワーク JSをほぼほぼ使わずC#で動的ページが作れま す！ • 7 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/LJ1K5PZD7G.jpg) BLAZOR. 8 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/GJWD529872.jpg) BLAXOR •BLAZOR(ASP.NET CORE HOSTED) を選びます 9 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/4EZGND99J3.jpg) SERVER,CLIENT,SHARED •SERVER, CLIENT, SHAREDの3つのプロジェクトが 作られる。 •SERVERはASP.NET WEB API。CLIENTがクライアント でBLAZOR本体。SHAREDが共通。 10 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/Y76Y81KDEV.jpg) RAZOR •BLAZORはRAZORがベース。 •RAZORはビューエンジン。C#言語用のCSHTML でHTMLに@で直接C#を書ける 11 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/G75G94P874.jpg) BLAZOR •BLAZORはFUNCTIONSの中でプロパティやメソッド が定義出来る。それをCSHTMLから呼ぶことが 出来る。 12 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/9J2Y2V6VJR.jpg) SOURCE Routing cshtml • RR Functions (c#) 13 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/DEYGY39QEM.jpg) BIND •CHECKBOXなどはBINDで双方向バインディング 14 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/VJNGPVL278.jpg) EVENT 15 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/YE9W364DE3.jpg) COMPNENT •コンポーネントですよ。コンポーネント。これが 最強です。 16 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/GE8NMZQ57D.jpg) HTTPS://MANGAYONDA.AZUREWEBSITES.N ET/ •こんな感じです 17 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/LELP3DX37R.jpg) DEMERIT •まだEXPERIMENTAL •ASSEMBLYと言っても特に速くもない。起動はむしろ 遅いぐらい？ •サンプルも少ないし、ほぼ英語。ライブラリもあんま ない 18 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/4JM4DPLM7W.jpg) DEMERIT •例えばPAGENATIONもないので作った •ASP.NET IDENTITYは画面が書けない。BLAZORは タグヘルパー対応してないので、認証どうしよう。 •COOKIEもよくわかってない。JSかな。 19 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/PJRW41KL79.jpg) DEMERIT •特にIDEのサポートがまだまだ感。 •普通にDEBUGも出来ないし。 •コンパイルがよく応答不能になるし。←これが一番不便。 •OBJとBINの中にクリーンしても残るゴミができたり。 •リネームが失敗してCSHTMLではもうヤラナイ。。 20 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/PEXP2Y567X.jpg) MERIT •C#で書ける！ 21 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/3EKDM36GJD.jpg) まとめ •JSはつらかった。VSの世界観とは違うものを無理に乗っ けただけで使っている感じ。 •CSHTMLでもそういうところはあるけれど、言語切り替え なくて書けるのが本当に楽。 C#で書けるのが楽しい！ •C#大統一理論でより良いBLAZORライフを踊ろう！ 22 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/L73RYG65J5.jpg) 最後に •踊ろうと書いたのは、正直踊らされる可能性はある。それなり に。 •でも、SPAのノウハウは結構そのままJSに使える。もしBLAZOR が駄目でも他のWEBASSEMBLYフレームワークは出ると思う •踊る阿呆にみる阿呆同じ阿呆なら踊らにゃ損損かなーと 23