Web開発の勉強をしていく中で、最近のトレンドではSPAという作成方法が採用されていることを知りました。
実際にNext.jsなどで作成してみたのですが、詳細をしっかりと理解していないと感じたので、再度SPAでのWebサイト作成をする前にまとめようと思いました。
Web開発でSPAは今後も伸びていくので、理解して開発できるよう今回で詳細を学びたいと思います。
【初心者用】SPAについて
1. そもそもSPAって何？
そもそもSPAとはSingle page Applicationの略称で、従来の各ページに遷移せずに単一のページでコンテンツの切り替えが特徴となっています。
上記の様にページ遷移をしないことにより、ページの表示が高速化することができるので、ユーザー側のストレスを軽減することができます。
具体的に説明すると、ユーザーが一つのサービスで得られる体験である※UXの向上に対して効果があります。
SPAを使用することによりブラウザの挙動に縛られることがないUIの実現が可能となります。
SPAで開発している事例として、GoogleMapやFaceBookなどがSPAを使用しています。
SPAについて以下詳細に説明すると、ページ遷移せず単一ページでコンテンツを表示するについては、ユーザーの操作に対して操作箇所のみを再度読み込みすることにより、余計な読み込みをしないので高速で高い操作性を実現することができます。
Webサイトではページ遷移やクリックなど挙動が多種多様にあり、それらのサービスで操作した一部のコンテンツを更新しても、ページ全体が再度読み込みがされずストレスフリーな操作をユーザーに提供できます。
1-1. UXとは
UXとはUser Interfaceの略称で体験という意味となります。
UXはユーザーが商品やサービスを通じて得られる体験のことを言います。
今回ですとWebサイトなどのサービスを楽しむことだけでなく、他サイトと比べて使いやすいなどの品質に関わることもUXに含まれます。
1-2. UIとは
UIとはUser Interfaceの略称となります。
UserはWebサイト・サービスやアプリケーション・ソフトウェアなどの利用者のことを言います。
Interfaceは境界面という意味で、２つの異なるシステムやプログラムを結びつける備品やプログラムなどを言います。
2. SPAのメリット
SPAを使用するメリットとしては大きく分けて以下の４つになります。
・UXの向上
・ネイティブアプリの代用
・動作性の向上
・Webで表現の幅が広がる
各メリットについて以下にまとめます。
2-1. UXの向上
SPAを使用したWebアプリやWebサイトは、操作箇所以外は読み込みがされません。
例えるとWebサイトの一部を操作した場合は、SPAで実装していないWebサイトなら一部を更新した際にページ全てが再度読み込みが行われます。
ですが、SPAで実装しているWebサイトであれば操作した箇所以外は更新されないため、更新速度がSPAで実装していないサイトよりも圧倒的に早くなります。
上記の様にユーザーがストレスフリーな動作をすることがSPAの利点です。
2-2. ネイティブアプリの代用
SPAで実装できる操作はネイティブアプリの代用として使用できます。
携帯端末だとプッシュ通知やホーム画面からのアプリ起動などの、スマホアプリ特有の機能も実装可能となっています。
ネイティブアプリをリリースするためには、ストアの審査を通さなければなりません。
そのため、非常に手間がかかるのでSPAで実装したWebアプリをネイティブアプリの代用として使用します。
2-3. 動作性の向上
Webページの運用において、動作性の向上は非常に重要になります。
表示速度が遅くなることにより、検索エンジンからの評価が落ちたり、ページの表示速度が１秒でも遅くなることで※コンバージョンが低下するというデータもあります。
そのため、WebサイトなどをSPAで実装することにより、動作速度を大幅に速くすることができます。
2-4. Webで表現の幅が広がる
従来のWebサイトなどだとローディング画面やページ遷移はブラウザにより制御されていました。
そのため、ブラウザに依存している部分に関しては独自性を持たせることができませんでした。
SPAはユーザーの操作箇所に対して読み込みを行います。
そのため、ブラウザの動作に縛られることがなく、幅広いUIの設計をすることができます。
ですので、SPAを実装することによりページ遷移やローディングなどの、ブラウザに依存していた部分に関しても独自の開発をすることができるようになりました。
最近だとReactやVueなどのJavaScriptのフレームワークが豊富にあるので、比較的に初めて学習する人でも表現が簡単になっています。
このようにWebサイトにおいて、上記のメリットは全てユーザーの体験に関するものとなっています。
今後のWeb開発はSPAでの開発が主になっていくのかなと思います。
3. SPAのデメリット
SPAのメリットだけでなく、デメリットについても以下にまとめます。
・セキュリティ上における問題がある
・大量にブラウザのリソースを使用する
・SEOのパフォーマンスが低い
以下デメリットの詳細についてまとめます。
3-1. セキュリティ上における問題
SPAはクロスサイトスクリプティング攻撃を受けやすく、※XSSを使用した場合はハッカーがスクリプトをウェブアプリに導入させることが容易になります。
また、SPAはユーザーに対して機密データを公開する可能性が高くなります。
3-2. 大量にブラウザのリソースを使用する
SPAはWebブラウザから多くのリソースを必要としています。
SPAで開発をするためには、ユーザーは最新機能をサポートする最新のブラウザを使用する必要があります。
また、SPAのほとんどのタスクに関してはブラウザがタスクの実行をしています。
3-3. SEOのパフォーマンスが低い
※SEOでの評価に関しては、Webサイトのページ数が多いほど順位付けの際にプラスに働きます。
SPAでは１つのページのみしか読み込まないため、検索での順位付けの際にマイナスになってしまいます。
※について以下にまとめます。
3-4. SEOについて
SEOとはSerch Engine Optimizationの略称であり、検索エンジンの最適化という意味になります。
検索ユーザーが求める有益なコンテンツを提供し、検索エンジン似た悪しくページ内容を評価されるように技術的にWebページを最適化することを指します。
具体的に言うと、検索した際に有益なサイトごとに表示することを言います。
3-5. XSSについて
XSSとはCross Site Scriptingの略称となっており、今回の様にXSSと表示されることがあります。
XSSとは、Webサイトの脆弱性を利用して、マークアップ言語であるHTMLに悪質なスクリプトを埋め込む攻撃となります。
具体的な例をいうと、ブログ、掲示板、サイト内検索などユーザーからの入力内容を元にWebページを生成するサイトなどは、クロスサイトスクリプティングの対象になりやすいです。
上記のサイト内などで入力フォームにユーザーが情報を入力・送信する際に、埋められていた悪質なHTMLスクリプトが実行され攻撃されます。
4. まとめ
SPAについて簡単な概要のみしか知らなかったため、改めてまとめることでメリットだけでなく、デメリットについても理解することができました。
SPAは便利ですが開発する際には、作成するものとマッチした開発方法で進めるようにこれからも知識を増やしていきたいと思います。