脱jQuery!?、Barba.js使ってみた。DIVEJavaScriptの設定を有効にしてご利用ください。無効の場合、当サイトを正常にご利用できません。TOP脱jQuery!?、Barba.js使ってみた。sugiyamaどうも、フロントエンドエンジニアのスギヤマです。前回の記事で脱jQuery!?な記事を書きましたが、その流れで〇〇使ってみた、作ってみた、みたいなものを書いていきたいと思います。今回はPJAXライブラリ-Barba.js-。PJAXはjQueryプラグインでも実装でき使ったこともありますので軽く比較などしてみたいと思います。そもそもPJAXはAjaxとpushStateを組み合わせて非同期通信でページの切り替えを行うもので、指定したエリアのみ通信が発生するのでスムーズなページ遷移が可能になります。jQueryプラグインからいってみましょう。jquery-pjaxにはfalsandtru/jquery-pjaxとdefunkt/jquery-pjaxの2種類があるようですがこの先はdefunkt版です。ダウンロードjQuery本体と、jquery.pjax.jsをダウンロードします。直接セレクターにではなく、$(document)にイベントをバインドさせています。PJAXを実行するボタンなどのclass名は自由に設定できます。{console.log('pjaxが終了したときに発生');});pjax:popstateなどイベントが用意されていて、開始される前、終了時にアニメーションなど入れておけばスムーズに遷移しているように見えます。Barba.jsPJAXするのにpushStateなどが必要になってくるのでサポートブラウザはそれらが使えるモダンブラウザ&IE10〜。公式リファレンスでも使用していますがPromiseを使用しているのでIE11でもPolyfillが必要になります。src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>ほんとにIEってやつは。ダウンロードbarba.js本体をダウンロードします。PageTransition;};Barba.Pjax.start();jquery-pjaxと違って入れ替える要素のIDとClass#barba-wrapper,.barba-containerは固定になります。PJAXを実行するボタンにclasなどの指定はなく.barba-container内すべての<a>が対象になります。あれこれ書いていますがBarba.Pjax.start();さえあればPJAXは可能になります。){head.appendChild(newHeadTags[i]);}});※正規表現部分の<,>は大文字化しています。文字化けしてしまうので。jquery-pjaxもですがBarba.jsではtitleタグの変更を行ってくれますがそれ以外のメタデータを変更してくれません。Dispatcher部分でnewPageReady(ページ遷移開始)にhead内の要素を取得し変更する処理を書いています。こちらを参考にさせていただきました。公式のリファレンスではなぜかjQuery使用しているので使わないように書き換えていますが、上記pageOutをpageInと並列にしようとすると何故かPromiseでちゃんと処理終了を待ってくれないのでstart内にpageOutの処理を書いています。ちなみに公式のjQuery使ったものでもちゃんとPromiseしてくれていなさそう。(小声)ページ毎に処理を変えたい場合は.barba-containerにdata-namespaceを指定します。data-namespace="homepage">まとめ双方使ってみてBarba.jsの方はhead周りのものもあるのでコードが多くなっていますが、それを除けばjquery-pjaxまではいかないもののかなりお手軽に組み込めるなと言った所感です。遷移時のアニメーションはjQueryの方はanimate()を使えば良いですが、Barba.jsの方は別途anime.jsなど使ってあげればアニメーションもお手軽に実装できるかと思います。"脱jQuery!?、Barba.js使ってみた。アニメーションライブラリ「Lottie」を使ってみた。最新のビルドツール「Parcel」で開発環境をサクッと立ち上げる。2019.02.07脱jQuery!?、Swiper使ってみた。Pay』開発記2019.02.07脱jQuery!?、Swiper使ってみた。2018.09.09脱jQuery!?、anime.js使ってみた。2018.04.20脱jQuery!?、Barba.js使ってみた。Typeではじめる構造化データモンスターダイブの2019年を振り返る。創業10周年を振り返る。