HTML、CSSの勉強法を以前書きました。
この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。
そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。
僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。
それではレッツゴー！
jQueryを身につけるための最短ステップ
４つに分けて書いていきます。
ステップ１ Progateで手を動かしながら学ぶ
いつもお世話になってます。「Progate」。ワンパターンやん！って思うかもしれませんが、やっぱり手を動かしながら進めていくのはデカイです。
ただ、個人的な使用感としては、HTML&CSSほど、このツール一つで「分かった！」というような感覚にはなりづらいです。
HTMLとかの方のクオリティが高すぎるのだと思いますが、何となく頭の中に「？」「？？」というものがつきつつも、とりあえず進めていきます。
多分、これがマークアップ言語とプログラム言語の違いなのだと思います。
とりあえず一週目はヒント、答えを見ながらも、学習意欲をキープするためにもガンガン進めることを意識。
自分は２週やりましたが、この段階では完全に分かったとは言えず。ただ、分からなくても手を動かすというのが、後々の学習の吸収効率を上げるのだと思います。
そういう意味で、他ではない大事な部分だと思います。
ステップ２ 平行してWebデザインレシピの記事を読む
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
Progateと平行しながらで良いと思いますが、パソコンがないすきま時間などに、Webデザインレシピの上の1つの記事で良いので精読をしておくことをオススメします。
この記事、もの凄い情報量のjQueryの基礎的な部分がまとまっています。正直すごすぎて発狂レベル( ；´Д｀)。
上のProgateで手を動かしつつ、頭の中を整理するために、この１つの記事をじっくりと、しっかりと時間をかけて何回も読んでいきます。
記事自体は2012年と古いですが、基礎的な部分を学ぶのが目的なので問題はありません。
ステップ３ ドットインストールで総復習&補完
前とまた同じ形です。ドットインストールから入る方もいると思いますが、そのあたりは好みだと思います。
ただ、やっぱり個人的に
- Progate→つくりながら学ぶ
- ドットインストール→見て学ぶ
なので、ドットインストールの方が総復習として使うには効率が良いように思います。今まで行ってきた部分を３分動画で一気に復習。
あとはProgateで触れられていない部分もあるので、知識の補完をしました。
ステップ４ 書籍を参考に実際に作ってみる
ここまできたら、実際につくってみます。僕は自分のはてなブログなどで実践をしました。
実際につくるとき、さすがに０から作っていくのは厳しいので、オススメというか自分が買ってみた本と、その使用感を書いてみたいと思います。
作りながら学ぶjQueryデザインの教科書
この本のレビューは
で詳しく書いています。(Kindleもありますが、おすすめしません。)
ここまでやってきた人にとって、この本はドンピシャな難易度でオススメです。
jQueryと書かれている本というのは、本屋で立ち読みをすると、おおまかに３種類に分かれるかなと感じていて、その３種類というのは、
- 基礎文法(仕組み)についてつらつらと書いてあるもの
- Webデザインをメインにつらつらと書いてあるもの(上の本はこれ)
- オススメプラグインの説明とその使い方をつらつらと書いてあるもの
といったものです。
この中で、１の基礎文法について書いてあるものに関しては、ステップ３までの無料ツールなどで行ってきたので、大丈夫です。だいたい「はじめての〜」みたいなものは、ここに当てはまると思います。
この段階でやりたいのは、プラグインなどの使い方ではなく、ガシガシと自分でコードを書いて作っていきたいというのが目的なので、それに合ったものを探しました。
この本を使うと、
- レスポンシブナビゲーション
- タブメニュー
- アコーディオンメニュー
- ギャラリー
- スライドショー
などなどたくさんのものが作れるようになります。僕もこのブログ自体を使って、いろいろ試しています。
例えば、下の記事では、最初はただ写真を並べているだけだったのですが、今は簡易ギャラリーになっています(する必要全くないんですけどね)。
現場で役立つjQueryデザインパーツライブラリ
この本は、とにかくjQueryのプラグインが大量に紹介されている本です。上の３種類の本の中で言うと３番目になります。
多分、ちょっと古いので、純粋にプラグインを使いたい方は違う本を探した方が良いかなと思います。
ただこの本、紹介されているプラグインの数がかなり多いんです。
で、自分はあんまりプラグインとかを使ったりはしないので、この本は「へえ、jQueryってこんなこともできるんだ！」「あっ、こんなメニューバーいいな」みたいに、案を出すような形で使ってます。
Javascript 仕事の現場でサッと使える！デザイン教科書
上までのと比べると、難易度は結構上がります。
上までの本は、とりあえずその通りにやれば形にはなってくのですが、この本はよりjQueryを深く理解するためのものだと思います。
前の知識を使って後半を組み立てるように順序立っているため、最初から読んでいきます。そして気になったのだけ実際に作ってみる。
全部やると大変なので、その他の部分は構造を理解することに努めます。
この本を読み終われば、応用力はかなり高いです。いろんなことも自由自在に操りたい人が読む本かなと思います。
その他読む&登録しておくと良いサイト
jQuery関連でお世話になったオススメ記事の紹介です。無料でここまで書いてくださって本当頭があがりませんm(_ _)m
jQueryクイックリファレンス
とりあえずjQueryを書いているときに、セレクタとかそういうのをどうやって書くのかが分からなくなったら、ここがもの凄くまとまっているのでサッと見つけることができます。
何かをつくるときには毎回見てます。超オススメ。
teratail
プログラミング専門のQ&Aサイト。
jQuery以外にも多数の質問があり、ググる前に一回目を通しておきたいところです。
純粋に質問板として利用するのはもちろん、過去の質問をたどっていきながら知識を自分のものにしていきます。
少しのコードで実装可能な20のjQuery小技集
実際に、簡単なものならば、このWebクリエーターボックスの記事にまとめられています。コードは読み解く練習です。
いや、もう濃密。
かつてはJavaScriptを利用していたが今ではCSSのみで実装できる10の小技
同じくWebクリエーターボックスの記事。何かを作る前に、それが今ではCSSのみで実現できるものもあるので、一回チェックをしておいた方が良いと思います。
動くCSSのためのメモ
これもjQueryを使わずに、CSSのみで動きを表現できるものです。あまりにも内容が濃密すぎて、これ書くのにどんくらい時間かかったんだろうっていらんことを考えてしまう。（容量が大きいのでスマホで見る場合は注意！）
Croppy
記事ではないですが、何かを作りたいな〜と思ったときには、このサイトを眺めながら、ヒントを貰えたりしてます。ブックマークがおすすめ！
まとめ
と、いうことで、ここまで行ってきた学習法を元に、効率良く学べるように順序を組み立ててみました。
何でもそうですが、０から１にするのが一番負荷が大きいと思うので、どなたかの参考になれば幸いです。
関連記事
はてなブログカスタマイズまとめ記事
