MAPJP/ENTIPS2016.06.29vol.50WEBメジャーアップデート!高速化したjQuery3.0の特徴B!こんにちは。エンジニアの毛利です。jQuery3.0がリリースされました。2.x系からのメジャーアップデートで、マイナーアップデートにはない大きな変更を伴います。Chrome、Firefox、Safariをはじめとしたモダンブラウザ用の2.x系2つにわかれリリースされていましたが、マイクロソフトはIE8のサポートを2016年1月12日で終了する方針をたてたことにより、jQueryもIE8以下のブラウザをサポートを打ち切りました。よって最新版のjQuery3.0はIE9以降のモダンブラウザのみを対象としています。今回はアップデートによる変更点に関連して大きな影響が懸念されている箇所のポイントと、使われているAPIの変更、修正方法をご紹介します。今までjQueryは後方互換を優先度の高い事項として開発されていました。新しいjQuery3.0は軽量化、高速化をコンセプトにして開発が進められているため処理の高速化が図られている他、軽量化を軸としたバージョンが新たにリリースされています。モバイルのアニメーション描画を改善するための「requestAnimationFrame」がAPIをサポートしているブラウザで利用可能となりました。スリムビルド版のリリース今回のjQuery3.0では通常版の他に、機能を制限し軽量化したスリムビルド版が同時にリリースされています。ajaxやアニメーションエフェクトなどの機能を削減しています。現時点で非推奨となっているAPIも削除されています。CSSのみでアニメーションを制御するときやajaxを使う必要が無い場合などはこちらを利用するとファイルの読み込みサイズを大きく削減できます。変更点の全容は下記サイトから確認できます。※翻訳サイトなので意訳的な部分がありますが、日本語で解釈できます。http://qiita.com/fmy/items/345a264a1cf2e2a73f62変更点で表記されている「破壊的な」変更については自身が書いているコードが該当すると動作しなくなってしまうため、修正が必要です。自身が書いたコード、プラグインなどから動かなくなったコードを自力で探し、置き換えるのは大変です。そこで移行ツールを使います。今回バージョンアップのためにjQueryから移行ツールが用意されています。Migrateを利用することによって、今回変更、廃止となり動かなくなってしまうコード該当箇所をConsole上で出してくれます。変更、廃止があったAPIを復元してくれるため、エラーが起こらず意図している動作を実現しながらデバッグすることができます。使用方法jQuery読み込み記述の直後に書きます。src=&quot;https://code.jquery.com/jquery-migrate-3.0.0.js&quot;&gt;&lt;/script&gt;変更、廃止となりjQuery3.0本体だけでは動かないコード箇所をブラウザのconsole上で表示してくれます。console上に表示されたものを1つずつ確認して、jQuery3.0で適切なコードを置き換えていきます。この過程で引っかかりやすい廃止APIをご紹介します。//廃止コードページが読み込まれた後、イベントを実行するタイプの記述で様々なサンプル紹介などでよくみかけるコードです。このコードの$(window).loadに変更があり、この使い方は廃止となりました。jQuery3.0からはエラーとなります。上記の廃止コードは次のコードに置き換えることができます。//代替コードonを使います。onはさまざまな使い方ができ、任意のイベントをバインドすることができます。ここではロードイベントをバインドする、ということになります。このコードは下記のような使い方もできます。//イベントを複数バインドできるスペース区切りで他のイベントも複数設定することができます。この場合、「ページの読み込みが完了したとき」と「スクロールイベントが発生したとき」に実行されます。//廃止コードこちらもサンプルコードやプラグイン内でよく見かけるbindです。これもonに置き換えることで代替できます。onはbindが機能拡張して置き換わったような扱いとなっています。よって書式を維持しながら単純な置き換えで元の動作が可能です。今まで、CSSでdisplay:noneを指定し、ある要素をクリックしたらshowで表示させる、などといった表示、非表示処理が可能でした。このコードには大きな変更が加えられており、上記の方法では表示非表示を行うことができなくなりました。上記のような方法を実装する場合はdisplay:noneのクラスを作成し、addClassやremoveClass、toggleClassなどでの切り替えで表示、非表示を制御することを推奨しています。これらを多用した古いのプラグインやサンプルコードなどはjQuery3.0ではうまく動かない可能性がありますのでjQuery3.0での利用はなるべく避けたほうがよいでしょう。まとめ手軽かつ直感的に書けるjQueryがメジャーアップデートし、いくつかの変更が加えられました。これに伴い、よく使っていたり、見かけるコードに変更が加えられましたがプラグインなども豊富で便利なjQueryがより軽量化し機能的に使い勝手がよくなっているので積極的にアップデートすることで画面描画や、パフォーマンス改善が見込めるのではないでしょうか。バリデーションツールを使えば、比較的簡単に簡単に移行ができると思います。サイトをよりよくするために、jQuery3.0を導入を検討してみてはいかがでしょうか。3.0リリース候補版が登場。POSTS新着TIPSvol.1012019年ロゴマークをリニューアルしたブランド5選2019年にロゴをリニューアルした企業6選vol.100BOELのスタッフが大切にしていることBOELのスタッフがオフィスでの過ごし方を通じてたいせつにしていることをご紹介します。7選WEB業界でよく使う単語の中でよくあるスペルミスと間違えやすい点をいくつかリストアップします。vol.98ブランディングで動画を活用するメリットと成功のポイント!ブランディング動画を活用するメリットや成功のポイントを事例と合わせて紹介します。幾何学フォントTOP32019年の幾何学書体トップ3をご紹介いたします。一時的な流行ではなく多くのサイトで一般的に見られるようになったWebデザインvol.43動画コーデックをマスターしよう映像データのエンコード、動画メディア配信の基礎からターゲットに合った圧縮方法vol.45すぐに使える!アコーディオンメニューの実装アコーディオンメニューをよりリッチに。日本古来より伝わる色。デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。お問い合わせをするオンライン見積もりフォームさまざまなブランディング事案に対応します。お気軽にご依頼ください。PERMISSION.。