WEBデベロッパーを始めたばかりの人によくオススメされるのがjQuery。多くの人はvanilla Javascriptの勉強を始める前にjQueryについて学んでいます。
その主な理由としては、ベテランのデベロッパーたちによる間違った教えのせいでしょう。
jQueryはベテランにとってはシンプルで使いやすいソフトですが、実は初心者にとってはそうではないのです。
jQueryが提供する「簡潔さ」は「シンプルさ」ではない
jQueryは従来のブラウザーで起こっていた数々の問題をことごとく解決してきました。しかし、DOM APIやJavascriptなどが持つ複雑さをまとめることに関してはあまりできていません。
たとえばjQueryで $(‘#id’).click(function(event) {..}) と入力するためには、あなたはまずDOMのノード一覧などのさまざまな要素を理解しなければなりません。
jQueryはDOM APIやJavascriptに精通している人にはわかりやすいというだけで、それは決して初心者向けであるということではないのです。
Vue.jsとは？
Vue.jsはJavascript界隈で誕生したばかりのソフトです。特筆すべきは、何と言っても覚えることが簡潔にまとまっていること。そのシンプルさはデザインに現れています。
ためしに、jQueryとVue.jsの両方を用いて同じ機能を持つ簡単なアプリを作成し、どちらの方が分かりやすいか確かめてみましょう。
jQueryで作った場合
こちらがjQueryで作った場合のコードです。
これがもしシンプルに見えたのなら、あなたは経験豊富なデベロッパーの思考回路で見ています。
それぞれのコードの働きは実に複雑に作用しているのです。
たとえば以下のようなことがあります。
1. $(document).ready(function() { .. }); というコードをjQueryで入力する場合、そこにはDOMのノード一覧をはじめとする4つの知識が必要になります。これらをすべて習得できていないと、上記のコードの意味は理解できません。
2. ビジネスシーンでDOMの要素を用いる場合jQueryの $(‘…’) の構造を用いる必要があります。正しいノードの知識がなければ使えませんが、CSS3などのフィルターで代用したりすることで、機能させることができます。
これらを上手く使いこなすには、DOMのコピーを作成したり、あなたの用いたフィルターに対してどのような事態が発生するか想定しなければなりません。
3. jQueryには1つのパターンしか用いないというのは、1つのレベルでAJAXのすべてを網羅する100個以上もの手段を並列させなければならないことを意味します。果たして初心者にそんなことができるのでしょうか。
次はVue.jsで同じものを作ってみます。
Vue.jsで作った場合
Vue.jsは上記で述べたjQueryの問題点をすべてケアしてくれています。
1. DOMの複雑さに頭を悩ませる必要はありません。Vue.jsのライフサイクルフックは、条件付けや時間指定などを必要な時に簡単に行えるようにできています。
2. 上記のコード表は好みのカウンターのデータとDOMのノードでできています。DOMがメンタルコピーを求めなければ、カウンターのアップデートによる不可解な動作に対応する必要もないのです。
3. APIのあいまいな方法を探したり思い出したりする必要はありません。異なった構造はそれぞれ確立した方法でVue.js設計者のもとに作られていますし、DOMのノードにきちんと対応していることもありコード表を見ただけで理解がしやすくなっています。
Vue.jsから始めよう
jQueryはすでにJavascriptやDOM APIを修めている人には使いやすいソフトですが、初心者向けではありません。
一方で、Vue.jsはデザインが簡潔にまとめられていてとても分かりやすくなっており、DOM APIの難しい部分がとてもうまくまとめられています。初心者は理解をしながら着実にコードを作成することができ、複雑な機能を作成するときも、きっとVue.jsは助けになってくれるでしょう。
今度誰かがあなたにWEBデベロッパー初心者がまず学ぶべきものは何かと尋ねてきたとき、きっとあなたが答えるのはjQueryではないはずです。
この記事は「Vue.js is easier to learn than jQuery」を翻訳・参考にしています。
おすすめ新着記事
おすすめタグ