シングルページアプリケーション（SPA）を徹底解説！導入メリットや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で期待されることは、何よりページ遷移でのユーザーストレスを軽減することです。一度読み込んだページは、その後必要な部分のコンテンツのみを遷移させるため、画面全体が再描画されるストレスがなくなります。

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

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

SPA導入のデメリット

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

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

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

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

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

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

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

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

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

SPAとUXの関係

SPAを導入する上で必ず意識しなければならないのがUXです。

SPAはUX（体験）ができる

SPAのページでは、ユーザーはUX（体験）ができます。

UXとはユーザーエクスペリエンスのことで、人がモノの利用を通して得る体験のことです。

SPAの場合で言えば、従来のWebページでは、例えば音楽を流しているページの一部を更新するためには、ページ全体が再読み込みされるため、音楽も途切れていました。しかしSPAでは、ページ全体を再読み込みしないことで、ページ内で再生していた音楽や動画が途切れることもなく、必要なコンテンツだけが変更されます。

ユーザーがアクション（クリックなど）をしたコンテンツ以外は、画面遷移の影響を受けないために実現できる体験です。

UX設計が大切

SPAを導入するエンジニアにとっては、UXをこれまで以上に意識したサイト設計が求められます。

ページ全体を遷移させないとはいえ、複数のコンテンツを読み込まなければならない状況では、対象のコンテンツ処理が非常に遅くなるという現象も発生します。これは、複数の要求がサーバーに殺到することによって、サーバー側の処理が遅延するのも一つの原因です。

処理間隔を完全に計算した設計であれば、一つの処理の待ち時間に次の処理を効率的に行うという設計ができますが、エンジニアは最初から綿密な設計を求められるのです。

SPAがネイティブアプリに置き換わる？

スマートフォンにインストールするアプリケーション（スマホアプリ）は、ネイティブアプリと言われます。これはスマートフォン端末向けに作られているアプリケーションという意味です。これに対して、Webブラウザなどで動作するアプリケーションをWebアプリといいます。

ページ全てを毎回読み込む必要がないSPAでは、データ通信量の軽減にもつながり、スマートフォンやタブレットといった通信端末にとっては非常に効率的に働くことが期待されます。

データ通信量やページ遷移のストレスを軽減できるSPAが浸透することで、あるいはWebアプリケーションがネイティブアプリに置き換わる可能性もでてくるということです。

もちろん、今後5Gなどの高速通信で帯域幅への過剰な考慮が不要になる可能性もありますが、アプリケーション開発においては、ネイティブアプリとWebアプリで選択の幅が広がる可能性があるのです。

SPAを効率的に開発するVue.jsとは

SPAにすぐに開発してみたい場合には、Vue.jsを利用する手段があります。Vus.jsはJavaScriptのフレームワークで、SPAの開発効率を上げることができるフレームワークのひとつです。

Vus.jsは、非常にシンプルでありながら、ルールなどが少なく開発自由度の高いことで人気です。JacaScriptをそれほど深く知らなくても、効率的に開発を進めることができます。

また、日本語での情報も多く、比較的短時間で習得することができるため、とりあえずSPAを開発してみたい場合には適したフレームワークといえるでしょう。

まとめ

シングルページアプリケーション（SPA）は、徐々に人気が出てきていますが、全てのWebページに適しているとは言い切れません。

しかし、現段階では開発者も圧倒的に少ないため、これからWebページをSPAへ移行するといったプロジェクトは増えることが予想されますので、エンジニアとしては需要があります。

SPA開発者を目指すならば、SPAを導入しているサイトをできるだけ自身の目で見てみること、またVus.jsなどを利用して実際に開発経験を積んでおくと良いでしょう。開発者の少ない段階では単価も高くなることが期待できます。

今後、SPAは適したWebサイトには利用される技術です。今のうちにしっかりと基本を学んでおくことで、Webサイト開発やWebアプリケーション開発に積極的に関わることができるでしょう。