SPA(Single Page Application)とは
- サーバとはデータのみやり取りし、HTMLの書き換えはブラウザ上でやる手法
- AJAXに近いが、ブラウザのURLや履歴を制御することでよりリッチな体験を提供する
- HTMLが１枚のみ、それも超シンプルなものになるので、Single Pageと呼ばれる
歴史
- 世界の度肝を抜いたGoogleマップとGmail
- 想像してみてください：これらのアプリが操作の度に画面全体を書き換えてたとしたら、使い勝手はどうなりますか？
（昔の地図サイトやWebメールはそういう作りだった！）
翻って、現代
- もはやSPAは当たり前！
- Webアプリの情報量は増える一方。SPAでないとユーザ体験は向上しない
（例えば、いいね！を押したら画面全体がリフレッシュされるYouTube・・・使い物になると思いますか？）
SPAの利点
- 通信量の削減
データ量が減る（HTMLが混じらないので）
キャッシュを効かせやすくなる - ユーザ体験を向上させやすい：ページ全体が書き換わる、という体験からの脱却
SPAを作ってみるには
- フロントエンドフレームワーク：React/AngularJS/Vue/Elmなど
- バンドラ：Webpack/Parcelなど
- 静的ホスティングサービス：Azure SWA/AWS Amplify/Google Firebaseなど
SPAを作っていて感じること
- 一番の利点は「分割統治」と感じる
関心のあることのみ実装すればOK（SSRだとこれが難しい）
SPAの弱点
- JS／CSSファイルの肥大化
キャッシュ／SSR
SPAを始めてみよう
- React＋Vite or Parcelで始めてみよう
サーバ側を考えなければ、これで充分に遊べる - サーバを自前で立てるのは面倒なので、Firebase(Google製)やAmpliry(AWS製)の利用がおすすめ
Firebaseは独自仕様のストレージ
AWSはGraphQL
※SWAはDBのサポートが少し弱めなので「ちょっと試してみる」にはおすすめしません