jQueryのスクリプトを少しでも高速に処理する方法

直感的で簡単に扱えるJavascriptのライブラリ「jQuery」ですが、昨今便利なフレームワークの台頭によって存在が危ぶまれています。しかし、直感的な設計で非常に便利なのは変わりません。必要に応じて使い分けていけば今でも十分現役で使える技術なのではないかと筆者は考えています。Vanillaで書くよりもすっきり見えるのもいいですよね。

処理の重さがjQueryを使用する上での懸念点として挙げられますが、これは記述方法によって多少ましにすることができる部分でもありますので、いくつか最適な記述方法をご紹介いたします。

変数を活用する

jQueryで特定の要素を指定するためには、$()の中にClassやIDなどのCSSセレクタを渡しますが、同じ要素に複数の処理を行う場合には何度も同じ要素を検索しないように気を付ける必要があります。その分検索時間を取られるので、処理に時間がかかってしまいます。

const test = $('#id');
//一度変数に要素を代入して変数に対してメソッドを使用する。
test.hide();
test.css('backgroud','#fff');
test.show();
//またはチェーンメソッドを使用する
test.hide().css('backgroud','#fff').show();

変数の定義の仕方で実行速度は変わるのか

javascript2015以降、constやletといった変数定義手法が追加されました。以前よりあるvarとではjavascriptの実行速度に違いがあるのかといった疑問が浮かんでくるかもしれないですが。ChromeやFIrefoxなどではvarかconstかletの定義の違いによる影響はさほど見られないようです。

Safariではvarで変数定義したほうが実行速度が早い結果がでる場合もあったそうです。

Witten by Masa

情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。