javascript

いまさら?脱jQueryをめざす

jQueryという有名なJavascriptのライブラリがあります
登場してかなりの年月が経ちますが現在もアップデートされており、恐らく世界一使われているライブラリではないでしょうか?
私もかつては使用していました

便利な反面、現在においてはjQueryを使用する問題点もいくつか存在します
今回はjQueryを使用する上での問題点、脱jQueryへの道筋をご紹介します

jQueryとは

簡単に言うとJavascriptを使うにあたりDOM操作やAjaxなど面倒なことを簡単にできるライブラリです
特にAjaxに関してはブラウザによって動作が違うので、Javascriptで実装すると手間になります

jQueryを使用するメリット

jQueryを使用するメリットは多々あります

セレクタが便利

IDが指定されていればdocument.getElementByIdでDOM取得ができます
複雑な条件で取得するにはループを駆使したり何かと手間がかかります
jQueryを使用すればセレクタによって簡潔に記述することができます
例えば下記はinputのtypeがtextのものをすべて取得する場合です

jQueryを使用しない場合

var text = [];
var inputs = document.getElementsByTagName('input');
for(var i=0 ; i<inputs.length ; i++){
    if(inputs[i].type == 'text') {
        text.push(inputs[i]);
    }
}

jQueryを使用する場合

var text = $('input[type="text"]');

コード量の違いが一目瞭然ですね

Ajax処理が簡潔に記述できる

サーバからデータを取得するなど現在では当たり前のようにJavascriptで通信を行っていますが、jQueryが使われ始めた当初はAjaxに関するコードは複雑でした
InternetExplorerやFireFoxなどブラウザによって使用する関数が違っており、ちょっとした処理をするにもコード量が多く大変でした

そんなAjax関連を簡潔に記述できるというのはjQueryの大きなメリットです

jQueryを使用する問題点

前述したように便利なライブラリですが、現在では問題点もいくつか存在します

  • ファイルサイズが大きい
  • コード量が多くなりプログラムが複雑になりやすい

ファイルサイズが大きい

現時点での最新版3.5.1の場合88kbあります
光回線が普及した昨今ではたいしたファイルサイズではないように思うかもしれません
jQueryだけを使用するのであれば問題ないかもしれませんが、実際のWebサイトは他のライブラリを使用するなど複数のファイルをダウンロードする場合が多いでしょう

ファイルサイズが大きければそれだけWebサイトが表示されるまで時間がかかり、ユーザーに見てもらえなくなる可能性が上がります
また、最近ではスマホの普及もあり回線速度が遅い場合も多々あります
極力ファイルサイズを減らし、レスポンスよくWebサイトを表示するということはユーザー離れを防ぐとともにSEOにも有利に働きます

コード量が多くなりプログラムが複雑になりやすい

この問題点に関してはjQuery固有の問題というよりは以前の開発手法の問題点といえるかもしれません

時代の流れとともにJavascriptの開発手法が大きく変わってきています
以前はコードでゴリゴリにDOMを操作していましたが、最近ではReactVue.jsAngularなどを使用するようになっています
このようなフレームワークを使用すると直接DOMを操作する必要がありません

例えばリストの中身を書き換える場合を考えると、以前はulタグの中身をすべて削除し、ループでliタグを作成しulタグの子要素に指定する、という流れになると思います
一方、Reactなどを使用するとulタグに配列を紐づけ、その配列の要素を操作すると自動的にDOMが書き換えられるという流れになります
しかも変更前と変更後の差分が存在する箇所のみ書き換えるので高速にDOMを書き換えることができます(仮想DOMといいます)

DOMを直接操作する従来の処理ではどうしてもコード量が増えプログラムが複雑になりがちです
複雑になればそれだけバグが発生する確率も上がるので、極力簡潔に記述できるならその方がいいでしょう

jQueryが不要な理由

Javascript標準機能で代替できるようになった

以前はjQueryを使用する主な目的はセレクタとAjax関連でした
最近のJavascriptではいずれも簡潔に記述する方法が用意され、特にjQueryを使用する必要が無くなりました

本当にjQueryは不要なのか?

脱jQuery」というキーワードで検索すればわかりますが、とかく悪役にされがちなjQueryです
なにがなんでもjQueryの使用をやめる必要があるのでしょうか?

個人的にはケースバイケースだと考えています

jQueryに依存している便利なライブラリは依然多数存在します
そういったライブラリを使用していて、かつ代替のライブラリが見つからない、もしくは更新する手間に価値を見出せない場合などは無理にjQueryの使用をやめる必要はないと思います

逆にjQueryが必要な理由

みんながみんな最新技術を使用している(使用できる)訳ではありません
業務システムの世界ではあいかわらずInternetExplorerをサポートしなければならない場合もあります

開発者としてはかなり負担になるので避けたいところではありますが、昔から稼働しているシステムなどどうしてもInternetExplorerを無視できないのが現状です
そういった場面ではまだまだjQueryの価値は高く、必要とされています

脱jQueryへの道

InternetExplorerをサポートしないという前提であればセレクタとAjaxはJavascriptで実現可能です

セレクタ

セレクタはdocument.querySelectorで使用できます

document.querySelector(セレクタ);

Ajax

Ajaxはfetchにより簡潔に記述できます
jQueryのAjax処理に近いかと思います

fetch(URL)
  .then(response => response.json())
  .then(data => console.log(data));