Should you use or learn jQuery in 2020?

使うか使わないか？学ぶか、学ばないか？ jQueryを完全に回避する方法と、jQueryを使い続ける必要がある理由を見てみましょう。

JavaScriptフレームワークとライブラリに関する好みが何であれ、jQueryはJavaScriptエコシステムで大きな役割を果たしてきました。

数年前はずっと人気があり、今ではjQueryのニーズの一部が最新のブラウザーに取って代わられています（幸いなことに！）が、このJavaScriptライブラリは今でもたくさん人の。

そもそもjQueryがそれほど人気になったのはなぜですか？まず、jQueryは、JavaScriptアプリケーションが問題にならない世界で生まれました。 2000年代の初期から中期にかけて、JavaScriptは主に、画像ギャラリーや日付ピッカーなど、ページ内に表示されるスライドショーやその他のウィジェットを強化するために使用されていました。遅すぎずに多くのことを行うのに十分なほど強力ではありませんでした（もちろん、コンピューターも遅かったです）。

jQueryが唯一または最初のライブラリではないことに注意してください。 Mootools、YUI、Dojo Toolkit、Scriptaculous、Prototypeなど、他のものは当時非常に人気がありました。 jQueryは、おそらくそれらの中で最も有名になりました。

当時のブラウザには、相互運用性の問題がたくさんありました。クロスブラウザーの癖や標準化の問題がたくさんありました。jQueryは、抽象化レイヤーを作成し、すべての回避策を処理することで私たちを助けてくれました。

jQueryを使用すると、CSSセレクター構文を使用してDOM要素を選択できます。これは非常にユーザーフレンドリーで、拡張も非常に簡単でした。 JavaScriptアニメーションがシンプルになりました。

また、この用語が非常に人気があったときにAJAX（およびそのブラウザー間の違い）の操作を簡素化するのに役立ち、これによりjQueryの人気も大幅に向上しました。

今日、ブラウザの互換性の問題はあまりありません。セレクターAPIそしてフェッチjQueryの2つの最高の機能をブラウザに標準化しました。

jQueryは確かに議論に満ちたトピックです。 jQueryは過去の遺物であると言う人もいれば、今でも日常的に使用している人もいます。一部の人々はについて書くことに時間を費やしていますjQueryが必要ない理由。

過去数年間で確実に使用量が減少しています。

jQuery trends

今日、JavaScriptの展望は劇的に変化しました。そうは言っても、jQueryがあなたのために何ができるかを知ることはまだ役に立ちます。

そのためにjQueryを使用したものには、標準化されたブラウザーAPIがあります。

DOM要素の選択

jQueryの方法：

$('.button')

これで、SelectorsAPIを使用できます。

document.querySelector('.button')

より多くの要素がある場合：

document.querySelectorAll('.button')

DOMがロードされるのを待ちます

jQueryの方法：

$(document).ready(() => {
	 //...
})

DOMの方法：

document.addEventListener("DOMContentLoaded", () => {
  //...
})

DOM要素からクラスを追加または削除します

jQueryの方法：

el.addClass('big')
el.removeClass('big')
el.toggleClass('big')

DOMの方法：

el.classList.add('big')
el.classList.remove('big')
el.classList.toggle('big')

DOMから要素を削除する

jQueryの方法：

el.remove()

DOMの方法：

el.remove()

（右、変更なし）

DOMの要素の内容を変更する

jQueryの方法：

el.text('Hello')
el.html('Hello')
el.text()
el.html()

DOMの方法：

el.innerHTML = 'Hello'
el.textContent = 'Hello'
el.innerHTML
el.textContent

DOMで親要素を選択する

jQueryの方法：

el.parent()

DOMの方法：

el.parentNode

DOM要素のイベントをリッスンする

jQueryの方法：

el.on('click', (e) => { /* ... */ })

DOMの方法：

el.addEventListener('click', (e) => { /* ... */ })

AJAXリクエスト

jQueryの方法：

$.ajax({
  url: '/api.json',
  type: 'GET'
  success: (data) => {
    console.log(data)
  }
})

現代のJSの方法：

fetch('/api.json')
  .then(response => response.text())
  .then(body => console.log(body))

アニメーション

jQueryアニメーションは、CSSトランジションまたはCSSアニメーションを使用してブラウザーで実行できるようになりました。

ブラウザの癖

Babelを使用してコードをトランスパイルするか、特定のポリフィルを使用します（polyfill.io）

今日はjQueryを使用する必要がありますか？

この記事のタイトルにある質問に答えましょう。 jQueryをまだ知らない場合は、今すぐ学ぶ価値がありますか？

私の意見では、jQueryは、最新のブラウザーのみを対象とする新しいプロジェクトでは使用しないでください。もちろん、プロジェクトが特定の理由でjQueryに依存している場合、またはプラグインやjQueryを必要とするその他のコードを使用しているという理由だけで、jQueryを使用し続けてください。 。

Bootstrapのように、jQueryに依存しているライブラリもあります。また、それとそのプラグインを使用するだけの既製のテンプレートを購入することもできます。

フロントエンド開発者がすべてJavaScriptウィザードではなく、新しい標準よりもjQueryに慣れているチームで作業しているかもしれません。これで仕事が終われば、それは素晴らしいことです。

また、古い標準セットを持つ古いブラウザーをサポートする必要があるため、最新のクールなテクノロジー（ReactやVueなど）を使用する余裕がない場合もあります。この場合でも、jQueryは非常に重要です。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル：


Tech Wiki Online！