【Education】JavaScriptあれこれ その1

主にjQueryの話題

readyメソッド

よくあるこれ

// ①
$(function(){
    // 処理
});

HTML文書が全て読み込まれたあと（あくまで要素のみ。画像等の読み込みは待たない）に処理をさせる書き方で、jQuery入門ではおまじないとしてとりあえずこれで囲えって話になっている。
実はこれ、他に2種、系3種の書き方が存在する。

// ②
$(document).ready(function(){
    // 処理
});

// ③
$().ready(function(){
    // 処理
});

全部同じ処理だが、現在は①以外は非推奨らしい。document・readyだがdocumentはどうも一切関係ないらしい・・・。
https://www.webprofessional.jp/jquery-document-ready-plain-javascript/

ちなみにこの処理、複数書いても一個書いても挙動は同じ。
以下のように同じファイル内に複数並んでいるのをみると、
「ああ、どっかからコピペしてきただけで意味が分かってないんだな・・」
と丸わかりなので注意。

$(function(){
    // 処理
});
$(function(){
    // 処理
});

onメソッドの使い方

以下のふたつは同じ処理。

// ①
$(selector).on('click', function(){
    // 処理
});

// ②
$(selector).click(function(){
    // 処理
});

推奨されているのは①。
clickというイベントをonで乗せているイメージ。
clickメソッドは実はon・clickのショートハンドでしかない。

実はもうひとつ、以下の書き方もある。

// ③
$(document).on('click', selector, function(){
    // 処理
});

document自体にイベントを設定し、selectorの部分でイベントの伝搬をキャッチする方法。
これは難しいのでここでは詳しく書かないが、メリットデメリットを以下に記載しておく。
メリット
documentに対してイベント設定するので、js記述時点で要素が存在していない（jsにてDOMを付与するような）要素に対しても、予約的にイベント設定が可能。
デメリット
当然のことだが複数実行されると、その数ぶん実行されてしまう。
documentに設定するため、対象要素を削除しただけではイベントは残り続け、セレクタがマッチしたら実行されてしまう。
逆に、以下は要素にイベントが紐付くため要素削除と同時にイベントも削除される。

$(selector).on('click'

要素の絞り込み

findを使うのが一般的

// ①
$(selector1).find(selector2)

ただ、これだと
selector1・・・絞り込み範囲
selector2・・・本来のターゲット
となっていて、個人的に本来のターゲットの認識がし辛い。
そこで以下の書き方をする。

// ②
$(selector2, $(selector1))

selector2が先頭に来るので、主語が非常にわかりやすい。