【Web制作】JavaScriptとjQueryの独学方法をゼロからまとめました

こんにちは、氷犬(@icedog_410)です。

Webサイトを作るために必要なJavaScriptとjQueryの独学方法をまとめました。

「JavaScriptとjQueryとは」「なぜJavaScriptとjQueryを学ぶのか」など、基本ですが大事なことから詳しく解説しています。

なお、Webサイトの基本はHTML/CSSなので、HTML/CSSが身についてない人は、HTML/CSSをまず学習しましょう( HTMLとCSSを独学するための3ステップ【初心者OK】)。

もし、「JavaScriptの独学は厳しいな…」という方は、TechAcademyのフロントエンドコースで基礎を身につけるのがおすすめです。

無料体験もあるので、プログラミングスクールに通うという選択肢もぜひ考えてみてください。

無料でTechAcademyのレッスンを受けてみる

JavaScriptとjQueryを独学する理由は「動きを付けるため」

JavaScriptとjQueryを独学する理由は「動きを付けるため」

JavaScriptとは、「Webサイトに動きをつけるための言語」です。

たとえば、AppleのMacBook Proのページを覗いてみると、画像がふわっと現れるようなエフェクトがついてるのがわかると思います。

Appleに限らず、普段Webサイトを見ているとお洒落なエフェクトがついてることはよくありますよね。

そんなWebサイトに使われているお洒落なエフェクトは、8割くらいJavaScriptを使って作られています。

JavaScriptを使うと、HTML/CSSが動かせるようになり、動きのあるWebサイトを作ることが可能です。

jQueryはJavaScriptを扱いやすくしたライブラリのこと

そんなお洒落なJavaScriptですが、実はまったくの初心者が扱うには、少しハードルが高い言語です。

ちょっとした動きをつけるだけでもそれなりに長いコードを書く必要があり、初心者がコードを見ても、何が起きているのかがわかりにくいです。

そこで、jQueryというJavaScriptのライブラリを使うことで、初心者でも簡単にWebサイトに動きをつけられるようになります。

jQueryとは、簡単にいうと「JavaScriptを簡単に扱えるようにした便利なもの」です。

JavaScriptとjQueryの違い

JavaScriptとjQueryの違いはこんな感じですね。

JavaScriptとjQueryの違い

  • JavaScript:醤油・酒・みりん・だし
  • jQuery:めんつゆ

jQueryはよくまとまっている分、少し小回りが利かなかったりするのですが、それでも十分に便利で簡単なので、初心者はまずjQueryを扱えるようになった方がいいかなと思います。

jQueryの拡張機能(プラグイン)には便利なものが多く、jQueryは使えるようになっておいて損はありません。

-スポンサードサーチ

JavaScriptとjQueryの独学方法【3ステップ】

JavaScriptとjQueryの独学方法【3ステップ】

Web制作を学習する上でのひとまずの目標としては、「jQueryを扱えるようになること」です。

jQueryの学習方法は、ざっくり3ステップに分けられます。

jQueryを学ぶための3ステップ

  1. JavaScriptの基礎を学ぶ
  2. jQueryを学ぶ
  3. プラグインを使ってみる

順番に解説していきます。

①JavaScriptの基礎を学ぶ

jQueryはJavaScriptを扱いやすくしたものなので、まずはJavaScriptの基礎知識が必要です。

そこまで難しい知識はいらないため、Progateを使って学習することをおすすめします。

ProgateでJavaScriptを学ぶ

Progateには4つのレッスンがあるので、ひととおり全部やっておきましょう。

途中から有料になりますが、月額1,000円程度なので、本を買ったと思って1月だけ課金するのが良いです。

なお、ES5とES6というレッスンがありますが、jQueryのために学ぶならES5のレッスンをやるのがおすすめです。全部やっても4時間もあれば終わります。

ただ、1週だけでは理解するのが難しいため、2,3週しておくと確実です。

②jQueryを学ぶ

ProgateでJavaScriptの基礎がなんとなくわかったら、早速jQueryを学んでいきます。

jQueryを学ぶのにも、やはりProgateのレッスンがおすすめです。

jQuery初級編・中級編・上級編と、中級編の道場コースをひととおりやっていきます。

Progateでやってみるとわかりますが、「あれ、jQuery急に難しくない?」と思うはずです。僕もそうでした。

個人的な意見ですが、プログラミングには「プログラミング特有の考え方」があり、その考え方が身に着くまでプログラミングは難しく感じるものです。

難しく感じるのは仕方ないので、とりあえず慣れるために2,3週しておきましょう。

jQueryの本を1冊使って学ぶ

難しく感じながらも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を見ておけば大丈夫です。

HTML/CSSとjQueryが扱えるようになれば、基本的なWebサイトは作れるようになります。

あとは学習サイトや本を使うより、実際にあるサイトを模写した方が勉強になるのでおすすめです。

模写コーディングの参考サイトは、【画像あり】はじめてのランディングページ模写【プログラミング学習記録④】をどうぞ。

HTMLとCSS・jQueryがわかったらBootstrapが扱えるようになります

HTML/CSSとjQueryの基礎を理解しておくと、Bootstrapという便利なフレームワークが使えるようになります。

フレームワークを使うと、効率よくWebサイトが作れるようになるのでおすすめです。

Bootstrapの概要や学習方法については、Bootstrapの使い方はUdemyで学ぼう【内容も紹介】をどうぞ。

独学が厳しければプログラミングスクールの利用がおすすめ

JavaScriptはHTML/CSSと違い、本格的なプログラミング言語です。

HTML/CSSと比べると、「急に難しくなってないか…」と感じる方も多いと思います。

もし、独学で挫折しそうになったら、プログラミングスクールの力を借りるのも選択肢としてアリです。

お金はかかりますが、プログラミングができるようになれば一瞬で回収できるようになります。自分への投資として活用するのがおすすめです。

無料でTechAcademyのレッスンを受けてみる

【未経験から】プログラミングの独学方法の手順まとめ【実践済み】

【未経験から】プログラミングの独学方法の手順まとめ【実践済み】

2018年9月20日
スポンサーリンク