jQuery理解のための手順

自己流jQueryの理解の仕方

自分も大してjQueryを書けるわけではないのですが、今はやりたい機能に関してはなんとなく形に出来るようになったので、その際にこの理解の仕方いいなっと思った方法を書いておくので、参考にしていただければ嬉しいです。

文法をしっかり理解する

1にも2にも最低限の文法を理解しないまま、jQueryやその他JavaScriptライブラリを触っていてもいつまでたっても理解出来ませんでした。jQueryは少し理解出来ればとっても簡単に記述できてサイトの構築なんかにはとても便利です。

jQueryの基礎文法

f:id:sayamaken0402:20151216172431p:plain

例えばこのようなHTMLがあったとして

f:id:sayamaken0402:20151216172701p:plain

<button></button>をクリックしたら<div class="hide"></div>をフェードインさせたいとします。 個人的にjQueryの理解のコツは処理のロジックを口に出して言えるかどうかだと思います。

どこにどんなアクション(わかりやすく言うとホバーやクリックなど)があって何をしたいのか

これがすごく自分にははまって理解しやすかったです。

では続きです。 f:id:sayamaken0402:20151216173205p:plain

以下で、上述の機能「<button></button>をクリックしたら<div class="hide"></div>をフェードイン」は完成です。

f:id:sayamaken0402:20151216173909p:plain

しかし、ただフェードインさせるだけではつまらないといった時に同時に複数メソッドを呼び出すことができます。

f:id:sayamaken0402:20151216174309p:plain このようにメソッドを繋いでいくことをメソッドチェーンと言いメソッドを「.」で繋ぐことで使用できます。

少し、実践的なことをやります。 if を使い判定を行って処理をしたいと思います。 わかりやすくなるかなと思い、elseifを使ってみました。 hasClassでクラスの判定を行って処理をしています。

f:id:sayamaken0402:20151216175448p:plain

もっとスマートな書き方があるのですが、理解のためになるべくわかりやすさを重視して書きました。 自分もまだまだjQueryを使いこなせていないのですが、jQueryの勉強の参考になれば嬉しく思います!