jQueryの歴史とレガシー

jQuery - これが一番人気です 世界ではJavaScriptライブラリ。 Web 開発コミュニティは 2000 年代後半にこれを作成し、その結果、内部で jQuery を使用するサイト、プラグイン、およびフレームワークの豊富なエコシステムが誕生しました。

しかし近年、Web 開発の主要ツールとしての地位は失われてきています。 jQuery が人気になった理由と時代遅れになった理由、そして最新の Web サイトを作成するために jQuery を使用することが依然として推奨されるのはどのような場合なのかを見てみましょう。

jQuery の簡単な歴史

ジョン・レシグ (ジョン・レシグ) 2005 年にライブラリの最初のバージョンを作成し、 2006年に出版-m、BarCampNYCというイベントにて。 の上 jQuery公式サイト 著者はこう書いています。

jQuery は、「JavaScript はコーディングが楽しくなければならない」というモットーに基づいた Javascript ライブラリです。 jQuery は、一般的な繰り返しのタスクを処理し、不要なマークアップをすべて取り除き、タスクを短く、エレガントで、クリーンにします。

jQuery には XNUMX つの主な利点があります。 XNUMX つ目は、Web ページを操作するための便利な API です。 特に、要素を選択するための強力な方法を提供します。 jQuery では、ID やクラスで選択できるだけでなく、複雑な式を記述することもできます。たとえば、他の要素との関係に基づいて要素を選択することもできます。

// Select every item within the list of people within the contacts element
$('#contacts ul.people li');

時間の経過とともに、選択メカニズムは別のライブラリに進化しました シズル.

このライブラリの XNUMX 番目の利点は、ブラウザ間の違いが抽象化されていることです。 当時、すべてのブラウザで確実に動作するコードを書くのは困難でした。

標準化が欠如しているため、開発者はブラウザとエッジ ケース間の多数の違いを考慮する必要がありました。 を見てみましょう この初期の jQuery ソース コード jQuery.browser を検索します。 以下に一例を示します。

// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
        // Use the handy event callback
        jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );

// If IE is used, use the excellent hack by Matthias Miller
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
} else if ( jQuery.browser == "msie" ) {

        // Only works if you document.write() it
        document.write("<scr" + "ipt id=__ie_init defer=true " + 
                "src=javascript:void(0)></script>");

        // Use the defer script hack
        var script = document.getElementById("__ie_init");
        script.onreadystatechange = function() {
                if ( this.readyState == "complete" )
                        jQuery.ready();
        };

        // Clear from memory
        script = null;

// If Safari  is used
} else if ( jQuery.browser == "safari" ) {
        // Continually check to see if the document.readyState is valid
        jQuery.safariTimer = setInterval(function(){
                // loaded and complete are both valid states
                if ( document.readyState == "loaded" || 
                        document.readyState == "complete" ) {

                        // If either one are found, remove the timer
                        clearInterval( jQuery.safariTimer );
                        jQuery.safariTimer = null;

                        // and execute any waiting functions
                        jQuery.ready();
                }
        }, 10);
}

そして jQuery のおかげで、開発者はこれらすべての落とし穴に関する心配をライブラリを開発するチームの肩に移すことができました。

その後、jQuery により、アニメーションや Ajax などのより複雑なテクノロジの実装が容易になりました。 このライブラリは事実上、Web サイトの標準依存関係となっています。 そして今日、それはインターネットの大きなシェアを占めています。 W3Techs は次のように信じています。 現在、サイトの 74% が jQuery を使用しています.

jQuery 開発の管理もより形式的になりました。 2011年にチームは jQueryボードを作成しました。 そして 2012 年に jQuery Board jQuery Foundation に変換.

2015 年に、jQuery Foundation は Dojo Foundation と合併しました。 JS Foundationを作成するには、その後 Node.js Foundation と統合され、 2019-m 作成する OpenJS財団、その中で jQuery は「」の XNUMX つでした。画期的なプロジェクト"

状況の変化

しかし、近年ではjQuery 人気を失った。 GitHub サイトのフロントエンドからライブラリを削除しました。 ブートストラップ v5 jQueryを取り除くそれは彼のものだから」通常の JavaScript の最大のクライアント依存関係"(現在のサイズは 30 KB、縮小され、圧縮されています)。 Web 開発におけるいくつかの傾向により、必須ツールとしての jQuery の地位が弱まってきています。

ブラウザ

さまざまな理由から、ブラウザの違いや制限はそれほど重要ではなくなりました。 まず、標準化が改善されました。 主要なブラウザ開発者 (Apple、Google、Microsoft、Mozilla) が協力して開発を行っています。 ウェブ標準 内に Web ハイパーテキスト アプリケーション技術ワーキング グループ.
ブラウザーは依然として多くの重要な点で互いに異なりますが、ベンダーは少なくとも、ブラウザーの代わりに共通のデータベースを検索して作成する手段を持っています。 永久戦争 一緒に。 これに応じて、ブラウザ API には新しい機能が追加されました。 例えば、 APIをフェッチ jQuery から Ajax 関数を置き換えることができます。

// jQuery
$.getJSON('https://api.com/songs.json')
    .done(function (songs) {
        console.log(songs);
    })

// native
fetch('https://api.com/songs.json')
    .then(function (response) {
        return response.json();
    })
    .then(function (songs) {
        console.log(songs);
    });

メソッド クエリセレクター и querySelectorAll 重複した jQuery ピッカー:

// jQuery
const fooDivs = $('.foo div');

// native
const fooDivs = document.querySelectorAll('.foo div');

を使用して要素クラスを操作できるようになりました。 クラスリスト:

// jQuery
$('#warning').toggleClass('visible');

// native
document.querySelector('#warning').classList.toggle('visible');

サイト あなたはjQueryを必要としないかもしれません jQuery コードをネイティブ コードに置き換えることができる状況をさらにいくつか示します。 開発者の中には、単に新しい API について知らないという理由で常に jQuery を使い続ける人もいますが、知っているとライブラリを使用する頻度が減ります。

ネイティブ機能を使用すると、ページのパフォーマンスを向上させることができます。 多くの jQueryによるアニメーション効果 今、あなたは実装することができます はるかに効果的 CSSを使用して。

XNUMX 番目の理由は、ブラウザーの更新が以前よりもはるかに高速になったことです。 ほとんどの人が使用します 「エバーグリーン」リニューアル戦略ただし、Apple Safari を除きます。 これらはユーザーの関与なしでバックグラウンドで更新でき、OS の更新とは関係ありません。

これは、ブラウザの新しい機能やバグ修正がより迅速に配布され、開発者はリリースされるまで待つ必要がないことを意味します。 使ってもいいですか 許容レベルに達するでしょう。 jQuery やポリフィルをダウンロードしなくても、新しい機能や API を自信を持って使用できます。

2000 番目の理由は、Internet Explorer が完全に無関係な状態に近づいていることです。 IE は長い間、世界中の Web 開発の悩みの種でした。 そのバグは広範囲に及んでいました。IE は XNUMX 年代に主流であり、常緑の更新戦略を採用していなかったので、古いバージョンが依然として一般的です。

2016 年、Microsoft は IE の廃止を加速しました。 サポートを終了する 11 番目およびそれ以前のバージョンでは、サポートが IE XNUMX に制限されています。そして、Web 開発者は IE の互換性を無視する余裕がますます増えています。

jQuery ですら、IE 8 以下のサポートを停止しました。 バージョン2.0、2013年に出版されました。 また、古いサイトなどでは依然として IE サポートが必要な場合もありますが、そのような状況が発生する頻度はますます低くなります。

新しいフレームワーク

jQuery の出現以来、最新のリーダーを含む多くのフレームワークが作成されてきました。 反応する, 角度の и ヴュー。 これらには、jQuery に比べて XNUMX つの重要な利点があります。

まず、ユーザー インターフェイスをコンポーネントに簡単に分離できるようになります。 フレームワークは、ページのレンダリングと更新を処理するように設計されています。 また、jQuery は通常、更新のみに使用され、最初のページをサーバーに提供するタスクは残ります。

一方、React、Angular、Vue コンポーネントを使用すると、HTML、コード、さらには CSS を緊密に結合できます。 コード ベースを多くの自己完結型関数やクラスに分割するのと同じように、インターフェイスを再利用可能なコンポーネントに分割する機能により、複雑なサイトの構築と保守が容易になります。

XNUMX 番目の利点は、最近のフレームワークが宣言型パラダイムに従っていることです。このパラダイムでは、開発者がインターフェイスがどうあるべきかを記述し、望ましいものを実現するために必要な変更はすべてフレームワークに任せます。 このアプローチは、jQuery コードの特徴である命令型アプローチとは対照的です。

jQuery では、変更を加える手順を明示的に書き留めます。 そして、宣言型フレームワークでは、「このデータによれば、インターフェイスは次のようになります。」と言うことができます。 これにより、バグのないコードの記述がはるかに簡単になります。

開発者は Web サイト開発に新しいアプローチを採用しているため、jQuery の人気は低下しています。

jQuery をいつ使用するか?

そうするとき でなければなりません jQueryを使用しますか?

プロジェクトの複雑さが増す場合は、複雑さを有意義に管理できる別のライブラリまたはフレームワークから始めることをお勧めします。 たとえば、インターフェイスをコンポーネントに分割します。 このようなサイトで jQuery を使用すると、最初は問題ないように見えますが、すぐにどのフラグメントがページのどの部分に影響を与えるかわからないスパゲッティ コードになってしまいます。

私もそのような状況に陥ったことがありますが、何かを変えようとするとき、それは難しい作業のように感じられます。 jQuery セレクターはサーバーによって生成された HTML 構造に依存するため、何も壊れないという保証はありません。

スケールの対極にあるのは、少しのインタラクティブ性や動的コンテンツのみを必要とするシンプルなサイトです。 ネイティブ API を使用してできることは他にもたくさんあるため、このような場合もデフォルトで jQuery を使用するつもりはありません。

たとえもっと強力なものが必要な場合でも、私は特化したライブラリを探します。 アクシオス アヤックスの場合、または Animate.css アニメーション用。 これは、小さな機能のすべての jQuery をロードするよりも簡単です。

jQuery を使用する最大の根拠は、Web サイトのフロントエンドに包括的な機能を提供することだと思います。 さまざまなネイティブ API や特殊なライブラリを学習する代わりに、jQuery ドキュメントを読むだけで、すぐに生産性を高めることができます。

命令型アプローチは拡張性が高くありませんが、他のライブラリの宣言型アプローチよりも学習が簡単です。 明らかに機能が制限されているサイトの場合は、jQuery を使用して落ち着いて作業することをお勧めします。ライブラリは複雑なアセンブリやコンパイルを必要としません。

さらに、サイトが時間の経過とともに複雑にならないという確信があり、jQuery よりも多くのコードを記述する必要があるネイティブ機能を気にしない場合には、jQuery が適しています。

古いバージョンの IE をサポートする必要がある場合は、このライブラリを使用することもできます。 そうすれば、IE が最も人気のあるブラウザだった時代と同じように、jQuery が機能します。

Prospection

jQuery がすぐになくなるわけではありません。 彼女 活発に開発中であり、ネイティブ メソッドが利用可能な場合でも、多くの開発者はその API を使用することを好みます。 このライブラリは、全世代の開発者があらゆるブラウザで動作する Web サイトを作成するのに役立ちました。 jQuery は多くの点で新しいライブラリ、フレームワーク、パラダイムに置き換えられてきましたが、最新の Web の作成において非常に前向きな役割を果たしてきました。

jQuery の機能が大幅に変更されない限り、ライブラリの使用量は今後数年間でゆっくりと、しかし確実に減少し続ける可能性があります。 新しい Web サイトは最初から最新のフレームワークを使用して構築される傾向があり、jQuery の適切な使用例はますます稀になってきています。

Web 開発ツールが時代遅れになる速度を気に入らない人もいますが、私にとってはそれが急速な進歩の証拠です。 jQuery のおかげで、多くのことがより良くできるようになりました。 彼女の後継者についても同様です。

出所： habr.com