やまさきやまさき
2017/07/11

pjaxプラグインを使わずにajax + History APIでスムーズな画面遷移を実装してみる

この記事は約5分で読めます。

pjaxプラグインを使わずにajax + History APIでスムーズな画面遷移を実装してみる

上級カスタマイズ

pjax、最近流行ってきていますよね。
pjaxとは、ajaxの非同期通信でスムーズにコンテンツを入れ替え、History APIのpushStateでurlも同時に書き換えることであたかもページ遷移を高速に実現している「ように見せるもの」です。

実は実際の処理はajaxとそんなに変わりません。
なので、ajaxが扱える人ならば、少し工夫するだけでpjaxと同様の処理を簡単に実装できます。

今回は、そのために必要な知識としてpjaxの動作の仕組みを簡単にまとめてみようと思います。

まずはajaxをおさらい

pjaxの核となっているのはもちろんajaxですので、一度おさらいしておきましょう。

 

ajaxのこともまだあやふやだなぁ。という方は以下を参考にしてみてください。

ゼロから始めるJavaScript講座Vol23 Ajaxとは

はじめてajaxを使うときに知りたかったこと

 

ajaxなんてだいぶ前から使ってて余裕だぜ。という方も、もし未だにsuccessやerrorを使用しているならば以下を要チェックですよ。

おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ(追憶)

 

軽くまとめておくと、以下のように使用します。

$.ajax({
  type: "GET",
  url: '読み込ませたいファイル',
  dataType: 'html',
  timeout: 10000,
//その他オプション }) .then( function(data){ $('読み込ませたい場所').html($(data).find('具体的な取得部分')); }, function(){ //エラー処理 } );

コンテンツの単純な読み込みだけなら$.loadを使用するともっと簡単に書けます。

$('読み込ませたい場所').load('読み込ませたいファイル'+' 具体的な取得部分');

pushStateでURLの書き換えと、履歴の追加を行う

ajaxだけだとurlはそのままなので、ブックマークをしても初期状態のページにしかアクセスできません。

また、コンテンツが入れ替わった後に「戻るボタン」を押しても一つ前の状態には戻ってくれず、ajaxを実装しているページより前に見ていたページまで戻ってしまいます。

 

そこで、コンテンツ読み込み時にpushStateというHistory APIのメソッドを使ってurlを書き換え、履歴を追加することで上記のような欠点を補うことができる、というのがpjaxの内容です。

pushStateについてはこちらをどうぞ: pushStateでブラウザの履歴を追加する

 

url = "表示させるurlパス"; //任意。存在しない適当なパスでも動作します
path = "読み込ませたいファイルのパス" 
history.pushState(null, null, url, changeContents(path));

上記のようにすることで、履歴を残しパスを書き換えた後、changeContents()という関数を呼び出します。第一引数と第二引数はあってもなくてもいいので、nullや””で大丈夫です。

この時に呼び出す関数changeContents()に、ajax処理を記述しておきます。

function changeContents(path){
  $('読み込ませたい場所').load(path+' 具体的な取得部分');
}

戻る・進むボタンを押した時にもajaxを動かす

現状のままだと、戻る・進むボタンを押してもurlが変わるだけでコンテンツが入れ替わりません。

pushStateで追加した履歴の遷移では実際にページの遷移が行われるわけではないからです。なので、戻る・進むボタンが押されたときにもajaxを動作させてコンテンツを読み込ませる必要があります。

この時に使用するのがpopStateというHistory APIのメソッドです。これによって、戻る・進むボタンの動作にイベントをフックさせることができます。

window.addEventListener('popstate', function(event) {
  var path = location.pathname;
  changeContents(path);
});

ここで記述した処理は、戻るボタンなどでurlが遷移先に書き換わったときに実行されます。

つまり、上記のlocation.pathnameによって、戻った先のurl(ドメイン以降のパス部分)が取得されます。

このパスがそのまま読み込ませたいファイルまでの相対パスになっているなら、直接changeContents()の引数となるpathに代入するだけす。

WordPressを使っているとurlのパスと読み込ませたいファイルまでのパスが違う場合もあると思いますが、その時はlocation.pathnameをsplitするなりごにょごにょして読み込ませたいファイルまでのパスに変換していきましょう。

書き換えたurlに直接アクセスしても同じ見た目になるようにしておく。

最後に、pushStateで書き換えたurlに直接アクセスしても整合性が取れるようにしておきましょう。

同じ見た目になるようなファイルを準備します。

つまり、ajaxでコンテンツを入れ替えさせる数だけ、ファイル(ページ)を作成しておく必要があります。

 

まとめ

いかがだったでしょうか。

基本となるajaxに、pushStateとpopStateの処理を追記してファイルを準備しておくだけでした。

あとはこれらの処理を、トリガーとなるリンクボタンがクリックされたときに、発動させるだけです(トリガーにdata-○○属性を付けてファイルまでのパスなどを渡しましょう)。

分かってしまえばなかなか簡単ではないでしょうか?

中身を理解しておくと、pjaxのプラグインでは対応しきれない時でも柔軟に実装できます。

 

是非挑戦してみてください!

pjaxプラグインを使わずにajax + History APIでスムーズな画面遷移を実装してみる
やまさき フロントエンジニア

新人縄跳び野郎です!

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。