HTML、CSSの勉強法を以前書きました。
この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。
そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。
僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。
それではレッツゴー！
jQueryを身につけるための最短ステップ
ステップ１ Progateで手を動かしながら学ぶ
いつもお世話になってます。「Progate」。ワンパターンやん！って思うかもしれませんが、やっぱり手を動かしながら進めていくのはデカイです。
ただ、個人的な使用感としては、HTML&CSSほど、このツール一つで「分かった！」というような感覚にはなりづらいです。
HTMLとかの方のクオリティが高すぎるのだと思いますが、何となく頭の中に「？」「？？」というものがつきつつも、とりあえず進めていきます。
多分、これがマークアップ言語とプログラム言語の違いなのだと思います。
とりあえず一週目はヒント、答えを見ながらも、学習意欲をキープするためにもガンガン進めることを意識。
自分は２週やりましたが、この段階では完全に分かったとは言えず。ただ、分からなくても手を動かすというのが、後々の学習の吸収効率を上げるのだと思います。
そういう意味で、他ではない大事な部分だと思います。
ステップ２ 平行してWebデザインレシピの記事を読む
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
Progateと平行しながらで良いと思いますが、パソコンがないすきま時間などに、Webデザインレシピの上の1つの記事で良いので精読をしておくことをオススメします。
この記事、もの凄い情報量のjQueryの基礎的な部分がまとまっています。正直すごすぎて発狂レベル( ；´Д｀)。
上のProgateで手を動かしつつ、頭の中を整理するために、この１つの記事をじっくりと、しっかりと時間をかけて何回も読んでいきます。
記事自体は2012年と古いですが、基礎的な部分を学ぶのが目的なので問題はありません。
ステップ３ ドットインストールで総復習&補完
前とまた同じ形です。ドットインストールから入る方もいると思いますが、そのあたりは好みだと思います。
ただ、やっぱり個人的に
- Progate→つくりながら学ぶ
- ドットインストール→見て学ぶ
なので、ドットインストールの方が総復習として使うには効率が良いように思います。今まで行ってきた部分を３分動画で一気に復習。
あとはProgateで触れられていない部分もあるので、知識の補完をしました。
ステップ４ 書籍を参考に実際に作ってみる
ここまできたら、実際につくってみます。僕は自分のはてなブログなどで実践をしました。
実際につくるとき、さすがに０から作っていくのは厳しいので、オススメというか自分が買ってみた本と、その使用感を書いてみたいと思います。
作りながら学ぶjQueryデザインの教科書
この本のレビューは
で詳しく書いたのですが、jQueryと書かれている本というのは、本屋で立ち読みをすると３種類ぐらいあるように思います。
３種類というのは、
- 基礎文法(仕組み)についてつらつらと書いてあるもの
- Webデザインをメインにつらつらと書いてあるもの(上の本はこれ)
- オススメプラグインの説明とその使い方をつらつらと書いてあるもの
といったものです。
この中で、１の基礎文法について書いてあるものに関しては、ステップ３までの無料ツールなどで行ってきたので、大丈夫です。
この段階でやりたいのは、プラグインなどの使い方ではなく、ガシガシと書いて作っていきたいというのが目的なので、それに合ったものを探しました。
この本を使うと、
- レスポンシブナビゲーション
- タブメニュー
- ギャラリー
- スライドショー
などなどたくさんのものが作れるようになります。僕もこのブログ自体を使って、いろいろ試しています。
例えば、下の記事では、最初はただ写真を並べているだけだったのですが、今は簡易ギャラリーになっています。
現場で役立つjQueryデザインパーツライブラリ
- 作者: 矢野みち子,KLEE,Atelier*Spoon,棧敷友香子,錦織幸知
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2013/06/25
- メディア: 単行本
- この商品を含むブログ (4件) を見る
この本は、とにかくjQueryのプラグインが大量に紹介されている本です。上の３種類の本の中で言うと３番目になります。
多分、ちょっと古いので、純粋にプラグインを使いたい方は違う本を探した方が良いかなと思います。
ただこの本、本当にすごい量のプラグインが紹介されているんです。
で、自分はあんまりプラグインとかを使ったりはしないので、この本は「へえ、jQueryってこんなこともできるんだ！」「あっ、こんなメニューバーいいな」みたいに、案を出すような形で使ってます。
Javascript 仕事の現場でサッと使える！デザイン教科書
JavaScript 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)
- 作者: 柳井政和 ,ロクナナワークショップ
- 出版社/メーカー: 技術評論社
- 発売日: 2015/07/02
- メディア: 大型本
- この商品を含むブログ (1件) を見る
上までのと比べると、難易度は結構上がります。
上までの本は、とりあえずその通りにやれば形にはなってくのですが、この本はよりjQueryを深く理解するためのものだと思います。
より応用力を高めて、自由自在に操りたい人が読む本かなと思います。
その他読んでおくと良いサイト
jQuery関連でお世話になったオススメ記事の紹介です。無料でここまで書いてくださって本当頭があがりませんm(_ _)m
とりあえずjQueryを書いているときに、セレクタとかそういうのをどうやって書くのかが分からなくなったら、ここがもの凄くまとまっているのでサッと見つけることができます。
何かをつくるときには毎回見てます。
実際に、簡単なものならば、このWebクリエーターボックスの記事にまとめられています。
いや、もう濃密。
同じくWebクリエーターボックスの記事。何かを作る前に、それが今ではCSSのみで実現できるものもあるので、一回チェックをしておいた方が良いと思います。
これもjQueryを使わずに、CSSのみで動きを表現できるものです。あまりにも内容が濃密すぎて、これ書くのにどんくらい時間かかったんだろうっていらんことを考えてしまう。
記事ではないですが、何かを作りたいな〜と思ったときには、このサイトを眺めながら、ヒントを貰えたりしてます。
まとめ
と、いうことで、ここまで行ってきた学習法を元に、効率良く学べるように順序を組み立ててみました。
何でもそうですが、０から１にするのが一番大変だと思うので、どなたかの参考になれば幸いです。
関連記事
はてなブログカスタマイズまとめ記事