jquery3.0-beta1-point
TRANSCRIPT
3系リリース直前？変更箇所ポイント
サト研（妹）
ver.1.0.0【jQuery10周年】
自己紹介
1
高見 和也（Takami Kazuya）
https://twitter.com/miiitaka
https://www.facebook.com/miiitaka
株式会社アラタナフロントエンドエンジニア
WordPress と JavaScript が友達です。
https://github.com/miiitaka
ハッシュタグ
2
#satoimo
アジェンダ
3
jQuery10周年振り返り
jQuery3.0.0beta1 変更点ポイント（12点）
さてさて
4
jQuery10周年振り返り
思えば10年前なんですね
5
1系
2006/08/26
2系
3系
2013/04/15 2015/01/13
2016/01/14
First Release
1.0
Sizzle
Selector
1.3
2009/01/14 2010/01/14 2011/01/15
実行速度改善1.4
Deferred 追加1.5
2011/11/03
bind等API統合1.7
IE6/7/8非サポート
2.0
3.0.0Alpha
3.0.0Compat
3.0.0Beta1
3.0.0Compat開発中止
本題
6
jQuery3.0.0beta1
Major Changes
7
◆jQuery公式サイトよりリリース内容を紐解く
http://blog.jquery.com/2016/01/14/jquery-3-0-beta-released/
メジャー変更点を解説していきます。
1: .show() and .hide() methods
8
◆.show()メソッドと.hide()メソッドの動作が変わります。（……が？）
<button id="show">Show</button><button id="hide">Hide</button><p id="view">( ´▽ ` )ﾉ</p>
<script>(function($){
$(function(){$("#show").on("click", function(){
console.log("表示");$("#view").show();
});$("#hide").on("click", function(){
console.log("非表示");$("#view").hide();
});});
})(jQuery)</script>
id=“view”に対して<style>設定
#view {
display: “none”;
}
-Alpha版.show()でdisplay: “block”; にならない！
-Beta版元に戻した ε-(´∀｀; )
2: Special case with `.data()` names
9
◆.data()メソッドのキャメルケースの取り扱いが変わります。
<button id="test1" data-foo-bar="bar">data属性（数字なし）</button><button id="test2" data-foo-420="420">data属性（数字あり）</button>
<script>(function($){
$(function(){$("#test1").on("click", function(){
console.log($(this).data("foo-bar"));console.log($(this).data("fooBar"));
});$("#test2").on("click", function(){
console.log($(this).data("foo-420"));console.log($(this).data("foo420"));
});});
})(jQuery)</script>
bar
bar
420undefined
3: jQuery.Deferred is now Promises/A+ compatible
10
◆jQuery.DeferredのPromises/A+互換性向上
- jQuery1.5から追加された非同期処理、それがDeferred。
- Promises/A+やECMAScript2015のPromiseに互換性を向上させたそうだ。
- Promises/A+仕様テストをクリアしている代物。
4: Added catch() to Deferred
11
◆Deferredsにcatch()メソッドを追加
- 嬉しい ( ^ω^ )
5: Removed special-case Deferred methods in jQuery.ajax
12
◆jQuery.ajax()の特殊なDeferredメソッドを廃止
- jqXHRオブジェクトは、Promiseであるが、.abort() のような追加メソッドを持っている。
- .complete() .success() .error() .done() .fail() .always() は非推奨にしないけど、気をつけてね。
6: Error cases don’t silently fail
13
◆エラーをエラーとして返すようになりました
- ちゃんとエラーが表示されます。あれ？ってならない。
<script>(function($){
$(function(){console.log($(window).offset());
});})(jQuery)
</script>
コンソールにエラーが表示されます
7: .width(), .height(), .css(“width”), and .css(“height”) to return decimal values
14
◆.width()メソッドと.height()メソッドの戻り値を小数以下も返すように
<p id="test1" style="background: #cccccc;width: 100.05px;">width()の例</p>
<script>(function($){
$(function(){console.log($("#test1").width());
});})(jQuery)
</script>
小数点以下の値も返す
- そもそもブラウザによって返す値がバラバラの謎仕様
- そのせいで要素間にすきまができたりしてA型性格の人をイライラさせる。高見とか。
- 戻ってきた値に四捨五入や切り捨て・切り上げを自分でコントロールできる ( ́ ▽ ` )ﾉ
8: Removed deprecated event aliases
15
◆非推奨のイベントエイリアスの廃止
- jQuery 1.8から非推奨だった.load, .unload, .errorが廃止しました。
- .on()を使いましょう。そういう話。イベントリスナーを登録するようにしてください。
<script>(function($){
$(function(){$(window).on("load", function() {
console.log("loadイベント(on)");});$(window).load(function() {
console.log("loadイベント(Alias)");});
});})(jQuery)
</script>
$(Selector).load() のようなエイリアスは使用し
ないこと！
9: Animations now use requestAnimationFrame
16
◆requestAnimationFrameの復活
• setInterval()はそもそもアニメーション用のメソッドでない。
• ブラウザの描画更新単位にあわせるメソッド、それがrequestAnimationFrame
• jQuery1.6から採用された
• 何故か1.6.3で突然の別れ (ｰ ｰ;)
• どうやらjQuery内で不具合が発生した模様（キューが溜まりまくるとか、コンフリクトとか）
• ( ´▽ ` )ﾉ ＜なめらか
• ( ´▽ ` )ﾉ ＜ CPUの負荷がさがる
• ( ´▽ ` )ﾉ ＜モバイルデバイスなどのバッテリーの減りを抑止
◆こんな恩恵をうけます
10: .unwrap( selector )
17
◆.unwrap()メソッドでセレクターの指定ができるようになりました。
<div id="test0"><p id="test1"><a>wrap1</a></p><p id="test2"><a>wrap2</a></p><p id="test3"><a>wrap3</a></p><p id="test4"><a>wrap4</a></p>
</div>
<script>(function($){
$(function(){$("a").unwrap("#test3");
});})(jQuery)
</script>
<div id="test0"><p id="test1"><a>wrap1</a></p><p id="test2"><a>wrap2</a></p><a>wrap3</a><p id="test4"><a>wrap4</a></p>
</div>
<script>(function($){
$(function(){$("a").unwrap("#test3");
});})(jQuery)
</script>
11: jQuery.fn.domManip no longer accessible
18
◆内部的に使用していたメソッドを隠蔽
例えば $.swap() とか。 1.12.1と2.2.0にもマージされたみたい。
12: Massive speedups for some jQuery custom selectors
19
◆いくつかのカスタムセレクタのパフォーマンス改善
• :hidden や :visible などのカスタムセレクタを改修
• Google のポール・アイリッシュありがとうという話
最大で17倍高速化するよ ( ^ω^ )
ご清聴ありがとうございました。
20
ありがとうございました。
- jQuery 3.0 Alpha
http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/
- jQuery 3.0 Beta
http://blog.jquery.com/2016/01/14/jquery-3-0-beta-released/
- jQuery Wikipedia
https://ja.wikipedia.org/wiki/JQuery
- Selector API
https://developer.mozilla.org/ja/docs/DOM/Locating_DOM_elements_using_selectors
- Sizzle
https://sizzlejs.com
参考URL
21