fumi blog

今更jQueryを勉強する必要はない3つの理由

目次

  1. はじめに
  2. [前提] なぜこれまでjQueryが採用されてきたか
    1. 1. アニメーションの実装
    2. 2. Ajax通信
    3. 3. DOMへのclass追加 (動的に見た目を変えたいケース)
  3. jQueryをあえて勉強する必要がない理由
    1. CSSの表現力が上がった
    2. ReactやVueでほぼ全てまかなえる
    3. 調べればわかる
  4. まとめ ~では何を勉強するべきなのか~
    1. まずJavaScriptを勉強しよう
    2. React, Vueを勉強しよう

はじめに

プログラミング初心者向けの学習サイトでjQueryの教材が販売され、多くの方が購入されているのを見かけます。
しかし、現役のプログラマー目線だと「なぜ今更jQuery...?」というのが正直な気持ちです。

そこで本記事ではjQueryについて

  1. なぜ今までjQueryが採用されてきたか
  2. なぜ今からあえてjQueryを学ぶ必要がないのか
  3. 代わりに学ぶべきものはなにか

の３点にわけて解説していきます!


[前提] なぜこれまでjQueryが採用されてきたか

まずはこれまでpureなjavascriptではなく、jQueryが採用されてきたケースを３点に分けて解説します


1. アニメーションの実装

jQueryにはanimateという関数が用意されており、pureなjavascriptでは難しいアニメーション付きの動きを比較的簡単に実現することができます
一例として、ページ内リンクなどでよく用いられるスムーススクロールをjQueryで実装した例を載せます

$(function(){
  $('a[href^="#"]').click(function(){
    const speed = 400
    const href= $(this).attr("href")
    const target = $(href == "#" || href == "" ? 'html' : href)
    const position = target.offset().top
    $('body,html').animate({scrollTop:position}, speed, 'swing')
    return false
  });
});


2. Ajax通信

webサイトにおいて、「あるボタンが押された時に、ページを再読み込みさせずにサーバーからデータをとってきたい」というケースはよくあります。（ajax通信と呼ばれるものです。）
これもjQueryを使えば比較的簡単に実装が可能です。以下にサンプルコードを載せます。

javascript  
$(function(){
    $("#button").click(function(event){
      $.ajax({
        type: "GET",
        url: "ajax_test.html",
        dataType : "html"
      })
      // Ajaxリクエストが成功した場合
      .done(function(data){
        $("#result").html(data);
      })
      // Ajaxリクエストが失敗した場合
      .fail(function(XMLHttpRequest, textStatus, errorThrown){
        alert(errorThrown);
      })
    })
  })


3. DOMへのclass追加 (動的に見た目を変えたいケース)

jQueryでは何らかの条件によって、部品の見た目を動的に変えることも容易です。
以下ではボタンをクリックした時に、ボタンの見た目を変える（cssのclassを追加する）方法を記載します。

$('.button').on('click', function () {
    $('.button').addClass('clicked-class');
});


jQueryをあえて勉強する必要がない理由

ではなぜこのように便利なjQueryを勉強する必要が薄れてきているのでしょうか？
一言で言えば「jQueryでできることはすでに現場で導入されている他のもので代替できるようになったから」です。
以下で詳しく解説します。

CSSの表現力が上がった

CSS3以降, 「アニメーション的な挙動はJavaScriptよりもCSSで実装する」のが主流になってきています。
例えば、全章で示した「スムーススクロールの実装」はcssだと今や以下の１行で実装できてしまいます。

css
scroll-behavior: smooth


ReactやVueでほぼ全てまかなえる

今のフロントエンドの現場では、ReactやVueといったフレームワークが採用されているケースがほとんどです。
そして、特に2, 3の用途はReactだとかなり簡単にかけてしまいます。
例の3で挙げた「ボタンをクリックした際に見た目を変える」実装は、Reactだと以下のようにかけます。

<button className={isClicked ? 'clicked-class' : 'default-class'} onClick={() => {isClicked = true} }></button>


また追加でjQueryを入れてしまうと、このReactの動作をjQueryが阻害してしまう可能性が出てきます。したがって追加でjQueryを入れるデメリットはあれど、メリットはないと言えます。

調べればわかる

では既存のプロジェクトに関してはどうでしょうか。jQueryがいまだに使われているプロジェクトは当然存在します。
ただ、jQueryはかなりサンプルコードが豊富なため、ほとんど全ての実装はググれば出てきます。
したがって、jQueryだけをスポットで学ぶメリットはないと言えるでしょう。

まとめ ~では何を勉強するべきなのか~


まずJavaScriptを勉強しよう

jQueryもReactもVueもJavaScriptという言語のフレームワークです（最近ではTypeScriptという言語が主流になりつつありますが、これもJavaScriptの延長線上にあるものです）
JavaScriptのしっかりとした理解はどのような現場でも対応できる地盤になると言えます。

React, Vueを勉強しよう

現在新規のフロントエンドのプロダクトではReactやVueが積極的に採用されており「触ったこともないようでは戦力にならない」と捉えられるケースもあります。
したがって、どちらかは必ず触っておくと良いです。

どんなことでも、勉強したことは無駄にはなりません。
しかし、限られた時間の中で確実に地力をつけるために、効率のよい勉強をしていきましょう。