jQueryでシンプルなSPAを実装してみた

SPAを本格的に実装するのであればReactやVueを実装する方が良いのだろうけど、簡単なSPAであればjQueryでも実装は可能です。
完成イメージは下記のようになり、添付画像の黄色い箇所だけ切り替わります。

HTML

spaクラスがついているdivタグをjQueryで上書きします。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>シンプルSPA</title>
<link rel="stylesheet" type="text/css" href="assets/reset.css">
<link rel="stylesheet" type="text/css" href="assets/spa.css">
</head>
<body>
<div class="wrapper">
  <header class="header">
    <nav>
      <a href="#page1">page1</a> | 
      <a href="#page2">page2</a> | 
      <a href="#page3">page3</a>
    </nav>
  </header>
  <main id="spa">
    <!-- ここが切り替わる -->
    <div class="spa"></div>
  </main>
  <footer class="footer">
    footer
  </footer>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="assets/spa.js"></script>
</body>
</html>

ハッシュに対応したファイル名のHTMLを用意しておきます。
例：ハッシュが#page1の場合、page1.htmlを読み込むようにします。
page2.html、page3.htmlも同様です。

page1.html

<div class="page1 page">page1</div>

CSS

説明は割愛。

CSS

@charset "utf-8";

.wrapper {
    width: 600px;
    margin: auto;
}
.page {
    text-align: center;
    line-height: 300px;
    font-size: 24px;
    font-weight: bold;
}
.page1 {
    background: #f0e68c;
}
.page2 {
    background: #4169e1;
}
.page3 {
    background: #ffb6c1;
}
.header,
.footer {
    text-align: center;
    background: #ccc;
    padding: 20px;
}

JavaScript

hashchangeイベントを使用して、URLのハッシュが切り替わったら読み込むHTMLファイルを切り替えさせています。
イレギュラーなハッシュを叩かれた場合や初回アクセス時はinit()の方でpage1.htmlを読み込ませます。

参考:MDN WindowEventHandlers.onhashchange

JavaScript

;(function(){
'use strict';

//URLの一覧を配列で用意
const url_list = [
  'page1',
  'page2',
  'page3',
];

function init(){
  $.get('/page/page1.html').done((data) => {
      $('.spa').html(data);
  }).fail(() => {
      error();
  });
}

function hashchange(){
  const page = location.hash.slice(1);
  const in_url = $.inArray(page, url_list);
  if(in_url !== -1){
    $.get(`/page/${page}.html`).done((data) => {
      $('.spa').html(data);
    }).fail(() => {
      error();
    });
  }
}

function error(){
  $('.spa').html('読み込みエラー');
}

$(window).on("hashchange", () => {
  hashchange();
});

$(function(){
  init();
});

})();

まとめ

URLの階層が深くなった場合や動的URLに対応していない最低限の実装ですがSPAのようなものが実装できました。
本格的に実装するのであれば大人しくVueなどのフレームワークを使用した方がバグも少なく実装できるかと思いますが、既存サイトの一部にちょっと実装する場合や個人サイト程度ならこのくらいでも十分かと思います。

jQueryでシンプルなSPAのサンプルを作ってみた

jQueryでシンプルなSPAを実装してみた

HTML

CSS

JavaScript

まとめ