JavaScript、jQueryのどちらを学習するべきでしょうか？

Question

JavaScript、jQueryをこれから学ぼうと思っています。
html/cssはほぼ学習済みです、もしわからない個所がでてきても即座に対応できると思います。

JavaScriptもしくはjQuery、どちらから学ぶべきですか？
現状での考えは、だいたいのことをjQueryで簡素化させていくんだろうなという程度です。

身につけるべきものがどちらなのかに論点をあてています。

ちなみに自分は将来的にphpやjavaも同時に扱ったweb開発に手を出したいです。
どちらもほとんどわかりません。
これの次に学習する予定です。

条件分岐などはわかっていますので、問題はその先の構文やコマンドの学習です。
どちらを学べばよいのか、助言をください。

-----追記----------------------------------------------------------
JavaScriptの基本とはどれぐらいできればよいでしょう？
曖昧な質問ですみません。

Answer 1

JavaScriptとjQueryは同格ではありません。
JavaScriptはプログラミング言語で、jQueryはそのライブラリです。
つまり、JavaScriptあってのjQueryなのです。

ですので、JavaScriptをある程度学習してから、jQueryに入るのがいいかと思います。

Answer 2

大変失礼な書き方ですが、
JavaScriptとjQueryのどちら？という質問をされるということは、新生エンジニアさんという事でしょうか。

さて、その前提として、
まずは、今の現状がどうなのか？という所となりますが、

もし、仕事上で「jQuery」使ったら、便利そう、早くできそう、納期間に合いそう、、、という仕事と直結していて、切羽詰まっている事態でしたら、jQueryをザクッと、覚えて、コピペで乗り切るという手があるかと思います（それでソフトウェアとして会社が許すかどうかは上司に聞きましょう、当然私のチームでは許しませんが。）。

ただし、エンジニアとして本当に生きていくなら、
以下をぜひ。

１、もし、JavaScriptとjQueryの違いが、よく分かっていないなら、まずはそれぞれどのような物なのかを学ぶべきです。先輩に聞くもよし、グーグル先生もよし、すでにこの板にもいろいろ書かれていますし。その結果、必然的にどちらを先に学ぶのかは理解できるはずです（先にも書きましたが状況次第では・・・ですが）。

２、もちろんその答えとして時間の余裕があるなら、まずはきちんと、JavaScriptを覚えるべきです。

３、どこまで覚えれば？という質問がありしたが、まずは言語体系について、きちんと学びましょう。これを学んでも何もできないので、本当に面白くないですが・・・。
JavaScriptの悪いところでも、良いところでもある、柔軟性が高いので、なんとなく動く所の影響か？言語体系がぶれぶれなエンジニアが最近非常に多く、汚いプログラムを書くエンジニアが増えている気がします。少なくともGoogle先生では無く、きちんと書籍で学んでください。１言語きちんと学べば、他の言語は比較的簡単にマスターできます。

４、jQueryはあくまでも、誰かがつくった便利ツールでしかありません。この板の他の方の投稿にもありますがいつまで使えるかわかりません。jQueryは、JavaScriptで書けるというか、書かれています。つまり、JavaScriptをきちんとマスターすれば、jQueryと同じ事ができます。もっと言えば、jQueryは無くとも、JavaScriptですべて書けるはずです。

JavaScriptで書けないから、jQueryで！
ではなく、
JavaScriptで書くのはちょっと面倒だから、誰かの作ったjQueryで！
が本質です。面倒で無ければ、自分で作る方が、いつまでも使えます。

という、この私が記載した文章の意味がまずは、わかるようになるのが、最優先かと思います。
その上で再度、熟考して、どちらを学ぶべきか考えてください。

あと、話は戻りますが、どこまで覚えれば・・・
では、GoogleMapと同じ物が作れるまで、、、
なんと定義されたら、途方に暮れますよね。

なので、まずは作りたい物、（仕事上で？）作らなくてはいけないもの、が、作れるように学習するのがよいかと思います。ただ、先にも書いたとおり、言語体系だけは、座学で良いので、きちんと、書籍などで学習してください。
間違いを記載したサイトが（すごく！）多いですので、言語体系の学習には、まちがえてもGoogle先生の検索で解決しないでください。

では、がんばってください。

Comments

[makoto-n]

ありがとうございます。
頑張ってみます。

Answer 3

ちなみに自分は将来的にphpやjavaも同時に扱ったweb開発に手を出したいです。
どちらもほとんどわかりません。
これの次に学習する予定です。

そういうことであればJavaScript中心がいいんじゃないかなぁ、と思います。
jQueryはプログラミングが本職ではないWebデザイナー／コーダーにとっては今後も
当面は手軽にUI実装できる便利なツールとして支持されていくでしょうけど、
本職さんたちの間ではそろそろオワコン...という感じになっているらしいですし、
jQueryにの便利さに慣れてしまって生JavaScript書くのが苦痛になってしまうと
その先のステップに進めなくなってしまう恐れがなくもないと思われますので。。。

あくまでJavaScriptメインでしっかり勉強して、jQueryは息抜きにちょっと触るとかくらいの比率でいいんじゃないでしょうかねー。

あ、ちなみに私は本職じゃない側の人間なので、未だjQueryどまりです(^_^;)

Answer 4

jQuery がオワコンになって久しい・・・とかスレッドが立っていたので・・・
とはいえ、すぐになくなるわけではなく、、、、

① JavaScript を一通り覚える。
② jQuery を覚える。

先にjQuery だとコピペ達人になる可能性があるのでまずは基本を。

Answer 5

好みの問題かもしれませんが、個人的にはjQueryをやりながら分からないJavascriptの構文を覚えていく方がよいですね。動くものを作りながらの方がモチベーションが保てるので。
jQueryで色々と動くものを作るのはとても楽しいと思いますよ。

Answer 6

個人的な意見ですが…

両方ですね。

たまに見かける汚いコードはおそらく…コピペのコードでしょうけど、
jQuery の記法の中に、ピュアなJavaScrpt が混ざっていたりすると、
なんだかなあって…思います。

例えば、こんな感じ。

window.onload = function() {
	$(".className").each(function(){
		if (condition) {
			document.getElementById('id').value='';
		}
	});
};

$(function(){
	$(selector).pluginName();
});

---

JavaScriptの基本とはどれぐらいできればよいでしょう？

やりたいことをとりあえず動くコードで実現できる程度…かな。
可用性・保守性の高いコードを書くのはその次…

Answer 7

JavaScriptとjQueryという単語が出てきたら、
・htmlの内容を書き換えるDOMの知識
・非同期（ajax）通信の知識
を勉強したいという事になると思います。

DOMについては、まずxmlの理解が必要です。
実際に扱うのはhtmlになりますが、htmlの理解はDOMとは関係のない知識（例えばformタグとかaタグのタグ要素ごとの理解）も含まれるため、これを切り分けて学習するためにxmlの知識のみでよいです。

私が数年前に勉強したサイトを貼っておきますが、今もっとわかり易いサイトがあるかも。
http://www6.airnet.ne.jp/manyo/xml/

非同期については、Ajaxを勉強してみてください。
「Ajax」でネット検索できたものをかたっぱしから読み漁るのでもいいですし、
入門書を数冊読むのでも良いです。（下世話ですが、図書館利用すれば買わなくて済みます。）

さて、最後にご質問の回答ですが、
言語やライブラリ（例えばjQuery）の知識を学ぶより、
それらが取り扱う物の仕組みを学習したほうが良いです。

なぜなら、JavaScriptは、なんとなく書いたものが、だいたい思惑通りに動いてくれるので、
人によって存在する千差万別な主義主張が反映されやすく、
jQueryはその主義主張の一種だからです。
実際の現場では、参画するプロジェクトによって書き方がまばらだし、画面ごとにまばらで、
それどころか、同ページ内でも書き方が人によってバラバラです。

それなので、言語を勉強するよりも仕組みを学習したほうが良いというわけです。

Answer 8

どちらか一つしか学んじゃいけない縛りがあるならJavascriptです。
しかし、もし学習時間が惜しいからより末永く使えるほうだけ学びたい等なら
あえて将来無駄になるかも知れないjQueryを推します。
jQueryのほうが簡単にそれらしく動くものが作れますので、学習序盤のモチベーションを保つのが容易です。
またjavascriptを殆ど学習してなくても作れるようなサンプルもたくさん有ります。
少し高度な部分に踏み込むとjQueryのリファレンスだけでは苦しくなりますので、その辺りから始めるのが結局javascriptの学習においても近道じゃないかと思います。
最終的にはjQueryが工夫している様を、jQueryのコードを眺めて読み解いたら、javascriptの理解もより進むと思います。

ただjQueryは将来的にほかのライブラリに圧されて、シェアが小さくなったり消えていく可能性があるので、javascriptを本道に据えるなら、ある程度使えるようになった所で止めてもいいかも知れません。
それにその場合でも別のライブラリやフレームワークに置き換わっているだけだと思うので、jQueryの理解はまったくの無駄にはならない気がします。

Answer 9

JavaScriptの

DOM

• document.querySelector
• document.querySelectorAll
• Node.appendChild
• Element.setAttribute
• Node.removeChild

EventTarget

• addEventListener
• removeEventListener
• dispatchEvent

および、Array,Object,prototypeの取り扱い方法は最低限、使い方を覚えてください。
html、cssを使うのであれば、述べた順番に重要度が高いと感じています。
意味について考えるより、実際コードを書き、どういう動きをするのか、どういう使い方をするのか、体系的に学習しておくべきです。

上記はjQueryと言わず、JavaScriptの他のライブラリでも根幹になる技術です。
同時に正しいJavaScriptリファレンスの場所を覚えるための通過儀礼でもあります。
使い方が分からなければここで質問するのも良いですし、検索に慣れれば、記事を見つけて解決するほうが早くなります。
先に済ませておいて、損はないでしょう。

Comments

[think49]

> Node.appendChild
> Element.setAttribute
> Node.removeChild
これらは全て prototype 上にあるメソッドなのではないでしょうか。"." で繋ぐと静的メソッドのように見えます。
個人的には他にも下記メソッドを習得してほしいところです。
- Document.prototype.createElement
- Document.prototype.createDocumentFragment
- Document.prototype.createTextNode
また、setAttribute を覚えるよりも各要素ノードの属性を参照するプロパティ(ext: HTMLAnchorElement#src, HTMLSelectElement#value, HTMLTab#leSectionElement#rows ...)を覚えた方がよいと考えます。
CharacterData.prototype.data は存在すら知らない人も多い印象ですが、活用すれば楽に書けます。