jQueryを独学でマスターする方法【学習方法】！

今回は、jQueryを独学でマスターする方法の勉強手順、学習方法につきまして、私の経験をふまえ記載してみようと思います。

HTMLとCSSはおおよそ理解でき、Web上に動きを加えたい場合や、JavaScriptは難しそうだけど、jQueryだったら比較的簡単そうだな！といったjQuery初心者の方に、jQueryを独学でマスターする方法につきまして、詳しく記載していこうと思います。

また、初めに少しだけポイントを記載いたしますと、jQuery自体はプログラム言語ですから、継続的に使用していくことがポイントなります。例えば、独学で半年かけてマスターしたとしても、その後の半年、全く使うことがなければ、残念なことに忘れてしまうことも多くなってきてしまいます。

という事で、それでは今回はッ、

・jQueryを独学で学ぶ手順
・jQuery独学の参考になるサイトと本
・jQuery独学での勉強方法まとめ

上記について記載していこうと思います…。

jQueryを独学で学ぶ手順

それでは、jQueryを独学で学ぶ手順について、順をおって記載してみたいと思います。まずは、私が独学しようと思った動機から、記載してみようと思います。

jQueryを独学でマスターしようと思った動機！

2010年頃だったと思います、楽天市場や他ECサイトで色々とページ上に面白い動きの付いたサイトを、チラホラ見かけるようになってきました。

しかし当時、私が運営しているサイトは、まだ、jQueryはおろかテーブルレイアウトでデザインをおこなっているサイトになっており、これでは他のイケてるサイトと比べ見劣りしてしまうのではないか？と思ったのが、独学でjQueryをマスターしようと思うきっかけとなりました。

この記事をお読みいただいている方も、HTMLでページのマークアップすることを覚え、CSSでデザインのスタイリングをおこなうことも、おおよそできるようになったけど、「ここの場所に動きが付けたい！」や「スライダーの設置方法がよく分からない」または、「写真を表示するライブラリは無いか」などの悩みがあることでしょう。私も2010年頃は、これと同じような悩みを持っておりました。

しかし、jQueryを覚えた現在では、すべてjQueryで解決することができます。また、上記のような悩みの他、アクセスが集まらないなどの悩みがある場合は、先にHTMLのマークアップから見直すことをおすすめします。

jQueryをマスターするのは、順番としてはその後が良いように思います。まずはユーザーにWebサイトを見てもらわない事には始まりませんので。

jQueryを独学で学ぶ手順を段階に応じて！

それでは学ぶ手順を一覧にて記載してみます。

・jQueryで何を実現したいのか決める！
・サンプルコードやjQueryのプラグインで実現できないか探す
・基礎学習から見直す！
・オリジナルのコードを設計・考える！

jQueryで何を実現したいのか決める！

基本的に「jQueryをマスターしたい！」と思ったからには、すでにjQueryで実現したいと思うことがあるはずです。これが無いようであれば、まだjQueryを学習するには時期が早いように感じます。

例えば、ご自身が作成したサイトの中で、動きが付けたい箇所やアニメーションなど、おそらく既にどこかで目にしていて、それと同じようなことを実現したいと思っていることと思います。

しかし、jQueryで実現できることは分かっていても、「jQueryでどのようにコーディングすれば良いのか分からない？」ということがあることと思います。このような場合、すでに「jQueryで何を実現したいのか決める！」は決まりですね。

まずは、多少難しそうでも「jQueryで何を実現したいのか決める！」が最重要で、これさえ決まっていれば、私の個人的な経験上、この実現したいことを実現させるのは、あまり難しくありません。「なぜ？」と思う方もいる事と思いますが、現段階では「最終手段はコストをかける！」としても、何ら問題ない事です。

jQueryをマスターするのに、書籍を購入したり、もしくは最短でマスターしたいと思うのであれば、スクールで受講したりすることもあるかと思います。「コストをかける！」といっても色々と方法があり、例えば部分的に外注に出すのもありだと思います。

この「jQueryで実現したいこと」に対してコストをかけたとしても、現段階では良いことと思います。徐々にご自身でコストを掛けずにできるようになれば、良いだけですから。

サンプルコードやjQueryのプラグインで実現できないか探す

jQueryで実現したいことが決まったら、必ずWeb上にはそのコードがあると思ってください。「実現したいことを完璧に！」とまでは行かなくとも、ほぼそれに似たコードは必ずあるはずです。

まずは、そのコードの真似をしてみて記述することをおすすめします。また、この段階ではコードの意味がすべて分からなくても、何ら問題ありません。時間がかかるかもしれませんが、おおよそ似たようなものを作成できることと思います。

私自身は、この方法でjQueryのスライダーや、写真を綺麗に表示するスクリプトを記述していきました。もちろん、この段階ではコードの意味は半分以下しか分かりませんでした。

またコードを探すコツは、似たようなものを見つけたら、そのコードのコアになる部分をそのまま検索にかけるのがおすすめです。

基礎学習から見直す！

上記で記載したように、スライダーの設置や他のプラグインの設置までであれば、Web上でほぼ完結することと思います。しかし、ここからが重要で、簡単なものであれば作るまでは行かなくても、プラグインを利用して設置できる段階になったら、ここから初めて基礎学習へ進むことをおすすめします。

また、「これでは順序が逆じゃないの？」と思うかもしれませんが、基礎学習からスタートすると途中で挫折する可能性が多くなることと思います。私の経験で記載していますので異なる場合もありますが、私自身はいつも基礎から学習を始めると、つまらなくなり途中で放置・挫折することが多々ありました。

初めはコード自体の分けが分からなくても、ある程度できるようになってから基礎学習を始めると、オリジナルのコードなどの作成や、既存のプラグインのカスタマイズなど、格段にスピードが速くスキルアップが望めるものと思います。

基礎学習としては「jQuery：独学のためのおすすめ本」にも記載してありますので、参考になることと思います。また、この段階では「早く覚えたい！」と思うことと思いますが、その際は、「ホームページ制作を独学で挫折しないための3つの勉強法」が参考になることと思います。

オリジナルのコードを設計・考える！

上記まで学習が進むと、初めて「オリジナルのコードを設計・考える！」ようになります。この段階まで来ると、コードの設計やコードの記述自体を考えることで、jQueryのスキル自体が、ご自身に確実に定着してくることと思います。

これ以前までの学習段階だと、コードを書く期間が空けばあくほど忘れることも多くなってきてしまいます。jQueryを独学でマスターしたいのであれば、ぜひこの段階まで学習することをおすすめします。

また、ここまでをショートカットしてスキルに定着させたいのであれば、TechAcademy無料体験がおすすめで、カリキュラムに組み込まれた形で身につけることができ、jQueryだけのコースであれば、比較的コストを抑えることもできることと思います。

jQuery独学の参考になるサイトと本

jQueryの勉強ロードマップとしては、上記に記載したとおりになりますが、今回はWebを1サイト、書籍を1冊紹介する形で記載したいと思います。

ここでの学習のポイントは、実際に今後使いそうなコードは、ご自身で別にまとめておくことが良いことのように思います。実際の制作現場に入りますと、常にjQueryのコーディングを行っているだけではなく、他のコーディングやデザイン作成etcなどをおこなうこともありますので、上記でも記載いたしましたが、残念なことにコーディングの期間が空くと忘れてしまうこともあります。

なので学習しているときに、「今後実際にこのコードは使いそうだな」と思うものは、抜き出してまとめておくことをおすすめします。

Progate jQuery（全コース）
jQuery最高の教科書

Progate jQuery（全コース）

ProgateのjQueryレッスンであれば、基礎的なことを網羅的に学習することができることと思います。また、ドットインストールでも無料で学習することは可能です。

その際のポイントとしては、やはりエディターソフトで手を動かすことが重要なように思います。「一文字一句覚えるというより、仕組みが理解できれば十分です。」と記載するサイトもありますが、実際に制作業務を請け負う私としては、プログラミンの考え方は、他の言語と共通することは多々ありますが、記述ルールなどが異なる場合があるので、慣れることも重要だとの思いからです。

https://prog-8.com/languages/jquery

jQuery最高の教科書

書籍でのおすすめになります。
「これからjQueryを学ぶ人が「どこにつまづき」、「何に疑問を抱くのか」を常に検証し、そしてブラッシュアップしていきました。」という内容になっており、また、実際の制作現場で使用するサンプルも多数掲載されていますので、実際に手を動かして掲載サンプルの制作おこなうと、スキルの定着も早くなることと思います。

リンク