ABILABO アビラボ

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

2020.10.14 CATEGORY:フロントエンド

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

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

  • facebook
  • twitter
  • line
  • b.hatena
  • getpocket
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が気になった方は、お気軽にご相談ください。

  • facebook
  • twitter
  • line
  • b.hatena
  • getpocket
ホームぺージを使って売上を最大化しませんか?

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

  • 創業

    22

  • 制作実績累計

    5,000件以上