#なぜjQueryの未来について議論するのですか?この記事の上のビデオをお見逃しなく!

jQueryはまだフロントエンドのwebロジックの大部分を実行しているので! これは、トップのwebページの約70%と全体のweb(ソース)の20%に電力を供給します。 それは巨大です!しかし、これはその未来に関する質問を見知らぬ人にします。

しかし、これはその未来に関する質問をします。

jQueryには問題があります。

jQueryには問題があります。 それはどこにでもあり、それは本当に将来の証拠ではありません。 それは2006年に戻ってリリースされたとき、それは素晴らしいツールでしたが、それは一度に戻って修正されたコアの問題はもう問題ではありません。 代わりに、jQueryを使用すると、より多くの問題が発生する可能性があります。

これを理解するために、jQueryが2006年に修正した問題を考えてみましょう。

JavaScriptは壊れていて、ブラウザはそれを非常に異なって実装していました

これはjQueryが助けた主要なものの一つでした。 突然、DOMを操作できる使いやすいAPIがありました。 そして、それよりもさらに優れています:同じAPIは、すべての主要なブラウザで働いていました!

$('h1').text('Awesome!')

JavaScriptとweb全体は成熟していませんでした

jQueryは、開発者がweb上で単に”より多くのことを行う”ことを可能にしました。 十分に文書化されたAPIを使用できるため、魅力的なユーザーインターフェイス(JavaScriptが必要)を作成する方が簡単でした。 要素のアニメーション化、コンテンツの追加と削除、スタイルの変更、アイテムの並べ替えは、vanilla JavaScriptよりも大幅に簡単でした。 jQueryはまた、バックグラウンドリクエストの送信も簡単にした強力でアクセス可能なAjax APIを追加しました。 これは、ユーザーの操作ごとに新しいページをロードする必要がなく、サーバー側のデータを舞台裏でロードまたは操作できるため、JavaScript駆動型Uiのコア構成要素です。

    Vueを学びます。js

    Vue.jsは、反応性の高いwebページを簡単に構築できます。 素敵な構文+強力な機能-それはあなたが得ることができる最悪のパッケージではありません。

    Reactを学ぶ

    ReactはVueの素晴らしい代替手段です。js”を発表した。 それは非常に人気があり、あなたは絶対にそれを見逃すべきではありません!

    角度を学ぶ

    角度はそれをすべて始めました! Reactの母であるフレームワークを学びましょう。jsとVue!

#何が変更されましたか?

jQueryによって修正された問題はもう問題ではありません。

JavaScriptが成熟し、ブラウザの互換性が向上しました。 私たちは何千ものパッケージとツールを備えた活気のあるフロントエンド開発エコシステムを手に入れました。これは、すべてが素晴らしいことを意味するものではありませんが、jQueryによって修正されたコアの問題は実際にはもう存在しません。

代わりに、jQueryは今、バニラのJavaScriptやAngularやReactのようなフレームワークに切り替えたことのない経験の少ないweb開発者によって頻繁に使用されるツールです。そして、それはところで理解することが重要です:私たちはjQueryとAngularについて話しているだけではありません。 バニラJavaScriptは本当の選択肢です!

DOMトラバーサルと操作は2006年にはより困難でしたが、queryselectorのような多くの機能がバニラJavaScriptに組み込まれました。 これらのことは機能し、ブラウザ間でも機能します。

jQueryで基本的に同じことを達成するのではなく、バニラJavaScriptを使用する可能性がある場合は、vanillaオプションを使用する方が明らかに優れています。 あなたは余分なパッケージのダウンロードを保存し、あなたは余分な構文を学ぶ必要はありません。

#それはただのバニラのJavaScriptではありません…

それはただのバニラのJavaScriptではありません。 私たちは単にこれらの日より良い選択肢を得ました。

バニラJavaScriptは明らかにまだその限界を持っています。 JavaScriptを介して実装された多くのロジックで複雑なUIを構築している場合、基本的に何らかのスパゲッティコードを記述する必要がある状況にすぐに終わ DOMの状態を管理するのは結局難しいです。それだけではありません。

HTMLコードの順序を変更する(または新しい要素を導入する)ことを決定した場合、DOMトラバーサルロジックが壊れる状況に定期的に遭遇します。このようなHTMLコードを変更すると、このコードは機能しなくなります。

<div> <h1>What's new?</h1> <p>An interesting discussion over the future of jQuery evolved over the last days.</p></div>

そして、同じことがバニラのJavaScriptトラバーサル技術にも当てはまります。明らかに、上記のシナリオでも動作するコードを書くことができます。 しかし、それは異なる状況下で壊れる可能性があります。 または、操作を計画しているものを安全に選択するための非常に長いトラバーサルメソッドのチェーンになります。 JQueryを介してDOM要素を手動で作成または削除すると、これはより困難になります。要素を動的に追加および削除する必要があるユースケースがあった場合-データを保持するJavaScript配列に基づいて言うとしましょう-jQueryまたはバニラJavaScriptを使 これらの要素を操作したい場合は、そのままにしておきます(クリックリスナーやスタイルを添付するなど)。

#救助へのフレームワーク!

そのための修正があります!

Angular、React(ああ、それは実際にはライブラリです-Reactの人々を許してください)やVueなどのJavaScriptフレームワーク。

これらのフレームワークはすべて、jQuery(およびバニラJavaScript)と比較して1つの基本的な違いがあります:DOMを手動でナビゲートするコードは記述しません。

代わりに宣言的なアプローチを使用します。これはどういう意味ですか?

今回はVueを使用しています。

<div> <h1>What's new?</h1> <div> <p>{{ myText }}</p> </div></div>
new Vue({ el: '#news', data: { myText: 'This never fails to hit its target', },})

ご覧のとおり、Vueは明らかにjQueryとは異なる ところで、ReactとAngularにも同じことが当てはまります。この記事の残りの部分では、例としてVueを使用します-単に構文が非常に優れており、使い始めるのが簡単だからです。 あなたのwebページにvueをインポートし、あなたが行ってもいいです。しかし、AngularとReactも同等のアプローチに従っています。

これらについてもっと知りたいなら、私はあなたのために役立つリソースを得ました:

  • Angular-The Complete Guide
  • React-The Complete Guide
  • Angular vs React vs Vue

もちろん、Vueに深く潜りたい場合に備えて、私もそれに関するリソースを得ました:Vue-The Complete Guide。

これらはすべて、DOM内のコンテンツを表示する場所を単純にマークできるようにすることに焦点を当てています。 あなたはその場所へのパスを記述する必要はありません-フレームワークはあなたのためにそれを把握します!

#しかし、Vueの解決策は長いです!jQueryソリューションをVueソリューションと比較すると、Vueアプローチが(書かれたコード行の点で)少し長いことがはっきりとわかります。しかし、これは非常に簡単な例でした!

しかし、これは非常に簡単な例でした! より複雑な例はすぐにサイズが大きくなり、さらに悪いことに、必要なjQueryコードになると複雑さが増します。 しかし、Vue(または他のフレームワーク)ではありません。

それは一般的なアプローチが非常に異なっているからです。 データ構造、ロジック、およびデータをDOM(つまりテンプレート)に接続する方法を記述するだけであれば、HTMLコードやビジネスロジックがより複雑になったとき

jQueryの場合、それは別のことです。 深くネストされた要素に到達する必要がある場合や、作成される要素をループするなどの複雑なことを行う必要がある場合は、先に見たより複雑な(

これは次のようになります。

:p>

<div> <div>Apples</div> <div>Bananas</div> <div>Milk</div></div>

ネストされた<div>highlightedCSSクラスは、クリックすると任意の要素に追加されます。同じことを達成するVue(およびHTML)スニペットを考えてみましょう:

new Vue({ el: '#output', data: { shoppingList: , },})

ここで必要なコード行はまだありますが、理解、維持、 最後にHTMLコードがどのように見えるかを宣言し、データを記述し、JSコードのselectedv-forv-onv-bind(HTML要素を変更するため)は、ここですべての作業を行っています。 ReactとAngularは一般的に同等の解決策を得ましたが、Reactはディレクティブを使用しません。 それでも、要素を選択して作成するためのすべてのコードを手動で記述することは強制されません。

あなたの(フロントエンド)webアプリが成長し、さらに複雑なUiを構築するにつれて、css()$(...)appendTo()呼び出しの無限の、保守不可能なチェーンにあなたを強制しないような宣言的なアプローチが好きになるでしょう。

#jQueryは少なくとも小さいですか?VUEは明確に異なる構文を提供します-それはあなたのためのDOMアクセスと操作に関する多くの重い持ち上げを行います。それは明らかに価格で来なければならない、そうではありませんか?

それは明らかに価格で来なければなりませんか? jQueryは確かに小さいですよね?

まあ…いいえ。 そうじゃない

2018年3月時点で、jQueryの重さは29kbの縮小とgzipで圧縮されていますが、Vueは30kbの縮小とgzipで圧縮されています。反応と角度はどうですか?

Reactは実際にはReactDOMとReact自体の2つのパッケージで構成されています。 合計すると、約34kbのminified+gzipをダウンロードして実行する必要があります。

Angularは、大きなエンタープライズアプリケーションに特に適した大きなフレームワークであるため、Angularはそれよりも大き このようなタイプのアプリでは、パッケージサイズのためではなく、あなたを救うすべての痛みのためにjQueryに勝つでしょう。

#だから…再びjQueryを使用しないでください?もちろん、今の質問は、常にVue、Angular、またはReactを使用する必要があるかどうかです。 または、jQueryを使用することがまだ理にかなっているユースケースはありますか?一般的に、私はjQueryの時間が終わりに近づいていると信じています。 少なくとも現在の形で。あなたはまだ些細なケースのためにそれを選ぶことができますが、なぜあなたはそれのためにバニラJavaScriptを使用し、余分な30kbs+あなたが取得しなければ とにかくvanilla JSを知っていれば、より良いweb開発者になるでしょう。

jQueryは明らかに多くのレガシー webアプリで多くの使用を見ており、かなりの時間そこにとどまるでしょう。このようなwebアプリで作業する必要がある場合は、おそらく今のところjQueryを回避する方法を見つけることはできず、それを学ぶことはまだ時間の価値があるかもしれません。

人気のあるサードパーティのパッケージの多くは、cssフレームワークであるjQuery-Bootstrapにもまだ依存しています(残念ながら、最新バージョン-4でもそうしています。x)。 そのようなパッケージのために余分な依存関係を追加する必要があるのは面倒なので、私は個人的に常にjQueryがそのパッケージに対して正確に何をす その情報を取得したら、バニラJSや他のフレームワークで機能を再構築し、その後jQueryを正常に取り除くことができます。

コメントを残す

メールアドレスが公開されることはありません。