ふわっと学ぶPjax #2

2019.09.11

なち
「pushState」と「Ajax」の技術を組み合わせたプラグインであるPjaxについて、ふわっと学んでみましょう。

目次

  1. はじめに
  2. defunktを使ってみよう!
  3. まとめ

1. はじめに

お久しぶりです。なちです。 前回はPjaxの簡単な説明と「falsandtru版pjax」の導入方法についての記事を書きましたが、覚えていらっしゃいますか。(前回の記事はこちら) 今回はjQueryベースののプラグイン「defunkt版jquery-pjax」の導入をふわっと学んでいきましょう。

2. defunktを使ってみよう!

プラグインバージョン

jquery-pjax 2.0.1

対応環境

  • jQuery必須(v1.8以上)
  • ブラウザ指定なし

インストール

$ npm install jquery-pjax

「/node_modules/jquery-pjax/」のなかに「jquery.pjax.js」が入っていることを確認します。

プラグイン読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="/js/jquery.pjax.js"></script>

インストールした「jquery.pjax.js」を任意のディレクトリに配置しhtmlファイル内で読み込みます。 jQueryは1.8以上のバージョンを読み込みましょう。

JS基本形

$(document).on('click', 'a.pjax', function(e){ // 後からリンク要素が足されるかもしれないので、$(document)にしてお葱、イベント対象になる要素のクラスを指定します。
  e.preventDefault();
  var href = $(this).attr('href');
  $.pjax({
      url: href,
      container: '#pjax-wrapper', // 現在のページの入れ替える対象の要素のid(class)
      fragment: '#pjax-wrapper'// 次のページの入れ替える対象の要素のid(class)
  });
});

取得可能イベント

対象のリンクボタンを押した場合の処理

イベント名 メモ
click アクティブなリンクから起動
beforeSend XHRヘッダーの設定が可能
start
send
clicked pjaxが開始された後に起動
beforeReplace HTMLをサーバーからロードされたコンテンツに置き換える前
success サーバーからロードされたHTMLコンテンツを置き換えた後
timeout オプションで設定したタイムアウトの後。キャンセルしない限りハードリフレッシュする
error ajaxエラーの場合。キャンセルしない限りハードリフレッシュする
complete 結果にかかわらず、ajaxの後に起動
end

ブラウザの戻る・進むボタンを押した場合の処理

イベント名 メモ
popstate ブラウザの戻る進むなどを行った時に発生
start コンテンツを置き換える前
beforeReplace HTMLをキャッシュからのコンテンツに置き換える直前
end コンテンツ交換後

詳しくはこちら

イベント追加方法

$(document).on('pjax:popstate', function);

発火したいタイミングを設定して、関数を作成してください。

オプション

設定できるオプションについて説明しているページはこちらです。 「jquery.pjax.js」の中の166行目あたりから「options.XXXXX」で記載されている箇所が該当箇所です。

オプション設定方法

$.pjax({
    url: href,
    container: '.contents',
    fragment: '.contents',
    scrollTo: false,
    timeout: 2000
});

3. まとめ

「defunkt版pjax」の開発をGitHubで確認すると、一番最近で2017年となっていました。 重要なバグが発生しない限り修正は行わないようなので、その時々のブラウザで問題がないかを使用の時に確認し、何か問題があれば連絡をするのが良いようです。

前回導入した「falsandtru版pjax」に比べて「defunkt版pjax」はイベントもオプションも豊富です。 使いこなせるかは置いときまして、ブラウザバックのイベントも用意されているのは嬉しいです。 他のプラグインではaタグに対してPjaxのイベントを紐づけるのですが、「defunkt版pjax」はaタグでなくてもクリックイベント毎にPjaxの処理を割り当てることができます。 jQueryに依存していますが、そのおかげでコードをシンプルに書くことができ、普段jQueryで開発をしている人にとっては導入しやすいプラグインだと思いました。 「falsandtru版pjax」はシンプルな遷移でしたが、「defunkt版pjax」は複雑なアニメーションを挟んだ遷移やクリック要素ごとに別の動作を付与する場合に向いていると思いました。

前回冒頭で、それぞれの特徴を比較しているページを紹介した時に、「falsandtru版pjax」の方が色々できそうだと感じましたが、取得イベントの多さや、イベントの割り当てられる要素の違いから汎用性が高いのは「defunkt版pjax」なのではないかと感じました。

次回は「Barba.js」の導入に挑戦します! そして、3つの方法を挑戦したことで分かったことについてまとめたいと思います!

参考サイト

Neuromagic Labsの新着記事