シングルページアプリケーションとは何ですか?

最新のWebアプリケーションは、シングルページアプリケーションとも呼ばれます。これは何を意味するのでしょうか?

以前は、ブラウザの機能が今日よりもはるかに低く、JavaScriptのパフォーマンスが低かったとき、すべてのページがサーバーからのものでした。何かをクリックするたびに、サーバーに対して新しいリクエストが行われ、その後ブラウザが新しいページをロードしました。

非常に革新的な製品だけが異なった働きをし、新しいアプローチを試しました。

今日、Reactなどの最新のフロントエンドJavaScriptフレームワークで普及しているアプリは、通常、シングルページアプリケーションとして構築されます。アプリケーションコード(HTML、CSSJavaScript)一度、アプリケーションを操作すると、JavaScriptがブラウザーのイベントをインターセプトし、サーバーに新しいリクエストを送信して新しいドキュメントを返す代わりに、クライアントがJSONをリクエストするか、サーバーでアクションを実行します。ただし、ユーザーに表示されるページが完全に消去されることはなく、デスクトップアプリケーションのように動作します。

シングルページアプリケーションはJavaScriptで構築され(または少なくともJavaScriptにコンパイルされ)、ブラウザーで動作します。

テクノロジーは常に同じですが、アプリケーションの動作方法の哲学といくつかの重要なコンポーネントが異なります。

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

いくつかの注目すべき例:

  • Gmail
  • グーグルマップ
  • フェイスブック
  • ツイッター
  • グーグルドライブ

SPAの長所と短所

SPAは、クライアント/サーバー通信が発生するのを待って、ブラウザーがページを再レンダリングするのを待つ代わりに、即座にフィードバックを得ることができるため、ユーザーにとってはるかに速く感じます。これはアプリケーションメーカーの責任ですが、トランジションやスピナー、および従来のワークフローよりも確かに優れたあらゆる種類のUXの改善を行うことができます。

ユーザーのエクスペリエンスを高速化することに加えて、サーバー側でレイアウトを構築する代わりに効率的なAPIの提供に集中できるため、サーバーが消費するリソースが少なくなります。

これにより、既存のサーバー側コードを完全に再利用できるため、APIの上にモバイルアプリを構築する場合にも理想的です。

シングルページアプリケーションは、プログレッシブWebアプリに簡単に変換できます。これにより、ローカルキャッシュを提供し、サービスのオフラインエクスペリエンスをサポートできます(または、ユーザーがオンラインである必要がある場合は、より適切なエラーメッセージが表示されます)。

SPAは、SEO(検索エンジン最適化)の必要がない場合に最適です。たとえば、ログインの背後で機能するアプリの場合です。

検索エンジンは日々改善されていますが、従来のサーバーでレンダリングされたページではなく、SPAアプローチで構築されたサイトのインデックス作成に問題があります。これはブログの場合です。検索エンジンに依存する場合は、サーバーでレンダリングされた部分がなくても、シングルページアプリケーションを作成する必要はありません。

SPAをコーディングするときは、大量のJavaScriptを作成します。アプリは長時間実行される可能性があるため、メモリリークの可能性にもっと注意を払う必要があります。過去にページの有効期間が数分であった場合、SPAは何時間も開いたままになる可能性があります。時間と、ブラウザのメモリ使用量を大幅に増加させるメモリの問題がある場合、それを処理しないと、不快なほど遅いエクスペリエンスが発生します。

SPAは、チームで作業する場合に最適です。バックエンド開発者はAPIに集中でき、フロントエンド開発者はバックエンドに組み込まれているAPIを利用して、最高のユーザーエクスペリエンスの作成に集中できます。

短所として、シングルページアプリはJavaScriptに大きく依存しています。これにより、低電力デバイスで実行されているアプリケーションを使用すると、速度の点でエクスペリエンスが低下する可能性があります。また、訪問者の中にはJavaScriptが無効になっているだけの場合もあり、作成するものすべてのアクセシビリティを考慮する必要があります。

ナビゲーションのオーバーライド

デフォルトのブラウザナビゲーションを削除するため、URLは手動で管理する必要があります。

アプリケーションのこの部分はルーターと呼ばれます。一部のフレームワーク(Emberなど)はすでにそれらを処理しますが、他のフレームワークはこのジョブを実行するライブラリを必要とします(Reactルーター)。

どうしたの?当初、これはシングルページアプリケーションを構築する開発者にとって後付けでした。これにより、一般的な「戻るボタンが壊れた」問題が発生しました。アプリケーション内を移動するときにURLが変更されず(ブラウザのデフォルトのナビゲーションがハイジャックされたため)、戻るボタンを押すと、ユーザーが前の画面に移動するための一般的な操作です。ずっと前にアクセスしたWebサイトに移動する可能性があります。

この問題は、履歴APIブラウザによって提供されますが、ほとんどの場合、そのAPIを内部的に使用するライブラリを使用します。Reactルーター

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: