Single Page Application (SPA)とは？
reactでwebサイトを作成しようと思っていたところ、友人より、最近はSPAで作ることが多いと伺いました。
...SPAってなんだ？？
週刊SPA!のことじゃないよな？？
聞いてみるとどうやら
”Single Page Application”のことらしい。
どういうものかわからなかったので調べてみることにしました。
■SPAとは
Webページにおいて1ページ内を各オブジェクトで構成することにより、ぺージ全体を何度も読み込む必要なく、対象コンテンツのみ遷移させる
技術のようです。
【従来】
サーバサイドにページを要求し、受け取ったページに遷移させる。
【SPA】
サーバサイドに要求するのはデータ(オブジェクト)になる。
フロントサイドでは受け取ったデータをもとに必要なコンテンツのみ切り替えるため、ページの遷移は発生しない。
■SPAのメリット
(1)ユーザのページ遷移のストレスがない
ページ遷移が発生せず、一度読み込んだページ内でコンテンツのみ切り替わるためストレスを感じない
(2)アプリのような体験を提供
例えば、メッセンジャーのようにユーザー一覧は表示したままチャットコンテンツを切り替えたり、Spotifyでページを変えても音楽を流しっぱなしにしておいたり
(3)開発者のHTMLコーディングが減る
必要なコンテンツ部分のみデータ要求・処理を行い、ページ全体の描写は不要になる
(4)UXが体験できる
ページ遷移がないため、(2)で書いた通り、音楽を流しながら、チャットのコンテンツを見ながら切り替えることができる
■SPAのデメリット
(1)初期ページ読み込みに時間がかかる
JavaScriptのコード量が増加するため、初期ローディングに時間がかかる
(2)実装コストがかかる
今までブラウザに任せていた処理を実装する必要があるため、開発コストがかさむ。
また、最新知識を探りながらの開発になるのも要因。
■最後に
友人が言っていたSPAが理解できました。
今度は、実際に作ってみたいと思います！！
上手く作れるかな？
こういうのって、理論はわかるけど実際に手を動かすと難しい印象が強いので不安です。。。
前に会社にて、
MVVMでGUIアプリ作ってね。
と先輩に言われて作ったものが、うまく構造上手く作りこめてなくて指摘いくつかもらったこともあり、、、
