【Web制作】JavaScriptとjQueryの独学方法をゼロからまとめました
こんにちは、氷犬（@icedog_410）です。
Webサイトを作るために必要なJavaScriptとjQueryの独学方法をまとめました。
「JavaScriptとjQueryとは」「なぜJavaScriptとjQueryを学ぶのか」など、基本ですが大事なことから詳しく解説しています。
なお、Webサイトの基本はHTML/CSSなので、HTML/CSSが身についてない人は、HTML/CSSをまず学習しましょう（ HTMLとCSSを独学するための３ステップ【初心者OK】）。
クリックできるもくじ
JavaScriptとjQueryを独学する理由は「動きを付けるため」
JavaScriptとは、「Webサイトに動きをつけるための言語」です。
たとえば、AppleのMacBook Proのページを覗いてみると、画像がふわっと現れるようなエフェクトがついてるのがわかると思います。
Appleに限らず、普段Webサイトを見ているとお洒落なエフェクトがついてることはよくありますよね。
そんなWebサイトに使われているお洒落なエフェクトは、８割くらいJavaScriptを使って作られています。
JavaScriptを使うと、HTML/CSSが動かせるようになり、動きのあるWebサイトを作ることが可能です。
jQueryはJavaScriptを扱いやすくしたライブラリのこと
そんなお洒落なJavaScriptですが、実はまったくの初心者が扱うには、少しハードルが高い言語です。
ちょっとした動きをつけるだけでもそれなりに長いコードを書く必要があり、初心者がコードを見ても、何が起きているのかがわかりにくいです。
jQueryとは、簡単にいうと「JavaScriptを簡単に扱えるようにした便利なもの」です。
JavaScriptとjQueryの違い
JavaScriptとjQueryの違いはこんな感じですね。
- JavaScript：醤油・酒・みりん・だし
- jQuery：めんつゆ
jQueryはよくまとまっている分、少し小回りが利かなかったりするのですが、それでも十分に便利で簡単なので、初心者はまずjQueryを扱えるようになった方がいいかなと思います。
jQueryの拡張機能（プラグイン）には便利なものが多く、jQueryは使えるようになっておいて損はありません。
JavaScriptとjQueryの独学方法【３ステップ】
Web制作を学習する上でのひとまずの目標としては、「jQueryを扱えるようになること」です。
jQueryの学習方法は、ざっくり３ステップに分けられます。
- JavaScriptの基礎を学ぶ
- jQueryを学ぶ
- プラグインを使ってみる
順番に解説していきます。
①JavaScriptの基礎を学ぶ
jQueryはJavaScriptを扱いやすくしたものなので、まずはJavaScriptの基礎知識が必要です。
そこまで難しい知識はいらないため、Progateを使って学習することをおすすめします。
Progateには４つのレッスンがあるので、ひととおり全部やっておきましょう。
途中から有料になりますが、月額1,000円程度なので、本を買ったと思って１月だけ課金するのが良いです。
なお、ES5とES6というレッスンがありますが、jQueryのために学ぶならES5のレッスンをやるのがおすすめです。全部やっても４時間もあれば終わります。
ただ、１週だけでは理解するのが難しいため、２，３週しておくと確実です。
②jQueryを学ぶ
ProgateでJavaScriptの基礎がなんとなくわかったら、早速jQueryを学んでいきます。
jQueryを学ぶのにも、やはりProgateのレッスンがおすすめです。
jQuery初級編・中級編・上級編と、中級編の道場コースをひととおりやっていきます。
Progateでやってみるとわかりますが、「あれ、jQuery急に難しくない？」と思うはずです。僕もそうでした。
個人的な意見ですが、プログラミングには「プログラミング特有の考え方」があり、その考え方が身に着くまでプログラミングは難しく感じるものです。
難しく感じるのは仕方ないので、とりあえず慣れるために２，３週しておきましょう。
jQueryの本を１冊使って学ぶ
難しく感じながらもProgateのレッスンを終えたら、次は本を使って学んでいきます。
僕は『Web制作の現場で使うjQueryデザイン入門』という本を使って学習しました。
この本は初心者にもわかりやすく、基礎の基礎から説明されているのでおすすめです。
基礎から学ぶ分、正直前半は詰まらないのですが、後半から段々とjQueryに慣れていくのがわかるかと思います。
実際に手を動かすことが大事本を使う上で大事なのは、「実際に手を動かしてみること」です。頭で覚えるのは絶対に無理なので、めんどくさくても手を動かして、コードが動くのを確認しましょう。
Progateや本を何周かしたら、jQueryの基礎学習は終わりです。
③実際に動くものを作ってみる・プラグインを使ってみる
jQueryはそこまで事前学習で覚えることがないので、あとは実際に使って覚えるしかありません。
実はWeb制作でjQueryをそのまま書く機会はあまりないんですよね。
というのも、あくまでも「基本はHTML/CSS」「jQueryは必要に応じて使う」という感じだからです。
例を出すと、jQueryは以下のような機能をつけるときに使います。
①上スクロールボタン
一定以上、下にスクロールすると出てくる「クリックするとページのトップに戻るボタン」です。
いちいち画面を上にスクロールするのは手間なので、ユーザーのためにつける必要があります。
これは割と簡単に作れるので、まず最初に作ってみるといいと思います。
②ドロップダウンメニュー
メニューをクリックしたり、マウスを乗せると下の階層が出てくるものをドロップダウンメニューといいます。
CSSだけも作れますし、jQueryを使って作ることも可能です。
③カルーセルスライダー
よく企業のサイトで見かける「画像を何枚か並べてスライドを作る機能」です。俗にカルーセルスライダーと呼ばれています。
割と見慣れている機能ですし、Webサイトにあるとそれなりにお洒落に見えます（実際に意味があるかは別として）
カルーセルスライダーは「Slick.js」というプラグインを使うと楽に作れますね。
JavaScriptの基礎がわかっていればカスタマイズもできるので、Slick.jsはおすすめです。
④あとは必要に応じて調べる
jQueryは最低限の知識があれば、あとは必要に応じて調べればOK。
「jQuery プラグイン おすすめ」とかで調べれば、プラグインのまとめページがたくさん出てきます。
ただ、Webデザインには流行り廃りがありますので、そのあたりはWebクリエイターボックス・コリス・かちびと.netを見ておけば大丈夫です。
あとは学習サイトや本を使うより、実際にあるサイトを模写した方が勉強になるのでおすすめです。
模写コーディングの参考サイトは、【画像あり】はじめてのランディングページ模写【プログラミング学習記録④】をどうぞ。
スキルアップとして、Vue.jsやReactを学んでもいい
JavaScriptについて学んでいくうちに、Vue.jsやReactといったライブラリ・フレームワークに興味が出てくることもあると思います。
その場合は、技術書を買ったり動画を見たりして、スキルアップしていくのもアリです
JavaScript・jQueryを独学するのにおすすめな動画サイト
最後にUdemyという動画学習サイトを紹介して終わりにします。
Udemyとは、資格のベネッセと提携している動画の学習サイトで、1,200円～1,500円でプロの講師によるレッスン動画を買えるサイトです。
僕もJavaScriptやjQueryを独学する際には、Udemyを活用して学んでいました。
実際にコードを書くところを見ながら学習できるので、「書籍は合わないな…」「より高度な技術を学びたい」という方におすすめなサイトです。
購入しても30日以内なら返金可能です。セールの時を見計らって購入し、合わなかったら返金しましょう（もちろん、ちゃんと取り組んだ上で）。
JavaScriptを学びたい人向け
Vue.jsを学びたい人向け
Reactを学びたい人向け
「どこまで勉強するか」は人によるのですが、技術は高めておいて損はないので、とにかくやりたいところまでやってみるのがおすすめです。
他の言語を学びたくなったら、ぜひ以下の記事を参考にしてみてください。
