皆さんはSPA開発という言葉を聞いたことがありますでしょうか？

WEBサイトの動きや高度な表現が可能になるため、近年の開発現場ではJavaScriptのモダンなライブラリが提供されることも多く注目されています。

今回はSPA開発についてメリットやデメリット、導入するにあたりポイントをお伝えします。

SPA開発とは？

まずSPAについて意味や仕組みについて詳しく説明していきます。

SPAとは

Single Page Application（シングルページアプリケーション）の 略です。

SPAとは単一のWebページでアプリケーションを構成する設計構造の名称です。

従来のサイトではページ毎にHTMLの遷移が行われるため、読み込みや表示に時間がかかることがあります。

SPAだとページの遷移はせずアプリのように動くWebサイトを作ることができ、ユーザーにとってストレスが少ないため、上質なUXを提供できます。

SPA開発とは

SPA開発とはユーザーがページ遷移することなく、１つのページ内でコンテンツを操作できるWebアプリケーションの開発手法です。

1つのHTMLページを初回だけ読み込み、それ以降はデータの変更に応じて、JavaScriptを使って必要な部分だけを読み込みます。

SPA開発の主な事例として、GoogleMapやGmail、Facebookが挙げられます。

SPAの仕組み

通常のWebサイトでは画面遷移はリクエストの度にサーバー側からブラウザにHTMLが渡され、繰り返し行うことにより遷移がされます。

SPAでは、最初のリクエストの時にサーバーはHTMLファイルを送信するのみで、それ以降はJSONと呼ばれるデータを送信します。

上記の特徴から、ページの再度読み込みが必要なくなり、待ち時間も少なくユーザーのストレスも減らすことができます。

SPAとMPAの違い

SPAの対義語としてMPA(Multi-page Application)があります。違いはページ取得の際のサーバーへのアクセス回数です。

SPAは一度サーバーにアクセスした時点でページの全体を取得します。一方MPAはページにアクセスする度にサーバーからページ取得を1回ずつ行います。

アクセス回数が減ることはメリットにつながるため後ほど説明します。

CI/CDが必要な理由

CI/CDとはソフトウェア開発を高速化するため、ソフトウェアの変更を常にテストを行い、自動で本番環境に対応できるような状態にする開発手法です。

ウォーターフォール開発では要件定義からテストといった開発工程を上から下へと流す方法ですが最近の開発現場では仕様が明確になっていないケースもあり、ウォーターフォールでは開発に遅延が出る可能性があります。

そのためCI/CDはアジャイル開発との相性も良い手法です。
スピードが重視されるアジャイル開発では工程の一部を自動化できるCI/CDは必須と言っても過言ではありません。

参考：三井情報株式会社

https://www.mki.co.jp/knowledge/column104.html

SPA開発のメリット・デメリットは？

UXの観点からも優れているSPA開発ですが、メリットやデメリットについても挙げていきます。

SPA開発のメリット

ここではSPA開発の様々なメリットについて説明します。

Webサイトの表示速度向上

前述の通り、従来のWebサイトではアプリケーションの仕組み上サーバーへのリクエスト、レスポンスによりHTMLに反映されるためページを更新する度にサーバー側に送信しています。

従来のサイトだと、以下の流れで処理されています。

• ユーザーがクリック
• サーバー側にリクエストを行う。
• サーバー側でHTMLを作成、レスポンスでブラウザに渡す

上記のフローだと処理に時間がかかってしまうのが欠点でしたがSPAでは大きな違いがあります。

SPAを用いたWEBサイトだと

• ユーザーがクリック
• 必要な部分だけサーバー側にリクエスト
• レスポンスデータをJavaScriptで処理

この処理によりデータ量を最小限に抑えることができ、表示速度向上につながります。

高度なWeb表現が可能

SPAはユーザーのアクションに対して必要な部分のみを更新するため、
ブラウザの動作に縛られることなく高度なWebサイトの表現が可能です。

またJavaScriptにはフレームワークがあり、色々な表現が簡単にできるためUIの観点でも優れています。

フレームワーク	特徴
React.js	管理しやすく拡張性がある
Angular.js	システムの種類を問わず、フロントエンドでフルスタック開発が可能
Vue.js	学習のハードルが低く、導入が容易

コーディング作業の削減

前述の通りSPAでは必要最低限のデータのみを取得し、変更する箇所のみを書き換えることができるので結果的にコーディング作業の削減ができます。

プログラミングコードを記述する時間を削減できるのは開発者にもメリットのため現場環境の改善にも大きな影響があります。

 ネイティブアプリの代用ができる

アプリには「ネイティブアプリ」と「Webアプリ」の2種類があります。

ネイティブアプリとはデバイスにダウンロードしてインストールできるアプリのことで
App StoreやGoogle Play経由でインストールできるアプリが一例です。

一方でWebアプリと呼ばれるものもあり、Webブラウザで動くアプリを指します。

ネイティブアプリの方が動きが速いため、動作スピードが要求されるスマホアプリでは
ネイティブアプリが利用されるのが一般的です。

SPAで開発することによりネイティブアプリで利用される機能を実装することが可能になるため
代用が可能になります。

SPA開発のデメリット

色々メリットが多いSPA開発ですが、デメリットもあります。ここではSPA開発のデメリットについて説明します。

開発者の絶対数が少ない

SPAはそもそもの開発者の数が少ないため、人員の獲得が難しいです。

JavaScriptの経験に加えて色々なフレームワークのスキルが求められるため、エンジニアの確保が困難です。

そのような点からSPA開発のハードルは、まだ高い状況です。

実装コストがかかる

SPAでは、ブラウザに任せていた処理をプログラム実装しなければならないため
従来のWebサイトより開発コストが増えてしまいます。

またアプリケーションの開発要件ごとにプログラムを実装する必要があり、開発者の絶対数も少ないことからコスト増加に繋がります。

SPA開発する際は事前に技術者の調達や開発スケジュール等の確認が必要になります。

初期の読み込みに時間がかかる

初動の読み込みに時間がかかるのも難点に挙げられます。

メリットのWebサイトの表示速度向上は、最初ページにアクセスする際に全ての情報を読み込むため
時間がかかってしまいます。

ページ遷移は高速になりますが、JavaScriptのコード量は増加するため結果的に読み込む時間が増えてしまいます。

SPAを用いたWebサイトはSEOの面で不利

SPAの特徴としては1つのページしか読み込まないため、Googleの検索で順位付けの際にデメリットに起因すると言われています。

SPAではJavaScriptを活用するため、GoogleはWebページを正しく認識できずインデックスがされない可能性があります。

そのためSPAでSEO対策をする際はサーバー側でレンダリング（ダイナミックレンダリングやサーバーサイドレンダリング）をする必要があります。

SPAの導入に向くコンテンツ・向かないコンテンツ

SPAの特徴については理解が深まったと思います。
では実際に使用するにはどのようなコンテンツが適しているかと説明していきます。

SPAの導入に向くコンテンツ

説明したメリットやデメリットを元に説明していきます。

頻繁に情報を更新するようなチャットアプリ

SPAはその特性上、頻繁にコンテンツの更新や操作を行う、滞在時間が長いコンテンツに非常に相性が良いです。

ページ遷移も速く、チャットアプリとは非常に親和性が高いと言えます。SPAを活用したチャットアプリとしてはSlackが代表的なツールです。

Slackではメッセージが送られるたびには全体が読み込まれません。
メッセージの表示に必要な一部のみが読み込まれメッセージが表示されます。

滞在時間が長く、更新する必要、頻度が多いコンテンツには、SPAを導入を検討する価値があります。

離脱率を下げるのに最適

ページ遷移の速さはSPAの特徴でもあり離脱率を下げるのに最適であります。
Webサイト上で簡単にできるアンケートなどにもマッチしています。

多くの要素を選択する操作が必要なアプリ

SPAはページ遷移で、高速で読み込みを行うメリットがあるためページ遷移が多いコンテンツは導入を検討しても良いでしょう。

例として映画館のチケット予約サイトが挙げられます。
指定して予約（作品、時間やチケット種別、座席）など多くの要素を選択する操作がなされるため、SPAの高速なページ遷移と非常に相性が高いと言えます。

SPAの導入に向かないコンテンツ

前述のデメリットに挙げられた通り、SPAはSEOには弱いためSEOを対策するためのサイトには向いていません。

逆に言うとSEOを気にしない業務システム開発の場面では相性が良いと言えます。

SPA開発のまとめ

今回SPAについて、意味やメリットデメリットも説明しました。

上質なUXを提供できるSPA開発は最近の開発の流行になっていますが、開発のハードルやコスト面について考慮すると、まだまだ導入を悩まれている企業が多い傾向にあります。

Webアプリ開発会社の選定に迷った場合は、実績豊富な
株式会社Jitera(https://jitera.com/ja/insights/contact2）に一度ご相談ください。

貴社の要件に対する的確なアドバイスが提供されると期待できますのでお気軽にお問い合わせください。