SPAとは何か、直感的な理解ができそうな感じに調べてみた

どうも、かずやです。

先日、会社の同期とご飯を食べていた時に「SPAとは何か」という話になりました。

これに、イマイチ明確な答えを返せなかったのがなんだか悔しかったので、今回は「SPAとは何か」簡単に回答できるようまとめてみます。

SPA = シングルページアプリケーション

SPAはSingle Page Application = シングルページアプリケーションの略です。

直訳すれば「単一ページのアプリケーション」となります。
しかし、イマイチピンと来ません。

Wikipediaにはこうあります。

単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイト

これ、個人的には結構わかりやすいなーと思いましたが、皆さんわかりますかね?
詳細説明していきましょう。

通常のWebアプリケーション

ここではSPAについてわかりやすくするために、逆に従来からのWebアプリケーションと比べてみようと思います。
普段見ているWebサイトは、いわゆるこちらに当たります。

基本的に通常のWebアプリケーションは、リンクをクリックしたり、ボタンを押したりと、何らかのアクションを行うと必ずリロード(再読み込み)が入ります。

画面が一度白くなって、再表示されるアレですね。
これにより、非常に「あーWebページだなー」という印象を与えるわけです。

これがなぜ起きるかといえば、クリックをした瞬間にブラウザが新しい画面全体を取得しに行ってるからなんですね。

そして画面全体を再表示する。だから全部一回白くなるし、時間がかかることも多い。

SPA

一方SPAでは、リンクをクリックしたりボタンを押したりした時に「必要なデータだけを取得しにいき、必要なパーツを画面に表示」します。

つまり、画面全体をいちいち更新するのではなく、必要な箇所だけを更新するわけですね。
例えばヘッダーとかって、ほとんど変化ない訳で、こういったものはボタンを押しても更新が起こらないようにする訳です。

これにより「画面が真っ白になる瞬間」がなくなる。
= デスクトップアプリケーションのようなユーザ体験を提供できる。
という訳です。

まとめ

通常のWebアプリケーションが全画面を都度更新するのに対し、必要な画面の一部のみを取得・更新するようにできているWebアプリケーションのことをSPAと呼びます。

まあ細かい技術の話をするなら、SSR(サーバーサイドレンダリング)かどうか、みたいな話がある訳です。
以上はあくまでも直感的な理解ということで、ご理解ください。

雑な記事になりますが、今日は以上です。

ではではっ!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする