jQuery クラッチを捨てて Vanilla JS を採用する-jsチュートリアル-php.cn

jQuery クラッチを捨てて Vanilla JS を採用する

Patricia Arquette

リリース： 2024-12-05 19:39:10

オリジナル

913 人が閲覧しました

Ditch the jQuery Crutch and Embrace Vanilla JS

jQuery は、DOM 操作や AJAX リクエストなどのタスクを簡素化するフロントエンド開発の頼りになるライブラリでした。ただし、今日の世界では、最新の JavaScript がこれらのタスクをより効率的に処理できるように進化しているため、jQuery は多くの場合不必要です。
より良いパフォーマンス、よりクリーンなコード、将来性のあるスキルを得るために、jQuery を捨てて Vanilla JS を採用する必要がある理由を詳しく見てみましょう。

jQuery が不要になった理由❓

1. Vanilla JS には必要なツールがすべて揃っています
jQuery が最初に人気を博したとき、ネイティブ JavaScript がそれほど強力でなく使いにくいというギャップを埋めました。ただし、最新の JavaScript (ES6 以降) では、jQuery が行っていたことを実現する多くの機能が導入されています。

たとえば、ネイティブ JavaScript には次のものが含まれています。

クエリセレクター: document.querySelector() および document.querySelectorAll()。
イベント処理: addEventListener().
AJAX リクエスト: ネットワークリクエスト用の fetch() API。
アニメーション: CSS トランジション/アニメーションと JavaScript requestAnimationFrame().

今後は、これらの一般的なタスクを処理するために jQuery に依存する必要はありません。

2.パフォーマンスが重要
プロジェクトにライブラリを追加するたびに、ファイルサイズと HTTP リクエストの数が増加し、Web サイトの速度が低下します。 jQuery は、約 90KB の追加コード (圧縮済み) を追加します。これは小さいように思えるかもしれませんが、特にモバイルネットワークでは増加する可能性があります。
最新のブラウザはネイティブ JavaScript 機能をサポートしているため、jQuery のオーバーヘッドは必要ありません。 Vanilla JS に切り替えることで、Web サイトが軽量かつ高速になります。

3.最新のブラウザは必要なものをすべてサポートします
以前は、jQuery はブラウザ間の互換性を確保するのに役立ちました。しかし、2024 年には、最新のブラウザーのほとんどが、querySelector()、fetch()、addEventListener() などの JavaScript 機能をネイティブにサポートします。ブラウザーが定期的に更新されているため、非互換性を修正するための jQuery の「shim」機能は必要なくなりました。これで、ネイティブ JavaScript が主要なブラウザ間で一貫して動作することがわかり、自信を持って使用できるようになりました。

4.長期メンテナンスの改善
jQuery を廃止する最も見落とされている理由の 1 つは、コードベースの長期的なメンテナンスです。 jQuery は短期的にはタスクを簡素化しますが、別の抽象化レイヤーを追加します。プロジェクトが成長するにつれて、依存関係として jQuery を使用すると、特にライブラリに慣れていない新しい開発者にとって、デバッグ時に混乱や困難が生じる可能性があります。

Vanilla JS を使用するということは、言語の基礎に忠実であることを意味し、その上でライブラリを学習する必要のない、よりクリーンで保守しやすいコードにつながります。

jQuery と Vanilla JS: 簡単な比較
ここでは、jQuery と Vanilla JS で発生する可能性のある最も一般的なタスクのいくつかを直接比較します。

1. DOM 操作
jQuery:

$('#my-button').click(function() {
  $(this).hide();
});

ログイン後にコピー

バニラ JS:

document.querySelector('#my-button').addEventListener('click', function() {
  this.style.display = 'none';
});

ログイン後にコピー

理論: jQuery は、イベントリスナーの追加と DOM の操作に伴う複雑さの一部を隠します。ただし、最新の JavaScript では、DOM をより直接的に制御できる querySelector() や addEventListener() などの単純なメソッドにアクセスできます。

2. AJAX リクエスト
jQuery:

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(response) {
    console.log(response);
  }
});

ログイン後にコピー

バニラ JS:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

ログイン後にコピー

理論: jQuery の AJAX メソッドはネットワークリクエストの複雑さを抽象化しますが、fetch() API は現在ブラウザに組み込まれており、より最新かつ強力になっています。また、最新の JavaScript ワークフローの中核である Promise や非同期操作でもより適切に機能します。

3.イベント処理
jQuery:

$('#my-button').on('click', function() {
  alert('Button clicked!');
});

ログイン後にコピー

バニラ JS:

document.querySelector('#my-button').addEventListener('click', function() {
  alert('Button clicked!');
});

ログイン後にコピー

理論: jQuery の .on() メソッドは便利ですが、不要なオーバーヘッドが発生します。ネイティブ JavaScript の addEventListener() は高速なだけでなく、複数のイベントハンドラーを同じ要素にアタッチするなど、より高度な操作を実行できます。

4.アニメーション
jQuery:

$('#my-box').fadeOut();

ログイン後にコピー

バニラ JS:

document.querySelector('#my-box').style.transition = 'opacity 0.5s';
document.querySelector('#my-box').style.opacity = '0';

ログイン後にコピー

理論: jQuery はアニメーションを簡素化しますが、CSS トランジションとアニメーションははるかに優れたパフォーマンスを提供します。これらはブラウザのレンダリングエンジンによって処理されるため、よりスムーズな効果が得られます。 Vanilla JS を使用して CSS アニメーションを制御およびトリガーできるため、懸念事項の分離が改善され、レンダリングが高速化されます。

重要なポイント?
結局のところ、jQuery は過去のゲームチェンジャーでした。しかし、JavaScript と最新のブラウザエコシステムの急速な進歩により、新しいプロジェクトではもはやその必要はありません。 Vanilla JS を採用すると、次のことが可能になります:

コードベースを軽量かつ高速に保ちます。
サイトを長期的に保守しやすくします。
すべての最新フレームワーク (React、Vue、Angular など) に適用できるコア JavaScript に習熟します。

それで、jQuery は本当に必要ですか❓
つまり、いいえ。Vanilla JS は、最新のフロントエンド開発にとって、より優れた、無駄のない、より効率的な選択肢です。オーバーヘッドなしで必要なツールをすべて提供し、Web サイトをスムーズかつ迅速に実行し続けます。 jQuery の時代は終わり、未来、つまり松葉杖なしの JavaScript を受け入れる時が来ました。
このブログが、情報に基づいたプロジェクトの意思決定に役立つことを願っています。

「読んでくれてありがとう、コーディングを続けてください!」❤

以上がjQuery クラッチを捨てて Vanilla JS を採用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。