jQueryが遅くなるのは「数が増えたとき」 DOMは配列ではない jQuery特有のコスト 典型的な遅いコード なぜ途中から急に遅くなるのか もう1つの落とし穴「再検索」 最も重い処理「読み取り＋書き込み」 正しい対処法 実務で起きやすい場所 注意点 最後に jQue…

jQueryが遅いと言われる原因の本体は「reflow」と「repaint」 reflowとは何か repaintとは何か どの操作がreflowを引き起こすのか jQueryで遅くなる典型パターン なぜjQueryで起きやすいのか アニメーションが重くなる理由 実際に起きる問題 対策の基本 最後…

「jQueryは遅い」は本当にjQueryのせいなのか DOM操作はJavaScriptではない jQueryは何をしているのか なぜ昔は問題にならなかったのか 状況を変えたのはJavaScriptエンジン セレクタがボトルネックになる理由 ループで顕著に現れる さらに影響が大きかった…

jQueryは「便利」だったから普及したのではない そもそもDOM操作とは何か 昔のブラウザは「同じJavaScript」が動かなかった DOM操作はなぜ重かったのか jQueryが解決した「互換性問題」 jQueryが解決した「パフォーマンス問題」 なぜjQueryは必須だったのか …

append()とappendTo()は同じ動きではありません 誰が主体のメソッドなのか 戻り値の違いが重要 複数要素に追加したときの挙動 DOMの本来の動き よくある混乱 どちらを使うべきか パフォーマンスの差はあるのか 注意点：イベントの消失 まとめ append()とappe…

見た目が同じでも安全性はまったく違います html()がしていること XSSとは何か text()の挙動 なぜjQueryに2つ存在するのか 実際に起きる事故 「サーバでエスケープしているから大丈夫」は危険 安全な書き方 jQueryの設計意図 よくある誤解 結局どう使い分け…

jQueryが「楽だった」のは気のせいではありません フォームはDOMの中でも特別な存在 値の取得だけで苦労していた時代 jQueryのval()が変えたもの イベント処理の統一 disabledとcheckedの罠 Ajaxとフォームの相性 なぜjQueryが普及したのか 注意点：便利さの…

val()は「valueを取る関数」ではありません ネイティブのvalueは統一されていない val()が内部で行っている処理 値を設定するときの挙動 なぜこれが必要だったのか よくある誤解 注意点：changeイベントとの関係 val()とattrの違い 結局val()は何をしている…

チェックボックスが「戻る」現象の正体 checked属性が意味しているもの attr()で壊れる理由 prop()が正しい理由 defaultCheckedというもう一つの存在 なぜフォームで問題が顕在化するのか ありがちな失敗コード なぜjQueryがpropを追加したのか checked以外…

attr()とprop()は同じではありません HTML属性とDOMプロパティは別物 attr()が触っているもの prop()が触っているもの なぜ混乱が起きたのか 実際に確認する checked以外でも起きる問題 いつattrを使うべきか よくある失敗例 なぜjQueryで重要だったのか 結…

jQueryで「return false」が万能に見える理由 ネイティブJavaScriptのイベントの意味 jQueryのreturn falseが特別な理由 なぜこんな仕様になったのか よくある誤解：JavaScriptでも同じだと思ってしまう 実務で起きるトラブル return falseのリスク どちらを…

jQueryのイベントオブジェクトは「偽物」なのか ネイティブイベントとは何か jQuery.Eventとは何をしているのか なぜラップする必要があったのか preventDefault と stopPropagation が動く理由 ありがちなトラブル：nativeEventが必要になる瞬間 なぜ混乱が…

jQueryのイベントが「思った場所で発火しない」理由 DOMイベントは1つの場所だけで発生していない イベントバブリングとは何か キャプチャリングとは何か なぜjQueryはバブリング前提なのか イベントを止める stopPropagation() よくある誤解：クリックが2回…

「追加したボタンだけクリックできない」は正常な挙動 jQueryはセレクタにイベントを付けていない DOM生成のタイミングの問題 on()が解決する理由 イベントバブリングが鍵 内部的には何が起きているのか よくある間違い documentに付けるべきか まとめ 「追…

click()とon('click')は同じではない click()は直接バインド on('click')の基本動作 イベントバブリングの仕組み on('click')がやっていること なぜclick()ではダメだったのか よくあるバグ 注意点 まとめ click()とon('click')は同じではない jQueryを使っ…

jQueryのon()は「イベントの常識」を変えた 従来のイベント登録は何が問題だったのか on()で何が起きているのか イベントバブリングという仕組み on()の内部処理 なぜこれが重要だったのか よくある誤解 注意点とリスク まとめ jQueryのon()は「イベントの常…

jQueryのeachとforEachの違いは「配列か要素集合か」 forEachは配列専用のメソッド jQueryのeachはDOM操作のために存在する eachのthisとforEachの引数の違い eachの戻り値が重要な理由 実務で起きる典型的なミス なぜjQueryはeachを用意したのか まとめ jQu…

jQueryのthisが混乱を生む理由 JavaScriptのthisは固定ではない jQueryオブジェクトのthis イベント処理に入るとthisが変わる $(this) が必要になる理由 典型的なバグの原因 アロー関数で壊れる理由 なぜjQueryはこの設計になったのか 実務上の注意点 まとめ…

jQueryのメソッドチェーンは「return this」だけで成立している JavaScriptは本来チェーンできない thisは「現在のオブジェクト」 メソッドチェーンの内部動作 なぜjQueryはこの設計を選んだのか return thisが成立するための前提 チェーンできないメソッド…

jQueryのチェーンメソッドはなぜ成立するのか そもそもjQueryは何を返しているのか チェーンメソッドの正体 ― return this なぜreturn thisが重要なのか ではreturn thisは常に正しいのか thisがjQueryで混乱を生む理由 実務で起きる失敗パターン jQueryチェ…

Sizzleは「要素検索」ではなく「クエリエンジン」 セレクタはそのまま使われていない 1. トークン化（Tokenizer） 2. コンパイル 3. 探索計画の決定 4. 実行とフィルタリング なぜここまで複雑だったのか 現在のブラウザとの関係 注意点 まとめ Sizzleは「要…

$()は関数ではあるが「DOM要素」を返していない $()の戻り値 ― jQueryオブジェクト 中身は配列に近い構造 なぜわざわざラップしているのか $()はセレクタ関数ではない jQueryオブジェクトとDOMの違いで起きる問題 なぜこの設計になったのか 現在との違い 注…

window.onloadと$(document).ready()の違いは「速さ」ではない ブラウザは同時に処理していない DOM構築の流れ window.onloadが遅い本当の理由 イベントループから見た違い なぜjQueryはreadyを提供したのか 実際に起きていた問題 現在はどうするべきか 注意…

$(document).ready()はなぜ使われていたのか HTMLとJavaScriptは同時に動いていない DOMが完成する瞬間 ― DOMContentLoaded 問題はブラウザ対応だった $(document).ready()の本当の役割 window.onloadとの違い 本当に必要だったのか 現在はどうなったか 注意…

なぜ昔のJavaScriptはブラウザごとに動かなかったのか DOMという最大の不一致 DOMは共通規格だったが共通実装ではなかった イベントモデルの違い CSS操作も統一されていなかった Ajaxの互換性問題 ここで登場したjQueryの役割 jQueryは「機能」ではなく「翻…

jQueryが爆発的に普及した本当の理由 2000年代のJavaScriptは「ブラウザごとに別言語」だった DOM APIがブラウザごとに違った イベント処理も統一されていなかった jQueryがやったこと ― 抽象化 AjaxがjQuery普及を決定づけた なぜ一気に世界標準になったの…