非jQuery環境での構築｜JavaScript使用制限とページスピード対応

「外部JavaScriptの限定化」の記事で触れた通り、外部JavaScriptの使用を限定することは今後のWebサイト制作において重要になってくると考えています。

弊社でも長くjQueryというJavaScriptライブラリを使用していますが、実際に使っている機能はそのうちの一部です。PageSpeed Insights対応をしていると外部JavaScript読み込みによる減点は気になるところでした。という訳でこの機会にjQueryを使用しない方向を模索していこうと考えました。

ただ、jQueryには「slick.min.js」といった画像スライダーをはじめ、便利なJavaScriptライブラリが多数あります。これらを全て新規開発することはコスト的にも現実的ではないため、必要最低限の使用に限定化していこうと考えています。

jQueryとは？

jQueryとは2006年1月に開催されたBarCamp NYC でリリースされたJavaScriptライブラリです。容易な記述でJavaScriptが扱えるようになるため、非常に多くのサイトで使用されている実感があります。弊社でも当初より使用し続けております。

jQueryの最新版は2023年8月28日現在3.7.1です。jQueryプラグインは本体のバージョンが最新版では動作しないものもあるため、旧バージョンを使用し続けるケースがあります。Wordpressもそうですが、プラグイン依存のために旧バージョンを使用し続けることはセキュリティ上リスクを伴います。

jQuery以外のライブラリ使用について

jQuery以外のJavaScriptライブラリを使用することも結局はセキュリティリスクを抱えることになるのであまり変わらないのかなと考えます。JavaScriptライブラリ自体の使用を限定化することが必要に感じております。

非jQuery環境での構築

弊社が主に使用するJavaScriptはほとんどが同一です。下記については多くのサイトで使用している機能です。

• PCとスマートフォンの切り替え
• ボタンクリックによるメニュー表示
• 画像遅延読み込み
• ページスクロール

あとはサイトごとに個別で使用していますが、最低限上記については非jQueryとしておけばjQueryの使用を抑えることができます。トップページで画像スライダーを使用するケースはあるのですが、この場合はトップページのみjQueryを使用することで必要最低限とすることが可能です。
（※弊社コーポレートサイトは引き続きjQueryを使用します）

なお、非jQueryをはじめJavaScriptライブラリの使用をやめたことでページスピードの改善にも繋がりました。