Pjax導入のメリットとデメリット!5分でわかる!デモあり!

Pjaxを利用することで、ページ遷移スピードの向上、サーバーへの負荷軽減やユニークなページ遷移アニメーションを実装することが出来ます。ここではPjaxの概要と導入にあたってのメリット、デメリットを説明します。
Pjaxの基本的な導入方法を知りたい方はこちらを御覧ください。
次の記事:Barba.jsとPrefetchを導入して画面遷移を爆速にする方法!!

Pjaxとは?

PjaxとはHistory APIのPushstate/PopstateとAjaxを組み合わせた技術のことを指します。
Pjaxを使用することで高速でユニークな画面遷移を実現することが出来ます。次のデモを御覧ください。

アニメーションを選択し、”Click Me”を押すと、赤とオレンジで背景色が切り替わります。一見、画面のロードが走らないため、画面遷移が行われていないような気がしますが、URL(iframe内のURL)も切り替わっており画面遷移は行われています。これはPjaxを使用して実現できることの一つです。簡単にどのような処理が動いているのかを説明します。

Pjaxの一般的な処理フロー

  1. Ajaxでリンク先ページのHTMLを取得
  2. History APIのpushStateでURLの書き換えとブラウザ履歴のスタックへの追加
  3. Ajaxで取得したコンテンツを元にjavascriptで現在のページのDOMを書き換え

Pjaxの処理フローはAjaxの処理フローと異なりHistory APIによるブラウザ履歴の積み上げ処理が入っています。History APIによって履歴を操作することで、ブラウザバックで特定の状態に戻ることが出来ます。これがPjaxによりもたらされるメリットの一つといえます。

Ajaxとは
サーバーとの非同期通信のことを指します。
これは簡単に言いうと画面遷移なしでサーバーとのデータをやり取りする方法になります。
詳しく知りたい方はこちらがよく説明されています。
History APIとは、
HTML5から導入された「ブラウザ履歴」を操作するAPIです。ブラウザは通常、画面遷移を行った際に履歴を積むため、Ajaxなどの画面遷移を伴わない場合は、状態を保持することが出来ませんでした。しかし、History APIのpushstate/popstateメソッドを使用することで、Ajaxによる画面の状態の変更後も履歴として保持することが可能となります。

 

Pjax導入のメリット

Pjaxを利用することで以下のメリットがあります。

ページ遷移スピードの向上

Pjaxの実装では一般的に画面の必要な部分のみを読み込み直すため、ページ遷移が一般的な画面遷移に比べて高速になります。一般的に、静的コンテンツ(JS, CSSなど)の配信、読み込みは画面遷移の際に多くの時間がかかりますが、Pjaxでは<head>タグ内は読み込み直さないため、その時間が省かれ画面描写も高速になります。また、Pjaxの代表的なライブラリのBarba.jsではPrefetchという機能が使用でき、これを有効にするとリンクホバー時点で、リンク先コンテンツの取得を開始するため、更に高速なページ遷移を実装出来ます。また、遷移時にアニメーションを使用することで体感時間を更に短縮することが出来ます。

シームレスなページ遷移アニメーションが可能

ページ遷移でリロードが発生しないため、シームレスなページ遷移アニメーションが可能です。個性的なサイトを作成するためには有効です。

サーバーの負荷を軽減

Pjaxでは画面遷移毎に特定の箇所のみを取得・更新することが可能となるため、不要なコンテンツを取得しなければサーバー負荷の軽減に繋がります。例えば、左の図のような場合、ヘッダー、サイドバー、フッターが全ページで同じものを表示する場合、Pjaxモジュールから呼ばれた場合にメインコンテンツのみ返すようにサーバー側に実装を組み込めば、ヘッダー、サイドバー、フッターの処理を省くことが出来ます。また、Pjaxは<head>タグを読み込み直さないため、javascriptやcssをページ毎にサーバーに取得しに行くこともないため、その分サーバーのセッションを節約できます。

Pjax導入のデメリット

Pjaxを利用することで以下のデメリットがあります。

JSの実装が複雑になる

一般的なサイトでは画面遷移毎にjavascriptでの画面の初期化処理が走りますが、Pjaxを利用した場合は画面初期化処理を特別に行う必要があります。また、一般的なJSライブラリは画面遷移で初期化処理が走ることが前提に組まれているため、Pjaxで用いる場合には、意図的に初期化処理を記述する必要などがあります。例えば、window.addEventlistner('load',jQuery(document).readyはDOM読み込み後に走る一般的な初期化処理ですが、Pjaxで画面遷移を行う場合は、この関数が画面毎に呼ばれません。これにより画面の初期化が行われなくなるため、Pjaxで画面が呼ばれた場合と、Pjax以外で呼ばれた場合(通常の画面遷移)で2つのパターンを実装する必要があります。

headタグ内の整理が必要

<head>タグ内には<title><meta><og:*>など画面毎に変更が必要なタグがあります。Pjaxでは<head>内を読み込み直さないため、コードを書いてページ毎に置換してやる必要があります。

Pjax遷移させないリンクの指定が必要

実装していくうちに全てのリンクをPjaxで遷移させれば 良いわけではないことがわかってくるかと思います。簡単な例でいうと、pdfやimgへのリンクはPjax遷移を行えません(pdfやimgを含むhtmlへなら問題ありませんが、、)。また、Pjax遷移ではどうしても動かないページなどがあれば、そのページへの遷移もPjax遷移対象から除外する必要が出てきます。

サードパーティーのJSライブラリを使う際は注意が必要

1と関連しますが、Third-PartyのJSライブラリの中にはページ遷移毎にライブラリ内でwindow.addEventlistner('load',などで初期化処理を行っているものが少なくありません。このようなライブラリを使用する際には画面遷移毎に対象のJSを読み込むスクリプトタグを置き換えて上げることにより、そのライブラリのwindow.addEventlistner('load',を発火してあげる必要があります。
このようにPjaxを使用すると普段は気にしなくてもよい事を気にする必要が出てきます。

まとめ

メリット

  • ページ遷移スピードの向上
  • シームレスなページ遷移アニメーションが可能
  • サーバーの負荷を軽減

デメリット

  • JSの実装が複雑になる
  • <head>タグ内の整理が必要
  • Pjax遷移させないリンクの指定が必要
  • サードパーティーのライブラリを使う際は注意が必要

今回はPjaxを使用した場合のメリット、デメリットのご紹介をしました。
デメリットの方が数は多くなってしまいましたが、Pjaxを用いた個性的な画面遷移や画面遷移スピードはそれを上回ります。
機会がありましたら、是非導入を検討してみてください!
次回は代表的なPjaxライブラリのBarba.jsを用いた簡単なコードをご紹介します。
次の記事:Barba.jsとPrefetchを導入して画面遷移を爆速にする方法!!

最新記事