【初心者jQuery】閉じカッコアレルギーを克服せよ

投稿日 2017年10月20日
著者 NMR
カテゴリー Mac・iPhone・インターネッツ

jQuery。ワタクシ、お恥ずかしながら、ぱっと見のカッコの多さにアレルギーがありました。

$(function(){
中身
});

特に閉じカッコ「});」の多さと、意味のわからなさ。
ここからしてよう分からんなーという感じだったのですが、紐解いてみると

$()
↓
$(function)
↓
$(function())
↓
$(function(){})
↓
$(function(){});
↓
$(function(){
});

おおー！そういう成り立ちだったのかー！
こうやってカッコから先に書いてみるとよく分かる。
});の見え方にアレルギーがあったんですよねー。

構造がシンプルなら単純ですが、例えば「clickした時になにか処理をする」という書き方の場合。

$(function(){
　$(‘p’).on(‘click’,function(){
　　$(‘.text01’).css(‘color’,’red’);
　});
});

閉じカッコがふたつになりました。

こういう場合の書き方。

まず閉じカッコを含めて、一行で入れ物を書いてしまう。
$(function(){
　$(‘p’).on(‘click’,function(){});
});
↓
中括弧の中で改行する。
$(function(){
　$(‘p’).on(‘click’,function(){
　});
});
↓
処理を書く。
$(function(){
　$(‘p’).on(‘click’,function(){
　　$(‘.text01’).css(‘color’,’red’);
　});
});

と順を追って書いていくとその構造がとてもわかりやすい。

え？常識？

でも実は今勉強している本にも、このカッコについての重要性が書かれていて、まず開始・終了のカッコを書いてしまいましょうとあります。基本の基本ですが、大事なことなのだと思います。

とにかくソースのコピペじゃなくて、自分で書いてみることが大事ですね。
と何を今更…といった感じですが。

これを体得するにはとにかく数を書くことだなあと思います。
最近ではまずはこの構文に慣れるために、練習問題をひたすらイチから書くようにしています。

がんばりまーす！

今勉強に使っている本はこちら。
とても分かりやすいです。