短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる2015-10-08短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみるWeb制作スポンサーリンクHTML、CSSの勉強法を以前書きました。www.yukihy.comこの記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。動くCSSのためのメモCroppyまとめjQueryを身につけるための最短ステップ4つに分けて書いていきます。Progateで手を動かしながら学ぶProgateいつもお世話になってます。ワンパターンやん!って思うかもしれませんが、やっぱり手を動かしながら進めていくのはデカイです。個人的な使用感としては、HTML&CSSほど、このツール一つで「分かった!」というような感覚にはなりづらいです。HTMLとかの方のクオリティが高すぎるのだと思いますが、何となく頭の中に「?」「??」というものがつきつつも、とりあえず進めていきます。これがマークアップ言語とプログラム言語の違いなのだと思います。一週目はヒント、答えを見ながらも、学習意欲をキープするためにもガンガン進めることを意識。自分は2週やりましたが、この段階では完全に分かったとは言えず。分からなくても手を動かすというのが、後々の学習の吸収効率を上げるのだと思います。いう意味で、他ではない大事な部分だと思います。平行してWebデザインレシピの記事を読むjQueryコーディングの基本的なことからプラグイン化までの注意書き(Webデザイン)Progateと平行しながらで良いと思いますが、パソコンがないすきま時間などに、Webデザインレシピの上の1つの記事で良いので精読をしておくことをオススメします。この記事、もの凄い情報量のjQueryの基礎的な部分がまとまっています。上のProgateで手を動かしつつ、頭の中を整理するために、この1つの記事をじっくりと、しっかりと時間をかけて何回も読んでいきます。記事自体は2012年と古いですが、基礎的な部分を学ぶのが目的なので問題はありません。-ドットインストール前とまた同じ形です。ドットインストールから入る方もいると思いますが、そのあたりは好みだと思います。個人的にProgate→つくりながら学ぶドットインストール→見て学ぶなので、ドットインストールの方が総復習として使うには効率が良いように思います。今まで行ってきた部分を3分動画で一気に復習。あとはProgateで触れられていない部分もあるので、知識の補完をしました。書籍を参考に実際に作ってみるここまできたら、実際につくってみます。僕は自分のはてなブログなどで実践をしました。実際につくるとき、さすがに0から作っていくのは厳しいので、オススメというか自分が買ってみた本と、その使用感を書いてみたいと思います。2014-05-22AmazonKindle楽天ブックスこの本のレビューはwww.yukihy.comで詳しく書いています。(Kindleもありますが、おすすめしません。)ここまでやってきた人にとって、この本はドンピシャな難易度でオススメです。基礎文法(仕組み)についてつらつらと書いてあるものWebデザインをメインにつらつらと書いてあるもの(上の本はこれ)オススメプラグインの説明とその使い方をつらつらと書いてあるものといったものです。この中で、1の基礎文法について書いてあるものに関しては、ステップ3までの無料ツールなどで行ってきたので、大丈夫です。だいたい「はじめての〜」みたいなものは、ここに当てはまると思います。この段階でやりたいのは、プラグインなどの使い方ではなく、ガシガシと自分でコードを書いて作っていきたいというのが目的なので、それに合ったものを探しました。この本を使うと、レスポンシブナビゲーションタブメニューアコーディオンメニューギャラリースライドショーなどなどたくさんのものが作れるようになります。僕もこのブログ自体を使って、いろいろ試しています。下の記事では、最初はただ写真を並べているだけだったのですが、今は簡易ギャラリーになっています(する必要全くないんですけどね)。2013-06-25AmazonKindle楽天ブックスこの本は、とにかくjQueryのプラグインが大量に紹介されている本です。上の3種類の本の中で言うと3番目になります。古いので、純粋にプラグインを使いたい方は違う本を探した方が良いかなと思います。この本、紹介されているプラグインの数がかなり多いんです。自分はあんまりプラグインとかを使ったりはしないので、この本は「へえ、jQueryってこんなこともできるんだ!」「あっ、こんなメニューバーいいな」みたいに、案を出すような形で使ってます。2015-07-02AmazonKindle楽天ブックス上までのと比べると、難易度は結構上がります。上までの本は、とりあえずその通りにやれば形にはなってくのですが、この本はよりjQueryを深く理解するためのものだと思います。前の知識を使って後半を組み立てるように順序立っているため、最初から読んでいきます。気になったのだけ実際に作ってみる。全部やると大変なので、その他の部分は構造を理解することに努めます。この本を読み終われば、応用力はかなり高いです。いろんなことも自由自在に操りたい人が読む本かなと思います。その他読む&登録しておくと良いサイトjQuery関連でお世話になったオススメ記事の紹介です。_)mjQueryクイックリファレンスmusou.s38.xrea.comとりあえずjQueryを書いているときに、セレクタとかそういうのをどうやって書くのかが分からなくなったら、ここがもの凄くまとまっているのでサッと見つけることができます。何かをつくるときには毎回見てます。teratailteratailプログラミング専門のQ&Aサイト。jQuery以外にも多数の質問があり、ググる前に一回目を通しておきたいところです。純粋に質問板として利用するのはもちろん、過去の質問をたどっていきながら知識を自分のものにしていきます。実際に、簡単なものならば、このWebクリエーターボックスの記事にまとめられています。コードは読み解く練習です。Webクリエーターボックスの記事。何かを作る前に、それが今ではCSSのみで実現できるものもあるので、一回チェックをしておいた方が良いと思います。動くCSSのためのメモ動くCSSのためのメモ。これもjQueryを使わずに、CSSのみで動きを表現できるものです。あまりにも内容が濃密すぎて、これ書くのにどんくらい時間かかったんだろうっていらんことを考えてしまう。(容量が大きいのでスマホで見る場合は注意!)CroppyWebデザインや配色をサポートする新サービス記事ではないですが、何かを作りたいな〜と思ったときには、このサイトを眺めながら、ヒントを貰えたりしてます。ブックマークがおすすめ!まとめと、いうことで、ここまで行ってきた学習法を元に、効率良く学べるように順序を組み立ててみました。何でもそうですが、0から1にするのが一番負荷が大きいと思うので、どなたかの参考になれば幸いです。前回の記事で、jQueryを本で調べたりしながらWordPressのように...2015-08-28jQueryド初心者が勉強するために最初に買うべきオススメ本の紹介!HTML、CSSを勉強した後にやるものとして、jQueryが一般的かなあ...2015-08-04当ブログで行ってきたはてなブログデザインカスタマイズまとめ!PR:はてなブログのテーマ「Naked」を作成しました!デフォルト...2015-07-20Milliard関連記事プラグインのCSSをいじり2列にしてブログになじむようにしてみました関連記事の表記に再びMilliardの関連記事プラグインを使い始め...2015-06-28はてなブログシェア数付きSNSボタンでさらにオシャレな吹き出しコードを追加です7/7追記:重大な不具合を修正しました。はてなブログPro都内に住む大学5年生だったのがこの春から社会人一年目になりました。データ分析職として働いております。Googleアナリティクス※メールでのブログカスタマイズのご依頼は現在受けておりません。@ftmaccho詳しいプロフィールはこちらから。広告依頼など重要っぽい連絡はこちらからお願いします。Lifeスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。