webデザイナーが使うjavascriptを効率よく勉強する方法の順番を教えてください。

Question

＜前提＞
私はwebデザイナーを目指している学生です。
学校の先生からはこれからwebデザイナーをやっていく人達はjavascriptができた方がいいといわれました。以下現状の習得状況です。
↓
HTML、CSS、javascriptの簡単な記述の仕方（おみくじを作るとか、消費税計算をするとか）、jQueryのカスタマイズを少しだけ勉強してきました。（約３ヶ月間）
今後３ヶ月の習得予定としてはPHP、wordPressを学ぶ予定です。

＜疑問に思う点＞
HPを作っていて、イメージするレイアウトや動きを作っていく時にjQueryで探して、それをカスタマイズしています。しかし、目的の動きやレイアウトにはならず、jQueryの本を見ながら、コードを読み取ってどうにかできないか試行錯誤しています。
うまく行かないときに、このままjQueryの本を使ったり調べたりしていたらイメージするHPが作れるようになるのか疑問に思ってきました。
やはりjavascriptがわからないと、jQueryを元にしたとしてもきちんとカスタマイズすることが難しいのではないかと思っています。

HPの繊細な動きが作れるようになるにはどのようにjQueryやjavascriptを勉強していけばいいのでしょうか？

自分はこうやって高度なHPの動きを作れるようになったなど、どのような順番で勉強すれば効率よくjavascript、jQueryを勉強できるのか知りたいです。

また参考になるサイトや本があれば教えていただけるとありがたいです。
（ちなみに今見ているjQueryの本はjQueryデザイン入門です。javascriptの本は持っていません。たまにサイトで調べる程度です。）

よろしくお願いいたします。

Answer 1

一般的なブラウザ上で「動き」や「レイアウト」をコントロールするには、下記を使います。
0. HTML
0. CSS
0. SVG
0. Canvas API
0. （番外：video要素/Gif画像等）
0. （圏外：Flash/ShockWave/JAVA Applet等）

JavaScriptで動きを実現する際にも、HTMLの要素を追加するとかCSSの数値を変更するとか、上記のものを利用しているに過ぎません。

なので、動きの表現について何を勉強すればよいかというのは上記リストに出てくるものが「どういう表現が可能か」ということでしょう。

---

jQueryについては、現在使わない人が増えている印象です。各ブラウザのJavaScriptの実装に大きな差異があった時代に、その差異を吸収してくれるライブラリには需要がありましたが、今日ではその差異も少なくなっているため「使わない」と決めている人も増えたのでしょう。

jQueryはJavaScriptで書かれています。なのでjQueryに出来てJavaScriptに出来ないことなど有りません。「脱jQuery」で検索すれば、現在使っている記述をjQueryを使わないで書く方法が出てくると思います。
※ 私は特に避ける理由も無いのでjQueryを使うことが多いです。

いずれにせよ、カスタマイズやjQuery利用時にJavaScriptの知識があるほうがコードを無理なく書けるので、JavaScriptを勉強するのは必須です。

---

Webの情報を読む前に、一度本屋で入門書から上級まで何冊か本を買って読むと今後の理解が進みます。とりあえず最初はわからないことのほうが多いと思いますが、そのうち腑に落ちることも多いはずなのでお勧めします。
JavaScript ならとりあえずこれを通読してみてください、少し情報が古いところもありますがお勧めです。

【O'Reilly Japan - JavaScript 第6版】（第7版は来年以降かなぁ）
https://www.oreilly.co.jp/books/9784873115733/

【O'Reilly Japan - 初めてのJavaScript 第3版】
https://www.oreilly.co.jp/books/9784873117836/

【改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛 |本 | 通販 | Amazon】
https://www.amazon.co.jp/dp/477418411X