3. SPA （ Single Page Application ）とは
単一の Web ページで構成される Web アプリケーションや Web サイト
デスクトップアプリケーションのような UX を実現する
画面の切り替えは JavaScript による DOM 操作で行う
クライアントサイドで URL に応じた画面を表示（ルーティング）する
15. History API によるルーティング
History API を利用した方法
location.pathname （ location.search, location.hash ）
history.state
history.pushState （ history.replaceState ）
popstate イベント
http://localhost:8080/path/to/hoge
16. History API （ JavaScript でのルートの扱い）
サーバにリクエストが行かないように次のようにする
遷移先ルートの設定
history.pushState(state, title, '/hoge');
現在のルートの取得
console.log(location.pathname); // -> '/hoge'
17. History API （ a タグでの扱い）
サーバにリクエストが行かないようにクリックのデフォルト挙動を止める
<a href="/hoge">Hoge</a>
function handleClick(e) {
e.preventDefault();
const { href } = e.target;
const state = { /* なんらかの状態 */ };
history.pushState(state, null, href);
}
Array.from(document.querySelectorAll('a')).forEach(el => {
el.addEventListener('click', handleClick, false);
});
