jQuery 3.xを使ってみる

少し前にjQuery 3.x系がリリースされましたので、変更された点などを調べてみました。

対応ブラウザ

対象ブラウザは以下のようになっています。

• IE9以降
• Chrome, Edge, Firefox, Safariは最新版の1つ前のバージョン
• Operaは最新版
• iOS7以降のモバイル版Safari
• Android 4.0以降

もしIE6～8に対応する必要がある場合、jQuery1.12を使用します。
　

Slim build

ajax、effectsと非推奨のコードを除外したSlim build版も提供されていて、通常版が30kbに対して23.6kbと約6kb小さくなっています。
CDNを使用する場合、以下を読み込みます。

<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"></script>

Slim buildはカスタムビルドAPIで作成されていて、モジュールを含めたり除外したりもできます。
　

変更点

jQuery 3での変更点を、jQuery 2と比較していくつか見てみます。
詳細は公式のアップグレードガイドか日本語翻訳版をご確認ください。

windowのouterWidth()とouterHeight()にスクロールバーが含まれるように変更

$(window).outerWidth()と$(window).outerHeight()の値にスクロールバーも含まれるように変更されました。

HTML

<div class="pc">641px～</div>
<div class="sp">～640px</div>

CSS

@media (max-width: 640px) {
	.pc {
		display: none;
	}
}
@media (min-width: 641px) {
	.sp {
		display: none;
	}
}

JavaScript

$(function() {
	$(window).on('resize', function() {
		console.log($(window).outerWidth());
	});
});

outerWidth()のデモページ(jQuery3)
outerWidth()のデモページ(jQuery2)
jQuery2ではMedia Queriesのブレークポイントとスクロールバー分ずれていましたが、jQuery3では一致するようになりました。
　

$(function)が非同期に変更

$(function)が常に非同期で処理を行うようになったので、読み込みのタイミングによって$(function)の実行タイミングが変わる、ということがなくなりました。

JavaScript

$(function() {
	console.log('ready');
	$(window).on('load', function() {
		console.log('load');
	});
});
console.log('outside ready');
$(window).on('load', function() {
	console.log('outside load');
});

$(function)非同期のデモページ(jQuery3)
$(function)非同期のデモページ(jQuery2)
jQuery3では「outside ready → outside load → ready」の順番、jQuery2では「outside ready → ready → outside load → load」の順番でconsoleが表示されました。

少し話がずれますが、$(function)が非同期になったことで、$(function)内に$(window).on(‘load’, function);が入っていると実行されなくなっているようです。
　

show(),hide(),toggle()の仕様変更

show(),hide(),toggle()ではなく、非表示(または表示)用のclassを用意して、classの切り替えで制御する方法が推奨されているようです。

HTML

<div>
	<p>設定なし(display: block;)</p>
	<button class="show">show</button>
	<button class="hide">hide</button>
	<button class="toggle">toggle</button>
	<div id="box1" class="box">box</div>
</div>
<hr />

<div>
	<p>display: none;</p>
	<button class="show">show</button>
	<button class="hide">hide</button>
	<button class="toggle">toggle</button>
	<div id="box2" class="box">box</div>
</div>
<hr />

<div>
	<p>インラインにdisplay: block;</p>
	<button class="show">show</button>
	<button class="hide">hide</button>
	<button class="toggle">toggle</button>
	<div id="box3" class="box" style="display:block;">box</div>
</div>
<hr />

<div>
	<p>インラインにdisplay: none;</p>
	<button class="show">show</button>
	<button class="hide">hide</button>
	<button class="toggle">toggle</button>
	<div id="box4" class="box" style="display:none;">box</div>
</div>
<hr />

<div>
	<p>spanにdisplay: none;</p>
	<button class="show">show</button>
	<button class="hide">hide</button>
	<button class="toggle">toggle</button>
	<span id="box5" class="box">box</span>
</div>
<hr />

<div>
	<p>display: inline;</p>
	<button class="show">show</button>
	<button class="hide">hide</button>
	<button class="toggle">toggle</button>
	<span id="box6" class="box">box</span>
</div>
<hr />

CSS

.box {
	width: 100px;
	height: 100px;
	background: #ff0000;
}
#box2 {
	display: none;
}
#box5 {
	display: none;
}
#box6 {
	display: inline;
}

JavaScript

$(function() {
	$('.show').on('click', function() {
		$(' ~ .box', this).show();
	});
	$('.hide').on('click', function() {
		$(' ~ .box', this).hide();
	});
	$('.toggle').on('click', function() {
		$(' ~ .box', this).toggle();
	});
});

show(),hide(),toggle()のデモページ(jQuery3)
show(),hide(),toggle()のデモページ(jQuery2)
開発者ツールで確認すると微妙に挙動が変わっているようですが、一応はまだ使えている？ようです。
ただ基本はclassの付け替えで表示・非表示を切り替える方が推奨されています。
　

load(),unload(),error()の削除

JavaScript

$(window).load(function() {
	console.log('load');
});

load()削除のデモページ(jQuery3)
load()削除のデモページ(jQuery2)
jQuery3の方ではエラーが表示されました。
イベントを付与する場合はon()を使用します。

$(window).on('load', function() {
	console.log('load');
});

on(‘ready’, function)の削除

JavaScript

$(document).on('ready', function() {
	console.log('ready');
});

on(‘ready’, function)のデモページ(jQuery3)
on(‘ready’, function)のデモページ(jQuery2)
jQuery3ではconsoleが表示されませんでした。
　

jQuery Migration

jQuery2で記述したコードをjQuery3へ移行するために、jQuery Migrationを使ってみます。
※移行前のjQueryが1.12.xか2.2.x以上である必要があります。
1.12.0か2.2.0未満の場合、こちらのjQuery Migrationで修正してから、jQuery3用のjQuery Migrationを使う必要があります。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

JavaScript

$(document).on('ready', function() {
	console.log('testA');
});
$(window).load(function() {
	console.log('testB');
});

jQuery Migrationのデモページ1

jQuery3に変更してみます。

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

jQuery Migrationのデモページ2
jQuery3ではload()は削除されているので、エラーが表示されました。

jQuery3に合わせてjQuery Migrationを読み込んでみます。

<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>

jQuery Migrationのデモページ3
以下のように非推奨や削除されたメソッドを検出できました。

先ほどは非圧縮版を読み込みましたが、圧縮版を読み込むと、非推奨や削除されたメソッドがあっても正しく動作させることができます。

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

jQuery Migrationのデモページ4
これで一時的に動作させることはできますが、非圧縮版を使ってコードを修正するのが望ましいです。
　

【参考サイト】

• jQuery 3.0 Final Released! | Official jQuery Blog
• jQuery Core 3.0 Upgrade Guide | jQuery
• 【翻訳まとめ】jQuery 3.0 アップグレードガイド – Qiita
• GitHub – jquery/jquery-migrate: APIs and features removed from jQuery core
• jQuery1.x／2.xで作成したアプリをjQuery 3に対応させるには？ – Build Insider