• Subscribe to RSS

ふわっと学ぶPjax #3

2020.04.21

なち

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

目次

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

1. はじめに

これまでに「falsandtru版pjax」と「defunkt版jquery-pjax」の導入方法についての記事を書かせていただきました。今回はJavaScriptのプラグイン「Barba.js」の導入について説明し、全体の総括をしたいと思います。

2. Barbajsを使ってみよう！

プラグインバージョン

barba 1.0

  • 1.x系の開発は停止されて2.x系への以降が推奨されています。
  • コードを実装した段階（2019/11/01時点）では、2.x系の安定版は出ていなかったため、1.x系の導入を行いました。

対応環境

  • モダンブラウザ（IE10以上）
  • Promiseを使用するため、IEではPolyfillが必要

インストール

$ npm install barba.js

「/node_modules/barba.js/dist/」のなかに「barba.js（barba.min.js）」が入っていることを確認します。

プラグイン読み込み

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>
<script src="/js/barba.js"></script>

インストールした「barba.js」を任意のディレクトリに配置しhtmlファイル内で読み込みます。IEでも使用できるようにするために、Polyfillを追加します。

htmlクラス指定

<div id="barba-wrapper">
  <div class="barba-container">
    <!-- 遷移時に変更したいエリア -->
  </div>
</div>

遷移時に変更するエリアを「id="barba-wrapper"」と「class="barba-container"」がついたタグで囲む必要があります。このidとclassを任意の名称に変更する場合は以下のように指定します。

Barba.Pjax.Dom.wrapperId = 'barbaWrap';
Barba.Pjax.Dom.containerClass = 'barbaInner';

詳しくはこちらのAPIのページを確認ください。

JS基本形

Barba.Pjax.start();

基本的にはDOMが準備された後に上記を実行すれば、指定したエリア内だけが変更される遷移を実現することができます。指定したエリア内のaタグ全てが対象になってしまいます。「.no-barba」というクラスが設けられており、それを指定するとpjaxが実行されません。そのほかには、pjaxの処理を行うかどうか分岐を作るという方法があります。対象aタグの判別や、promiseを使用したアニメーションについてはこちらを参考にするととてもわかりやすいです。

取得可能イベント

イベント名 メモ
linkClicked aタグリンクをクリックした時
initStateChange URLが変更された時
newPageReady 新しいコンテナーが読み込まれて、#barbaWrap内に挿入された時
transitionCompleted 遷移が完了して古いコンテナーがDOMから削除された時

イベント追加方法

Barba.Dispatcher.on('linkClicked', function);

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

API

使用できるAPIについて説明しているページはこちらです。設置方法は上記ページを確認してください。

3. まとめ

Barbajsについて

「Barbajs」の取得イベント数は少ないのですが、イベント名からどのタイミングなのかを判別しやすくコードを書いていてわかりやすく感じました。遷移時にアニメーションを行う場合はPromiseを使用するため、その部分の勉強コストは必要です。ここさえクリアできれば、他のプラグインの難易度とあまり変わらないと思います。

他のプラグインとの違いは、前のページと次のページの両方が存在しているタイミングがあることだと思います。Barbajsを使用する場合は、この機能を生かした遷移アニメーションができるとよいかと思います。

総括

これまでに、Pjaxのプラグイン「falsandtru」「defunkt」「Barbajs」を導入してきました。シンプルな遷移であれば「falsandtru」、複雑なアニメーションを含む遷移であれば「defunkt」「Barbajs」を使用するのが良さそうです。また、遷移前のコンテナーと遷移後のコンテナーを使用したアニメーションを実行したい場合は、「Barbajs」を使用するとよいことがわかりました。「falsandtru」を使用する場合は、対象ブラウザに制限がありますので、要件と合致しているのかも事前に確認する必要があるかと思います。個人的には「falsandtru」がこの3つの中ではコードが書きやすい印象を受けました。今回は導入までだったので、まだまだ試していないAPIがたくさんあります。「Barbajs」に関してはこの記事を公開する時には、2.x系が推奨されるようになっていました。「Barbajs」の2.x系もこれから試してみて、それぞれの特徴をよりよく理解して、実際の業務でも提案していきたいと思います。

ここまで読んでいただき、ありがとうございました！

参考サイト

なち

株式会社ニューロマジック エンジニアチーム Webデベロッパー
Webデベロッパーとしてはまだまだひよっこなので、できることが増えるように日々精進中。文章を書くのが好きで、仕事でブログを書けることがとても嬉しい今日この頃。美味しいご飯を食べることが好きだが、食が細くてたくさん食べられないジレンマを抱えている。週末はカフェを巡ったり、イベントに出かけたりするが、インドア派だと信じて疑わない。