ABILABO アビラボ

気になる技術、
SPA（シングルページアプリケーション）について調べてみました。

2020.10.14 CATEGORY：フロントエンド

こんにちは。フロントエンド研究室の小川です。
今回は個人的に気になる技術、
SPA（シングルページアプリケーション）について調べてみました。
※以下SPAと表記します

初めて聞いたという皆さまや、
そろそろ御社のサイトもSPAに対応したいなとお考えの方
SPAの各情報を一緒に見ていきましょう。

目次

SPAとはどういう技術か？

​SPAとは、

最初に表示されたHTMLページ内で全てのユーザーインターフェースが完結され、
ページ遷移を伴う際には、ページ内で遷移するもURLは逐次変化し、ブラウザの履歴から前のページへ戻ることが可能。
その際にやり取りする様々なデータは、サーバーよりAPIとして断片的に提供され、通信量を最低限に抑えることが可能な技術。

他にもいろいろな解釈がありましたが、概ね上記に当てはまるかと思います。
ここ数年の最新Webサイトをみてみると、トレンドになりつつある技術です。

では、全てのWebサイトがSPAに対応すればいいのでしょうか？
SPAのメリット・デメリットを調べました。

メリット

1. ページ遷移時に変更部分だけのデータを読み込むため(ページ遷移処理が発生しない)、読み込みが最小限に抑えられ表示速度が高速になり、UXの向上に繋がる。
2. 表現の幅が増える（全てjavascriptによって制御できるため、アニメーションが作りやすい）。
3. PWA（プログレッシブウェブアプリ）への対応がスムーズに行える。
※PWA（プログレッシブウェブアプリ）については、別途記事にする予定です。

デメリット

1. ページの初期読み込み時に、読み込み時間がかかる。
2. 実装するのに工数がかかる。
3. googlebotへのindexには問題はなさそうだが、SEO対策をしっかりしたい場合、mataやogpのへの対応に不安がある。
（Google I/O 2019では、javascriptもindexされると公式に発表がありました）

などのメリット・デメリットが考えられます。

SPAはどのようなサイトに向いてるか

初期の訪問時にどうしても、読み込みの時間がかかってしまう点を考えると、
topページのみなど、ページ数が少ないページ（ランディングページなど）は、SPAにすることで
かえってUXが悪くなってしまう危険性があります。

反対に、情報を吟味するためにページ間を頻繁に行き来したり、滞在時間の長いサイトや、
毎日コンテンツを閲覧するために繰り返し訪問するサイトなどは、SPAにすることで
UXが向上する可能性が高いため比較的向いています。

SPAにもいろいろな種類がある？

一言でSPAと言っても、近年新しい技術がたくさんでてきているようです。
簡単に2つご紹介いたします

SSR（サーバーサイドレンダリング）

基本的にSPAと同じ特徴をもち、HTMLの生成をサーバ側で行うため、
SPAのデメリットである初期の読み込み時間の短縮・SEO対策が通常のサイト同様に可能となった技術です。

​デメリットとしては、

・フロント側だけではなく、サーバー側の対応が必要なため工数が増大する。
・アクセス毎にページを生成するため、サーバー側処理の負荷増大

SSG（スタティックサイトジェネレータ）

近年知られるようになってきた、JAMStackと言われるWebアプリケーションアーキテクチャーに採用される技術です。
上記SPA・SSRの良い点を受け継ぎつつ、複雑なサーバー側の処理を安価なSaaSに任せることで、
サーバーの開発・保守コストを下げて制作が可能な技術です。

デメリットとしては、

・CMSの更新時にビルド処理が走るため、更新頻度の高いサイトでは、ビルドに時間を取られる。
・利用するSaaSによって料金が変動するため、慎重に検討する必要がある。
・日本ではまだ採用事例が少ないので、トラブルが起きた時、試行錯誤が必要。

お問い合わせはこちら
代表的なフレームワーク

最後にSPAサイトで利用される代表的なフレームワークを紹介いたします。

React

世界で一番利用されている（2020/10現在）、SPAのフレームワークです。
日本語のドキュメントや、利用者からの知見なども数多くあるので、利用しやすいフレームです。
他にNextやGatsbyなどReactから派生したフレームワークも存在してます。

Vue

日本では、人気のあるフレームワークです。
日本語のドキュメントも豊富で、個人的に使いやすさではReactより上のような気がしています。
他にNustjsなどがVueから派生したフレームワークです。

終わりに

まだまだ新しい技術ですので、引き続き今後も注目していきます。
アビリブでは、新しい技術を色々と挑戦していきたいと思いますので、
本記事を読んでSPAが気になった方は、お気軽にご相談ください。

参考記事など

SPA(Single Page Application)ってなに？
イマドキのWebアプリケーション「SPA（シングルページアプリケーション）」とは？
State of SEO for SPA 2019
Google I/O 2019
JavaScript SEO の基本を理解する
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017
「静的サイトジェネレーター」について網羅的に説明します
React
Vue

お問い合わせはこちら
  • facebook
  • twitter
  • line
  • b.hatena
  • getpocket

あわせて読みたい関連記事

ホームぺージを使って売上を最大化しませんか？

弊社はこれまでに宿泊観光業をメインに、WEBサイトを作成してお客様の問題解決を行ってまいりました。そして、様々なサービスを展開してきました。
どのようなお悩みでも構いません。ぜひ一度お問い合わせください。

  • 創業

    24年

  • 制作実績累計

    6,000件以上

お問い合わせはこちら

宿泊業界向け
無料WEBセミナー

集客セミナー写真

人気記事

カテゴリ

■シェアする

  • facebook
  • twitter
  • line
  • line

■フォロー・購読する

  • facebook
  • twitter
  • RSS

■ブックマークをする

  • b.hatena
  • getpocket

お問い合わせはこちらから