Javascript
jQueryプラグインは「特別な仕組み」ではない 最小のjQueryプラグインを書いてみる $.fnとは何か なぜ(function($){ })(jQuery)で囲むのか return this が必要な理由 eachを使う理由 オプションを受け取るプラグイン 実際に起きやすかったトラブル 最後に jQ…
「jQueryのプラグイン文化」は偶然ではない なぜコアを小さく保つ必要があったのか プラグインを可能にした技術 ― $.fn なぜ開発者が爆発的に参加したのか 典型的なプラグインの構造 失敗しがちだったポイント そして「jQuery UI」が巨大化した理由 最後に …
CORSの登場で「Ajaxの問題」はほぼ解決しました かつての最大の壁 ― 同一オリジン制約 そこで使われたのがJSONP CORSとは何か CORSで何が変わったのか jQueryの役割の変化 まだ残る誤解 注意点：CORSはクライアント側では設定できない なぜjQueryは急速に使…
JSONPはAjaxの裏技でした なぜそもそも回避が必要だったのか JSONPの仕組み 実際の流れ 手書きJSONPの大変さ jQueryが必要だった理由 JSONPの危険性 JSONPが消えた理由 ― CORS まとめ JSONPはAjaxの裏技でした 結論から書きます。 JSONPは通信技術ではありま…
$.get()と$.post()は別の機能ではありません 実際の内部動作 GETとPOSTの違い（jQueryの話ではない） jQueryが自動で行っている処理 1. クエリ文字列の生成** 2. URLエンコード** 3. Content-Type設定（POST時）** 4. レスポンス解析** 返り値にも重要な意味…
jQueryは非同期処理を「簡単にした」のではなく「難しさを隠した」 非同期処理が難しい本当の理由 XMLHttpRequest時代の地獄 jQueryが行った3つの隠蔽 1. コールバックの統一** 2. 状態の分離** 3. Deferredによるチェーン化** なぜ簡単に感じたのか 実際に…
$.whenはPromise.allの完全互換ではありません まずPromise.allの動作を整理する $.whenの基本動作 最大の違い：返り値の構造 失敗時の挙動の違い 非同期以外も受け取る挙動 単一引数時の挙動 なぜこの違いが生まれたのか 移行時の注意点 まとめ $.whenはPro…
jQueryのDeferredはPromiseの「古い版」ではありません Promiseとは何か（前提整理） jQuery Deferredとは何か なぜこの違いが重要なのか then / done / fail の違い jQuery 1.x〜2.x時代の背景 Promise互換になったのはjQuery3以降 注意点：DeferredをPromi…
昔のWebではfetchは「存在していなかった」だけではありません fetch以前のブラウザは非同期処理を持っていなかった ブラウザの違いが致命的だった JSONがまだ標準ではなかった エラーハンドリングの差 なぜfetchが普及したのか 変化したポイント** 注意点：…
XMLHttpRequestとjQuery.ajaxは「別物」ではありません XMLHttpRequestはなぜ扱いにくかったのか jQuery.ajaxがやったこと ― 抽象化 内部で何が起きているのか 1. XMLHttpRequestを生成** 2. オプション解析** 3. イベント登録** 4. ステータス判定** 5. レ…
jQueryの`$.ajax()`は結局「XMLHttpRequestの操作代行」です そもそもXMLHttpRequestとは何か 当時の開発者が苦しんだポイント** jQuery.ajaxがやっている本当の仕事 XMLHttpRequest** jQuery.ajax** 「ラップしている」とは具体的に何をしているのか 1. XML…
「操作していないのに後から動く」の正体 どうしてキューが溜まるのか 実際に起きる挙動 さらに深刻なケース パフォーマンスへの影響 `stop()`だけでは足りない理由 `finish()`との違い キューが詰まりやすいUI 根本対策 CSSアニメーションとの違い 最後に …
jQueryアニメーションは「同時」に動いていない キューとは何か どのように動いているか コードで見るキュー なぜキューが必要だったのか よくある問題「連打」 `stop()`の役割 キューはアニメーション以外にも使われる `delay()`の正体 `queue:false`とは …
カクつきの原因は「速さ」ではなく「タイミング」 ブラウザは常に描画しているわけではない jQueryアニメーションの仕組み 何が起きているのか requestAnimationFrameとは何か なぜ滑らかになるのか jQueryが不利になる理由 実際のカクつきパターン 特に重い…
`fadeIn()`と`slideUp()`は魔法ではなく「数値の更新ループ」 `fadeIn()`の内部動作 `slideUp()`の内部動作 なぜCSSアニメーションではないのか イージングの仕組み アニメーション中に起きていること `stop()`が必要になる理由 なぜカクつくのか 現代との違…
`hide()`はただのdisplay:noneではない CSSの`display:none`とは何をしているのか jQueryの`hide()`がやっていること `show()`との関係 CSSと混ぜると起きる問題 アニメーション時の違い `visibility:hidden`との違い よくあるバグ 1 表示が戻らない** 2 ア…
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に付けるべきか まとめ 「追…
