シングル ページ アプリケーション (SPA) は、応答性を高め、デスクトップ アプリケーションやネイティブ アプリをより正確に複製するために、単一の HTML ページを介してユーザーに表示される Web アプリです。
SPAも時々来ます defiシングルページインターフェイス (SPI)。
シングルページ アプリケーションは、初期読み込み時にアプリケーションの HTML、JavaScript、CSS をすべてフェッチしたり、ユーザー インタラクションやその他のイベントに応じて更新するためにリソースを動的に読み込んだりできます。
他の Web アプリケーションでは、別の HTML ページ上のアプリケーションの一部にリンクされたホームページがユーザーに表示されます。これは、ユーザーが新しいリクエストを行うたびに、新しいページが読み込まれるまで待たなければならないことを意味します。
テクノロジ
SPA は HTML5 と Ajax (非同期 JavaScript および XML) を使用して、ユーザーのリクエストに対する流動的かつ動的な応答を可能にし、ユーザーがアクションを起こすとすぐにコンテンツを更新できるようにします。 ページが読み込まれると、Ajax 呼び出しを介してサーバーとの対話が行われ、JSON (JavaScript Object Notation) 形式で検出されたデータが返され、再読み込みすることなくページが更新されます。
スパの詳細
シングルページ アプリは、HTML を取得するためにサーバーのラウンドトリップを必要とせずに、ユーザー インターフェイスのあらゆる部分を再設計できる機能で注目に値します。 これは、データを管理するモデル層とモデルから読み取るビュー層を使用して、データをデータ プレゼンテーションから分離することによって実現されます。
良いコードは、同じ問題を複数回解決するか、リファクタリングすることで生まれます。 通常、このプロセスは、XNUMX つのメカニズムが一貫して同じことを実行する、繰り返しのパターンで進化します。
保守可能なコードを作成するには、単純な方法でコードを作成する必要があります。 これは絶え間ない闘いであり、実際、問題を解決するコードを記述することで複雑さ (エントランス/依存関係) を追加するのは簡単です。 そして、複雑さを軽減しない方法で問題を解決するのは簡単です。
名前空間はその一例です。
シングル ページ アプリケーション (SPA) マルチ ページ アプリケーション (MPA) の比較
マルチページ アプリケーション (MPA) には、静的データと他のサイトへのリンクを含む複数のページが含まれます。 HTML と CSS は、MPA Web サイトの開発に使用される主なテクノロジーです。 JavaScript を使用すると、負荷を軽減し、速度を向上させることができます。 オンライン ストアなどの幅広いサービスを提供する組織は、さまざまなユーザー データベースへの接続が容易になる MPA の使用を検討する必要があります。
シングルページ アプリケーションは、次の点でマルチページ アプリケーションと異なります。
- 開発プロセス: MPA を作成する場合、SPA とは異なり、JavaScript の熟練度は必要ありません。 ただし、MPA ではフロントエンドとバックエンドが結合されているため、これらのサイトでは SPA よりも比較的長い構築時間が必要になります。
- Velocità: MPA は比較的低速で動作するため、新しいページを最初から読み込む必要があります。 ただし、SPA は後で使用できるようにデータをキャッシュするため、最初のダウンロード後のロードがはるかに速くなります。
- 私はモーターリ・ディ・リサーカに耳を傾ける: 検索エンジンは MPA を使用して Web サイトのインデックスを簡単に作成できます。 MPA は、より良い SEO ランキングを生成するために、検索エンジンによってより多くのページがクロールされます。 各ページのコンテンツも静的であるため、アクセスしやすくなっています。 対照的に、SPA には単一の一意の URL (Uniform Resource Locator) を持つページがあります。 また、ほとんどの検索エンジンでは適切にインデックス付けされない JavaScript も使用されます。 これにより、SPA の SEO ランキングがさらに難しくなります。
- セキュリティ: MPA では、各オンライン ページを個別に保護する必要があります。 ただし、SPA はハッカー攻撃を受けやすいです。 しかし、適切なアプローチを使用すれば、開発チームはアプリケーションのセキュリティを向上させることができます。
より多くの企業が SPA の使用に移行するにつれて、クローラーと検索エンジンはより適切なインデックスを作成するために進化します。 そのスピードを考えると、SPA が Web アプリケーション開発の頼りになるオプションになるのはいつになるかだけの問題です。 そうなると、SPA に対する MPA の利点は薄れ始めます。
シングルページアプリケーションをいつ使用するか?
このようなアプリケーションが最も関連性の高いシナリオは XNUMX つあります。
- 動的なプラットフォームとデータ量を抑えた Web サイトを開発したいユーザーは、SPA を使用できます。
- Web サイト用のモバイル アプリケーションの構築を計画しているユーザーは、SPA の使用を検討することもできます。 サイトおよびモバイル アプリケーションのバックエンド API (アプリケーション プログラミング インターフェイス) を使用できます。
- SPA アーキテクチャは、SEO の必要性が低いため、Facebook などのソーシャル ネットワーク、SaaS プラットフォーム、クローズド コミュニティの構築に適しています。
- 消費者にシームレスなインタラクションを提供したいユーザーは、SPA も使用する必要があります。 消費者は、ライブ ストリーミング データやグラフのライブ更新にアクセスすることもできます。
- デバイス、オペレーティング システム、ブラウザー全体で、一貫したネイティブで動的なユーザー エクスペリエンスを提供したいと考えているユーザー。
優れたチームには、高品質のシングルページ アプリケーションを作成するための予算、ツール、時間が必要です。 これにより、トラフィック関連のダウンタイムが発生しない、信頼性が高く効率的な SPA が確保されます。
シングルページアプリケーションアーキテクチャ
シングル ページ アプリは、現在のページを読み込んで作業することで訪問者と対話し、サーバーから複数の Web ページを読み込む必要がなくなります。
SPA を備えた Web サイトは、単一の URL リンクで構成されます。 クリックすると、コンテンツがダウンロードされ、特定のユーザー インターフェイス (UI) コンポーネントが更新されます。 新しいコンテンツがサーバーからフェッチされるときにユーザーが現在のページを操作できるため、ユーザー エクスペリエンスが向上します。 更新が発生すると、現在のページの一部が新しいコンテンツで更新されます。
SPA の最初のクライアント リクエストでは、アプリケーションとそのすべての関連資産 (HTML、CSS、JavaScript など) がロードされます。 初期ロード ファイルは複雑なアプリケーションにとって重要になる可能性があり、ロード時間が遅くなる可能性があります。 ユーザーが SPA 内を移動すると、アプリケーション プログラミング インターフェイス (API) が新しいデータを取得します。 サーバーは JSON (JavaScript Object Notation) 形式のデータのみで応答します。 このデータを受信すると、ブラウザーはページを再ロードせずに、ユーザーに表示されるアプリケーションのビューを更新します。
シングルページ アプリケーション アーキテクチャには、サーバー側とクライアント側のレンダリング テクノロジが含まれます。 サイトは、クライアント サイド レンダリング (CSR)、サーバー サイド レンダリング (SSR)、または静的サイト ジェネレーター (SSG) を通じてユーザーに表示されます。
- クライアントサイドレンダリング (CSR)
クライアント側レンダリングでは、ブラウザはサーバーに HTML ファイルを要求し、スクリプトとスタイルが添付された基本的な HTML ファイルを受け取ります。 JavaScript の実行中、ユーザーには空白のページまたはローダー イメージが表示されます。 SPA はデータをフェッチし、視覚化を生成し、データをドキュメント オブジェクト モデル (DOM) にプッシュします。 その後、SPA を使用する準備が整います。 CSR は多くの場合、XNUMX つの代替手段の中で最も長く、コンテンツの表示時にデバイス リソースを大量に使用するため、ブラウザーに負荷を与える場合があります。 さらに、CSR は過剰なサーバー通信を行わずに消費者に情報を提供するため、トラフィックの多い Web サイトにとって優れた代替手段となり、結果としてユーザー エクスペリエンスが高速化されます。
- サーバーサイドレンダリング (SSR)
サーバー側のレンダリング中、ブラウザーはサーバーから HTML ファイルを要求します。サーバーは要求されたデータをフェッチし、SPA をレンダリングし、外出先でアプリケーション用の HTML ファイルを作成します。 その後、アクセス可能なマテリアルがユーザーに表示されます。 SPA アーキテクチャは、イベントの添付、仮想 DOM の生成、およびさらなる操作の実行に必要です。 その後、SPA を使用する準備が整います。 SSR は、SPA の速度とユーザーのブラウザに過負荷をかけないことを組み合わせることで、プログラムを高速化します。
- 静的サイト ジェネレーター (SSG)
静的サイト ビルダー内では、ブラウザはすぐにサーバーに HTML ファイルを要求します。 ページがユーザーに表示されます。 SPA はデータをフェッチし、ビューを生成し、ドキュメント オブジェクト モデル (DOM) にデータを入力します。 これで、SPA を使用できるようになります。 名前から推測すると、SSG は主に静的ページに適しています。 静的ページに優れた高速なオプションを提供します。 動的コンテンツを含む Web サイトの場合、ユーザーは他の XNUMX つの情報レンダリング オプションのいずれかを選択することをお勧めします。
シングルページアプリケーションの利点
Meta、YouTube、Netflix などの大企業は、複数ページのアプリケーションから単一ページのアプリケーションに移行しています。 SPA は、よりスムーズなユーザー エクスペリエンス、より高いパフォーマンス、応答性を提供します。 シングルページアプリケーションを使用する利点を以下に示します。
- キャッシュ機能
シングル ページ アプリケーションは、最初のダウンロード時にサーバーに XNUMX つのリクエストを送信し、受信したデータを保存します。 消費者は、必要に応じて受信したデータを使用してオフラインで作業できるため、データ リソースの消費が少なくなり、ユーザーにとってはより便利になります。 また、クライアントのインターネット接続が不安定な場合でも、LAN 接続が許可されていれば、ローカル データをサーバーと同期できます。
- 高速かつ応答性が高い
SPA を使用すると、ページ全体を更新するのではなく、要求されたコンテンツのみが更新されるため、Web サイトの速度が向上します。 SPA は、新しいページではなくマイナー JSON ファイルを読み込みます。 JSON ファイルにより、読み込み速度と効率が向上します。 これにより、ページのすべての機能に遅延なく即座にアクセスできるようになります。 Web サイトの読み込み時間は収益と売上に大きな影響を与える可能性があるため、これは大きな利点です。
SPA を使用すると、ページ上のすべての情報が即座に提供されるため、スムーズな移行が可能になります。 Web サイトを更新する必要がないため、そのプロセスは一般的なオンライン アプリよりも効率的です。
また、SPA では、HTML、CSS、スクリプトなどのアセット Java これらはアプリケーションの存続期間中に XNUMX 回だけフェッチされます。 必要なデータのみが双方向に交換されます。
SPA を備えたページでは、キャッシュとデータ量の削減により、ユーザーがより速く移動できるようになります。 必要なデータのみが送受信され、更新されたコンテンツの不足部分のみがダウンロードされます。
- Chrome でのデバッグ
デバッグでは、パフォーマンスを低下させるバグ、エラー、Web アプリケーションのセキュリティの脆弱性を検出して削除します。 SPA のデバッグは、Chrome 開発者ツールを使用すると簡単になります。 開発者は、ブラウザから JS コードのレンダリングを制御し、多くのコード行を調べることなく SPA をデバッグできます。
SPA は、AngularJS や React 開発者ツールなどの JavaScript フレームワーク上に構築されているため、Chrome ブラウザを使用してデバッグが容易になります。
開発者ツールを使用すると、ブラウザがどのようにサーバーにデータを要求し、それをキャッシュし、ページ要素をどのように表示するかを開発者が理解できるようになります。 さらに、これらのツールを使用すると、開発者はページ要素、ネットワーク操作、および関連データを監視および分析できます。
- 急速な発展
開発プロセス中に、SPA のフロントエンドとバックエンドを分離して、XNUMX 人以上の開発者が並行して作業できるようにすることができます。 フロントエンドまたはバックエンドを変更しても、もう一方のエンドには影響しないため、開発の迅速化が促進されます。
開発者はサーバー側のコードを再利用し、SPA をフロントエンド UI から分離できます。 SPA の分離アーキテクチャでは、フロントエンド ディスプレイとバックエンド サービスが分離されます。 これにより、開発者は、コンテンツに影響を与えたり、バックエンド テクノロジーを心配したりすることなく、視点を変更し、構築して実験することができます。 これにより、顧客はこれらのアプリケーションを使用して一貫したエクスペリエンスを得ることができます。
- ユーザーエクスペリエンスの向上
SPA を使用すると、ユーザーは閲覧したページにすべてのコンテンツを同時にアクセスできるようになります。 ユーザーは快適かつシームレスにスクロールできるため、より便利です。 ネイティブのデスクトップまたはモバイルアプリを使用しているような感じです。
SPA は、明確な始まり、中間、終わりを持つポジティブな UX を提供します。 また、ユーザーは MPA のように複数のリンクをクリックしなくても、目的のコンテンツにアクセスできます。 ページの読み込みにかなりの時間がかかるためユーザーがイライラする MPA とは異なり、ユーザーが情報に即座にアクセスできる場合は直帰率が低くなります。 ページ要素が再利用されるため、ナビゲーションも高速になります。
- IOSおよびAndroidアプリケーションへの変換
iOS および Android アプリケーションへの移行を検討している開発者は、変換が比較的簡単な SPA を使用する必要があります。 同じコードを使用して SPA からモバイル アプリケーションに切り替えることができます。 コード全体が単一のインスタンスで提供されるため、SPA はナビゲートしやすく、モバイル アプリケーションに最適です。
- クロスプラットフォームの互換性
開発者は、単一のコード ベースを使用して、任意のデバイス、ブラウザ、オペレーティング システム上で実行できるアプリケーションを構築できます。 これにより、どこでも SPA を使用できるため、消費者エクスペリエンスが向上します。 また、開発者や DevOps エンジニアは、コンテンツ編集アプリケーションを開発しながら、リアルタイム分析などの機能豊富なアプリケーションを構築できます。
欠点
シングル ページ アプリケーションにはさまざまな利点がありますが、SPA フレームワークを使用するといくつかの欠点が生じます。 幸いなことに、SPA を使用してこれらの問題を克服する取り組みが進行中です。 以下にいくつかの欠点があります。
- 検索エンジン最適化 (SEO)
シングルページのアプリケーションは SEO には適さないというのが広く信じられています。 Google や Yahoo などのほとんどの検索エンジンは、しばらくの間、サーバーとの Ajax 対話に基づいて SPA Web サイトをクロールできませんでした。 その結果、これらの SPA サイトのほとんどはインデックス付けされていないままになりました。 現在、Google ボットには、SPA ウェブサイトのインデックス作成に通常の HTML の代わりに JavaScript を使用する方法が教えられており、ランキングに悪影響を及ぼしています。
既製の SPA サイトに SEO を組み込むのは困難であり、費用もかかります。 開発者は、検索エンジン サーバーによってレンダリングされる別の Web サイトを構築する必要がありますが、これは非効率であり、多くの追加コードが必要になります。 特徴検出やプリレンダリングなどの他の技術も使用できます。 SPA 施設では、各ページに単一の URL があるため、SPA の SEO 機能が制限されます。
- 戻るボタンと進むボタンのナビゲーション
ブラウザーは、Web ページを迅速に読み込めるように情報を保存します。 消費者が戻るボタンを押すと、ほとんどの人は、ページが最後に閲覧したときと同様の状態になり、すぐにページが切り替わることを期待します。 従来の Web アーキテクチャでは、サイトと関連リソースのキャッシュされたコピーを使用することでこれを可能にします。 ただし、SPA の単純な実装では、「戻る」ボタンを押すと、リンクをクリックしたのと同じ効果が得られます。 サーバーリクエストが発生し、遅延が増加し、目に見えるデータが変更されます。
ユーザーの期待に応え、より高速なエクスペリエンスを提供するには、SPA 開発者は JavaScript を使用してネイティブ ブラウザの機能を模倣する必要があります。
- スクロール位置
ブラウザは、訪問したページの最後のスクロール位置などの情報を保存します。 ただし、ブラウザの「戻る」ボタンと「進む」ボタンを使用して SPA を移動すると、スクロール位置が変わってしまう場合があります。 たとえば、Facebook では、ユーザーが最後のスクロール位置までスクロールして戻る場合もありますが、そうでない場合もあります。 これにより、前のスクロール位置まで手動でスクロールを再開する必要があり、ユーザー エクスペリエンスは最適とは言えません。
この問題に対処するには、開発者は、ユーザーが前後にスクロールするときに正しいスクロール位置を保存、取得し、プロンプトを表示するコードを提供する必要があります。
- ウェブサイト分析
分析コードをページに追加すると、ユーザーはページへのトラフィックを追跡できます。 ただし、SPA では、ページが XNUMX つだけであるため、どのページまたはコンテンツが最も人気があるかを判断することが困難になります。 表示された擬似ページを追跡するには、分析用の追加コードを提供する必要があります。
- 安全性の問題
SPA は、次のような方法で侵害される可能性が高くなります。 クロスサイトスクリプティング。 これにより、消費者はアプリケーション全体をダウンロードできるようになり、リバース エンジニアリングを通じて脆弱性を発見する機会が増えます。 この問題に対処するには、開発者は、認証や入力検証など、Web アプリケーションのセキュリティに関連するすべてのクライアント側ロジックが検証のためにサーバー上で XNUMX 重化されていることを確認する必要があります。 また、開発者は、限定されたロールベースのアクセスを提供する必要があります。
結びの
シングル ページ アプリは、アプリ エクスペリエンスの進化における次のステップを示します。 これらはより高速で直感的であり、カスタマイズなどの高度な機能と統合できます。 Gmail、Netflix、Facebook のニュース フィードなど、多くの同時ユーザーを抱える優良企業が単一ページ アーキテクチャに依存しているのはそのためです。 このテクノロジーを導入することで、企業はオンライン プロパティからより多くの価値を引き出し、デジタル ビジネスとして新たな進出を図ることができます。
Ercole Palmeri
