悩めるWEB担当者様のための最新ノウハウをお届け

SPA(Single Page Application)ってなに?

spa-3

Webサイトの動作が向上したり、高度なWeb表現ができたり、最近何かと注目されているSPA。
ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えを行うことで、UXが向上すると言われていますが、いったいどのようなものなのでしょうか?

SPAとは何か

皆さんは、SPAをご存知でしょうか?
ウェブマーケティングにおけるSPAとは、Single Page Application(シングルページアプリケーション)のことです。
SPAとは単一のWebページでアプリケーションを構成する設計構造の名称です。
これから、SPAのメリット及びデメリット、そしてSPAを採用するのに適しているケース、さらにSEOの観点から、SPAで留意すべき点を解説していきます。

SPAのメリット

SPAのメリットは以下の3点です。

  1. 動作性の向上
  2. より高度なWeb表現
  3. ネイティブアプリの代用

単一のWebページでコンテンツ切り替えを行うことで、ページ遷移の必要がなく、ブラウザの挙動に縛られないWeb表現を可能にするのです。
では、順にご説明していきます。

動作の向上が期待できる

まずは動作が向上するという点に関してご説明していきます。
そもそも、従来のWebアプリケーションの仕組みは、以下のようになっていました。

  1. ユーザーが何かしらのアクション(クリックなど)を行う
  2. それを受けてサーバに通信(リクエスト)
  3. サーバ側でHTMLを生成し、ブラウザに返す(レスポンス)
  4. HTMLに反映

この仕組みではページを更新する度に変更していない部分までサーバ側で生成し直していました。
例えば、ページのヘッダーやフッターはユーザーが変更するように作られていないことがほとんどでしょう。
そういった変更のない部分までサーバに送信しているので、処理に時間がかかってしまっていたのです。
これに対して、SPAを導入した際のWebアプリケーションの仕組みは、以下のように変更されました。

  1. ユーザーが何かしらのアクション(クリックなど)を行う
  2. そのアクションに必要な部分のデータだけをサーバに要求
  3. 返ってきたデータをJavaScriptで処理
  4. 処理HTMLに反映

つまり、ブラウザ側でできる処理はJavaScriptで終わらせることで、サーバとの通信量を最低限に抑えることが可能です。
これによって、Webアプリケーションの動作の向上が期待できます。

より高度なWeb表現ができる

前述の通り、SPAはユーザーのアクションに対して必要な部分のみを更新します。
これにより、ブラウザの挙動に縛られることがなく、幅の広いUIを実装することができます。
また、JavaScriptにはVue.jsなどのフレームワークがあり、様々な表現を容易に実現することができます。
例えば、HTML/CSS/JavaScriptのみでToDoアプリのようなものを開発することも可能です。
その際、グラフィカルな表現も簡単に実装できます。
下記のリンクには、制作の一例が集まっていますので、
どういった表現ができるか興味のある方は是非チェックしてみてください。
https://onsen.io

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

SPAでは幅広いUIを実装できるので、ネイティブアプリの代用として使うことができます。
ネイティブアプリとは、端末内にダウンロードして使うタイプのアプリケーションです。
そもそもアプリケーションには、Webブラウザ上で動くWebアプリと端末内にダウンロードして使うネイティブアプリがあります。
スマホアプリはネイティブアプリの代表的な例です。
例えば、何かしらのWebアプリを開発し、そのiOSアプリ、Androidアプリをリリースする流れでは非常に手間がかかってしまいます。
仮にWebアプリのサーバサイドをNode.jsで書いたとしても、HTML/CSS、JavaScript、Swift、Javaの記述が必要です。
しかし、SPAを導入することで、オフラインでのページ閲覧、プッシュ通知、ホーム画面からの起動など、ネイティブアプリで主に使われるような機能を実装することができます。

SPAのデメリット

SPAのデメリットは、以下の3点です。

  1. 開発者が少ない
  2. 実装コストがかかる
  3. 初期ローディングに時間がかかる

では、順にご説明していきます。

開発者が少ない

SPA開発者・経験者の絶対数が少ないので、リソースの確保が難しいと考えられます。
Webサイトの制作スキルに加えて、JavaScript及びそのフレームワークのスキルが必要です。
また、後々までメンテナンスをすることを想定し、美しいコードを書くことが求められます。
そういったことができる開発者の絶対数が少ないので、そういった点でリソースの確保は通常のWebサイト開発に比べて難しいでしょう。

実装コストがかかる

SPAでは、今までブラウザに処理を任せていた部分を実装する必要があるため、開発コストがかさんでしまいます。
ライブラリで対応できる機能も場合もありますが、アプリの開発要件に合わせて独自に実装する必要がある場合も多いでしょう。
さらに、改修・運用にも通常のWebアプリに比べ、ブラウザに処理を任せていた部分の処理、ライブラリで対応できない独自の実装を考慮しなければならず、工数がかかってしまいます。

初期ローディングに時間がかかる

SPAでは、サーバとのやり取りの量は減るので、ページ遷移は高速になります。
しかし、JavaScriptのコード量は増加するので初期ローディングに時間がかかってしまいます。

SPAを採用すべき場面

ここまでで、SPAについてある程度のことは理解できたと思います。
では、実際にSPAを使う際にどのようなサービスが適しているのでしょうか?

滞在時間の長いサービスに適している

SPAはページ遷移を高速化するという特徴から、滞在時間の長いサービスに適しています。
例えば、デジタルマーケティングで使用するツールや、口コミや評判などを分析するサイトでは、ユーザーが繰り返しアクションを行い、その度にページ遷移することもしばしばです。
こういったサービスではSPAに適していると言えるでしょう。
ページ遷移が早くなることでユーザーのストレスが減少し、サイトに対する満足度の向上も期待できるでしょう。

SPAに適していないケースは?

滞在時間の長くないサービス、言いかえると直帰率の高いサービスは、SPAに適していないと考えられます。
主な例としては、ブログなどが挙げられます。
直帰率の高いサービスでは、アクセス時にかかる時間が増加してしまうSPAを導入すると、ユーザーは不快感を感じてしまい、直帰率が上昇する危険性があります。
SPAの導入を検討する際は、サイトにおけるユーザーの行動を分析することが重要です。

SPAのSEO

SPAでは検索エンジンにクロールされず、SEOの観点で問題が生じるという意見もあります。
しかし、現在ほぼ全てのウェブサイトにJavaScriptが実装されているため、検索エンジンもJavaScriptの読み込みに対応しています。
従来の検索エンジンではJavaScriptが読み込まれず、正しくHTMLが描画されないため、
検索上位に来ないというケースがありました。
しかし、最近の検索エンジンはJavaScriptの読み込みに対応しているため、
JavaScriptが読み込まれずSEOで損をするということは、あまり考えられないでしょう。

まとめ

今回はSPAについてご紹介しました。
滞在時間の長いWebサービスを開発する際はSPAを検討しても良いかもしれません。
前述の通り、SPAではJavaScriptのフレームワークやライブラリの知識が必要ですが、
Vue.jsは日本語でもページが見られるため、学習のハードルは低いでしょう。

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。


広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

関連記事