JavaScript

フォームの送信ボタンやAjax処理などで、ユーザーが同じボタンを何度もクリックしてしまうと、重複送信や想定外の動作が起きるこ

Webページ上で画像が正しく読み込まれたかを検知し、それに応じた処理を行いたい場面は多くあります。例えば、画像が表示された後にアニ

Webサイトで特定の要素を何回かクリックした後に処理を実行したい場面は意外と多くあります。例えば、隠し機能を実行したり、ボタン

JavaScriptで配列を扱う際、重複した値を取り除きたい場面は多々あります。この記事では、簡潔かつ効率的に重複を削除する代表的な2

Webアプリで入力内容や設定状態を保存し、次回の訪問時にも同じ状態を保ちたい場合、ローカルストレージ（localStorage）を活用する

Webページの表示を訪問者のアクセスURLに応じて切り替えたい場面は多くあります。例えば、特定のキャンペーンページでのみ特別なコンテ

ユーザーがページを開いた後に何もアクション（特にスクロール）をしないまま一定時間が経過した場合に、注目コンテンツやお知らせ

Webサイト上で「特定の時間帯だけ表示させたいバナー」や「深夜には非表示にしたいコンテンツ」など、時間帯によって表示・非表示を切

入力フォームに自動補完機能（オートコンプリート）を追加することで、ユーザーの入力作業を効率化し、入力ミスの防止にもつながり

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への配慮まで、用途別に紹介します。