Help us understand the problem. What is going on with this article?

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もほとんど変わらないてすね!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした