一覧に戻る
Lv.2

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

Single Page Application

画面全体を読み込まず、必要な部分だけを書き換えて動くWebアプリの仕組み。

簡単に説明すると

SPAは、最初に1回だけページを読み込んだ後は、必要なデータだけを受け取って画面の一部を書き換える仕組みのことだよ。 例えば、Googleマップのように画面を動かしてもページが切り替わらず、動作の中断が少ない地図アプリなどがこれにあたるんだ。 SNSのタイムラインで、新しい投稿がパッと表示されるのもこの技術が使われていることが多いよ。

名前のヒミツ

SPA(えすぴーえー)は、英語のSingle(1つの)Page(ページ)Application(アプリ)を略したものだよ。 名前の通り、ブラウザで1つのWebページだけを読み込み、中身をサッと入れ替えることで動くんだ。 複数のページを切り替えるのではなく、1枚の紙の上で情報を書き換えていくようなイメージだね。

くわしく見てみよう!

SPA(シングルページアプリケーション)とは、ブラウザでのページ移動(遷移)を伴わずに、1枚のWebページの中でコンテンツを動的に切り替えて表示する仕組みなんだ。
従来のWebサイト(MPA)は、リンクをクリックするたびにサーバーから画面全体を読み込み直していたけれど、SPAはブラウザでページを読み込んだ後、JavaScriptで必要な部分のデータだけを更新するんだよ。
これにより、スマホアプリを操作しているような、スムーズなユーザー体験が得られるのが大きなメリットなんだ。

ざっくり言うと、ページ全体を再読み込みせずに、中身をJavaScriptで動的に書き換えることで、画面を切り替える際の待ち時間を感じさせない工夫がされているんだ。
ユーザーがボタンを押したりスクロールしたりした時に、背景で新しい情報を取ってきて、今の画面にパズルをはめるように情報を埋め込んでいくよ。
Webブラウザ上で動くカレンダー、地図、メール、SNSなどのツールで、ストレスのない操作を実現するために広く使われているよ。

カテゴリWebアプリ