jQuery が jQuery の使用をやめるきっかけとなる理由

シャリサ・スランガ著✏️

jQuery には長く尊敬される歴史がありますが、jQuery v4 ベータ版の新しいリリースは、現代の Web 開発者にとって興味深い機能を備えていません。 jQuery の使用をやめるのに適した時期である理由はいくつかあります。

1. 最新のブラウザとネイティブ JavaScript API は、jQuery が提供するすべての機能をネイティブにサポートするようになり、jQuery が冗長になり、そのユーティリティ関数が廃止されました
2. jQuery を使用すると、Web アプリのバンドル サイズが不必要に増加し、ネイティブ実装と比較してパフォーマンスが低下します
3. jQuery 4 のリリースは、重要な新機能を欠き、存続に重点を置き、ネイティブ JavaScript と最新のフレームワークがそれを超えていることを強調することで、jQuery 4 の陳腐化を裏付けています。
4. jQuery の ES モジュールへの移行と jQuery 4 での最新の手法の採用は、Web 開発者にとって何も新しいものではありません
5. React、Vue、Angular などの最新のフロントエンド フレームワークで jQuery を使用すると、そのアーキテクチャやコーディングの推奨事項と矛盾する可能性があります
6. 最新のフロントエンド フレームワークはポリフィルを使用して運用コードを出力するため、開発者は古いブラウザ用の Web ページを作成するために jQuery API を使用する必要はありません

これらの点をさらに詳しく調査し、利用可能な機能をネイティブ JavaScript Web API と比較することで、jQuery v4 が 10 年にわたる取り組みを終了する理由を掘り下げていきます。

jQuery v4 以前の黄金時代

フロントエンド Web 開発の当初から、開発者は JavaScript を使用して、HTML 要素を動的に更新することでユーザーフレンドリーな Web フロントエンドを実装してきました。

2000 年代初期には、React のような完全な機能を備えたコンポーネントベースの最新のフロントエンド開発ライブラリは存在せず、ブラウザーもアニメーションや高レベルで開発者に優しい、完全な機能を備えた高度な CSS 機能を提供していませんでした。 DOM 操作 API を使用するため、開発者は、Web フロントエンドを構築するために既存の Web API を使用して多くのコード行を記述する必要がありました。さらに、AJAX 通信 API とのブラウザ互換性の問題を解決するコードを記述する必要もありました。

jQuery は、DOM 操作の短縮関数とクロスブラウザー AJAX API を提供することでこれらの問題を解決したため、すべての Web 開発者が Web アプリに jQuery スクリプトを組み込みました。

今日では誰もがコンポーネントベースのフロントエンドフレームワークを推奨しているように、jQuery の使用が衰退する前にピークに達した 2000 年代半ばには、動的 Web フロントエンドを作成するための最も推奨されるアプローチが jQuery でした。

公式 Bootstrap 3.4 Web サイトは、公式 CDN の jQuery を使用しています

2000 年代半ば、jQuery v1 から v3 は次の用途で使用されました。

• スライダー、画像ギャラリーなどを実装するためのすべての一般的な Web サイトの HTML テンプレート
• Internet Explorer をサポートして DOM 操作を実行し、HTTP/AJAX 呼び出しを行う Web アプリ
• モーダル、ドロップダウンなどのコンポーネントを実装するためのブートストラップ
• DOM 操作用のすべての動的 WordPress テンプレートとプラグイン

v4 リリースによる jQuery の状況

jQuery は、最初のベータ リリースを 2024 年 2 月にリリースし、2 番目のベータ リリースを 7 月にリリースしました — コードベースの管理者は、間もなくリリース候補バージョンを作成する予定です。 jQuery の v4 リリースには次の大きな変更点があります:

• IE 10 以前の Web ブラウザー バージョンのサポートを終了
• jQuery.isArray() など、すでに非推奨になっているメソッドを削除しました。
• Trusted Types API で作成された HTML コンテンツの使用をサポート
• AJAX メソッドでのネイティブ JavaScript バイナリ データの使用をサポートします
• jQuery コードベースは、ロールアップ バンドラーを使用して AMD (js モジュールが必要) から ES モジュールに移行されました

jQuery v4 ベータ版のリリースでは、ES モジュールを使用してコードベースを最新化し、IE 10 のサポートを削除してバンドル サイズを削減しようとしています。今後の jQuery v4 リリースの詳細については、この公式ブログ投稿から読むことができます。

jQuery v4 の崩壊が確認される理由

jQuery v4 ベータ版のリリースは、確かに jQuery への注目をやめる原因にはなりませんが、v4 リリースを通じて示される成長と将来は、現代の Web テクノロジーにおける jQuery の没落を裏付けています。これは、ブラウザ標準が、開発者の生産性を重視した高レベルの DOM 操作機能と、開発者が JavaScript を使用せずに動的スタイルを実装できるようにする CSS の高度な機能を提供し始めたときに、ゆっくりと始まりました。

jQuery v1 から v3 には、ブラウザーがネイティブに提供していないクロスブラウザー開発者向けの機能が実装されていたことは間違いありません。たとえば、jQuery の Sizzle セレクター エンジンは、ブラウザーが document.querySelectorAll() を実装する前に、開発者が DOM 要素をクエリするのに役立ちました。さらに、組み込み AJAX API のブラウザ互換性の問題により、$.ajax() は以前の開発者による fetch() でした。

古いネイティブ Web API の代わりに jQuery を使用することを推奨する古い StackOverflow の回答

jQuery v2 から v3 の期間中に、HTML、JavaScript、CSS、および Web API が大幅に強化され、jQuery 機能の標準 API が提供されたため、jQuery は時代遅れの選択肢になりました。

jQuery は、v3 での標準 Promise インターフェイスのサポートや重複コードの削除など、標準 API に準拠することで生き残ろうとしましたが、標準のブラウザ機能が現代の開発者の心を掴みました。 jQuery は、機能を備えたものではなく、最新の Web テクノロジーとの関連性を維持するための機能強化を備えた v4 をリリースしました。

jQuery v4 では、Web ブラウザーに 0kb のクライアント側 JavaScript コードがネイティブで付属している機能に対して、27kb の gzip 圧縮されたバンドル増分が提供されます!

jQuery とネイティブ ブラウザー API

いくつかの開発要件について jQuery とネイティブ ブラウザ API コードを並べて比較し、最新の Web API が jQuery をどのように廃止するかを見てみましょう。

開始するには、次のように新しい HTML ファイルを作成し、公式 CDN 経由で jQuery v4 ベータ版をリンクします。

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

DOM 要素の選択

最新のフロントエンド ライブラリとフレームワークは、DOM 要素参照にアクセスするための ref 概念を提供しますが、Web 開発者は、特定のフロントエンド フレームワークに依存していない場合、DOM 要素をクエリする必要があることがよくあります。 document.querySelectorAll() が jQuery に似た簡単なネイティブ DOM 選択を実装する方法をご覧ください:

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

結果:

jQuery とネイティブ Web API を使用した CSS クエリによる DOM 要素の選択

jQuery は、特定のセレクターに一致する DOM ノードを遡って検索する最も近い() メソッドを提供します。ネイティブ DOM API も、OOP パターンを使用して同じメソッドを実装します。

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

結果:

jQuery とネイティブ Web API を使用して最も近い DOM 要素を選択する

一部の jQuery 機能には、最新の標準 DOM API と同一の省略表現がありませんが、既存の DOM API メソッドを最新の JavaScript 機能で効果的に使用できます。

たとえば、jQuery は非標準の :contains(text) セレクターをサポートしているため、次のように filter() 配列メソッドを使用して実装する必要があります。

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

結果:

jQuery とネイティブ Web API を使用した特定のテキスト セグメントを含む要素のフィルタリング

querySelectorAll() メソッドは、最新の CSS 擬似クラスの力を利用して、jQuery find() 関数のより優れたネイティブ代替手段を提供します。たとえば、:scope 疑似クラスを使用して、jQuery find() 関数と同様にネイティブ クエリ セレクター呼び出しのスコープを設定できます。

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

結果:

jQuery とネイティブ Web API を使用した DOM 要素セレクターのスコープ

DOM 属性の取得と更新

クラス属性、要素固有の属性、およびカスタム データ属性は、Web アプリの開発中に Web 開発者が頻繁に取得および更新する必要がある一般的な HTML 属性です。

以前は、開発者はネイティブの className プロパティを手動で操作して要素のクラス名を更新する必要があったため、jQuery の addClass()、removeClass()、および toggleClass() の事前開発された関数実装を使用していました。しかし現在、ネイティブ classList オブジェクトは、より優れたクラス属性値処理サポートを実装しています。

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

結果:

jQuery とネイティブ Web API を使用したクラス属性値の更新

一方、getAttribute() および setAttribute() ネイティブ DOM メソッドは、よく知られている jQuery attr() 短縮関数の標準的な置き換えになります。

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

結果:

jQuery とネイティブ Web API を使用した HTML 要素属性の変更と取得

jQuery では、開発者がカスタム データ属性を設定するために attr() 関数を使用することを推奨していますが、次のように組み込みデータセット プロパティを使用して、より生産的なデータ属性の取得/変更を行うことができるようになりました。

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

結果:

jQuery とネイティブ Web API を使用したカスタム データ属性の更新

DOM要素の操作

これまで、ネイティブ DOM 操作 API には開発者の生産性を重視した機能が提供されていなかったため、ほとんどの開発者は DOM 操作に jQuery を使用していました。現在、すべての最新の標準 Web ブラウザーには、生産性の高い高レベルの組み込み DOM 操作サポートが実装されています。

要素の作成と追加は、DOM 操作タスクで最も頻繁に行われる操作です。 jQuery とネイティブ Web API の両方を使用してこれを行う方法は次のとおりです:

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

結果:

jQuery とネイティブ Web API を使用した before() 関数と after() 関数の使用

DOM 要素のアニメーション化

あなたが 10 年以上前に Web アプリを構築した経験豊富な Web 開発者であれば、jQuery fadeIn()、fadeOut()、および animate() 関数が Web アプリをよりインタラクティブにするのにどのように役立ったかをご存知でしょう。これらのアニメーション関数は、よりスムーズなアニメーションを構築するためのアニメーション イージングもサポートしていました。

ネイティブ CSS アニメーション/トランジションと JavaScript Web アニメーション API により、jQuery アニメーション API が廃止されました。標準 Web アニメーション API を使用して fadeIn() を実装する方法は次のとおりです。

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

結果:

jQuery とネイティブ Web API を使用したイベント ハンドラーの追加と削除

jQuery とネイティブ DOM API はどちらも、イベント リスナーをアタッチするための簡潔な方法を提供します。

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

jQuery は、イベント ハンドラーを 1 回トリガーする one() 関数も提供します — 現在では、すべての標準的な Web ブラウザーが同じ目的で Once オプションをサポートしています。

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

Webサービスとの通信

過去のモノリシック Web アプリは、更新されたデータを含む新しいページを取得するためにバックエンド サーバーに HTTP リクエストを頻繁に送信しました — Web アプリは、主要なユーザー アクションごとにページ全体をレンダリングしていました。

その後、開発者は、AJAX 経由で HTML コンテンツをリクエストして Web ページの一部を更新することで、より優れたインタラクティブな Web アプリを作成しました。ブラウザの互換性と組み込み AJAX API の生産性の問題のため、彼らは jQuery を使用して AJAX リクエストを送信しました。

開発者は、jQuery の AJAX 機能の代わりに標準の fetch() 関数を使用できるようになりました。

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

結果:

jQuery とネイティブ Web API を使用した HTTP リクエストの送信

現在、ほとんどの開発者は RESTful API を使用してデータ ソースをプレゼンテーション層から分離しています。 jQuery は、RESTful サービスから JSON データを取得するための生産的な短縮関数を提供しますが、ネイティブ fetch() はより優れた標準的なアプローチを提供します。

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

結果:

jQuery とネイティブ Web API を使用した RESTful Web サービスからの JSON データのリクエスト

ユーティリティ関数

jQuery は、Web 開発者の時間を節約するために、事前に開発されたさまざまなユーティリティ関数を提供します。現在、次の表に示すように、jQuery v4 に存在する事前に開発されたユーティリティ関数のすべてに組み込みの ECMAScript 機能を見つけることができます。

jQuery	Native replacement
`$.each()`	`Array.forEach()`
`$.extend()`	`Object.assign() or the spread operator`
`$.inArray()`	`Array.includes()`
`$.map()`	`Array.map()`
`$.parseHTML()`	`document.implementation.createHTMLDocument()`
`$.isEmptyObject()`	`Object.keys()`
`$.merge()`	`Array.concat()`

$.parseJSON() などの古いユーティリティは、過去の jQuery バージョンですでに非推奨となり、v4 で削除されました。

Vue、React、または Angular で jQuery を使用できますか?

最新のアプリ開発フロントエンド ライブラリが存在しなかった時代、Web 開発者は jQuery を使用していました。彼らは主に、Web ページ全体を更新せずにフロントエンドを動的に更新するために、jQuery の DOM 操作と AJAX 機能を使用しました。現在、最新のフロントエンド フレームワーク/ライブラリの SPA (シングル ページ アプリケーション) 開発技術により、Web 開発者は、昔ながらの AJAX ベースのレンダリング技術を使用せずに、高度にインタラクティブで適切に構造化された軽量の Web アプリを構築できるようになりました。

一般的なフロントエンド ライブラリ/フレームワークと同様に、jQuery を Vue、React、Angular で使用できますが、jQuery をこれらのフロントエンド ライブラリと統合することは、最新のフロントエンド開発エコシステムに何の価値ももたらさないため、推奨されません。

一般的なフロントエンド ライブラリはすべて、コンポーネント内の DOM 要素参照にアクセスするための ref コンセプトを提供しているため、jQuery や document.querySelector() を使用する必要はありません。たとえば、

の DOM 要素参照を取得できます。 Vue では次のようになります:

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

結果:

refs を使用した Vue の DOM 要素参照へのアクセス

次のように Vue で jQuery を使用することは確かに可能ですが、約 10 年前に導入された古い構文を使用する最新の Vue ソースを損ない、最新のフロントエンド ライブラリが使用されるべき意図された方法を壊します。

'jquery' から $ をインポートします。

デフォルトをエクスポート {
 マウントされた() {
   const elm = $('#elm');
   コンソール.ログ(elm);
 }
}
</スクリプト>


 <div>



<p>Vue のような最新のフロントエンド ライブラリでは、手動による DOM 操作がほとんど発生しません。ただし、そのような状況に直面した場合は、ネイティブ Web API を使用することをお勧めします。</p>

<h2>
  
  
  結論
</h2>

<p>jQuery は、DOM 操作と AJAX 技術を使用して Web アプリのフロントエンドを構築するための生産的で開発者に優しいアプローチを導入した、間違いなく優れた JavaScript ライブラリでした。 jQuery は、ブラウザーの互換性の問題と、ネイティブ Web API に開発者向けの機能が欠如していることによって人気を博しました。 W3C と ECMAScript は、新しい Web API と JavaScript 言語機能を導入することでこれらの問題を解決しました。 </p>

<p>Web API の現在の状態では、jQuery が持つすべての機能に対して、より優れた最新の開発者フレンドリーなクラスと関数が提供されているため、現代の Web では jQuery は不要になっています。 </p>

<p>jQuery の最近の v4 ベータ リリースでは、革新ではなくメンテナンスに重点を置いた機能の削除と機能強化によってこれが確認されました。 V4 およびその他の jQuery リリースでは、クロスブラウザーのネイティブ Web API が利用できるため、さらに多くの機能が削除される可能性があります。 </p>
<p>ほとんどのユーザーは最新のブラウザを使用する傾向があるため、次のバージョンでは古いブラウザのサポートが終了する可能性があります。また、現在のネイティブ Web API は安定しており、十分に標準化されているため、jQuery が再び普及することはないと思いますが、jQuery に依存するレガシー Web アプリを扱う開発者は今後も jQuery を使用し、プロジェクトを jQuery v4、v5、および jQuery にアップグレードするでしょう。すぐ。そうは言っても、一般的な Web ブラウザーで簡単に見つけられる開発機能に jQuery を追加して、Web アプリのバンドル サイズを増やしたいと思う人は誰もいません!</p>


<hr>

<h2>
  
  
  LogRocket: コンテキストを理解することで JavaScript エラーをより簡単にデバッグします
</h2>

<p>コードのデバッグは常に面倒な作業です。しかし、間違いを理解すればするほど、修正が容易になります。</p>

<p>LogRocket を使用すると、これらのエラーを新しい独自の方法で理解できます。当社のフロントエンド監視ソリューションは、JavaScript フロントエンドに対するユーザーの関与を追跡し、エラーを引き起こしたユーザーの行動を正確に確認できるようにします。</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173087043468616.jpg" alt="Why jQuery s a good reminder to stop using jQuery"></p>

<p>LogRocket は、コンソール ログ、ページの読み込み時間、スタック トレース、ヘッダー本体を含む遅いネットワーク リクエスト/レスポンス、ブラウザーのメタデータ、カスタム ログを記録します。 JavaScript コードの影響を理解するのがこれまでになく簡単になります!</p>

<p>無料でお試しください。</p>


          </div>

            
        

以上がjQuery が jQuery の使用をやめるきっかけとなる理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript restful json jquery css ajax bootstrap ecmascript html angular Array Object if for while foreach date try Error Filter const continue using class operator Interface Attribute Property Event map console function default dom this promise history animation table web app http WordPress web services

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。