シングルページアプリケーションとマルチページアプリケーション：Webアプリの戦い

シングルページWebアプリはすでに20年近く存在していますが、その人気は比較的新しいものです。 その理由は技術開発です。現在の技術により、開発者は、以前は大きな欠点であったものを、実行可能なソリューションまたは利点にさえ変えることができます。 この記事では、シングルページアプリケーションとマルチページアプリケーションの違いと、ビジネスにどちらを選択するかについて説明します。

シングルページアプリケーション（SPA）とマルチページアプリケーション（MPA）の戦いは、見た目よりも複雑です。 各タイプのWebアプリケーションのすべての長所と短所を詳しく見てみましょう。

コンテンツ：

1. SPAとは何ですか？
2. SPAはどのように構築されますか？
3. SPAの利点
4. SPAのデメリット
5. MPAとは何ですか？
6. MPAの利点
7. 複数ページのWebアプリのデメリット
8. SPAとMPA—どちらを選択しますか？
9. プログレッシブウェブアプリ
10. SPAとMPAの開発にはどれくらいの費用がかかりますか？

SPAとは何ですか？

素人の言葉で言えば、シングルページアプリケーションは、ページをリロードする必要なしにコンテンツが動的にロードされるWebアプリケーションです。 たとえば、FacebookやTwitterでフィードを確認したり、Gmail Webアプリでメールを確認したりしても、ページの読み込み画面が悪化することはありません。 スクロールしてタブを切り替えると、コンテンツが即座に読み込まれます。

単一ページのWebアプリでは、ページを開くと、すべてのHTMLとCSSが一度読み込まれます。 その後、サイト内を移動すると、新しいデータのみが読み込まれます。 ページ自体はリロードされません。 これにより、ユーザーエクスペリエンスがスムーズになります。たとえば、待ち時間がほとんどないかまったくなく、ページがすぐに読み込まれるように見えます。 100ミリ秒の遅れが160万ドルを超える売り上げの損失をもたらす可能性がある世界では、これはビジネスオーナーが無視できない問題です。

SPAはどのように構築されますか？

シングルページアプリケーションはJavaScriptフレームワークで構築されており、開発者は個人的な好みなど、さまざまな要因に応じてフレームワークを選択します。 Mind Studiosの開発者によると、今日の3つの大きなJavaScriptフレームワークは次のとおりです。

ほとんどの優れたフロントエンド開発者は、複数のフレームワークを知っています。 多くの人がReact、Angular、Vue、そしていくつかを知っています。

シングルページアプリケーションの利点

シングルページアプリケーションの利点は数多くあります。そのため、いくつかの欠点があるにもかかわらず、非常に人気があります。 実際、現在のテクノロジーでは、これらの欠点にある程度対処できるため、SPAはますます多くのWebサイト所有者に選択されるようになっています。 SPAの長所から始めて、短所について説明します。

1.ページの高速読み込み

積極的にリロードする必要のない、ページ間の高速でスムーズな切り替えは、SPA対MPAの戦いで最大の武器になりました。 動的読み込み（コンテンツを一度にすべてではなく小さな部分に読み込む）は、応答時間を大幅に短縮し、ユーザーエクスペリエンスを向上させます。

SPAは、コンテンツ処理をサーバーからブラウザーに部分的に移動します。 これにより、ブラウザがサーバーにリクエストを送信して応答を待つ必要が少なくなります。 このおかげで、SPAはある程度オフラインで作業することもできます。

2.フロントエンドとバックエンドを分離します

SPAの他の利点の1つは、フロントエンドとバックエンドが緊密に接続されているMPAとは異なり、SPAでは、バックエンドへの影響を最小限に抑えて、フロントエンドだけを書き換えることができることです。 これにより、SPAの更新がより簡単に、より速く、より安価になります。 ただし、フロントエンドとバックエンドが別々になっていることの大きなメリットは、モバイルアプリケーションを構築する場合にSPAバックエンドを使用できることです。 MPAを使用する場合は、モバイルアプリのバックエンドを最初からではなく大幅に再構築する必要があります。

3.開発とメンテナンス

SPAの構築は、MPAの構築よりも時間がかかりません。 SPAの技術スタックはMPAの技術スタックよりもわずかに大きいため、必ずしも簡単ではありませんが、コードを記述したり、ページごとに個別のUI / UXデザインを作成したりする必要がないため、時間はかかりません。

さらに、SPAの利点には、最も人気のある3つのJavaScriptフレームワーク用のネイティブ開発者ツールのおかげで大幅に簡素化されたChromeデバッグが含まれます。

次に、欠点について説明します。

単一ページのWebアプリケーションの欠点（およびそれらを克服する方法）

Unboundによる2018年の調査によると、ユーザーのほぼ70％が、ページの読み込み速度がサイトから購入するかどうかの決定に影響を与えると述べています。 ただし、SPAの欠点は大規模なオンラインストアにとって特に不便であるため、ほとんどのマーケットプレイスは低速のMPAとして構築されています。 開発者は、オンラインストアの所有者が自分のWebサイトをSPAとして構築することを妨げる問題を解決するためにSPA開発を推進してきました。 以下は、シングルページアプリケーションの欠点と、それらを今日のテクノロジで克服する方法です。

1.無効化されたJavaScript

シングルページアプリは、JavaScriptフレームワーク（React、Vue、Angular、場合によってはその他）を使用して開発されています。 したがって、ユーザーがブラウザでJavaScriptを無効にしている場合は、空のページが表示されます。 この問題は、サーバー側レンダリング（SSR）を使用して部分的に解決できます。この場合、アプリはブラウザーではなくサーバーで処理されます。 これは完璧な解決策ではありませんが、ある程度は機能します。 幸いなことに、そもそもブラウザでJavaScriptを無効にするユーザーはそれほど多くありません。

2.検索エンジン最適化

単一ページのWebアプリはAJAXを介してコンテンツをロードするため、検索ボットが取得するのは、基本的にDOM（Document Object Model）要素（コンテンツのないWebアプリ構造）です。 つまり、すぐに取得するキーワードはありません。

その結果、SPAの検索エンジンランキングが低くなります。 また、ユーザーがサイトを上位にランク付けすることが重要な場合は、適切なSEOが必須です。 したがって、このようなWebサイトの場合、開発者は通常、複数ページのアプリケーションを推奨します。

ただし、SEOの問題は、サーバー側のレンダリングで解決できるもう1つの問題です。 サーバー側のレンダリングは、ユーザーがページをナビゲートするときにコンテンツをロードするのではなく、サーバーに表示されているとおりに完全にロードされたページを（要求に応じて）送信します。 これにより、クローラーはSPAとの連携が向上します。

WebアプリのSEOゲームを強化する別の方法は、開発者がWebページ間のナビゲーション用の適切なタグを使用してサイトをコーディングし、検索ボットがWebサイト全体をカバーできるようにすることです。

3.スケーラビリティ

SPAは、新しい機能や完全に新しい機能を追加するという点では、あまりスケーラブルではありません。 これは、すべてが1つのページとして記述されているため、新しい機能を挿入するとコードが中断される可能性があるため、開発者は注意する必要があります。 さらに、余分なコードが多すぎると、コードベース全体がすぐに読み込まれるため、単一ページの読み込みが遅くなる可能性があります。

幸い、JavaScriptフレームワークには、いわゆるコード分​​割ルーターがあり、チャンクレイジーローディングパックとしても知られています。 これらにより、コードをチャンク（名前の由来）でロードして、サイトのロードを高速化できます。

4.セキュリティ上の懸念

シングルページアプリは、クロスサイトスクリプティング（XSS）攻撃の影響を受けやすくなっています。 これは、ハッカーがJavaScriptベースのWebアプリに悪意のあるコードを挿入することを可能にする脆弱性です。 ただし、React.jsにはXSS保護が組み込まれており、経験豊富なWeb開発者があらゆる種類の攻撃からWebアプリを保護する方法は他にもあります。

5.ナビゲーション

単一ページのWebアプリは、まさにそれです—単一ページ。 これは、サイト全体のURLが1つしかないことを意味します。 これにより、ナビゲートが困難になります。通常、進むボタンと戻るボタンは機能せず、コンテンツの特定の部分にリンクすることはできません。

この問題はAPIで解決できます。 動的な値にパスプレフィックスを追加するAPIがあり、ページの特定の部分（通常は見出し）にリンクできるようにします。

MPAとは何ですか？

複数ページのWebアプリは、従来のWebサイトと見なされます。あるページから別のページに移動すると、サイトは完全に再読み込みされます。 この種のWebサイトでは、特に接続速度が遅く、メディアで複数のページにアクセスする必要がある場合は、読み込みが面倒になることがあります。

あまり詳しく調べないと、MPAは過去の遺物であり、間もなく絶滅するように思われるかもしれません。 確かに、ページの読み込みが速いほど、販売には常に優れています。 ただし、それはそれほど単純ではなく、MPAの方が適している場合もあります。

複数ページのアプリの利点

1.ナビゲーション

複数ページのWebアプリの最大の利点は、従来のナビゲーションが可能になることです。 つまり、MPAの各ページには、ユーザーがコピーして貼り付けたり、ブックマークに追加したり、共有したりできる独自のURLがあります。ブラウザの戻るボタンと進むボタンも問題なく機能します。 SPAでは、個別のURLを作成し、ユーザーがボタンを介して内部の「ページ」間を行き来できるようにするには、開発者はAPIを使用する必要があります。

2.スケーラビリティ

複数ページのWebアプリの紛れもない利点は次のとおりです。MPAを使用すると、Webサイトを必要なだけスケーラブルにできます。 数十のページに数十を構築し、コンテンツを分割してナビゲーションを容易にし、読み込みを高速化できます。 SPAは通常、Webサイト構造全体（DOM）を一度ロードするため、Webサイトに大量のコードがある場合（たとえば、オンラインストアがある場合）、SPAとして構築するには、スタックに追加のテクノロジが必要になります。 これが、Web開発者が代わりにオンラインストアのMPAを提案することは珍しいことではない理由です。

3.SEO

ビジネスが検索エンジンの結果に大きく依存している場合は、通常はランクが高いため、複数ページのWebアプリを検討してください。 SPAの動的なコンテンツの読み込みは、MPAが直面しない問題である検索エンジンのクローラーの邪魔になります。 SPAでは開発者が追加のSEOテクノロジーを採用する必要がありますが、MPAは当然検索エンジンと良好な関係にあります。

4.技術スタック

MPAは、2種類のWebアプリのうち古いものであるため、より開発された技術スタックとやや大きな開発者コミュニティを持っています。 また、ページ数が多いため開発に時間がかかりますが、複数ページのWebアプリは、SPAよりもシンプルで小さな技術スタックで構築されています。

複数ページのWebアプリのデメリット

1.読み込み速度の問題は白黒ではありません

まず第一に、MPAはSPAよりも正確に遅いわけではありません。 SPAと比較して遅いのは、ページ間の切り替えです。 これは、MPAを使用すると、ユーザーがページを変更しようとするたびに（たとえば、プロファイルに移動したり、チェックアウトに進んだりするたびに）、サイトがサーバーに新しいページのコードの要求を送信するためです。 リクエスト自体とレスポンスの処理には時間がかかるため、読み込みに時間がかかります。

新しいページの読み込みに必要な時間は、複数の要因によって異なります。

• ユーザーのインターネット接続速度
• ロードされるコンテンツの量とタイプ
• 同時にサイトにアクセスしているユーザーの数
• サイトのサーバーはどれほど強力か
• サイトが構築されているテクノロジー
• フロントエンド開発者のスキルと経験

一方、SPAは、ユーザーがサイトを開いた瞬間にコード全体をロードします。 その後、同じページの内部の「タブ」を切り替えるだけで、完全にロードされたキャッシュから要求されたコンテンツが動的に表示されます。 また、コードが多い場合、この初期ロードは、MPAよりもSPAの方がはるかに長くかかる可能性があります。 したがって、MPAとSPAのどちらかを選択する必要がある場合、ことわざにあるように、それはすべて異なります。

2.開発

複数ページのWebアプリケーションの構築は、単一ページのアプリの構築よりも時間がかかります。 これは、Webアプリの各ページに個別のコードと個別のデザインが必要になるためです。 機能の数と複雑さによっては、時間もコストに影響を与える可能性があります。これは、ほとんどの企業とフリーランサーが作業に費やした時間で課金するためです。

3.適応性

MPAは主にデスクトップブラウザ向けに構築されており、今日では誰もがWebサイトのインターフェイスをモバイルブラウザ向けに柔軟にしていますが、MPAの完全な適応性はSPAよりも困難です。 シングルページアプリケーションはネイティブモバイルアプリによく似ていますが、モバイルデバイスのマルチページアプリはポートレートモードのWebサイトのように見えます。

そして、それはUIだけではありません。 ある時点で、複数ページのWebサイトに基づいてネイティブモバイルアプリを構築することにした場合は、UI / UX、ビジュアル、およびバックエンドをすべて最初から作成する必要があります。 次に、SPAを使用すると、バックエンドを再利用でき、多くの場合、モバイルアプリのインターフェイスと同様のフロントエンドを使用できます。

SPAとMPA—どちらを選択しますか？

上記で説明したすべてを要約すると、次の表で、単一ページと複数ページのWebアプリケーションの主な違いを概説します。

ご覧のとおり、どちらの種類のWebアプリにも長所と短所があります。 また、シングルページアプリケーションテクノロジーは急速に進歩しており、SPAはすぐに従来のWebサイトを圧倒する可能性がありますが、今日でも、ビジネス用に構築するWebサイトの種類（SPAまたはMPA）を決定する前に、長所と短所を比較検討する必要があります。

少し余分なもの：プログレッシブウェブアプリ

プログレッシブウェブアプリ（PWA）は、ここ数年のウェブ開発のトレンドです。 つまり、PWAはWebアプリとネイティブアプリを組み合わせたものです。 基本的には、JavaScript、HTML、およびCSSを使用するため、Webアプリ（通常は単一ページのアプリ）です。 ただし、スマートフォンのホーム画面に固定して、ネイティブアプリのようにある程度オフラインで動作させることができます。

コンピューターのデスクトップにアプリやフォルダーへのショートカットを作成する方法を知っていますか？ PWAも同様に機能しますが、スマートフォンのホーム画面にWebページへのアプリのようなリンクを作成します。 最新の技術スタックとAPIを使用すると、スマートフォンのキャッシュに一定量のデータが読み込まれるため、必要に応じてアプリをオフラインで操作できます。

PWAは、ネイティブアプリほど機能が豊富ではありません。特定の権限を必要とする、NFC、Bluetooth、またはスマートフォンの機能を使用することはできません。 また、完全なオフライン機能も提供していません。 しかし、それらは柔軟性があり、構築が簡単で、開発が安価であり、ユーザーの電話にWebサイトを常に思い出させます。

SPAとMPAの開発にはどれくらいの費用がかかりますか？

シングルページアプリケーションは、ある理由で人気が高まっています。 ご覧のとおり、 SPAが抱えるほとんどの問題は軽減できるため、Webアプリの死ではありません。 つまり、これらのソリューションには追加のテクノロジーを採用する必要があり、それがシングルページアプリケーションの開発にかかる時間とコストに影響を与える可能性があります。 SPAとMPAのどちらを開発するかを決定する前に、アイデアのあらゆる側面を評価し、Web開発会社の経験を考慮する必要があります。

方程式に追加できるパラメータのほんの一部を次に示します。

• あなたのビジネスの種類
• ウェブサイトのサイズ
• スケーラビリティ要件
• あなたのサイトにとってのSEOの重要性

シングルページアプリを使用する場合は、次のスペシャリストを擁する開発会社を雇う必要があります。

• プロジェクトマネージャ
• UI / UXWebデザイナー
• JavaScriptとそのフレームワークを専門とするフロントエンド開発者
• バックエンド開発者
• QAエンジニア

もちろん、SPA Webサイトを構築するためのコストは、サイトのサイズとタイプ、その機能セット、および必要な技術スタックによって異なるため、概算でしか見積もることができません。

シンプルなシングルページアプリケーション（たとえば、ランディングページ）は、2〜4週間で作成でき、費用はわずか4,200ドルです。 より複雑なSaaSプラットフォームは、調査、構築、および起動に3〜4か月かかる場合があります。 このようなSPAの開発コストは約29,000ドル以上になります。 SPAの技術スタックはMPAの技術スタックよりも大きいため、開発者の経験も単一ページのWebアプリの作成に必要な時間に影響を与える可能性があります。

一方、複数ページを含む最も単純なマルチページアプリケーション（そうでない場合、意味は何ですか？）は、コーディングに約4〜5か月かかり、複雑さと設計に応じて35,000ドルから42,000ドルの費用がかかります。 必要な機能が多いほど、価格が高くなり、開発期間が長くなります。

結論：SPAとMPA

現在、シングルページアプリケーションが世界を征服しています。 MPAを脇に置くのは時期尚早ですが、進行を止めることはできず、止めるべきではないと私たちは考えています。 つまり、 Mind Studiosでは、常に目を光らせて最新のテクノロジーを追跡しています。これらのテクノロジーは、主にSPA開発用です。 当社の開発者は、従来のWebサイト開発方法とJavaScriptフレームワークの両方に精通しているため、Webアプリを希望どおりに構築できます。

SPAの開発方法について詳しく知りたい場合、または相談をご希望の場合は、お問い合わせください。

ArtemChervichnikとSvitlanaVaraksinaによって書かれました。