🪐

REST API + SPAとMVC

2023/07/20に公開

SPAとは

Single Page Application（シングルページアプリケーション）の略
文字通り「一つのページだけ」で完結するウェブアプリケーションのこと！

通常のウェブサイトは、ユーザーがページのリンクをクリックすると新しいページに移動し、その都度サーバーから新しいHTMLを取得して表示します。

一方で、SPAは最初に一度だけ全てのHTML、CSS、JavaScriptをロードし、
その後はサーバーとの通信を最小限に抑え、ページ遷移やデータの更新を行います。

SPAはReactやVue.js、AngularといったJavaScriptフレームワークと一緒に使われることが多いです。

この構成では、フロントエンド（クライアント）とバックエンド（サーバ）が完全に分離されます。
フロントエンドはJavaScriptで作られたSPAで、バックエンドはRESTfulなAPIを提供します。

分離の利点
フロントエンドとバックエンドが独立して開発できるため、フロントエンドのフレームワーク/ライブラリ（React、Angular、Vue.jsなど）の選択や、バックエンド技術（Ruby、Python、Javaなど）の選択が自由になります。

ユーザ体験
SPAはページ遷移時に全体を再読み込みする必要がなく、ユーザにネイティブアプリケーションに近い体験を提供できます。

再利用性
同じREST APIを様々なフロントエンド（ウェブ、モバイルアプリなど）から使用することが可能です。

複雑性
フロントエンドとバックエンドが分離しているため、設定やデバッグが複雑になる可能性があります。

SEO問題
SPAでは初期ローディングに全てのJavaScriptが読み込まれるため、SEO（検索エンジン最適化）に影響を及ぼす可能性があります（Server Side Renderingなどのテクニックで対応可能です）。

初期ロード時間
SPAは最初に全てのスクリプトをロードするため、初期ロード時間が長くなる可能性があります。

この構成では、一つのアプリケーション内でフロントエンドとバックエンドの両方を扱います。
MVCはソフトウェアアーキテクチャの一種で、Ruby on RailsやDjangoなどの伝統的なフルスタックフレームワークで一般的に用いられます。

統合の利点
フロントエンドとバックエンドが一つのフレームワーク内で統合されているため、設定やデバッグが容易であり、また、フレームワークが提供する多くの便利な機能（フォームヘルパー、ORMなど）を直接利用できます。

学習曲線
一つのフレームワークを学ぶだけでフルスタック開発が可能なため、学習曲線が緩やかです。

SEO
従来のMVCアプリケーションでは各ページがサーバで完全にレンダリングされるため、SEOに有利です。

ユーザ体験
従来のMVCアプリケーションでは、ページ間の遷移で全体が再読み込みされるため、SPAに比べてユーザ体験が劣る場合があります。

再利用性の制限
従来のMVCアプリケーションではバックエンドとフロントエンドが密に結合しているため、同じバックエンドを別のフロントエンドで再利用することが難しい場合があります。

これらの違いとメリット、デメリットから、開発するアプリケーションの種類、要件、目標によって、
適切なアーキテクチャを選択することが重要です!!