2016)やReactやAngularJSなどのフレームワークの普及により脱jQueryの動きが見られ始めました。2016年はさらに脱jQueryの動きが加速するのではないかと見ています。10)のサポート終了が挙げられます。そんな訳でjQueryは便利ですが、特に使う必要もなくなってきているのが現状です。今回紹介するjQueryに頼りがちな処理をJSで書けるようにさえなれば、脱jQueryはすぐにでもできるのではないかと思っています。はじめに脱jQueryに関して以下のような記事が年末に投稿されました。アシアルブログ特にMOONGIFTさんの記事で紹介されているoneuijs/You-Dont-Need-jQueryはよくまとまっていて大変重宝します。日々内容のアップデートもされているようです。今回自分の記事では、You-Dont-Need-jQueryではまだ紹介されていなくて、かつよくjQueryで実装したくなる処理を、jQueryを使わずにどのように書くか紹介していきたいと思います。on/off(カスタムイベント)deferred(脱コールバック地獄)animate(アニメーション)css(スタイル)ajax(非同期)jQuery.ajax()メソッドは、非同期なHTTP通信を実装するためのメソッドで、jQueryで最も利用されるメソッドの一つです。以下はjQuery.ajax()メソッドを使ってgetリクエストを書いた例です。1.8以降で推奨されている.done()メソッドと.fail()メソッドを使った書き方です。Message});jQueryでの実装例Nativeで書くJavaScriptにはXMLHttpRequestというオブジェクトが用意されています。ご存知の方も多いと思いますが、昔ながらの書き方です。IE6ではこのXMLHttpRequestオブジェクトが使えず、ActiveXObjectオブジェクトというものを使うように、わざわざ書き分けが必要でした。この煩わしさを回避したいがために、jQuery.ajax()メソッドが普及したのだと思います。APIは、上記のXMLHttpRequestオブジェクトよりも取っ付きやすく、さらに高機能化が図られています。jQuery.ajax()メソッドのようにすっきり書くことができます。ブラウザでの実装がそこまで進んでいないので、polyfillとの併用が必須となります。APIのpolyfillは以下となります。polyfill.SuperAgentで書くbrowserifyやwebpackを使って開発する場合は、Ajax専用の軽量ライブラリであるSuperAgentが使えます。GitHubのスター数も6,000を超える程人気のライブラリとなっています。シンプルに書けて、とても扱いやすいライブラリです。});SuperAgentでの実装例each(ループ).each()メソッドはループ処理を書く時によく使うjQueryのメソッドでしょう。マッチしたそれぞれの要素に対して、引数に指定した関数を実行するためのメソッドです。以下は.each()メソッドを使って、配列の繰り返し処理を書いた例です。c});jQueryでの実装例Native(forEach()メソッド)で書くES5でforEach()メソッドが策定されました。forEach()メソッドを使うと、引数のセットの仕方に違いがありますが、.each()メソッドとほぼ同じように書くことができます。残念なことにforEachは「遅い」という話もあります。使う時は注意が必要です。]});Native(.forEach())での実装例extend(オブジェクトのマージ)jQuery.extend()メソッドは、複数のオブジェクトをマージする時に使うメソッドです。jQueryプラグインを書く時にオプションのデフォルト値とユーザーが定義した値をマージする時によく使ったりしますね。以下はjQuery.extend()メソッドを使って、複数のオブジェクトをマージする処理を書いた例です。}jQueryでの実装例Native(Object.assign()メソッド)で書くES2015でObject.assign()メソッドが策定されました。このObject.assign()メソッドを使うと、jQuery.extend()メソッドとほぼ同じ書き方で書くことができます。Object.assign())での実装例Object.assign()メソッドのpolyfillは以下となります。on/off(カスタムイベント)jQueryは、この.trigger()メソッドと.on()/.off()メソッドを使うことによって簡単にカスタムイベントを実装できるようになっています。これがかなり良くできていて、手軽に扱えるところが魅力です。以下は.trigger()メソッドと.on()/.off()メソッドを使って、カスタムイベントを書いた例です。イベント発火$elm.trigger("submit");jQueryでの実装例Nativeで書くjQueryの.trigger()メソッドは、.dispatchEvent()メソッドで代替可能です。Eventオブジェクトでイベントを作り、.dispatchEvent()メソッドにセットすることで、イベントを発火させることができます。イベントのバインドは.addEventLister()メソッド、リスナーの削除は.removeEventListener()メソッドで行います。この2つのメソッドは、IE8以前のバージョンでは対応していませんでしたが、IE8のサポート終了により今後は気にせず使えるようになります。jQueryと比べると、若干実装に癖があります。Event("submit"));Nativeでの実装例Node.jsのEventEmitterで書くbrowserifyやwebpackなどを使って開発する場合は、Node.jsのEventsモジュールのEventEmitterオブジェクトが使えます。使うまでの準備が若干煩わしいですが、使い勝手はjQueryに近くて、実装もしやすいと思います。イベント発火event.emit("submit");Node.js(EventEmitter)での実装例Deferred(脱コールバック地獄)jQuery.Deferredオブジェクトは、非同期処理をコールバック関数を使わずに書くためのオブジェクトです。非同期処理と非同期処理後の処理を別々に分けて書けるようになり、コールバック地獄に陥るのを防いでくれたり、コード全体の見通しを良くしてくれたりするので、大変重宝します。以下はjQuery.Deferredを使って非同期処理を書いた例です。rejected});jQueryでの実装例Native(ES2015のPromise)で書くES2015で待望のPromiseオブジェクトが策定されました。このPromiseオブジェクトを使うと、jQuery.Deferredとほぼ同じように書くことができます。インスタンス化する時の書き方に若干違いがあります。Promise)での実装例Promiseに関しては、以下のサイトがとても参考になります。Promiseの本animate(アニメーション)気軽にアニメーションを実装できる.animate()メソッドも、jQueryでよく使うメソッドでしょう。以下は.animate()メソッドを使って要素をアニメーションをつけてだんだん透明にしていく処理を書いた例です。APIですが、かなり高機能で自分は機能を把握しきれていませんが、一応代替が効きそうなので紹介します。jQueryの.animate()メソッドと基本スタイルは同じように書けますが、こちらでは.animate()メソッドにセットできるのは、配列かnullのみで、しかも配列には複数のkeyframeが必要のようです。APIのpolyfillは以下となります。APIcss(スタイル).css()メソッドは、jQuery史上最も使われているメソッドと言っても過言じゃないくらいよく使われているメソッドじゃないでしょうか。説明はいらないと思います。以下は.css()メソッドを使って要素のスタイルを変更する処理を書いた例です。strings)で書くJavaScriptではstyleプロパティでstyle属性に値をセットすることができますが、jQueryのcss()メソッドのように一度に複数の指定ができません。Stringsを使った書き方をオススメします。以下のように、JavaScriptのsetAttribute()メソッドを使って、style属性の値をバッククォートで囲むことで、改行がそのまま認識され、jQueryのcss()メソッドと同じような感覚で書くことができるようになります。した方法は、ブラウザによって動いたり動かなかったりするものもあるため注意が必要です。それぞれのブラウザごとの実装状況については以下でお確かめください。etcそれから、requireして読み込んで使うようなものは、BrowserifyやWebpackなどを使ってブラウザで使えるようにしてください。bundlerES2015のものもブラウザで使えるようにするためにbabelでのコンパイルが必要です。JavaScriptそれからそれぞれの仕様については詳しく紹介できなかったので、記事内のリンク先のページにて確認していただければと思います。まとめ脱jQueryを促すような記事を書きましたが、個人的にはjQueryプラグインを書いたりもしているので、jQueryへの思い入れは意外と強かったりします。最近では、だいぶjQueryを使う機会は減ってきていますし、今後はさらにそうなっていくのかなと思っています。今回の記事で紹介したように代替が可能になってきていますし、旧IEのサポートも終了しましたし、jQueryを使う理由がなくなってきているのは確かです。自分は元々はprototype.js派で、jQueryを使い始めたのは2011年くらいでちょっと遅かったかもしれません。prototypeからjQueryに乗り換える時は結構大変だったのを覚えています。今は何不自由なく使えるようになっていますが、まだまだ理解していない部分も多々あるんだろうなと思っています。そんな状況で残念ではありますが、やはり使用頻度が減っていくはやむをえないですかね。betaがリリースされたりしました。面白いことをしてくれたらいいいですね。その辺はしっかりと見守っていこうと思っています。maechabinホーム目次トップ。