いつの間にか1.10をリリースしてるjQueryについていけてない1.4くらいまでの知識しかない人が見るとちょっとはマシになるページ

file0001994987121

jQueryのリリースペース早くね?デカ目の機能をdeprecatedにし過ぎじゃね?

そんなことを考えていたらタイムリーに 「ひさびさにUIをつくらなくちゃいけなくなったんだけどさー、jQueryって1.4の頃と大して変わってないでしょ」とかいうタワケがいまして、まあ 実際にやらせて痛い目にあえばいいし、ちょっとミサワ風だったので「そうだね」とか言ってほっとこうと思ったんですが、あとで面倒くさくなりそうだったの で教えたことの記録と、また聞かれないための予防線としてメモしておきます。

個人的にインパクト大だと思った変更のみをまとめたので、1.4くらいの知識の人がなんとなく知ったかぶりを出来るくらいになれば大成功です。

細かい点は自分で調べろというための情報源

2013-06-29_053213

バージョン1.5から1.10までのリリースノート
(1.5のリンクが間違っていたので修正しました。ご指摘ありがとうございます!)

http://blog.jquery.com/2011/01/31/jquery-15-released/
http://blog.jquery.com/2011/05/03/jquery-16-released/
http://blog.jquery.com/2011/11/03/jquery-1-7-released/
http://blog.jquery.com/2012/08/09/jquery-1-8-released/
http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/
http://blog.jquery.com/2013/05/24/jquery-1-10-0-and-2-0-1-released/

英語がわかんないとかいう甘えは許さない。英語できなくてもソースが読めればなんとかなるさ。最後は気持ちだよ。ココロで読むんだ。

これだけで理解するには時間がかかりすぎるので大きなポイントのみ列挙

1.4から1.10に知識レベルを手っ取り早く飛躍させるためにはポイントをしぼって違いをあげたほうがいいだろうということで、1.4からの大きな変更点を列挙。

  • jQuery1.5時代
    • Ajax モジュールの大幅な書き直し
    • コールバック管理ユーティリティーDeferred オブジェクトの導入
  • jQuery1.6時代
    • .prop()導入と.attr() の変更
    • deferred.always()の導入
  • jQuery1.7時代
    • on()と.off()の導入によりbind、live、delegateがいらない子に
  • jQuery1.8時代
    • CSS のプレフィックスを自動化
  • jQuery1.9時代
    • CSS3 のセレクタのサポート
  • jQuery1.10時代 <- イマココ
    • とくになし

ざっと列挙してみたところで大きく3種類とその他にわけれられることが判明。

一番大きなインパクト.on()と.off()の導入

たぶんここが一番でかい。
1.4をなんとなくで使ってた人が一番戸惑うポイントであり、メンテしてない古いjQueryライブラリが近いうちに動かなくなるかもしれないズボラ開発者泣かせの変更点。

カンタンに言えば、いままでbindだったら

とか、この省略形である

という感じでつかっていたものを、

こんな感じで.onをつかってねということ。

細かい説明をしだすとイベントバブリングとか動的追加とか説明しなきゃいけないのでざっくりいうと、「どのオブジェクトが持っている、どんなオブジェクトに対して、どういうイベント」を設定するのかを明確にしたという感じでしょうか。

ほ かにも同様のことをするものとしてlive、delegateがあるけど、いろいろわかりずらくなっちゃったので統一して.onをつかってねという空気で す。ちなみにliveは1.9で廃止されてbindもdelegateも今後はどうなるかあやしいところだから、いまからなにかつくるなら.on()で実装すべし。

より使いやすくなったAjax モジュール

これは.onと.offの追加のような、既存のものにインパクトを及ぼすような変更ではなく、既存のAjaxの仕組みをより使いやすくしたナイス改訂です。

これもカンタンに説明すると、いままでは

こんな形でAjaxの処理を書いていたと思います。.post()や.get()も同様です。

しかし変更後の Ajaxでは、戻り値にコールバック管理ユーティリティーであるDeferred オブジェクトを含めた便利オブジェクトを返却するようになったので、メソッドチェーンが利用できるようになったりして、イベント周りの処理がよりわかりや すく書けるようになりました。

具体的にはこんな感じ

成功時、失敗時のコードをパラメータに指定せずにメソッドチェーンで記述します。
戻り値を利用してこんな書き方もできます。

戻り値の便利機能付きクラスの関数は、

  • done() : 成功時の処理
  • fail() : 失敗時の処理
  • always() : どちらでも実行される処理

という具合です。わかりやすい。

さ らにこれだけではなく、コールバック管理ユーティリティーDeferred オブジェクトが追加されたので、非同期処理に順序を持たせたキューイングや待ち合わせがカンタンにできるようになってます。
たとえば複数の非同期処理を待 ち合わせてゴニョゴニョしたい場合なんかは.when()をつかえばこんな感じで実装することもできます。

地味にうれしいCSSサポートの強化

正直地味っちゃー地味。だけどCSS3のセレクタがつかえるのはハカドリマス。新しくつかえるようになっているのはこのへんらしい。ためしてないけど。

  • :nth-last-child
  • :nth-of-type
  • :nth-last-of-type
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :target
  • :root
  • :lang

そ してベンダープレフィックスを自動でつけてくれる補完機能がすばらしい。そもそもベンダープレフィックスで対応しなきゃいけない状況自体がどうなんだと か、いつまでベンダープレフィックスつけてんだとかいう話もありますが、CSS組んでて面倒くさい部分なのは確かなので有難くつかわせてもらいましょう。

あなたもこれでjQueryマスター!

んなこたーない。
雑過ぎるだろというくらい適当に、かつ強引にまとめ風にしてみました。jQueryは1.10と同時に2.0というIE8以下のサポートを打ち切ったバージョンも出てますし、モバイル対応も進んでいくのでリリースペースが益々上がっていきそうな予感。

ちょっとつかって基本を抑えても定期的に情報収集しないとあっという間についていけなってたりするので自戒をこめてエントリー。