SPAとMPA

「マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る
  • .NET開発 > ASP.NET
  • VS系コンテンツ
    • 従来型のWebアプリ vs SPA（Single-page Application）
    • ネイティブ vs SPA（Single-page Application）
    • ネイティブ vs クロスプラットフォーム

目次 †

概要 †

Single-page application(SPA) †

ASP.NET SPAなど、対応したフレームワークを使用して開発する。

• レンダリングはブラウザ側のJSで行うやり方
• 初回リクエスト以降の通信はAjaxでのJSONのやり取りのみとなる。

Multi-page application(MPA) †

SPAの登場に合わせて登場した従来型のWebアプリを表す対義語

• HTTP GETが来たら、リクエストに応じたHTMLを組み上げてブラウザに返す。
• Rails等のサーバサイドフレームワークで何も考えずに作るとこうなる。

詳細 †

MPA †

ASP.NET Web Forms †

• 業務系に向いているが、
• レガシー臭が漂い始めている（.NET Coreへの移行パスが未定）。

ASP.NET MVC †

• よりデザイン重視の案件に適合。
• しかし、SPAに比べるとレガシーではある。

SPA †

ASP.NET SPA †

業務系ではなくユーザー・エンゲージメントが必要
と、されているようなシーンで活用すると良さそう。

• モバイル向け
• PV数の多いB2C向け

Blazor †

ASP.NET SPAは、全く流行らず、
JavaScript系のモノが流行ったので、その対抗。

比較 †

アーキテクチャ †

画面全体更新（MPA）か画面部分更新（SPA）か。

• 画面全体更新（MPA）の方式は、
  • 業務系に適合する。
  • 参照系にも適合する。

• 画面部分更新（SPA）の方式は、
  • 業務系以外（管理画面）に適合する。
  • 純粋な参照系やエントリ系にも適合しない。
  • リッチでインタラクティブなUIを開発したい場合など。

開発ツールの違い †

• 画面全体更新（MPA）の方式は、従来のIDEを使用した開発

• 画面部分更新（SPA）の方式は、
  • npm系の開発ツールとフレームワーク、テキスト・エディタを使用した開発
  • npm系の開発ツールとフレームワークは、MPA開発環境と比べると、全体的に不安定

項目移送の段数が増加する。 †

手数が増え、開発の生産性が落ちる。

参考 †

• SPAとMPAって何が違うの？SPAにしたほうがいい？ - やわらかVue.js
  https://scrapbox.io/vue-yawaraka/SPA%E3%81%A8MPA%E3%81%A3%E3%81%A6%E4%BD%95%E3%81%8C%E9%81%95%E3%81%86%E3%81%AE%EF%BC%9FSPA%E3%81%AB%E3%81%97%E3%81%9F%E3%81%BB%E3%81%86%E3%81%8C%E3%81%84%E3%81%84%EF%BC%9F

OSSコンソーシアム †

• フロントエンドと単位画面あたりの単価的な話
  https://www.osscons.jp/joicpdhoq-537/
• SPAに対する2つの見解。
  と言うかハマるところにハメれば良い。みたいな話
  https://www.osscons.jp/jodlnmgck-537/
• 結局、WebAPIのフロントエンドUIの使いドコロってさぁ。
  https://www.osscons.jp/jorwrrjui-537/

Tags: :.NET開発, :ASP.NET, :ASP.NET Web Forms