search
LoginSignup
86

More than 3 years have passed since last update.

posted at

updated at

SPAってページ遷移するの?

概要

  • SPAにおけるルーティングについて簡単に紹介します
  • SPAを作ったことがない人が対象読者です
  • 知ってる人からすると、そんな当たり前なことを・・と思うかもしれません

SPAとは?

  • Single Page Applicationの略です
  • 対義語はMultiple Page Applicationです
  • つまり単一ページで構成されるのがSPAで、複数ページで構成されるのがMPAです
  • SPAは最初に画面(HTML)を取得した後は、JavaScriptによって画面の書き換えを行うことで単一ページでありながらアプリケーションを構築することができます
  • これは言い換えるとSPAはページ遷移しないということ?本当にそうでしょうか?

SPAはページ遷移しない?

SPA

spa.gif

MPA

mpa.gif

  • どちらのページもリンクをクリックするとURLが切り替わってページ遷移しています
    • どういうことでしょう???

SPAにおけるページ遷移

URLの書き換え

  • SPAはJavaScriptで画面を操作することになりますが、実はアドレスバーのURLはJavaScriptで操作できるんです
    • ブラウザにはHistoryAPIというJavaScriptのAPIが実装されており、それらを使うことでブラウザの履歴を操作できます
    • アドレスバーのURLはhistory.pushState()で書き換えられます
  • 試しに開発者ツールで実行してみた例

pushstate.gif

  • 実行するとURLが書き換わるのが分かると思います
    • ブラウザのHistoryを操作しているためブラウザバックにも対応します
    • この関数はあくまでURLを書き換えるだけなので画面に表示されている内容に変化はありません

画面の書き換え

  • SPAにおける画面の書き換えは、「ボタンをクリックしたこと」や「通信が完了したこと」などのイベントを検知して処理を実行します
  • 「URLが書き換わったこと」もイベントの1つに過ぎず、それを検知して画面全体を書き換えているというわけです
  • 実際の開発ではReact RouterVue Routerといったライブラリを用いることが多いです
    • どのURLに変更されたらどのコンポーネントを表示するかマッピングしておくことで、MPAの画面遷移のように扱うことができます

まとめ

  • SPAってページ遷移するの?
    • ユーザ視点で見た場合、MPAと同じようにページ遷移することができます
  • SPAってどうやってページ遷移してるの?
    • ブラウザのHistoryをJavaScriptで操作することでURLを書き換えることができます
    • URLの更新を検知して画面を書き換えることでページ遷移を表現しています

余談

  • 途中紹介したSPAとMPAのサンプルは全く同じ挙動をするわけではありません
  • SPAは/homeなどでリロードすると404(Not Found)となってしまいます

404.gif

  • 仕組みを考えるとあたりまえで、サーバ上には初回アクセス時に取得する/index.htmlしかなく/home.htmlなどは存在しないためです
  • 404を出さないためには、SPAを配信するホスティング側の設定で404が出た場合に/index.htmlにforwardしてあげればOKです
  • 今回サンプルで使っているNetlifyでは_redirectsというファイルを作成し以下のように設定すればOKです
_redirects
/*    /index.html   200
  • この辺はホスティングサービスごとに異なるのでそれぞれ調べてみてください
  • URLダイレクトアクセスにも対応したサンプル
  • ここまでできるとユーザ視点ではSPAもMPAもほとんど変わらないてすね!

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
What you can do with signing up
86