30歳からはじめる雑記ブログ

日々あった出来事、考えたことを書いていきます。

jQueryを書く上で注意すべき点についてまとめてみた

HTMLを読み込んでからJSを読み込みたい場合

bodyの終了タグの直前にscriptタグを置くのと同じ感じにしたいのならJSファイルに次のように記述する。

HTMLを読み込む前にJSを動かしたい場面なんてほとんどないからおまじないのように書くものと覚えておけばいい。

$(function() {
// この中に処理を記述する
}

アロー関数は基本使わないほうがいい

JavaScriptを書くのと同じ要領でアロー関数を使うと$(this)がうまく取れないことに気づく。

$("h1").on("click",() => {
    $("h1").css("color","red");
});

↑このようには書かず↓のように書いたほうがいい

$("h1").on("click", function(){
    $("h1").css("color","red");
});

jQuert構文とJavaScript構文は混在して書いても良い

JSで追加したい処理をググるjQueryで書かれているものとjQueryで書かれているものがある。

そういうときに、わざわざJavaScriptjQueryになおす必要はなく、混在させて書いても動作する。

保守性の観点からすると統一すべきなのだけど、ネットで見つけてとりあえず組み込んで動作チェックしたいという場合にはわざわざ変換して確認するのも面倒。 そのコードの書き方を採用するかどうかもわからない段階なので、こういうときは混在させて動作したほうがいいと思う。

ひたすら書いて覚えよう

実際に書いてみるとどれもだいたい「$()」なのがわかる。それとJS構文のショートハンド的な構文になっている。 そのため、覚えること自体は苦ではないが、手に馴染むようにひたすら書いていくしかない。

どういう文法があるのかチートシートで確認すると、使うイメージをつかめる。

このチートシートが非常にわかりやすくてよかった。

qiita.com