JavaScript

【JavaScript】文字列の大文字・小文字を変換する方法|toUpperCase・toLowerCase・先頭大文字化・ケース変換・大文字小文字無視比較まで解説

JavaScriptで文字列の大文字・小文字を変換する方法を完全解説。toUpperCaseで全て大文字に変換、toLowerCaseで全て小文字に変換、先頭文字だけ大文字にするcapitalize関数、キャメルケース・スネークケース・ケバブケースの相互変換、大文字小文字を無視した文字列比較、toLocaleUpperCase/toLocaleLowerCaseのロケール対応、入力値の正規化やソートの実務パターンまで網羅。
JavaScript

【JavaScript】indexOf の使い方|文字列・配列の位置検索・lastIndexOf・全出現位置の取得・includes との違いまで解説

JavaScriptのindexOfメソッドを完全解説。文字列のindexOfの基本構文と戻り値、検索開始位置の指定、見つからない場合の-1判定、lastIndexOfで末尾から検索、配列のindexOfの基本と注意点(オブジェクト比較)、大文字小文字を無視した検索、全出現位置を配列で取得する方法、includesとの使い分け、sliceやsubstringとの組み合わせパターンまで網羅。
JavaScript

【JavaScript】文字列の長さを取得する方法|length プロパティ・サロゲートペア対応・バイト数・配列の length まで解説

JavaScriptで文字列の長さを取得する方法を完全解説。lengthプロパティの基本、UTF-16コードユニット数とは何か、サロゲートペア(絵文字)でlengthが想定と異なる理由と対策、Intl.Segmenterで書記素クラスタ単位の正確なカウント、バイト数の取得方法、配列のlengthとの違い、空文字判定・入力文字数制限・テキスト省略表示の実務パターンまで網羅。
JavaScript

【JavaScript】文字コードを取得・変換する方法|charCodeAt・codePointAt・fromCharCode・fromCodePoint・サロゲートペアまで解説

JavaScriptで文字と文字コードを相互変換する方法を完全解説。charCodeAtでUTF-16コードを取得、codePointAtでUnicodeコードポイントを取得、String.fromCharCodeで文字コードから文字を生成、String.fromCodePointでコードポイントから文字を生成、charCodeAtとcodePointAtの違い(サロゲートペア問題)、大文字小文字判定・シーザー暗号・全角半角変換・文字種判定の実務パターンまで網羅。
JavaScript

【JavaScript】charAt の使い方|文字列から1文字を取得・ブラケット記法 / at() との違い・サロゲートペア対応まで解説

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

【JavaScript】includes の使い方|配列・文字列の存在チェック・大文字小文字無視・indexOf / some との違いまで解説

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

【JavaScript】substring の使い方|文字列の切り出し・slice との違い・indexOf との組み合わせ・実務パターンまで解説

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

【JavaScript】slice の使い方|配列・文字列の切り出し・負のインデックス・splice / substring との違いまで解説

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

【JavaScript】ページ上部へ戻るボタンの実装方法|スムーススクロール・フェードアニメーション・デザイン・アクセシビリティまで解説

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

【JavaScript】ハンバーガーメニューの実装方法|CSS アニメーション・オーバーレイ・アクセシビリティ・レスポンシブ対応まで解説

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

【JavaScript】要素を置換する方法|replaceWith・replaceChild・replaceChildren・outerHTML・条件分岐パターンまで解説

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

【JavaScript】HTML 要素を追加・削除する方法|createElement・append・remove・insertAdjacentHTML・実務パターンまで解説

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

【JavaScript】getAttribute の使い方|属性値の取得・存在チェック・dataset との違い・setAttribute / removeAttribute まで解説

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

【JavaScript】兄弟要素を取得する方法|nextElementSibling・previousElementSibling・全兄弟の取得・実務パターンまで解説

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

【JavaScript】子要素を取得・操作する方法|children・childNodes・firstElementChild・追加・削除・置換まで解説

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

【JavaScript】classList の使い方完全ガイド|add・remove・toggle・contains・replace・className との違いまで解説

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

【JavaScript】タグ名で要素を取得する方法|getElementsByTagName・querySelectorAll・ライブコレクション・実務パターンまで解説

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

【JavaScript】name 属性で要素を取得する方法|getElementsByName・querySelector・フォーム値取得・ラジオボタンまで解説

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

【JavaScript】querySelectorAll で取得した複数要素を操作する方法|forEach・配列変換・filter・一括スタイル変更まで解説

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

【JavaScript】querySelector / querySelectorAll の使い方|CSS セレクタ・NodeList・ループ・パフォーマンスまで解説

JavaScriptのquerySelector/querySelectorAllの使い方を完全解説。CSSセレクタによるID・クラス・属性・疑似クラスでの要素取得、NodeListの特性とループ方法、getElementById等との比較、スコープ付き検索(親要素内から検索)、closest()・matches()との組み合わせ、パフォーマンスの注意点まで網羅。