Reactを触ってからMVCでプロジェクトを開発するチャンスがだんだん少なくなってきました。最近人気の開発手法はフロント側React, Vue, AngularJSとなり、バックエンド側はGraphQL、LambdaまたAPIサーバーとなります。レガシーならMVC＋jQueryとなるでしょう。

レガシーvsモダンの開発手法をコンペアしたいので、久々MVCフレームワークを使ってウェブサイトを構築してきました。

あくまで個人的な見解であり、MVCのポテンシャルが見えていない可能性があります。

レガシーアーキテクチャ

.Net Core 3.1のMVC、ビュー側はもちろんjQueryを採用しています。

作ったウェブサイトは：https://traveljp.info

MVCの優位点

1. とりあえずサクサク画面を作れる。データのバイディングがcshtml中で行われるのがすごく簡単。開発スピードが早い
2. C#がエレガントでインターフェースなどTypeScriptよりまったく強力的、使いやすい
3. サーバーサイドレンダリングなので、SEOに問題ない（ReactならNext.jsでもSSR対応できるが、MVCより難しい）

MVCの問題点

1. コンポーネント化が難しい

レイアウトの定義である程度のコード共有ができるが、コンポーネント単位で分割すると分割されるファイルの管理が容易ではない 2020-06-28-aspnet-core-nested-layout

@{
  Layout = "~/Views/Shared/_Layout.cshtml";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />

@await Html.PartialAsync("_Header")

<div class="container margin_60_30">
  <div class="row">
    @RenderBody()
  </div>
  .
  .
  .
</div>

@await Html.PartialAsync("_Footer")

@section Scripts {
  ...
}

function LayoutSearch({ children }) {
  // any scripts
  return (
    <>
      <Header />
      <div class="container margin_60_30">
        <div class="row">
          {children}
        </div>
        .
        .
        .
      </div>
      <Footer />
    </>
  );
}

2. 各共通コンポーネント専用のcssとjsを作成することが難しい

   • [React]：jsはもちろん、cssならstyled-components、jssなど利用すれば、簡単にできる
   • [MVC(.Net Core)]：jsなら難しい、cssはほぼ無理

3. TreeShaking（不要なコードの削除）が無理

   たとえbootstrapのほんの少しだけしか使っていなくても、bootstrap cssとjsの全てのソースコードをダウンロードしなければいけない。そのため、余計なコードがダウンロードさます。FontAwesomeのようなデカいアイコンライブラリを使用するときは災難的。TTFB(Time to first byte)がWebpackのsplit機能を利用するページと比べるとはるかに遅い。CDNを利用すればなんとなく早くなるが

4. スパゲッティコードになりやすい htmlとjs両方とも綺麗にモジュール化できないため、プロジェクトが大きければ大きいほどスパゲッティになりやすくなる

完了

個人的な感想は以下のようになりました。