jQuery3の登場でフロントエンドはどう変わっていくか？ ｜ SiTest (サイテスト) ブログ

こんにちは、プロダクト開発チーム エンジニアの森永です。

Webアプリケーションの開発、Webサイトの作成などでJavaScriptライブラリを使うケースは多いかと思います。もちろんSiTestでもJavaScriptライブラリを使用しております。

その中で代表格とも言えるjQueryですが、最初のバージョンがリリースされた2006年から10年の節目である今年の6月にバージョン3.0がリリースされました。(その後7月に3.1がリリースされました)

今回はjQuery3で変更となった点、そしてjQuery3の登場が今後のフロントエンド開発等に及ぼす影響を考察いたします。

まず簡単にjQueryについて説明いたします。

jQueryはアメリカのプログラマーであるジョン・レシグが開発したJavaScriptのライブラリです。

最初のバージョンが2006年にリリースされて以降、DOMの操作やアニメーションなどのエフェクトが簡単なコードで実装可能となることが評判となり、あっという間にJavaScriptライブラリのスタンダードとしていろいろなWebアプリケーション/Webサイトで広く採用されました。

その後もバージョンアップを繰り返し、2013年に2.0が、今年6月に3.0がリリースされました。

以下、jQuery3での変更点の一部を簡単にご紹介いたします。

1. パフォーマンスの向上

JavaScriptライブラリの問題点の一つとして「パフォーマンスが悪い」という点が挙げられます。jQueryも実際にパフォーマンスの問題が発生するケースがあります。jQuery3最大の特徴として、パフォーマンスの向上のため「軽量化」「非推奨、不要な機能の廃止」を行っています。

例えば、イベント処理での.load()、.unload()、.error()関数やAjaxでのsuccess、error、complete関数が削除となっています。

また、アニメーションの処理も変更となっています。requestAnimationFrameが採用されたため(Internet Explorer9を除く)、アニメーション処理が格段にスムーズになることが期待されます。
requestAnimationFrameについては8月1日の記事「Velocity.js　CSSを超える最強アニメーションライブラリの秘密に迫る」もご参照ください。

2. 新機能

一方で新機能も実装されています。パフォーマンス向上目的の変更のような大きなインパクトはありませんが「かゆいところに手が届く」便利な機能がいくつか追加されています。例えば以下のような機能追加が挙げられます。

• SVGへの.addClass()と.hasClass()などのクラス操作対応
• Ajaxで$.get()、$.post()の引数にオブジェクトを指定可能
• ES2015で導入されたfor…ofループをjQueryコレクションで使用可能

もちろん他にも様々な機能の追加、削除、変更があります。
詳しくは以下のサイト、ブログなどにまとめられておりますのでご参照ください。

• jQuery 3.0 Final Released! (jQuery公式ブログ：英文)
• jQuery Core 3.0 Upgrade Guide (公式サイト：英文)
• 【翻訳まとめ】jQuery 3.0 アップグレードガイド (上記Upgrade Guideの翻訳)
• 2016年6月9日公開のjQuery3.0で主に変わったこと

では、このjQuery3はフロントエンド開発にどのような影響を及ぼすでしょうか。

すぐにアップデートした方がいいと思われるかもしれませんが、先に記載したように変更点がいろいろあるため既存のWebアプリケーション/Webサイトで使用しているjQueryを置き換えるのは容易ではありません。既に使われているところではjQueryがバージョン3に置き換わるには時間がかかるものと考えられます。

一応移行ツールは用意されているものの、変えていくのには当然手間がかかります。特に大きなシステムである場合、工数は莫大なものとなります。

また、jQuery3はInternet Explorer8には非対応のため、古いブラウザに依存しているところでは置き換えることは不可能です。

従いまして、システムやサイトが古すぎず規模が大きくないところ、または全面的にリニューアルを行うところから徐々に置き換わっていくものと思われます。

ただ、新機能の追加はjQuery1/2では今後行われないため、バージョンを上げることによって利便性が向上することが見込まれるところではjQuery3を採用するのも一つの手かもしれません。

jQuery3が普及するのには時間がかかりそうではありますが、3のリリースをきっかけにWebの「軽量化」「高速化」の傾向が加速する可能性はあります。
パフォーマンス向上の一つの方法として検討するのも一つの選択肢でしょう。

以上、新たにリリースされたjQuery3を紹介いたしました。