目次
- はじめに
- Pjax導入の種類
- falsandtruを使ってみよう！
- まとめ
1. はじめに
Pjaxとは、「pushState」と「Ajax」の技術を組み合わせたプラグインのことです。
「pushState」はページ遷移をしなくてもブラウザの履歴を変更できる技術で、「Ajax」は非同期にサーバと通信を行ってブラウザ上に描画する仕組みです。この２つの技術を組み合わせることで、ブラウザのページ更新をすることなく、
- リンクをクリックすると、アニメーションが実行されて、終わる頃には次のページが表示されている
- ヘッダーやフッターは変化しないまま、コンテンツ部分だけが更新されURLも変更されている
というような、シームレスなページ遷移を実現することができます。
これまでも「Ajax」を使用すれば必要な部分だけの更新はできたのですが、それを履歴に残すことはできませんでした。このため、ブラウザバックやリロードをすると初期状態に戻ってしまうのが難点でした。そこで、HTML5のHistoryAPIである「pushState」の機能と「Ajax」を組み合わせて、「シームレスな更新」かつ「履歴の変更」を実現したのです。このような遷移を開発しやすくしてくれるプラグインが、Pjaxです。
これから3回にわたって、Pjaxの導入に挑戦してみたいと思います。
2. プラグインの種類
検索すると出てくる主なプラグインは2種類、「falsandtru」と「defunkt」だと思います。Pjaxを導入する際にどちらを使うか悩んだことがあるかもしれません。それぞれの特徴を比較しているページがこちらです。パッと表を見た感じだと「falsandtru」の方が色々サポートされてそうに見えますね。
「defunkt」はjQueryベースで、「falsandtru」の現在開発されている最新版はJavaScriptベース（ES6）のようです。また、この２つとは別にJavaScriptベースのプラグインがもう１つあります。それが「Barba.js」です。「Barba.js」は1.X系に加えて2.X系が開発されています。GitHubを確認したところ、2.X系はまだbeta版のようでしたので、本ブログでは1.X系を対象とします。
それでは、ここで挙げた「falsandtru」「defunkt」「Barba.js」の3つについて、その導入手順と実際に使用した感想をまとめていきたいと思います。今回はまず「falsandtru」を使用してみましょう。
3. falsandtruを使ってみよう！
プラグインバージョン
pjax-api v3.29.6
対応環境
- ES6のサポートが必要
- Chrome, Firefox, Safari, Edge
- IE対象外！
インストール
$ npm i pjax-api
「/node_modules/pjax-api/dist/」のなかに「pjax-api.js（pjax-api.min.js）」が入っていることを確認します。
プラグイン読み込み
<script src="https://cdn.polyfill.io/v2/polyfill.js?flags=gated&features=default,NodeList.prototype.@@iterator"></script>
<script src="/js/pjax-api.js"></script>
インストールした「pjax-api.js（pjax-api.min.js）」を任意のディレクトリに配置しhtmlファイル内で読み込みます。ES6が使用されているため、念の為polyfillを併用しておきます。
JS基本形
var Pjax = require('pjax-api').Pjax; //Pjaxを呼び出す
new Pjax({
areas: ['#pjax-wrapper'] //Pjaxの対象エリア
});
取得可能イベント
| イベント名 | メモ |
|---|---|
| fetch | データ取得前に実行 |
| unload | データの取得後、ページの更新前にwindowオブジェクトから実行 |
| content | DOMの更新後、documentオブジェクトから実行 |
| ready | DOMの更新、かつスクロール位置を更新した後、documentオブジェクトから実行 |
| load | すべての画像とフレーム(Iframeなど)の読み込み後、windowオブジェクトから実行 |
詳しくはこちら。
イベント追加方法
window.addEventListener('pjax:fetch', function);
発火したいタイミングを設定して、関数を作成してください。
オプション
設定できるオプションについて説明しているページはこちらです。「pjax-api.js」の中の3628行目あたりからが対象のコードになります。デフォルトで何が設定されているのかなどを確認することができます。
オプション設定方法
new Pjax({
link: 'a',
areas: ['#pjax-wrapper']
});
4. まとめ
今回はPjaxの簡単な説明と「falsandtru」の導入方法についてまとめました。
「falsandtru」の使用方法を検索すると、jQuery必須になっている記事もありました。おそらく以前のバージョンでは、jQuery必須だったのだと思います。jQuery必須バージョンの「falsandtru」を使う場合は、今回記載した記述方法とは異なる部分もあるためご注意ください。
最初、ES6と分かった時に身構えてしまったのですが、エラーもなくすんなりと導入することができました。簡単なデモの制作も詰まることなくできたので、とても使いやすい印象を受けました。取得できるイベント数は少なめですが、簡易的なアニメーションを挟むだけの場合や、とりあえず必要な更新だけできればいい時であれば問題なく使用できるかと思います。実際に案件で使用するとなった場合は、IE非対応というのがネックになるかと思います。しかし、jQueryに依存しないという点はこれから重宝されると思うので、Edgeのみで良いという案件が出てくれば、選択肢としてはありだと思います。
次回は「defunkt」の導入に挑戦します！
