LoginSignup
0
0

More than 1 year has passed since last update.

SPAをわかりやすく説明する

Posted at

SPA・・・Single Page Applicationの略

特徴
ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えをおこなうアプリケーションのこと。

SPAサイトをまとめたものはこちら
https://bm.s5-style.com/category/technic/spa

従来のWebアプリは、
ユーザのアクション→それに対しサーバーに通信(リクエスト)→ユーザーでHTMLを作成し、ブラウザに返す(レスポンス)→HTMLに反映
この方式では変更のない要素(フッター、ヘッダーなど)までも読み込む必要があり、時間(コスト)がかかる。
ex)ページ遷移の時に一瞬画面が白くなる特徴。

それに対して、SPAは、
ユーザーのアクション→それに対して必要なデータのみをサーバーに要求→返ってきたデータをJSで処理→処理をHTMLに反映
このように、ブラウザでできる処理はJSで終わらせることで、サーバーとの通信量を抑え、動作の向上が図れる。また、データの取得は非同期的に実行でき、ページ遷移時に画面がチラつくことなく、快適に閲覧できる。

SPAを使うメリット
・ユーザー体験の向上
ページの表示速度がとても重要で、ECサイトでは売り上げに直結する
・コンポーネント分割が容易になることでの開発効率のアップ
各ページごとにHTMLファイルを用意するケースと違い、SPAはHTMLファイルは1つのみでJSによるDOMの書き換えで画面遷移をしている。すなわち、各要素をコンポーネントで定義している。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0