jQuery 3.0の変更点、違いまとめ。

azuma_160902_img01

こんにちは、最近MECというダイエット法で8kg痩せました。
エンジニアのあずまです。

今年の6月9日にjQuery 3.0が正式リリースされました。
今日はjQuery 3.0と旧バージョンとの違いをまとめたいと思います。

目次

今回のバージョンアップで何が変わるのか

2系からのメジャーアップデートです。そのためマイナーアップデートにはない大きな変更があります。
非推奨になっていたAPIが削除されたり、特殊な使い方をされていたAPIが非推奨になる等、APIの整理が進められています。
そのため、既存のコードに影響が出る可能性があります。
パフォーマンスが向上しています(カスタムセレクトのパフォーマンスが最大17倍)。
通常版と軽量化を軸としたバージョン(スリムビルド)が新たにリリースされています。

サポートブラウザについて

  • IE9 以降
  • Chrome、Edge、Firefox、Safari の最新版とそのひとつ前のバージョン
  • Operaの最新版
  • iOS 7 以上のモバイルSafari
  • Android 4.0以上

IE8 以下は動作しません。IE8以下の対応が必要な場合は、jQuery 1系を引き続き利用しましょう…。

スリムビルドについて

通常版からAjaxとeffects 機能を除外し軽量化したバージョンです。
Ajaxでの通信機能やアニメーションを使わないサイト向けです。
ファイルサイズは、通常版が84.3KBに対し、スリムビルドは67.3KBです。

既存コードに影響を与える変更箇所(Web制作)

既存コードに影響を与える変更点の内、Web制作に影響が大きそうなものを個人的にまとめました。

.width()、.height()の返り値が変更

.width()、.height()で少数点を返すようになりました。

.load()、 .unload()、 .error()廃止

.on()を使いましょう。

$(window).load(function(){});

ではなく

$(window).on(“load”,function(){});

空jQueryコレクションの関数返り値がundefinedに変更

nullではなくundefinedを返します。

$(function)以外のdocument-readyの非推奨

$(document).ready(function(){});

ではなく

$(function(){});

outerWidth()、 .outerHeight()にスクロールバーのwidth/heigthが含まれる

スクロールバーを含むようになりました。

.show()、 .hide()、 .toggle()関数の挙動変更

これが一番大きく影響の出そうな変更点だと思います。
去年の7月にリリースされた3.0のalpha版とは違う挙動をするので、使用の際はお気をつけください(alpha版の挙動を説明している記事も多いので…)。
jQuery公式アップグレードガイドを見てみると、

これらの関数のソースコードの処理は、計算されたstyleではなくinlineのstyleをみるように修正されました。スタイルシートのdisplayの値を尊重することによりレスポンシブデザインとの互換性が上がりました。
（引用：【翻訳まとめ】jQuery 3.0 アップグレードガイドより）

去年の7月にリリースされた3.0のalpha版も合わせて実際にサンプルコードでご確認ください。

2系以前

See the Pen dpyVpO by NP-azuma (@NP-azuma) on CodePen.

alpha版

style=”display:none;”の取り外しだけなので、あらかじめcssで非表示にされている時は、.show()では表示されない。
classの付与で対応する必要がある。

See the Pen yaLzNG by NP-azuma (@NP-azuma) on CodePen.

3.0

非表示の場合htmlタグが持っているdisplayプロパティを.show()で付与しているようです。
あらかじめcssでdisplayプロパティを指定している時はstyle=”display:none;”の取り外しだけです。

See the Pen KgKXzA by NP-azuma (@NP-azuma) on CodePen.

まとめ

cssでdisplayプロパティを指定している場合はalpha版と同じ挙動
cssで非表示にしている場合は2系以前と同じ挙動をします。
2系以前と近い挙動に見えますが、全く同じ挙動というわけではないので、使用する際はお気をつけください。

アップグレードガイド

細かな変更点や非推奨機能についてはアップグレードガイドをご確認ください。

jQueryの公式アップグレードガイドです。

jQuery Core 3.0 Upgrade Guide

こちらのサイトが公式アップグレードガイドを日本語訳してくれています。非常にわかりやすいです。

【翻訳まとめ】jQuery 3.0 アップグレードガイド

まとめ

Web制作に便利なjQueryがより高速化を目指したのがjQuery 3.0です。
Webサイトの高速化はこれからより重要視されていくと思います。
以前のjQueryで使えていたAPIが削除されているので、移行・導入の際は気をつける必要がありますが、これからのWeb制作を考えた場合、早く使いこなせるようになった方が良いと思います。
「.show()、 .hide()、 .toggle()関数の挙動変更」など、実際に自分でコードを書いて挙動を確認することも大切です。
自分も日々勉強して変化に対応し、より良いWebサイトを制作していきます！

[ウェブ制作] カテゴリーの最新記事