JavaScript

JavaScriptでボタンの連打を防止する方法を、disabledでの無効化・非同期処理をfetch+finallyで確実に解除する書き方・フラグ方式・一定時間内に最大1回だけ実行する汎用throttle関数・debounceとの違いまで実装コードで解説します。

JavaScriptで画像の読み込み完了を検知して処理を実行する方法を、loadイベント・complete+naturalWidthでの成功判定・onerrorと代替画像・ハンドラをsrcより前に設定する理由・decode()・Promise.allで全画像待ちまで実装コードで解説します。

JavaScriptで指定回数クリックされたら処理を実行する方法を、累積カウント・一度だけ実行・一定時間内にN回の連打検知・event.detailによるダブル/トリプルクリック・再利用クラスまで実装コードで解説します。

JavaScriptで配列の重複を削除する方法を、最速のSet・filter+indexOf・オブジェクト配列のMap/findIndexまで整理。NaNが消える落とし穴、O(n)とO(n²)の計算量、最初/最後どちらを残すか、参照型の注意まで実測コードで解説します。

URLのパス・クエリパラメータ・ハッシュのどれで表示を出し分けるかを判断基準とともに整理し、完全一致での安全なパス判定、URLSearchParams、hashchange/popstateでの再判定、JavaScript無効時のフォールバックまで実装コードで解説します。

ページを開いたまま一定時間スクロール（操作）がないユーザーにポップアップを表示する方法を、最小実装から本物のアイドル検出・sessionStorageでの表示回数制御・短いページ対策・アクセシビリティ・再利用クラスまで実装コードで解説します。

入力フォームに自動補完（オートコンプリート）を実装する方法を解説します。まずはHTML標準のdatalistで手軽に、次にJavaScriptでカスタムUI（候補の絞り込み・選択・外クリックで閉じる）を実装します。サーバーから候補を取得する方法や、キーボード操作・ARIA対応の発展版まで、動くデモ付きで紹介します。

URLパラメータを取得して処理を分岐する方法を解説します。URLSearchParamsでのget/has/getAll、if/else・switch・オブジェクトマップでの分岐、Object.fromEntriesでの一括取得、リロードせずにパラメータを更新するhistory.replaceState、戻る/進むに対応するpopstateまで、Nodeで検証したコードで紹介します。

フォームの入力内容をlocalStorageに保存し、リロードしても消えないようにする方法を解説します。inputイベントでの保存・DOMContentLoadedでの復元、複数フィールドをJSON.stringifyで一括保存、チェックボックス対応、送信後のクリア、機密情報を保存しない注意点まで、Nodeで検証したコードで紹介します。

IntersectionObserverを使って、スクロールで画面に入った要素をふわっと表示する方法を解説します。CSSのtransitionでフェードアップ、IntersectionObserverでのクラス付与、一度きりにするunobserve、threshold/rootMarginの調整、prefers-reduced-motionへの配慮まで、動くデモ付きで紹介します。

ページ読み込み後に一度だけ処理を実行する方法を解説します。DOM構築後のDOMContentLoaded、画像まで待つload、イベントを使わずに済むdeferスクリプト、「毎回」と「初回アクセスだけ」の違い（localStorage）、jQueryのreadyまで、使い分けを表でまとめて紹介します。

JavaScriptで覚えておくと便利な1行テクニックを10個紹介します。三項演算子、??によるデフォルト値、スプレッドでの配列コピー、filter・map・includes、IIFE、Object.keys、文字列→数値変換、短いループまで、Nodeで動作確認したコードで解説します。可読性とのバランスも紹介します。

アンカーリンク（#リンク）のスムーススクロールを実装する方法を解説します。一番簡単なCSSのscroll-behavior、固定ヘッダー対応のscroll-margin-top、JavaScriptでのscrollIntoView・scrollToによるオフセット調整、prefers-reduced-motionへの配慮まで、用途別に紹介します。