2020.10.14 CATEGORY:フロントエンド
こんにちは。フロントエンド研究室の小川です。
今回は個人的に気になる技術、
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されると公式に発表がありました)
などのメリット・デメリットが考えられます。
初期の訪問時にどうしても、読み込みの時間がかかってしまう点を考えると、
topページのみなど、ページ数が少ないページ(ランディングページなど)は、SPAにすることで
かえってUXが悪くなってしまう危険性があります。
反対に、情報を吟味するためにページ間を頻繁に行き来したり、滞在時間の長いサイトや、
毎日コンテンツを閲覧するために繰り返し訪問するサイトなどは、SPAにすることで
UXが向上する可能性が高いため比較的向いています。
一言でSPAと言っても、近年新しい技術がたくさんでてきているようです。
簡単に2つご紹介いたします
基本的にSPAと同じ特徴をもち、HTMLの生成をサーバ側で行うため、
SPAのデメリットである初期の読み込み時間の短縮・SEO対策が通常のサイト同様に可能となった技術です。
デメリットとしては、
・フロント側だけではなく、サーバー側の対応が必要なため工数が増大する。
・アクセス毎にページを生成するため、サーバー側処理の負荷増大
近年知られるようになってきた、JAMStackと言われるWebアプリケーションアーキテクチャーに採用される技術です。
上記SPA・SSRの良い点を受け継ぎつつ、複雑なサーバー側の処理を安価なSaaSに任せることで、
サーバーの開発・保守コストを下げて制作が可能な技術です。
デメリットとしては、
・CMSの更新時にビルド処理が走るため、更新頻度の高いサイトでは、ビルドに時間を取られる。
・利用するSaaSによって料金が変動するため、慎重に検討する必要がある。
・日本ではまだ採用事例が少ないので、トラブルが起きた時、試行錯誤が必要。
最後にSPAサイトで利用される代表的なフレームワークを紹介いたします。
世界で一番利用されている(2020/10現在)、SPAのフレームワークです。
日本語のドキュメントや、利用者からの知見なども数多くあるので、利用しやすいフレームです。
他にNextやGatsbyなどReactから派生したフレームワークも存在してます。
日本では、人気のあるフレームワークです。
日本語のドキュメントも豊富で、個人的に使いやすさでは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