JQuery を放棄すべきでしょうか?

序文

私はかつて jQuery が大好きでした。正直に言うと、JavaScript を学ぶ前に jQuery を学びました。つまり、これを書くことで、私はある意味 jQuery を裏切っていることになります。

jQuery を使用すべきでない理由についての記事がたくさんあることは承知していますが、ここでは個人的な経験を共有したいと思いました。

jQuery 以外の場合は何を使うのでしょうか?

Web の発展により、新しいテクノロジーが常に新しいテクノロジーによって推進され、古いテクノロジーは消滅していきます。いくつかのプログラミング言語がかつては栄えていたのに、今では消えてしまったのと同じです。 jQuery も例外ではないと思います。かつては素晴らしいプログラミング体験をもたらしてくれた jQuery ですが、そろそろお別れを言う時が来ています。

jQuery を諦める理由は何ですか? Vue のおかげです!私の以前の記事を読んだことがあるなら、私が Vue.js のファンだということはお分かりいただけると思います。 Vue.js は多くのツールを提供しており、jQuery よりもはるかに便利だと言えます。

DOMとイベント

クリック イベントの例を見てみましょう。

フレームワークの初期化を省略したことに注意してください。

Vue SFC (慌てないでください。これは単一ファイルコンポーネントを意味します):

<テンプレート>
    <button @click="handleClick">クリックして、強く押してください</button>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        メソッド: {
            ハンドルクリック() {
                alert('友よ、ボタンをクリックしました');
            }
        }
    }   
</スクリプト>

jQuery で記述すると次のようになります:

<button id="myButton">クリックしてください</button>

<スクリプト>
    $('button#myButton').click({
        alert('今回はjQueryを使用します');
    });
</スクリプト>

Vue.js にはコードが多いと思われるかもしれませんが、それは正しいのですが、間違いでもあります。 Vue.js にはこれ以上のコードはありません。実際、handleClick() { ... } 以外の部分はフレームワークの構造であり、他の動作と共有されています。 Vue.js の方が見た目がきれいで、コードも読みやすいと思います。

まだ疑問が残っているかもしれません。なぜまだ Vue.js を使用しているのでしょうか? それは、鍋がやかんに黒いと言うようなものではないでしょうか?能力があるなら、それを使わないでください!実際には、プレーンな JavaScript を使用してこれを行うことができます。

<button id="myButton">クリックしてください</button>

<スクリプト>
    document.getElementById('myButton').addEventListener('click', function() {
       alert('ネイティブ js からのご挨拶'); 
    });
</スクリプト>

つまり、jQuery は特別なものであるかのように見せかけて、私たちの知らないうちにコードをネイティブ JavaScript に変換するだけです。

DOM 要素の選択に関しては、ネイティブ JavaScript で簡単に行うことができます。

document.getElementById('myButton'); // jQuery => $('#myButton');
document.getElementsByClassName('a'); // jQuery => $('.a');
document.querySelectorAll('.parent .a'); // jQuery => $('.parent .a');

AJAX リクエスト

おそらく、jQuery の最も一般的な用途は AJAX です。
jQuery が $.ajax() を提供し、それぞれ特定の $.post() と $.get() も使用できることは誰もが知っています。これらの API は、AJAX リクエストの送信や結果の取得などに役立ちます。

ネイティブ JavaScript で使用できるメソッドは、XMLHttpRequest と fetch の 2 つです。

XMLHttpRequest も古いアンティークであり、fetch とはまったく同じではありません。

Fetch は XMLHttpRequest よりも新しく、より一般的に使用されており、promise ベースです。

Fetch はデフォルトでは Cookie を送信せず、HTTP ステータス コードが 404 や 500 などのエラー コードを返しても拒否されないため、基本的に .catch() は実行されませんが、response.ok は false になります。

ここでは詳細に比較することはしません。

さらに 2 つのコードを見てみましょう。

jQuery は次のとおりです。

$.ajax({
  メソッド: "POST",
  URL: "http://localhost/api",
  データ: { 名前: "Adnan", 国: "イラン" }
}).done(応答 => console.log(応答))
  .fail(() => console.log('error'));

サンプルコードはjQueryの公式ドキュメントから引用したものです。

フェッチは次のとおりです:

フェッチ（
    'http://localhost/api',
    {
        メソッド: 'POST'
        本文: { 名前: "Adnan", 国: "イラン" }
    }
  ).then(応答 => console.log(応答));

どちらのコードも同じことを行いますが、fetch はどのライブラリにも属していません。

次に示すように、fetch は async/await と組み合わせて使用​​することもできます。

非同期関数 getData() {
    レスポンスを待機してフェッチします('http://localhost/api' {
        メソッド: 'POST'
        本文: { 名前: "Adnan", 国: "イラン" }
    });
    応答を返します。
}

私自身も feth を使用していますか?実はそうではありません。いくつかの理由から、私はそれをあまり信頼していないからです。そこで私は、Promise ベースで非常に信頼性の高い axios というライブラリを使用しています。

上記のコードは、axios を使用して次のように記述されます。

アクシオス({
    メソッド: 'POST'、
    URL: 'http://localhost/api',
    データ: { 名前: "Adnan", 国: "イラン" }
}).then(応答 => console.log(応答))
  .catch(err => console.log(err));

Axios は async/await と組み合わせて使用​​することもできます。

非同期関数 getData() {
    レスポンスを待機します。axios.post('http://localhost/api' {
        名前:「アドナン」
        国:「イラン」
    });
    応答を返します。
}

要約する

私は以前は jQuery が大好きで、プロジェクトを初期化した後、最初に jQuery をインストールしていましたが、今はもう jQuery を使用しません。

他のライブラリやフレームワークの方が jQuery よりも便利かつ簡潔にタスクを実行できるため、jQuery はもう必要ないと思います。

jQuery をベースにしたプラグインは多数あるかもしれませんが、基本的には対応する Vue.js または React.js コンポーネントの代替品があります。

以上がJQueryを捨てるべきかどうかの詳細です。JQueryについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください！