こんばんは、先日6月9日に、JavascriptのライブラリであるjQueryのバージョン3.0がリリースされました。このブログではバージョン2系列のjQueryを使っていたのですが、新しもの好きなのでお試しでjQuery3.0にアップデートしてみましたよ。

jQuery3.0について

jQueryの公式ブログに書いてあるのですが、jQuery3.0では古いIE(IE8以下)のサポートをしないことで、スリムで高速なライブラリにしようとしているみたいです。

メジャーバージョンアップということで、”破壊的な変更”もされているのですが、そんなに大きな影響ではないだろう的なことも書いてありますね。でも、既存のWebサイト・システムが動かなくなる可能性もあると思うので、お仕事で使っている方は影響調査や動作確認など必要でしょうね・・・。このブログは個人的な日記ブログで多少ダウンしてても許してもらえるはずなので、気軽に新技術を試せるのがいいところです。

jQuery3.0をダウンロードして、自分のサーバにアップしてもいいのですが、サーバの負荷を減らしたいので、今まで通りCDNからjQuery3.0を呼び出して使うことにしました。
https://code.jquery.com/jquery-3.0.0.min.js

jQuery3.0で起こる重大な変更に対処するためのjQuery Migrateもありますね。でも今回は使わなかったです。
https://code.jquery.com/jquery-migrate-3.0.0.min.js

また、Ajaxやアニメーション効果を取り除いた、スリム版もリリースされています。
https://code.jquery.com/jquery-3.0.0.slim.min.js

このブログへのjQuery3.0の導入

このブログはWordPressを使っていますが、jQuery3.0を導入する一番簡単な方法は、ヘッダー(header.php)やフッター(footer.php)に以下のような直接読み込むためのタグを書くことですね。
<script async src='https://code.jquery.com/jquery-3.0.0.min.js'></script>

でも、最近のWordPressのお作法的には、Javascriptの呼び出しはfunctions.phpに書くらしいので、functions.phpに以下のような記述をしました。
wp_deregister_script( 'jquery' );
wp_enqueue_script('jquery','https://code.jquery.com/jquery-3.0.0.min.js', array(), null, true);

このブログでjQueryを使っているのは主に以下の3箇所になります。

  • トップ画面上部や記事ページの記事下にある、おすすめ記事のカルーセル(slick.jsを使用)
  • トップ画面の無限スクロール(WordPressのプラグイン「infinite scroll」を使用)
  • ある程度スクロールすると画面右下に現れる、ホームページと画面上部に戻るためのリンク

このうち、無限スクロールについては、JSON形式の設定の読み込み方法をjQuery.parseJSONメソッドからJSON.parseメソッドを使うように修正しました。jQuery.parseJSONメソッドは非推奨になったそうです。

他にはJavascriptのコードの修正をしていないのですが、自分でこのブログを見ている分には正常通り動いている感じですね。表示速度は元々それなりに速かったので、速くなった実感はないのですが、とりあえず動いて良かったです。

ちなみに、スリム版(jquery-3.0.0.slim.min.js)も試してみたのですが、無限スクロールができなくなったのと、ホームページと画面上部に戻るリンクが表示されなくなったので、やめました。WordPressのプラグインにもAjax(ブラウザからWebサーバーへの非同期通信)を使っているものもあったと思いますし、スリム版で十分な可能性は低いかもしれませんね。

終わりに

今回はリリースされたばかりのjQuery3.0に飛びついて試してみたわけですけど、最近はモバイルユーザが多いですし、SEO的な観点からも、Webサイトの表示速度は重要になってきています。jQuery3.0で少しでも高速化できるといいですよね。古いIEとか切り捨ててしまいたい！