Bye-bye ASP.NET MVC, Hello ASP.NET SPA!

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

前提 •約1.5年前からホリデープロジェクトとしてコツコ ツとWEBサービスを作っている •仕事でWEB経験がない上、独学で必要なことだ け学んでいるため偏りが激しくあり 3

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

• http://manga-yonda.com/

マンガ読んだ！！を支える技術 •マンガ読んだ!! は、ASP.NET MVCで作った。 •ΑからΒ版にするため、いろいろ見直中。 •今日は、その辺の技術選定の話を中心に •キーワードが一杯でますー 5

BYE BYE!! ASP.NET MVC. HELLO WEB API. 6

最初にやったこと 7

WEB API •WEB APIはASP独自の考えではなく既存技術 •HTTPでの呼び出しインターフェース •API利用を前提としたサービスも増えている 8

REST, RESTFUL API •RESTアーキテクチャに従って作られたWEB API をRESTFUL APIと呼ぶ •アドレスで、CURD操作が可能。自分もそれで作 るし、好きに使ってもらえる 9

ASP.NET WEB API •RESTFUL APIを作る仕組みがASP.NET WEB API •個人的にはDBアクセス用ラッパーかなと •MVCでは肥大化してしまったVがスッキリ書けた 10

SWAGGER •RESTFUL APIを構築するためのフレームワーク •かなり良い感じのドキュメントにしてくれる •開発中自分のためにも役立つ 11

SWASHBUCKLE •ASP.NET WEB API向けSWAGGERライブラリ •XMLドキュメントをベースに作ってくれる •VSでXML出力する設定するとコメント必須 •書かないとワーニング地獄になる 12

PROJECT •WEBAPIを単独のプロジェクトで作るべきかは微妙 •サービスによってマチマチ。大手はドメインから分 けているのが多い気がする •次に説明するSPAにもWEBAPIは入っている 13

まとめキーワード •WEB API •REST, RESTFUL API •ASP.NET WEB API •SWAGGER,SWASHBUCKLE 14

BYE BYE!! ASP.NET MVC. HELLO! ASP.NET SPA 15

SINGLE PAGE APPLICATION •単一ページで機能を提供するWEBアプリ •WEB APIでデータを取得、クライアントでUIを作る •FACEBOOK,TWITTER,SLACKなど全部SPA •まーつまりSPAで作るのが現在は主流 16

JAVASCRIPT FRAMEWORK •クライアントつまり、JSフレームワークが必要 •何を使うかを選ぶ必要があるため知識がいる •調べれば調べるほどキーワードが増えていく •この辺でWEBの進化の恐ろしさが垣間見える 17

サイト:【翻訳】 2016年にJAVASCRIPTを学 んでどう感じたか •JAVASCRPITを過去やっていた人が最近の事情を聞 いたら、新しい技術がありすぎて、簡単なことが全 然出来ずにイライラする話 僕は、最初読んだとき20%ぐらい、SPA作り出す時 で50%、最近で80%ぐらいの理解度 • 18

サイト:2018年の最先端フロントエンドエ ンジニアになろう •QITTAで1000以上のいいねがついていた記事 •基礎の基礎から自分でハンズオンする内容 •このサイトを参考にフロントを１から勉強し直し 19

HTML5 •そもそも何を持ってHTML5か分かってなかった •HTML5用に増えたタグを使っていれば HMLT4→HTML5にした！ということではない 20

セマンティックHTML •セッショニングタグ(ARTICLE, SECTION, NAV,ASIDE,HEADER,FOOTER)を使って、意味（=セマ ンティック）のある文章のまとまりでマークアップ することが重要 21

CSS •BOXモデル、GRIDレイアウト、FLEXBOX、メディアクエ リ。などの基本も知らなかった BOOTSTRAPを使えば勝手にやってくれるけれど、ブ ラックボックスとして使っていた技術が分かった CSSプリプロセッサが主流。メタ言語。SASSおススメ。 • • 22

JAFASCRIPT •ES6とかES2015とか、まあ数字は重要じゃなくて、 JSの最新の書き方をしっかり押さえておく。 •最新の書き方を覚えていても、ブラウザが最新 では動かないかもしれない。そこでBABELを使う。 23

トランスパイル •BABELでトランスパイルする。要は最新で書いた ソースを使えるバージョンまでダウングレード これはマジ素晴らしい。VSでC#も対応してほしい時 がたまにある 最近のTYPESCRIPTもトランスパイル出来る。 • • 24

パッケージマネージャ •JSでのパッケージマネージャはNPM •NPMはNODE PACKAGE MANAGER。NODE.JS必須 •VSで言うところのNUGETと同じ 25

BUILD TOOLS •NPMはBUILD TOOLSを使って自動化する •とりあえず覚えておくはWEBPACK •後継など調べるだけ出てくるが一旦これで良い かと 26

JAVASCRIPT FRAMEWORK •現状はREACT,VUE,ANGULARの三択が主流 •シェアで言えば圧倒的にREACT。それぞれに特 徴があるが、まあ大差はないようにも思える。 27

KNOCKOUT •こんな感じで、知識を入れていった。で、結局 ASP.NETで作っていくにはどうすれば良いか？ JS FRAMEWORKも.NET SPAで調べるとKNOCKOUT.JSと か出てくる。 これにしようかーと話したら流石に古いと言われた • • 28

VUE.JS •とりあえず、ASP.NETでやるにはどのJSフレームワー クを使うか決めないと進まない。 仕事ならREACTの気もしたが、個人なので好みで選 べる。敷居も低そうだし、好みに合致していそうとい うことでVUE.JSを選んでみた • 29

まとめキーワード •SINGLE PAGE APPLICATION •HTML,セマンティックHTML,CSS,BOOTSTRAP •ES6, BABEL,TYPESCRIPTM,トランスパイル •パッケージマネージャ,NPM, BUILD TOOLS,WEBPACK •JS FRAMEWORK, REACT, VUE.JS, ANGULAR 30

HELLO! ASP.NET CORE WITH VUE.JS 31

VUE WITH ASP.NET CORE •VUE.JSでASP.NETで開発しようとしてみるも、.NET FRAMEWORKにはVUEのテンプレートがない •.NET COREにはREACTとANGULARはあるがVUEが ない 32

コマンドライン？！ • ASP.NET CORE WITH VUE.JSのテンプレートプロ ジェクトはなんとコマンドラインでしか作れない 33

NODE.JS •できたプロジェクトの起動にはNODE.JSのインストールが必須 •以前のパソコン環境ならVSフォルダの中にNODE.JSが入って いたが、それでも別途必要だった。 •インストールしたら動いたが、何故か見に行くのはVSフォルダ でエラー。そっちも手動でバージョンアップしてやっと動いた 34

コンパイル •WEBPACKを使ってBUNDLER & MINIFIER。 •JAVASCRPITはTYPESCRIPTでトランスパイル •使ってないけれどCSSもSASSで作る。 •スクリプトだけどコンパイルが当たり前の工程。 35

SJIS問題 •テンプレートが動くので参考にできるが、何か と問題が多い。 •まず何よりもHTMLがSJISで吐かれる。デフォル トで日本語使うと化けるのでエンコードが必要。 36

WEBPACKもコマンドライン •ドはまりしたのがWEBPACKの更新。作成は簡単 •例えばBOOTSTRAPを4にしようとしたら全然ならない •VSでタスクランナーを使ってもやっぱりダメ •結論は、やっぱりコマンドラインで作るしかない 37

PROMISE, ASYNC, AWAIT •テンプレートは非同期をPROMISEでFEACH,THENで書 かれている ASYNC,AWAITにすれば書けたけれど、リファクタでメ ソッド切り出すとコンパイルエラーとか • •TSCONFIG.JSONに"LIB": [ "ES2015", "DOM" ] 38

VUE 2.5 •テンプレートはTYPESCRIPTで書かれている。 •VUEのバージョンが古い。2.5以降から進化した 書き方でTYPESCRIPTが書ける。 •VUEのバージョンアップするとはまる 39

単一コンポーネント •たとえばサンプルがHTML,JAVASCRIPT,CSSが分 かれている。VUEファイルで書こうと思うと書け ない。 •関連するバージョンを上げるとまたはまる 40

依存関係地獄 •その都度、WEBPACKが悪いのか、その他の設 定ファイルが悪いのか、VUEが悪いのか、 TYPESCRIPTが悪いのか悩む。 •こういうことが多くて、繰り返しで疲弊する 41

一番ダメだと思ったこと •コンパイルが通っても、実行時エラーで落ちる •コンパイルエラー出てても実行出来ることもある •TYPESCRIPT使って、事前にコンパイルしているのに、 エラー検知が出来ないとか、んー 42

で、ここで、突如、僕、怪我 43

WHY? •痛くてホビープログラムを2週間近くストップ •その際色々考えた。正直VISUAL STUDIOで組む のが楽しくなくなってきていた 44

僕が思うVSで三大困らない •ダークサイドに落ちない（コマンドラインいらない） •道に迷わない（パスに悩まない） •数字に悩まされない（バージョンに悩まない） •VUEでは、全てはまる。 •で、再開前日に突然思う。もうVUE止めだ！ 45

SPAで作るもう一つの選択肢 •僕はJSフレームワーク自体知らなかったので、最近のWEBに 慣れるためにも最初はJSで一つ作りきろうと思った。が、もう いいや。 •基本的な所は分かってきたし、やっぱり大好きなC#でやりた い。そう、SPAで作る時最後まで悩んでいたもう一つの選択肢 があった 46

BLAZOR •WEB ASSEMBLYを使ってC#で開発するフレーム ワーク •初めてみると兎に角依存関係地獄で悩まない •JSで１ケ月以上悩んだ所は約２日ぐらいで到達。 47

まとめ •ASP.NET MVCは時代遅れ •今はWEB APIを作ったSPA開発が主流 •JSはREACT, ANGULAR, VUEが3大フレームワーク •先はWEB ASSEMBLYを使ったSPAが主流に？ 49

最後に未来予想 • C# • ASP.NET • WEB ASSEMBLY • CLIENT, SERVER, SHARE • RAZOR • BLAZOR ??? 50