【2020年最新】web制作のjQuery,JavaScriptの勉強方法まとめ【一年半思考錯誤した】

web制作のjQuery,JavaScript学習法を解説しました。
【2020/11/06追記】
web制作に特化したJS教材を出しました。よくあるパーツ7つをjQuery.JavaScriptで実装します。また両方解答コードをつけているため、すぐに実案件でも使用することができます。DOM操作メインです。
note.com/samur...
チャンネル登録はこちら→ / @しょーごログ
■jQuery標準デザイン講座
amzn.to/3c0k5PS
■確かな力が身につくJavaScript「超」入門 第2版
amzn.to/2A8K5vb
■JS-Pro
js-pro.jp/
ブログでも解説しています。
shogo-log.com/...
━━━━━━━━━━━━━━━━━━
★私が公開している鬼レビュー付きコーディング教材★
━━━━━━━━━━━━━━━━━━
デザインカンプよりコーディングできる教材を販売しています。
全6つで【HTML初心者からWordPress実務レベル】まで網羅しています。
更に、現役エンジニアのレビューを各課題2回、無料で受けることが可能です。
✅コーディング教材説明ページ
shogo-log.com/...
✅コーディング教材販売ページ
shogo-log.com/...
■Web制作会社への営業に特化した講座販売中！（制作会社にインタビューしてきました）
note.com/samur...
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
━━━━━━━━━━━━━━━
人気の動画3選
━━━━━━━━━━━━━━━
①web制作フリーランスとして初案件を獲得するまでにやったこと【今ならこうするも解説】
• web制作フリーランスとして初案件を獲得する...
②プログラミング、webデザインに最適なパソコンの選び方【現役エンジニアが解説】
• プログラミング、webデザインに最...
③【2020年】現役エンジニアの語るWordPressのおすすめ勉強法
• 【2020年】現役エンジニアの語るWord...
◉模写コーディング用XDデザインカンプ配布中！
note.com/samur...
◉私のホームページ制作の営業パートナーを募集しています。報酬をお渡ししますので、
副業にどうぞ！詳しくは↓
shogo-log.com/...
【フリーランス、プログラミングで稼ぐ方法まとめ再生リスト↓
• フリーランス、プログラミングで稼ぐまとめ
━━━━━━━━━━━━━━━
しょーごログおすすめ記事！
━━━━━━━━━━━━━━━
①web制作、プログラミングでのモニター導入がおすすめすぎる件【かなり満足】
shogo-log.com/...
②web制作フリーランスになって読んだおすすめの本17冊を紹介！【プログラミング、webマーケティング、webデザイン】
shogo-log.com/...
③Progateから実務までにやるべきこと【Web制作案件までの具体的なロードマップ 】
shogo-log.com/...
■しょーごのプロフィール
大学時代に何もせず終活前に絶望。
その後中国・フィリピン留学に行き、一年で中国最高級のHSK6級、4ヶ月でTOEICは450→840点に。
新卒で銀行に入行するも、すぐに退職。
現在はフリーランスのエンジニアとして毎月50万ほどを稼ぎつつ、転々としています。
◆ブログ◆しょーごログ
shogo-log.com/
■関連する動画
【基礎から学ぶ JavaScript 入門 #1】フロントエンド開発でJavaScriptが必要な理由を解説！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】
• 【基礎から学ぶ JavaScript 入門 ...
プログラミング講座 第３回【JavaScriptの書き方】Akichon/あきちょん
• プログラミング講座 第３回【JavaScri...
-----------------------------------------------------------------------
使用機材
-----------------------------------------------------------------------
■ 編集機材兼仕事道具
MacBookPro16インチ（amzn.to/2Da9JBa）
■ 音声
ZOOM iQ7（amzn.to/2YWhTpd）
■ 自撮り棒
amzn.to/3e5RZDW
#web制作
#プログラミング
#javascript
#jQuery
#マナブ

[@しょーごログ]

web制作のJavaScript、結論現場の生きたコードに触れて慣れていくしかないのですが、今までプラグインで実装してきたものをスクラッチで代替することもめちゃトレーニングになります。ドロワー、モーダル、スクロールアニメーション、さまざまありますが、簡単なプラグインからスクラッチで始めてみるといいです。プラグインは多くなるとリクエスト数が増えてページが重くなったりもするので、自分でかけるのがベストですしね！😭

[@しょーごログ]

web制作をされる方は、最初jQueryから初めてしっかり理解できてからJSに進むといいと思います。 流行りのフレームワークはweb制作に置いて遭遇する確率はとても低いので、最優先のjQueryをまずは使えるようにしましょう！

[@中西龍一-y4f]

とっても丁寧で、分かりやすかったです！ ありがとうございます！

[@しょーごログ]

そう言っていただけて嬉しいです！ありがとうございます！

[@まい-k8u]

まさに探していた内容でした！ Web制作で収入を得るために勉強していますがJavaScriptの勉強をどのレベルまですればいいのか悩んでいました。 有益情報ありがとうございます！

[@sawanii]

大変参考になりました😊！ やってほしいことですが、 WordPressのvar_dump()の読み解き方の解説をしていただきたいです🙇‍♂️

[@OTTAworld]

いつも動画を参考にさせて頂いております。 HTML/CSSの初学習を終え、デイトラを始めようと思うのですが、この動画で紹介されている教材も併せて取り組むべきなのか、それともデイトラで網羅されているのでしょうか！？

[@しょーごログ]

最初はHTMLなどからしっかり抑えていくのがいいと思います。デイトラでもJSやりますが、私も教材を出しておりますので、ぜひみてみてください。 note.com/samuraibrass/n/nf886e6c694b7

[@gonta17]

progateでjavascrypt勉強中です。戻り値を返すとか意味わからんくてここにたどり着きました

[@しょーごログ]

returnと引数はわからないのがデフォですねｗ

[@百さん-x6v]

jspro はコンテンツが雑すぎてサービス終了してますよ。これは案件ですか？

[@シュワルベ-i7r]

今JavaScriptの勉強をしているんですが、JavaScriptの知識があってはじめてjQueryが使えるって認識は違うんですね。jQueryの勉強に切り替えてみます😂

[@しょーごログ]

私は逆でしたね。jQueryを覚えるコストってそんなにないので（そこで身につけたプログラムの処理の流れはJSに活かせますし、むしろ処理の流れを覚えるのが大半）jQueryすらすら書けるようになったら、JSではどう書くのかを練習するといいです。kzbin.info/www/bejne/sKnVhKSoipmdack

[@佐賢-c8d]

JS-proについてですがjs特化のProgateと説明があったので質問です。 Progateの有料コースに登録しているのですが、JS-proもやった方が良いのでしょうか？

[@はやふー]

JavaScript→からjQueryが効率的だと思ってました。

[@電気ケトル-l9z]

Javascriptやったあとにjqueryやったら楽しくてそっちばっかやってしまい、javascriptだけで書けって言われたらめちゃくちゃ不安な状態になりました笑

[@しょーごログ]

jQueryのアニメーションメソッドは神だと思います。

[@つかさ-r8r]

プログラミング資格の Java Silverを取得しております。 プログラミングに関する基礎的な考え方(オブジェクト指向、配列など)は身についていると思われるのですが、Java Scriptのみの学習で問題ないでしょうか？

[@しょーごログ]

目的によるかなと思いますが、Webアプリを作るのであれば全く問題ないかなと思います。 JavaScriptのオブジェクトは少し特殊ですが、すぐに慣れられるのではと思います。 qiita.com/nishemon/items/6dd0a85cc5120f214ef7

[@ほんのりスクール]

ものすごく勉強になりました。実際何から勉強したらいいのかわからなくて。ご提案頂いたロードマップを参考に頑張ろうと思います。

[@しょーごログ]

頑張ってください！

[@ugh7509]

参考にします！ 今後も頑張ってください！！

[@顎大臣]

初案件で注意する点や案件を失敗したときの対処法などの初案件の注意点を知りたいです！

[@しょーごログ]

なるほど！ 動画向きですね、今度動画にします！

[@flowerhappy3297]

しょーごさん　はじめまして。教えて頂きたいのですが、プロゲートのJQueryは、無料の範囲で学習すればよいでしょうか？

[@しょーごログ]

上級までされた方が勉強になります！ProgateのjQueryは意外に完成度が高いので！

[@shinnijiemo]

リッチでUXが高まるSPAを作っていく昨今の流れで仮想DOMの概念が無いjQueryは邪魔だ〜って考えてるんですが、まだまだ案件が多いということはjQueryが消えるのはまだ先の未来なんですね。。。 アプリケーション要素の薄いLPなどのweb制作ではまだまだ大活躍なのでしょうか

[@しょーごログ]

枯れた技術は捨て難いですね... WordPressもそうですが、積み上がった資産が圧倒的すぎて、まだしばらくは続きそうです。 Nuxt案件こなしてweb制作でも使いたいとは思うものの、ハードルは沢山ありますね😢

[@宮本桂太]

フレームワークから学ぶのか(๑˙꒳​˙๑) ロードマップ系の動画はもっと出して欲しいです！

[@しょーごログ]

jQuery から入るの個人的にいいと思います。jQuery →JavaScriptは流れ的に違和感ないイメージです。（逆にVue→JavaScriptはダメだと思いますw）

[@顎大臣]

Wordpressを受けたときの作業時間の目安を知りたいです。価格ごとに紹介してくださるととても嬉しいです。

[@しょーごログ]

作業時間の目安もいいですね。価格についてはそれぞれすぎて難しいですが、一応大雑把に考えてみます。

[@顎大臣]

@@しょーごログ はい、自分も含めてですが多分web制作は副業でやろうとしている人が多いのでどれくらい時間を使うのか気になったいるところがありまして、 その人の力にもよりますが目安が知りたいと思いました。

[@5goritti784]

1qqa

[@dezalog]

はじめまして！ 今jQueryを勉強中なのですがjQueryの文をJavaScriptにすると、、みたいなのを知っておいた方がいいんですか？

[@しょーごログ]

知っておくといいとは思います。「eachはどうなるんだろう→forEachかなるほど！」みたいな、jQuery わかってるとJavaScriptで同じ役割の見た時イメージしやすいです。これはjQuery →JavaScriptでやると意識しなくても自然と分かるようになります。

[@アース-k8b]

progateのJavaScriptの講座はどうなのでしょうか？

[@しょーごログ]

個人的には全然やっても見になりませんでした笑　オブジェクトってなんやねんで終わりますね笑　APIを弄れば理解しやすいのですが

[@ukiy728]

最近はjQueryが要らなくなってきてるって聴いたんですがどうなんでしょうか？しょーごさんの意見を参考にしたいです…。

[@しょーごログ]

いい題材ですね。僕はまだ結構使いますが、プロジェクト次第ですかね。web制作以外ではほぼ使えないですし、web制作、特にLPとかではパフォーマンスや更新性の重要性が薄いのでバンバン使います。企業サイトは悩みどころですね。

[@勇輝-i1n]

グラフとかスライドショー系はvueはあんまり得意分野ではなさそうでしたね。。。

[@はやふー]

最初はjQueryで済む案件を取って行って後からJavaScriptを学ぶのはありでしょうか？

[@しょーごログ]

だいたいの案件はjQueryを使用できるので、jQueryで実装しておけば大丈夫です。 JSオンリーの案件ってそんなにないので！余裕が出たらJS勉強すればいいですし、jQueryの処理をJSでならどう書くかから考えていくと、わかりやすいです。

[@はやふー]

@@しょーごログ なるほど！ しょーごさんのおかげで具体的なロードマップがわかりました！本当に感謝しております^_^

[@seinenboy_a.k.a_dsst]

js-proはどこまでやれば十分ですか？？？

[@user-br1sw7if7p]

Web制作にあたってデザインも勉強した方がいいですか？

[@しょーごログ]

コーディングならデザインを勉強する必要はないです！

[@mka4408]

色々探してこの動画にたどり着きました！まさに知りたい情報でした( ¨̮ )とてもわかりやすかったです！チャンネル登録しました。

[@しょーごログ]

僕もJavaScript周りは迂回しまくったので、共有してみました！

[@osaru丙午]

まずフレームワークからっていう発想がなかったです。参考にします。

[@ひこりーたチャンネル]

js-proはサービス終了していますね。

[@しょーごログ]

最近終了したようです(´；ω；｀)

[@slowly__official2766]

どちらを先に学習した方が良いですか？

[@しょーごログ]

web制作であれば、jQueryからがいいですね！

[@slowly__official2766]

jQueryからやった方が良い何か理由があるんですか？何度もすいません。

[@ar__h]

@@slowly__official2766 ブログに書いてますよ

[@しょーごログ]

@@slowly__official2766 web制作ではjQueryがよく使われるからですね！JavaScriptも使いますが、すぐ使えるのはjQueryになります。動画中で解説したと思っていました...(＞人＜;)

[@slowly__official2766]

ちん子 見てみます！

[@tt-et5re]

いつも動画拝見させて頂いております。web制作会社に就職することを目標としていて、今JS-proにてJavaScriptを勉強中なのですがVue.jsの所はやる必要がありますか？j-Queryはスライドやモーダルなどの基本的な部分は実装できるくらいのスキル感です。。このままj-Queryをつきつめるべきか、Vue.jsをやるべきなのか教えて頂けますと幸いです。

[@しょーごログ]

>web制作会社に就職することを目標としていて この目的でしたら、Vue.jsよりも目下のjQueryスキルを高めた方がいいです。 案件の総量が全然jQueryの方が多いので！ jQueryがわかってくるとJSもわかりやすくなります。むしろ一番まずいのはjQueryが雰囲気の状態で他に色々手を出すことだと思います。 何者にもならないので😅 制作会社の立場的には、すぐ案件でjQuery使える人に入って欲しいと思うはずです！👍

[@tt-et5re]

しょーごログ とてもわかりやすい解説ありがとうございます！一応段階を踏んで学習したいと思っていたのですが、j-Queryの方から学習を始めてしまったのは失敗でしょうか？しょーごさんのアドバイスでいくなら、JavaScriptを(Vue.jsの前くらいまでJS-proで学習)して基礎を固めて、j-Queryに移るという形でよろしいでしょうか？あと、ほとんどのJavaScript学習サイトや教材がwebアプリの制作を最終目的としていて、web制作でのJavaScriptのスキル感、どのあたりまで学習すればいいのかなどの指針がなく、とてもわかりづらくて困っています。。そのあたりも動画などにして頂けると嬉しいです‼︎

[@しょーごログ]

@@tt-et5re 一応動画の中での私の主張は「web制作なら最初はjQueryから」と言っているので、jQuery最初に始めたのは失敗どころか正解だと思いますし、webサービスアプリ開発なら必要ないと動画中で述べております！ web制作におけるJSのレベル感については、正直動画中の本、学習サービスをこなしたら実案件で生きたコードに触れる以外 方法はないと思ってます。 ただ動画中の勉強を行った場合、そんなにレベルの差異を感じることはないのではと思っています。

[@kenjijinke]

一言いいですか?? 色々とあざーーーーーーーす！

[@しょーごログ]

👍

[@ちみ君]

白い服着た方がいいよ

[@しょーごログ]

なるほど笑　今度白いジャケット着ます！ｗ

[@yoshi10560930]

JSを語るだけの根拠は？

[@しょーごログ]

コ、コメントが怖いです...(＞人＜;) web制作でJSいじってるので、動画中でJSを語るにふさわしい自分の実績を出す場を作るべきでしたね。申し訳ないです！改善します。