SPAについて





SPAとは

SinglePageApplicationの略で単一のページでコンテンツの切り替えを行うWebアプリケーションのこと
ユーザーのアクションに対して必要なデータだけサーバーに要求して
ページ全体ではなく、一部分だけを差し替えて、コンテンツを表示する

初回のみおページ全体をロードして、次からはサーバーからJSONデータを受け取ってリロードする
SPAにおける主要な技術はAjaxでjQueryの登場でより広く使われるようになった
jQueryでも可能だが、DOM操作などに限界があり、
代わりにAngularJSやReactやVue.jsといったSPA向けのフレームワークを使用する
例を挙げると、FacebookやGoogleMapやSlackなど

Ajaxとは

Ajax(エイジャックス)はAsynchronous JavaScript XMLの略で、
JavaScriptとXMLを使って非同期にサーバーと通信を行うこと
ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法
node.jsの登場でサーバ側におけるデータ形式変換の必要なしに、Ajaxを実現できる環境が整い始めている(wikipedeia引用)[https://ja.wikipedia.org/wiki/Ajax]

JSONとは

JavaScriptObjectNotationの略で軽量のデータ交換フォーマット
人間にとって読み書きが容易で、マシンにとっても簡単にパースや生成を行なえる形式

PWAとは

ProgressiveWebAppsの略で、モバイル向けWebサイトをGooglePlayストアなどでみかけるアプリ(ネイティブアプリ)のように使える仕組みのこと
レスポンスが向上してユーザーインストールさせることがなく、オフラインでのコンテンツ利用が可能
プッシュ通知の受信やストアの審査なくアップデートが可能

WEBページをPWAにするには

特定のフレームワークなどは必要なく、Googleが策定した(Progressive Web App Checklist)[https://developers.google.com/web/progressive-web-apps/checklist]に沿って開発すればいい
Googleが推奨していて、Googleが開発キットも用意している

AMPとは

AMP(アンプ)とはAccelerated Mobile Pagesの略で、
GoogleとTwitterが共同で立ち上げたオープンソースプロジェクト
モバイル端末でホームページを高速で表示させるための仕組み
通常はWebページにアクセスする場合、クリックに応じてサーバからHTMLなどを読み込むが、AMPに対応しているページは、あらかじめGoogleなどのサーバーにキャッシュすることで、読み込み時間を削減している
(導入ガイド)[https://webmaster-ja.googleblog.com/2016/01/accelerated-mobile-pages.html]