jQuery、今までありがとう

こんにちは。これまでお世話になったjQueryですが、そろそろ本当に別れを告げる時が来ているかと思います。（巷ではjQueryはオワコン、jQueryは終わった、脱jQueryとも言われていますね）

なぜ必要無くなったのかにはいくつか理由があります。それらについてと、jQueryから移行する先やその方法について書いていきます。

2022/10/4追記
jQueryからVanilla JSに移行する際の手助けになるような情報をまとめた本をzennさんで出しました。ぜひお買い求めください。

【徹底解説】JavaScriptをどこまで学べば良いかの学習ロードマップ＋頻出UIパーツの作り方8選

Web制作の領域を独学する上で「HTML/CSSはやったけど、これから何をどこまで学習したらいいか分からない」という疑問は、多くの方が持っているように思います。技術的に次に学ぶべきはJavaScriptだと思います。しかしこれも「じゃあJavaScriptはどこまでやれば良い

2023/5/22 追記

jQuery3.7.0がリリースされました。開発自体はこれからも継続するという意志表明と捉えても良いでしょう。とはいえ僕がjQueryに対する基本的な態度を変えるほどの出来事ではないかなと考えています。

JavaScriptライブラリ「jQuery 3.7.0」がリリース

　JavaScriptライブラリjQueryの開発チームは、最新バージョンとなる「jQuery 3.7.0」を5月11日（現地時間）にリリースした。

なぜ必要無くなったのか
1. 理由1：JavaScript自体が相当進歩したから
2. 理由2：Web標準に対してjQueryが明確に遅れをとるケースが出てきた
移行先の候補
まとめ

なぜ必要無くなったのか

理由1：JavaScript自体が相当進歩したから

まず、シンプルにJavaScriptがかなり良くなっています。今となってはjQueryでよく使っていた大抵の機能は、JavaScriptにも同等のものが存在しています。例えば要素を取得する方法やクラスを操作する方法などです。

ボタンを押すとメニューが開閉する機能を例にとると、以下のように書くことができます。クラスをつけ外しし、見た目はCSSに任せるイメージです（主題ではないのでCSSは割愛）。

<div id="App">
  <div class="Menu"></div>
  <button class="Button">ボタン</button>
</div>
<script>
  const menu = $(".Menu")
  const button = $(".Button")
  button.on("click", () => {
    menu.toggleClass("MenuIsOpen")
  })
</script>

<div id="App">
  <div class="Menu"></div>
  <button class="Button">ボタン</button>
</div>
<script>
  const menu = document.querySelector(".Menu")
  const button = document.querySelector(".Button")
  button.addEventListener("click", () => {
    menu.classList.toggle("MenuIsOpen")
  })
</script>

もちろん要素の取得は、

const menu = document.getElementsByClassName("Menu")[0]

と書いても構いません（クラス名のドットの有無に注意）。

比較してみても書きぶりもほとんど変わりませんね。わざわざjQueryを持ち出す理由は薄いように思われます。

僕自身が見た目に関してはCSSに一任し、jQueryはクラスを操作するためのものとして使っているため代替が効きやすいというのもあるかもしれません。animateメソッドやfadeInメソッドは基本的に使っていません。

また、昔は異なるブラウザ間では同じJavaScriptコードでも挙動が違うという問題がありました。その問題の解決をjQueryが担っていた側面もあったのです。

しかしこの点も最近では目立って問題になるケースはほとんど出会わないかと思います。ECMAScriptという標準仕様を策定し、多くのブラウザがその標準に従って実装を進めたからです。ES5だとかES6という単語を目にしたことがありませんか？要するにそれです。

さらに言うと、近年は毎年仕様のアップデートが行われておりES2021、ES2022と年で表現するようになっています。

今年も正式にリリースされているようです。

JavaScriptの次の仕様ES2022の新機能まとめ - ICS MEDIA

JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。

そんなわけで、jQueryがかつて担っていた役割の多くは本家JavaScriptに吸収されたと言えそうです。

理由2：Web標準に対してjQueryが明確に遅れをとるケースが出てきた

個人的にはこれがjQueryに別れを告げる時が来たと思う大きな要因です。

少し前に話題になりましたが、最近新しく利用できるようになった:has()という擬似クラスの件です。

Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性

最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持...

jQueryの拡張セレクターである:has()に影響を及ぼし、場合によってはjQueryを使用しているサイトで表示などが壊れる可能性があるようです。

この件自体の影響範囲やその後の動向がどうなるかももちろん注意しなければなりません。しかしそれ以上に、「今後も同様の事案は発生するだろうし、全てが対処されるとは限らない」ということが問題です。

前述の通り、わざわざjQueryを使う理由が薄まっている上に放っておくと壊れるリスクが明確になったとなるとなかなか採用しにくくなったと思っています。「使わなくてもいい」から「使わない方が良い」になりつつあるかもしれません。

移行先の候補

jQueryから移行する先の候補を考えてみます。あくまでWeb制作領域でUIを作るため、という観点で見ていきます。

Vanilla JS

前述の通り、jQueryの主要な記法はJavaScriptで代替が可能です。まずはこちらで置き換えてみるのが良いでしょう。以下に主要な書き換え例を載せておきます。

//id
jQuery: $("#id")
JS    : document.getElementById("id")
 
//class
jQuery: $(".class")
JS    : document.querySelectorAll(".class") 
        もしくは document.getElementsByClassName("class")
//classが単体の場合
jQuery: $(".class")
JS    : document.querySelector(".class") 
        もしくは document.getElementsByClassName("class")[0]
//クラス操作
elementはそれぞれ上記の方法で取得したと仮定します。
jQuery: element.addClass("class")
        element.removeClass("class")
        element.toggleClass("class")
JS    : element.classList.add("class")
        element.classList.remove("class")
        element.classList.toggle("class")

Vue.js

次に考えられるのはVue.jsです。

Vue.js - The Progressive JavaScript Framework | Vue.js

Vue.js - The Progressive JavaScript Framework

jQueryやVanilla JSとはかなり考え方、書き方は異なります。

「ステート」という状態を管理するための変数を用意し、それの値が変化するとUIが対応した状態に変わるという発想です（宣言的UIと呼ばれます）。

jQuery、ないしはJSで例に挙げたものをVue.jsで書くと以下のようになります。

<main class="Main">
  <div id="App">
    <div class="Menu" :class="{ MenuIsOpen: isOpen }"></div>
    <button class="Button" @click="isOpen = !isOpen">ボタン</button>
  </div>
</main>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const Menu = {
    data() {
      return {
        isOpen: false,
      }
    },
  }
  Vue.createApp(Menu).mount("#App")
</script>

isOpenという状態を管理する変数があり、これがtrueだったら.Menuに.MenuIsOpenが付与され、falseなら外れるという形です。

Alpine.js

最後に候補に挙げるのはAlpine.jsです。

Alpine.js

A rugged, minimal framework for composing behavior directly in your markup.

Vue.jsと似た発想・記法でありつつさらに手軽に使えるライブラリ、といったところでしょうか。

仮想DOMを使っていないという大きな違いもありますが、どちらかというとWebアプリケーションの構築時に気にすべき部分でしょう。

コードでいうとVueのようにScriptタグにあれこれ書く必要がなく、対象の要素にx-data属性を付与しそこでステートを定義します。

それ以外はほとんど同じですね。

<main class="Main">
  <div x-data="{ isOpen: false }">
    <div class="Menu" :class="{ MenuIsOpen: isOpen }"></div>
    <button class="Button" @click="isOpen = !isOpen">ボタン</button>
  </div>
</main>
<script src="https://unpkg.com/alpinejs" defer></script>

ちなみに僕はこのAlpine.jsを採用しています。導入の手軽さや、やはり宣言的UIのメリットによりコードの可読性が高いのが個人的に嬉しいポイントです。