はじめに☕

“モダン”なJavaScriptと言うと、”React”や”Vue”, “Angular”などを思い浮かべる方が多いと思います。しかし、モダンな潮流に逆らうかのように、本記事ではjQueryをテーマに取り上げます。

※弊社では、WordPressなどのプロダクトでjQueryを利用していますが、基本的に新規開発ではReact + TypeScriptで開発されており、Vueが使用されているプロダクトもあります！

私はフロントエンドチーム所属の新卒一年目です。jQueryには偏見を持っていました（今でも少しはあります…）。特に深い理由があったわけではなく、記事や情報に影響され、既存のコードで「$」が目に入ると、違和感を覚えました。（「$」はjQueryで使われる記法です）

また、担当しているプロジェクトのREADMEに「できる限りjQueryは使わない」と記載したことが、後に自分を苦しめることになりました…。

jQueryとは🧀

いわずもがな、JavaScriptのライブラリでありまして、JavaScriptをより容易に記述できるように設計されたライブラリ¹だそうです。(2006年にリリースされたとのことで、20年弱ほど経った今でも多くのWebサイトで用いられているのは驚きです）

ちなみに、WordPressにはデフォルトでjQueryが組み込まれているそうです。世界中のサイトの2つに1つはWordPressで構築されているなんていうのを聞きますが、WebサイトにはjQueryの存在が不可欠といっても過言ではないようです。

Vanilla JS²とは🍦

素のJavaScriptのことです。恐らくはブラウザに用意されたAPIのみで書いたJSのことだと思います。

ライブラリを読み込んだりする必要がないので、（当たり前ですが）軽量です！

Vanilla JS の弱点🥲

一人で勝手にVanilla JS縛りをしていた私ですが、書いている際にあることに気が付きます。

「読みづらい、分かりづらい」

Vanilla JSを用いた開発で大きなネックとなるのが、恐らく分かりづらさだと個人的には思います。自分の書いたコードが後から読めなくなる現象が、特にこのVanilla JSで多いように感じます。

Reactやその他ライブラリはロジックとUIが分離されて開発できることが多く、Vanilla JSと比較するととてもわかりやすいと思います。

また、Vanilla JSは上記の点に加えて、工数もかかると思います…

実際に、ボタンを押したらその下にある要素が表示・非表示されるという実装の場合、以下のようになります。

条件を分岐していますが、クラス名を付与する、しないのようなtoggleメソッドを用いたらもう少し簡素に書けます。

// ボタン要素を全て取得(querySelectorだと最初の一つしか取れてこない)
const buttons = document.querySelectorAll(".button");

// 取れてきた要素全てに対してイベントリスナーを追加する処理
buttons.forEach((button) => {
  button.addEventListener("click", () => {
    const fruit = button.nextElementSibling;
    const fruitStyle = fruit.style.display;
    fruitStyle = fruitStyle === "none" || "" ? "block" : "none";
  });
});

このようにVanilla JSのみで書くと少々複雑になります。この程度の記述ですと問題ないですが、他のDOM操作が加わったりすれば1つのファイルでかなり煩雑なコードができあがります（※JSDoc³などを活用すればある程度は整理できると思います）

そして、これと全く同じではないですがほとんど同じものをjQueryで記述すると以下のようになります。

$(".button").on("click", function () {
  $(this).next(".fruits").slideToggle();
});

かなりすっきりします。

Vanilla JSでは操作したい全てのDOM要素を一旦取得して、全ての要素一つずつにforeachなどの繰り返し処理で….と書く必要がありますが、jQueryでは上記のコードで(documentの)全てのbuttonクラスを持った要素に対して処理を追加することができます。

このような違いがあります。

また、実際の動きにも多少違いがありまして、先ほどのVanilla JSのコードはこのようになります。

若干カクカクしているのがわかりますでしょうか。

もちろん、displayプロパティではなくて、opacityやmax-heightなどを活用してアニメーションをスムーズにすることもできますが、これがVanilla JS縛りの私を苦しめていた大きな原因の一つでもあります。

スムーズなアニメーションを実装する際にCSSやVanilla JSのみでやろうとすると意外と複雑な記述になってしまい、自分でも最終的にどのようにしてこのアニメーションが動いているのかわからなくなってしまう、といったことに陥ってしまいました。

jQueryはさきほどの短い記述だけでCSSをいじることなく以下のようになります。

このようにjQueryを用いると簡単にリッチ(?)なアニメーションを表現することができます。

開発者ツールで確認すると対象の要素のdisplay:block;, noneが切り替わっているのですが、その前に内部でスムーズになるように色々動いているようです（多分）。※displayプロパティはCSSのtransitionが効かないためです。

敗北😇

ある意味自身の実装力のなさで、諦めてjQueryに手をのぼした流れにはなってしまいましたが、結果的にはライブラリを使用するかどうかについて自身の中で吟味することができ、工数や可読性を意識した開発のきっかけになったのではないかと感じています。

Vanilla JSで書くとパフォーマンスは最大化される可能性がありますが、後の保守・運用において、読むのに苦労し、余計な工数がかかってしまう場合もあると考えます。

結論🎈

制作するものに、jQueryが必須でないのなら導入する必要はないと思います。ただし、多くのWebサイトではまだjQueryを用いているものが多く、これをVanilla JSやReact, Vueなどで置き換えるのは困難な場合もあるかと思います。

ちなみにReactの公式ドキュメントのハンバーガーメニュー開閉にはアニメーションがなかったです。

勝手な考察ですが、やはりReactのみで従来のWebサイトのようなスムーズな動きのアニメーション実装が難しい場合もあるのではないかと思います（そもそもアニメーションが不要と判断している可能性もありますが…）

今後について🚀

今後は、できる限りライブラリを使わない方向で進めていきますが、工数を見積もった結果、Vanilla JSでは厳しい、あるいは複雑化しそうな場合には、他のライブラリや方法を検討し工数を短縮して余分なコストを削減できるようにしていきたいと思います。

※ReactやVueのプロダクトではもちろんそのライブラリ、フレームワークに則って書いております✍🏻

引き続き、JavaScriptの実装力を高めるとともにReactやVue, TypeScriptなども学習し会社やチームに貢献できるよう精進してまいります🙇

引用🥢

1. https://ja.wikipedia.org/wiki/JQuery ↩︎
2. http://vanilla-js.com/
   ↩︎
3. https://ja.wikipedia.org/wiki/JSDoc ↩︎