jQueryの知っておきたい基本的な使い方

脱jQueryの流れが大きくなってきた昨今ですが、jQueryって便利ですよね。便利なjQueryの基本的な使い方を解説します。

ここがわかれば一気にjQueryが使いやすくなるという基本的な使い方を5つのポイントに絞ってお伝えいたします。

jQueryの勉強にはこちらの書籍がオススメです

オススメというか私が実際に買って読んだ本です。jQueryモバイルという本も一緒に買ったんですが、モバイルの方は全然聞かなくなりました。

読み応えはあるものの、初心者向けとはちょっと言いずらい内容です。ある程度、基礎ができてる人にはオススメ。

改訂新版 jQuery本格入門 #297

3,630円 (税込)(Amazon参考価格)

• Amazon
• 楽天
• Yahoo

紹介する5つの機能

1. ターゲットを指定するセレクタ$("クラス or ID")

2. きっかけを作るトリガー .click

3. とりあえず確認しよう console.log()

4. アクションを設定 $(this)

5. 動きをつける fadeIn / fadeOut

私が良く使う機能と書き方に絞ってお伝えしますので、ここが理解できればいろいろと面白いことができるようになります。
私もそんなにjQuery詳しくないんですが、トランプゲームくらいは作れるようになりました。jQueryで。

What if(Cool104) インストール不要 ブラウザゲーム

ゲームセンターでおなじみのCool104がアプリもインストールも不要で無料で遊べます。ランキング登録も可能です！

事例：画像をクリックするとフェードアウトしながら入れ替わる

最低限のコードで作るために、簡素な作りになっていますが基礎編ということで何卒。

jQueryのコード全容

$(".image1").click(function(){
	console.log("OK");
	$(this).hide();
	$(".image2").fadeIn();		
});

5行で完了。簡単でしょ。

HTMLはこんな感じ

<img src="img/thumbs.png" class="image1">
<img src="../img/thumbs.png" class="image2" style="display: none;"> 		

切り替えたい画像を display:none で非表示にしておきます。

jQueryを書く前に何がしたいかを整理しましょう

どんなことでも完成のイメージがないことには作ることができません。
したいことの言語化をしておくと何をすればよいかが明確になります。

今回の例でいうと
「画像」を「クリック」したときに「画像を切り替え」たい

これができないとどんなコードを書けばいいのかが出てきません。

これがないと始まらない セレクタの指定方法

jQueryの最大のメリット、セレクタの指定が超簡単。だけどセレクタの指定がわからなくて、コピペで済ましてきた人がめちゃくちゃ多い。(昔の自分のことです)

ちゃんと理解すればマジで簡単なんです。

1行目の → $(".image1") がトリガーの対象物「セレクタ」です。

$() の中に、対象物を指定するものを書きます。
ここには「クラス名」「ID名」「タグ」などが入ります。

$( )の中に書くときは「"(ダブルクォート)」か「'(シングルクォート)」で囲う必要があります。
囲わないでよいのは、Javascript内で作った変数名を書くとき。
後ほど「this」が出てきますが、そいつはクォートで囲いません。

今回はクラス名をここに書きます

画像をクリックしたときなので、画像に振ってあるクラス名をここに入れます。
$(".image1")となります。

クラスを示す「.(ピリオド)」も忘れないように！
ちなみにIDの場合は「#(シャープ)」をいれます。CSSのルールと同じです。
タグの場合は何もなし。タグを書く。$("img") のように。

これで「.image1」というクラスを持った画像が対象物になりました。
次はトリガーの設定！

クリックしたらなにかをしなさい

画像に対してのトリガーを設定します。トリガーというのは、ユーザーアクションですね。
今回は「クリック」したら、なのでクリックを指定。

$(".image1").click(function(){　});

クリックをしたらなので「click」と書きます。
jQueryの文法はドットシンタックスと言われる書き方で、.(ドット)で命令文をつないでいきますので、さっき作ったセレクタの後に.(ドット)がつきます。

書き方がちょっとややこしくなってきましたね。

clickの後のカッコ()と大カッコ{}が出てきます。こいつがjQueryの鬼門です。

順番にコードを書くと少しわかりやすくなります。
カッコは必ず一対になっているので、色ごとにセットになってます。

1 $(".image1").click()

clickのあとに()が入ります。開始(と、終わり)のカッコ

2 $(".image1").click(function())

click() のカッコ内に functionを書きます。
functionの後にも()は入ります。

3 $(".image1").click(function(){ });

function()の後に{}大かっこを書きます。
最後に;(セミコロン)で命令文の終わりを告げます。

間違えやすいポイント

.clickの次のカッコの中にfunctionを書いて、functionのカッコには何も書きません。
そのカッコの後に{}大カッコで囲います。

これで「画像」を「クリック」したら、まで完成です。

クリックしたらちゃんと動くか検証

ここまで書けたら、命令文がちゃんと動作しているか確認します。
全部書いてから検証すると、なにがダメだったのかがわかりづらくなるので、ちょこちょこ検証します。

console.logで動作確認

さっき作った命令文にconsole.log("OK");と書いて、画像をクリックしてみてください。

$(".image1").click(function(){
	console.log("OK");
});

コンソール画面はF12キーを押すとでてきます

console.log()の中に”(ダブルクォート)で囲ったテキストを入力すると、ブラウザのコンソール画面にその文字が表示されます。
エラーが出てなければ！

エラーメッセージが表示された場合は、内容を確認します。
今回のエラーは シンタックスエラー：文法エラーで、{ カッコ足りなくない？と言われているみたいです。

エラー検証の際も、指定したトリガーの条件を満たさないと何も起きませんのでご注意ください。
今回は画像をクリックすることで、console.log が発動します。

{}の中にやりたいことを書きます 画像切り替え

いよいよ画像の切り替えアクションを指定します。

$(".image1").click(function(){
	console.log("OK");
	$(this).hide();
	$(".image2").fadeIn();		
});

3行目の$(this).hide();と、4行目の$(".image2").fadeIn(); がそのアクション。

this ってなんなのさ → 自分

this がわかればjQueryの簡単なスクリプトは覚えたも同然。ほんと。これ意味わからんかった。

ややこしくすると混乱するので、簡単にいいます。
1行目で指定したセレクタの中身を指します。

今回は .image1 のことですね。これがthisの実態。

1行目で指定したセレクタの中身がthis。
但し、クリックされた画像のみが対象になります。

同じクラス名をもっていても$(this)で指定すると、クリックされた画像のみが対象。

$(this)の場合は、クリックされた .image1 だけが対象ですが、クラス名で指定した場合、クリックしてない画像もhide()が発動します。

$(this).hide(); 自分を隠して

セレクタの書き方で書きましたが「this」はクォートで囲いません。jQueryの変数なので。

$(this).hide()のhide()をメソッドと呼びます。
メソッドの話もややこしくなるので、セレクタにこのhide()をくっつけると非表示になると覚えてください。

メソッドは色んな種類があるので、使い方とセレクタの指定方法を覚えてから、ほかのメソッドを探すのが良いです。
「attr」とか「parent」とかは文法がわからないうちから使おうとすると、ややこしくて嫌になります。

$(".image2").fadeIn(); で徐々に表示

ここでまたセレクタの登場です。
最初に使ったセレクトとまったく同じ使い方なんですが、一番最初のセレクタは、アクションの対象物だったんですよ。

「画像」を「クリック」したときに「画像を切り替え」たい
の画像を指定しました。

今から指定するセレクタは、画像を切り替えるための「画像」を指定するセレクタです。

$(".image2").fadeIn で class名が「image2」の画像をフェードインせよ、という命令になっています。
ちなみに、同じクラス名を持った画像がほかにもいたら、それも一緒にフェードインします。

fadeIn()メソッドは、fadeIn()がついたセレクタのCSSが変動します。
displayがblockにかわり、opacity(透明度)が徐々に上がって、1になったら止まります。

なので、ボタンが押された後に出てくる画像(.image2)は style="display:none" で非表示化しておけば、fadeInが発動することにより、displayがblockに切り替わる！
※タグに直接書いてますが、クラス指定してCSSで非表示にするのも、もちろんOKです。

ここの動作を整理すると、クリックされたimage1が非表示になり、その次にimage2がフェードインして、画像が切り替わる、という動きです。

ここまでできれば、jQueryを使った画像切り替えの完了です！

jQueryのわかりづらいところにフォーカスしました

自分がjQueryをわかったと思えた瞬間が、セレクタの指定方法とthisの意味が腹落ちした時だったんですね。
その時の気持ちを思い出しながらなるだけ詳しく書いてみました。

そのせいで5行のコードの解説がかなり冗長になってしまいました。

別の機会でメソッドを深堀したいと思います。