シングルページアプリケーション(SPA)を徹底解説!導入メリットやUXとの関係は?

Webサイトと一口に言っても、ページの画面遷移やクリック挙動は多岐に渡ります。中でもシングルページアプリケーションは、ページに一度アクセスすれば、その後大きなページ遷移もなく、ストレスのないサイト閲覧が可能な技術です。今回は、シングルアプリケーションについて、導入のメリットやUXとの関係性について徹底解説します。

 

シングルページアプリケーション(SPA)とは

 

 

シングルアプリケーションとは、Single Page Applicationと表記し「SPA」と略されます

SPAは、Webページにおいて1ページ内を各オブジェクトで構成することで、ページ全体を何度も読み込むことなく、対象のコンテンツのみを遷移させます。

ページ内で変化させる必要のない部分は据え置く(再読み込みをしない)ことで、表示の速度や全体のパフォーマンスを向上させることができるのです。

一般的なWebページでは、例えばユーザーが「次のページ」というリンクをクリックすると、アクションはサーバーへ要求され、サーバー側で「次のページ」のデータで1ページ分を作り、クライアントがページ全体を表示させます。

しかしSPAでは、ページ内にある一つのコンテンツをクリックすると、そのコンテンツ部分に必要な情報のみをサーバーへ要求し、必要なデータを使って差分のみを表示するのです。

これにより、ユーザーが認識する変化はページの一部であり、一瞬もページ遷移(ページ全体が白くなるなど)を意識することがなくなります。

 

SPAの例

 

SPAが導入されている代表的なページとしては、グループメッセンジャーとしても人気のあるSlack(スラック)のWebページや、FacebookメッセンジャーのWebページなどです。

SPAをすぐに体験してみたい場合には、Slackのアカウントを作成し、Webブラウザーにて利用してみることをお勧めします。

また、グーグル社の地図コンテンツであるGoogleMapでもSPAが利用されていることも有名ですね。

画面全体を再読み込みすることなくマップのデータのみが読み込まれるため、目的地を表示するたびに画面全体が途切れる(一瞬白くなるなど)ということがありません。

 

SPA導入のメリットとデメリット

 

徐々に人気を集めるSPAですが、そこにはメリットとデメリットが存在しますので、しっかりとチェックしておきましょう。

 

メリット①ユーザーのページ遷移のストレスがない

 

 

SPAで期待されることは、何よりページ遷移でのユーザーストレスを軽減することです。一度読み込んだページは、その後必要な部分のコンテンツのみを遷移させるため、画面全体が再描画されるストレスがなくなります。

 

メリット②開発者のHTMLコーディングが減る

 

Webページを開発するエンジニアにとっては、SPAを導入することで、HTMLのコーディングを減らすことができます。必要なコンテンツ部分のデータを要求して処理を行うので、ページ全体の描写は必要なくなります。

 

デメリット①初期ページの読み込みに時間がかかる

 

SPAのページ遷移や表示が早い理由は、初期の読み込み段階で、必要な画面とコンテンツを一気にダウンロードするからです。

ですので、初期のページ表示には比較的時間がかかってしまいます

 

デメリット②古いブラウザでは処理が重くなる

 

SPAでは、ページにある各コンテンツのデータをクライアントが受け取り、ブラウザが処理をするのですが、ブラウザのバージョンなどが古い場合、とても動作が重くなってしまい、SPA導入の意味が全くなくなってしまいます。

SPAに興味を持つ顧客がいた場合にも、それを使う環境を配慮しておかなければなりません。SPA導入で想定するパフォーマンスを出す場合には、クライアント側のスペックも考慮する必要があるということですね。

 

デメリット③SPA開発者が少ない

 

SPAは現在、開発者が圧倒的に少ない分野でもあります。例えば、独自のサイトをSPAへ移行しても、逆に表示が遅くなったという例もあり、しっかりとした設計とUXに明るい技術者が求められます。

つまり、期待通りに動作するSPAを開発できる技術者にとっては、需要があるという意味でメリットになりますが、依頼する側からすれば少ない技術者の取り合いになる(単価が高くなる)デメリットにもなるのです。

 

Geekly Media ライター

佐久森

0