URLと特定のコンテンツだけを切り替えるプラグインを使ってみた
この度は、株式会社ウェブネーションをご訪問頂き、誠にありがとうございます。
今回は、ページの切り替えをせずに、URLとページ内の特定のコンテンツだけを切り替えるプラグインを使ってWebサイトを作ってみましたので、実際に動かした時の動画とそのコードと共に紹介いたします。
最後までお読みいただけますと幸いです。
そんなことできるの？
結論からいえば、できます（できるので作成できたんですけどね…）。
プラグインと少量のコードを用意すれば簡単に出来上がります。
なお、冒頭で記述した、URLとページ内の特定のコンテンツだけを読み込む動作を、「非同期遷移」もしくは「pjax(pushState + ajax)」と言います。
※pushStateとは、ブラウザの履歴を非同期通信で追加する動作のことです。履歴が追加されるため、これでURLとコンテンツの切り替えが動作したことになります。（History: pushState() method：https://developer.mozilla.org/en-US/docs/Web/API/History/pushState、2023年10月10日時点）
「非同期遷移」でできること
「非同期遷移」を行わせることで、ページ全体を読み込む必要がなくなるので、ページ全体の切り替えと比べて、読み込み時間の大幅な削減が期待できます。
実際、YouTubeや旧Twitter/現Xなど昨今のSNSプラットフォームも、PCブラウザ等で触っているとご存じかと思いますが、ページの切り替えが行われずにURLとコンテンツだけが切り替わられていることが、確認できると思われます。
その見極めポイントは、ブラウザ画面上部にある「タブ」に、読み込み中を示すグルグルのアイコンがないかどうかです。
URLやコンテンツが切り替わっている間に、読み込み中を示すアイコンが「タブ」に全く表示されていないのであれば、それは「非同期遷移」が動作されたことを意味し、ページの切り替えが動作しなかったことになります。
今回は、この「非同期遷移」とjqueryのフェードイン/フェードアウト処理を使って、コンテンツが切り替わるWebサイトを、jquery-pjax、Barba.jsの2種のプラグインで、それぞれ使い分けて作ってみましたので、実際に動かした時の動画とそのコードと共に紹介いたします。
jquery-pjax
リンク（GitHub）：https://github.com/defunkt/jquery-pjax/
インストール（jsDelivr）：https://www.jsdelivr.com/package/npm/jquery-pjax
※2023年10月10日時点
実際に動かした時の動画
HTML
<!-- // Page01.html -->
<head>
<title>Page01</title>
</head>
<body>
<div class="header">
<h1>Hello World</h1>
</div>
<div id="content">
<div class="link-element">
<a class="link-text" href="page02.html">Page2</a>
</div>
<div class="footer">
<h1>Hello</h1>
</div>
</div>
<script src="commonPjax.js"></script>
</body>
</html><!-- // Page02.html -->
<head>
<title>Page02</title>
</head>
<body>
<div class="header">
<h1>Hello World</h1>
</div>
<div id="content">
<div class="link-element">
<a class="link-text" href="page01.html">Page1</a>
</div>
<div class="footer">
<h1>こんにちは</h1>
</div>
</div>
<script src="commonPjax.js"></script>
</body>
</html>JavaScript / jQuery
// commonPjax.js
$(document).on('click', '.link-text', function(e){
e.preventDefault();
$linkText = $('.link-text');
$pjaxTargetContent = $('#content');
$pjaxTargetContent.fadeOut(300, function(){
$.pjax({
url: $linkText.attr('href'),
container: '#content',
fragment: '#content',
}).done(function(){
$pjaxTargetContent.fadeIn(300);
});
});
});Barba.js（v2）
リンク（公式）：https://barba.js.org/
インストール：https://barba.js.org/docs/getstarted/install/
※2023年10月10日時点
実際に動かした時の動画
HTML
<!-- // Page03.html -->
<head>
<title>Page03</title>
</head>
<body data-barba="wrapper">
<div class="header">
<h1>Hello World</h1>
</div>
<div id="content" data-barba="container">
<div class="link-element">
<a class="link-text" href="page04.html">Page4</a>
</div>
<div class="footer">
<h1>Guten Tag</h1>
</div>
</div>
<script src="commonBarba.js"></script>
</body><!-- // Page04.html -->
<head>
<title>Page04</title>
</head>
<body data-barba="wrapper">
<div class="header">
<h1>Hello World</h1>
</div>
<div id="content" data-barba="container">
<div class="link-element">
<a class="link-text" href="page03.html">Page3</a>
</div>
<div class="footer">
<h1>Bonjour</h1>
</div>
</div>
<script src="commonBarba.js"></script>
</body>JavaScript / jQuery
// commonBarba.js
barba.init({
transitions: [{
leave(e){
return new Promise(function(resolve){
$(e.current.container).fadeOut(300);
setTimeout(() => resolve(), 300);
});
},
enter(e){
$(e.next.container).css({'display':'none'}).fadeIn(300);
},
}]
});CSS（参考）
body {
background-color: #c9c2f4;
color: #ffffff;
}
h1,
.link-element {
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
text-align: center;
align-items: center;
}
h1 {
display: grid;
height: fit-content;
}
.header > h1 {
bottom: 100px;
}
.footer > h1 {
top: 100px;
}
.link-element {
cursor: pointer;
background-color: #585091;
display: flex;
bottom: 0;
height: fit-content;
width: fit-content;
user-select: none;
border-radius: 10px;
}
.link-text {
padding: 10px;
text-decoration: none;
color: #ffffff;
}
.link-text:hover {
color: #ffffff;
background-color: #948ec6;
border-radius: 10px;
}最後に
いかがでしたでしょうか？
URLとページ内の特定のコンテンツだけを切り替える動作「非同期遷移」は、ページ全体を切り替える必要がないので、画面設計上に何らかのコストパフォーマンスが期待できそうですね。
今回はここまでとさせていただきます。
最後までお読みいただき、誠にありがとうございます。
参考サイト
