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

JavaScriptのcharAtメソッドを完全解説。基本構文と戻り値、先頭・末尾の文字取得、範囲外インデックスの挙動、ブラケット記法（str[i]）との違い（undefined vs 空文字）、ES2022のat()メソッドで負のインデックスに対応、charCodeAt・codePointAtとの関係、サロゲートペア（絵文字）での注意点、先頭大文字化・文字ごとの処理・パスワード強度チェックの実務パターンまで網羅。

JavaScriptのincludesメソッドを完全解説。配列のArray.prototype.includesと文字列のString.prototype.includesの基本構文、検索開始位置の指定、大文字小文字を無視した検索、NaNの正しい判定、indexOfとの違い（NaN・可読性）、some/findとの使い分け、オブジェクト配列での注意点、ホワイトリスト判定・タグ重複チェック・入力バリデーションの実務パターンまで網羅。

JavaScriptのsubstringメソッドを完全解説。基本構文と戻り値、開始・終了インデックスの指定、引数省略パターン、substringの特殊な挙動（引数の自動入れ替え・負の値を0に変換）、sliceとの違い一覧表、非推奨のsubstrとの比較、indexOfやlastIndexOfとの組み合わせ、ドメイン抽出・拡張子取得・マスキング・文字数制限の実務パターンまで網羅。

JavaScriptのsliceメソッドを完全解説。配列と文字列それぞれの基本構文、開始・終了インデックスの指定、負のインデックスで末尾からの切り出し、引数省略による配列コピー、spliceとの違い（非破壊vs破壊）、substringとの違い（負の値の扱い）、ページネーション・テキスト省略・配列のチャンク分割・先頭/末尾の除去など実務パターンまで網羅。

JavaScriptで「ページ上部へ戻る」ボタンを実装する方法を完全解説。HTML・CSS・JavaScriptの基本構成、スクロール量に応じたフェード表示・非表示、window.scrollToによるスムーススクロール、矢印アイコンのCSSデザイン、scrollイベントのthrottleによるパフォーマンス最適化、IntersectionObserverによる表示制御、prefers-reduced-motionへの対応、aria-labelの設定まで網羅。

JavaScriptでハンバーガーメニューを実装する方法を完全解説。HTML・CSS・JavaScriptの基本構成、三本線アイコンのCSS描画と×印への変形アニメーション、スライドイン・フェードインのトランジション、オーバーレイの実装、メニュー外クリックで閉じる処理、Escキー対応、aria-expanded・aria-controls・focusTrapのアクセシビリティ対応、レスポンシブでPC幅では通常メニュー表示に切り替える方法まで網羅。

JavaScriptでスムーススクロールを実装する方法を完全解説。CSS scroll-behaviorによる最もシンプルな方法、scrollIntoViewで特定要素まで滑らかにスクロール、window.scrollToで座標指定スクロール、固定ヘッダーがある場合のオフセット調整、ページ内リンクのスムーススクロール、requestAnimationFrameによるカスタムイージング、prefers-reduced-motionへの対応まで網羅。

JavaScriptでDOM要素を置換する方法を完全解説。replaceWithで要素自身を置換する基本、replaceChildで親要素経由の置換、replaceChildrenで全子要素を一括置換、outerHTML・innerHTMLによる置換、テキストノード・複数要素への置換、エラーメッセージの差し替え・ローディング表示の切り替え・タブコンテンツの切り替えなど実務パターンまで網羅。

JavaScriptでHTML要素を動的に追加・削除する方法を完全解説。createElementで要素を作成しappendChild/appendで追加する基本、insertBefore・before/afterで任意の位置に挿入、insertAdjacentHTMLでHTML文字列を挿入、remove・removeChildで要素を削除、replaceWith・replaceChildで要素を置換、DocumentFragmentで大量要素を効率的に追加、TODOリスト・通知バナー・無限スクロールの実務パターンまで網羅。

JavaScriptのgetAttributeメソッドを完全解説。基本構文と戻り値、href・src・class・data-*属性の取得、存在しない属性のnull判定、hasAttributeとの使い分け、DOMプロパティとの違い（href完全URL問題・checked真偽値問題）、datasetとの比較、setAttributeでの属性設定、removeAttributeでの属性削除、動的なフォーム制御やアクセシビリティ操作の実務パターンまで網羅。

JavaScriptで兄弟要素を取得する方法を完全解説。nextElementSibling（次の兄弟）、previousElementSibling（前の兄弟）、nextSiblingとの違い（テキストノード問題）、全兄弟要素の取得、N個先の兄弟を取得するループパターン、アコーディオン・テーブル行ハイライト・フォームの連動フィールドの実務パターンまで網羅。

JavaScriptで子要素を取得・操作する方法を完全解説。children（要素ノードのみ）とchildNodes（テキストノード含む）の違い、firstElementChild/lastElementChild、parentElement/closest、子要素の追加（append/prepend/insertBefore）、削除（remove/removeChild）、置換（replaceWith）、実務パターンまで網羅。

JavaScriptのclassListプロパティの使い方を完全解説。add/remove/toggle/contains/replaceの全メソッド、複数クラスの同時操作、toggle(cls,force)による条件付き切り替え、classNameとの違い、アニメーション連携、ダークモード・タブ・モーダルの実務パターンまで網羅。

JavaScriptでタグ名を使って要素を取得する方法を完全解説。getElementsByTagNameの基本とHTMLCollection（ライブ）の特性、querySelectorAll('tag')との違い、親要素内からのスコープ検索、全要素取得（*）、テーブル操作・画像一括処理・リンク取得の実務パターンまで網羅。

JavaScriptでname属性を使って要素を取得する方法を完全解説。getElementsByNameの基本構文とNodeList、querySelector('[name=xxx]')との比較、ラジオボタン/チェックボックスの選択値取得、form.elements['name']でのアクセス、FormDataによるフォーム全体の値取得、実務パターンまで網羅。

JavaScriptのquerySelectorAllで取得した複数要素を操作する方法を完全解説。NodeListのforEach/for...ofによるループ、スプレッド構文での配列変換とfilter/map/reduce、一括クラス追加・スタイル変更・イベント登録、N番目の要素へのアクセス、HTMLCollectionとの違い、DOM変更時の再取得の注意点まで網羅。