</>CodingLSコーディングライフスタイル

JavaScriptで一定時間ユーザーの操作がなかった場合（アイドル状態）に処理を実行する方法を解説。setTimeout＋イベントリセットによる基本実装、監視するイベントの選び方、カウントダウン表示つき自動ログアウト、ページが非表示になったときの正確な時間計測、Page Visibility API との組み合わせ、再利用しやすい IdleTimer クラス設計まで実践コードで紹介します。

JavaScriptでテキストの改行コードを<br>タグに変換する方法を解説。replace+正規表現による基本変換、・・の3種類の改行コードへの対応、innerHTML使用時のXSSインジェクション対策、textContent+white-space:pre-wrapで安全に改行表示する方法、テキストエリア入力を安全にHTML表示する実装パターンまで紹介します。

JavaScriptで既存のDOM要素を別の場所に移動させる方法を解説。appendChild・prepend・append・insertBefore・after・beforeなどの挿入メソッドが既存要素に使うと「コピー」でなく「移動」になる仕組みを詳しく説明。cloneNodeでのコピーとの違い、リスト並び替え、ドラッグ&ドロップ実装、DocumentFragmentによる一括移動のパフォーマンス最適化まで実践コードで紹介します。