JQueryを入門レベルから無料で無駄なく独習する方法。基礎からはじめてイケてるサイトをつくろう!

JQueryを使えない者はWeb製作者にあらず
KUDOH@NIJILOG

さっそくですが言い過ぎました。

まあこれは言い過ぎとはいえ、スライダーやスクロール、画像表示やメニュー、入力フォームに及ぶまで、JQueryの活躍範囲は無限大です。

上記の自作名言も当たらずとも遠からずといいますか、最近のWEBサイト制作でJQueryをつかわないことがほぼなくなってきている現状で、プロならもちろん、個人の趣味でもサイトをいじる上でJQueryをつかえないというのはかなり不自由な状況かと思われます。

そこで、JQueryについての基礎から学んで「JQueryできまっせ」といえるくらいのスキルを身につけようじゃないか!と。
JQueryできねー子はいねーかー。

まずはJQueryの基礎から学ぶ

ゼロからはじめるなら、まずはJQueryってどうやって書くの?くらいから勉強しないとダメだよね。

だったらココしかないでしょう。

WebDesignRECIPES

01
jQueryコーディングの基本的なことからプラグイン化までの注意書き(Webデザイン)

すごいくわしく書いてあります。

最初この記事を書くにあたって、似たような解説を記事にしようと思ってたんですが、WebDesignRECIPESさんのこの記事をみて書くのをやめました。これだけ解説してあればもう書くことないし。

これをキチンと読めばそれだけで入門レベル卒業。
ゼロからの人も久しぶりの人も、ひと通り目を通すことをオススメします。

実践して使いながら覚えよう

基礎がある程度理解できたら、いろいろ考える前にまずはカンタンなものをつくってみるのがオススメ。

プログラムは知識として覚えるよりも、経験することのほうが身につくものなので分かる範囲ではじめてみるとはかどります。

その際に、実践にはいってから必ずおさえなければいけないのがセレクタとイベントとフォームまわり。

style

02

【jQuery】要素を指定するセレクタの使い方 まとめ
【jQuery】 ウェブサイト作成の際に使用頻度の高いイベント まとめ
リッチな表現に欠かせない!animate()メソッドの基本的な使い方【jQuery】

styleさんでは、JQueryを使う時によくお世話になるセレクタ、イベント、ついでにanimateについてもよくまとまってます。

とくにセレクタ関係は私もよくお世話になってます。

JavaScript好き

08

jQueryにおけるフォーム値の取得と設定

Javascript好きさんではフォームまわりの値のとりまわし方法が解説されてます。
チェックボックスのデータ取得とか久々につかうと「あれっ?」てなりやすいので、こういうところを改めて見るとためになります。

セレクタとイベントを使いながら、ちょっとしたデータ変更くらいはいじれるようになれば、「私JQueryつかえます!」なんて言っても大丈夫。

すごい人達がつくったすごいプラグインを活用しよう

ここまでは、あくまでも自分でJQueryを書いて使うための勉強でしたが、世界にはすごい人達がたくさんいまして、いろんなプラグインが無料で公開されています。

公開されているJQueryのプラグインを活用すると、自分でコードを書かなくても、かなりの機能がプラグインで実現できちゃいます。

しかもJQueryプラグインはただのテキストデータなので、中身をみればソースコードを見ることもできるので、気になる機能があれば覗いてみると勉強になることまちがいなし。

そんなすごいプラグインをいくつも紹介しているページはこちら。

commte

04

ジャンル別につかえるプラグインをまとめています。
一般的なものであれば、ココにのっているもので十分なきがします。
サムネイルもついていて非常に見やすい。

skuare.net

09

大量のJQueryプラグインサンプルが置いてあります。
サンプルページが若干雑な気がしなくもないですが、これだけの数のデモが見れるのは貴重。

coliss

05

colissさんはWEB系の人なら絶対知ってるといってもいいくらいメジャーなサイトです。
この記事はレイアウト系プラグインについてのページですが、最新のプラグイン情報もたくさん更新されるので要チェック。

かちびと.net

10

このリンク先ページ自体は古いですが、かちびと.netさんもcolissさん同様にメジャーサイト。
チェックしておいて損はありません。

jquer.in

11

JQueryプラグインの情報量が半端じゃなく充実しています。
サイトもきれいでつかいやすい。
ただし、英語なのでちょっと気合が必要かも。

pencilscoop

06

こちらは海外のサイト。
エフェクト系のみのプラグインまとめをしているページです。
いろいろお洒落なエフェクトがのっているので見ているだけで楽しいです。

Splashnology.com

07

こちらも海外のサイト。
最新のプラグインまとめを定期的に行っています。
開発者向けのものなどものせているので、ちょっと濃いですが英語が苦手じゃなければオススメです。

ちなみに、こんなにプラグインがあれば自分でコードを書く必要なくね?なんて思うかもしれませんが、JQueryプラグインを使うにはどうしても最低限レベルの知識は必要になりますし、必ずしも求めている要件にあったプラグインが見つかるわけではありません。

このあたりはニワトリが先か卵が先かじゃないですが、コードを書けるようになってから、プラグインで行き詰まってから、どちらでもいいですが、必ずJQueryの知識は必要になってくるので、早いうちに基礎は身につけたほうがいいと思います。

最終段階は自分でプラグインをつくってみよう

JQueryの基礎からプラグインを使うところまでひと通りやってみて、慣れてきたら是非自分でプラグインをつくって公開してみてください。

もちろんゼロの状態からいきなりは難しいと思いますが、基礎をおさえて、セレクタとイベントさえ分かってしまえば、それなりのプラグインをつくることは全然無理ではありません。

あの動きはどうやってやるんだろう?なんて困ったら、似たようなプラグインをさがしてソースを見る。
いろんなプラグインのソースを見ながらわからないことは検索!そして手を動かす!
これだけで格段にレベルがあがります。

最後にサムネイルなしですが、JQueryプラグインのつくり方について参考にするべきページをリストアップしておきます。

入門レベルではちょっと読むのがしんどいかもしれませんが、このあたりをサラッと読めるようになれば中級者の仲間入りです。

プラグイン/作成
https://gist.github.com/maepon/4754210

jQueryプラグイン開発までの最短4ステップを分かりやすく解説!!
http://web-terminal.blogspot.jp/2012/11/jquery4.html

jQueryプラグイン作成法のまとめ
http://wiz-code.digick.jp/blog/?p=792

ではでは。