JavaScript

JavaScript

【JavaScript】スクロールイベントの使い方|scroll・scrollY・throttle・IntersectionObserver・スクロール方向検出まで解説

JavaScriptでスクロールイベントを使う方法を完全解説。addEventListenerでscrollイベントを設定する基本、window.scrollYでスクロール量を取得、scrollTopで要素のスクロール量、throttleとrequestAnimationFrameによるパフォーマンス最適化、IntersectionObserverでスクロールイベント不要の要素検出、スクロール方向(上下)の検出、スクロール率の計算、passiveオプション、ヘッダー表示切替・プログレスバー・フェードインの実務パターンまで網羅。
JavaScript

【JavaScript】クリックイベントの設定方法|addEventListener・event オブジェクト・バブリング・イベント委任・実務パターンまで解説

JavaScriptでクリックイベントを設定する方法を完全解説。addEventListenerの基本構文、onclick属性・onclickプロパティとの違い、eventオブジェクトの活用(target・currentTarget・preventDefault・stopPropagation)、バブリングとキャプチャリング、イベント委任(Event Delegation)、once・passiveオプション、ダブルクリック・右クリックの検出、トグル切り替え・モーダル開閉・連打防止の実務パターンまで網羅。
JavaScript

【JavaScript】trim の使い方|文字列の空白を除去・trimStart / trimEnd・全角スペース対応・フォーム入力の正規化まで解説

JavaScriptのtrimメソッドを完全解説。文字列の先頭と末尾の空白を除去する基本、trimStart(先頭のみ)・trimEnd(末尾のみ)、trimが除去する空白文字の一覧、全角スペース・ゼロ幅スペースの扱い、正規表現による文字列内部の連続スペース除去、フォーム入力のバリデーション前処理・メールアドレスの正規化・CSV値のクリーニングの実務パターンまで網羅。
JavaScript

【JavaScript】split の使い方|文字列を配列に変換・区切り文字・正規表現・limit・join との組み合わせまで解説

JavaScriptのsplitメソッドを完全解説。基本構文と戻り値、カンマ・スペース・改行での分割、正規表現による複雑な区切りパターン、limit(分割数の制限)、空文字で1文字ずつ分割、joinとの組み合わせ(split→加工→join)、Array.from・スプレッド構文との違い、空要素の除去、CSV解析・URLパース・テンプレートタグ処理の実務パターンまで網羅。
JavaScript

【JavaScript】日時の計算まとめ|タイムスタンプ・UTC 変換・タイムゾーン・date-fns / Day.js・Temporal API まで解説

JavaScriptの日時計算を体系的に解説。タイムスタンプ(UNIXエポック)の取得と変換、UTCとローカル時刻の違い、getUTC系メソッド、Intl.DateTimeFormatによるタイムゾーン変換、date-fnsとDay.jsの比較と導入方法、Temporal APIの概要と基本操作、日時計算でよくあるバグ(月の0始まり・夏時間・タイムゾーンずれ)の回避方法まで網羅。
JavaScript

【JavaScript】日時の差分を計算する方法|日数・時間・分・秒・月差分・年齢計算・相対表示(○日前)まで解説

JavaScriptで2つの日時の差分を計算する方法を完全解説。ミリ秒の差分から日数・時間・分・秒に変換、月の差分・年の差分の計算、年齢計算、相対表示(3日前・2時間前)のフォーマット、Intl.RelativeTimeFormatによる国際化対応、performance.nowによる経過時間計測、タイムゾーンの注意点まで網羅。
JavaScript

【JavaScript】日付を操作する方法|加算・減算・比較・差分計算・月末取得・曜日判定・Date の set 系メソッドまで解説

JavaScriptで日付を操作する方法を完全解説。Dateオブジェクトのset系メソッドで年月日時分秒を変更、日付の加算(N日後・N月後・N年後)と減算、2つの日付の比較(大小・一致)、日付の差分計算(日数・時間数)、月末日の取得、曜日の取得と日本語表示、うるう年判定、営業日計算、日付のバリデーション、Temporal APIの紹介まで網羅。
JavaScript

【JavaScript】setTimeout の使い方|遅延実行・clearTimeout・delay 0 の仕組み・Promise 化・デバウンスまで解説

JavaScriptのsetTimeoutを完全解説。基本構文と戻り値、clearTimeoutでキャンセルする方法、delay 0の仕組みとイベントループ、async/awaitで使えるPromise化(sleep関数)、デバウンス(入力の待ち合わせ)パターン、通知の自動消去・遅延リダイレクト・APIリトライの実務パターン、setIntervalとの使い分けまで網羅。
JavaScript

【JavaScript】setInterval の使い方|一定間隔で繰り返し実行・clearInterval で停止・setTimeout との違い・実務パターンまで解説

JavaScriptのsetIntervalを完全解説。基本構文と戻り値、clearIntervalで停止する方法、実行回数を制限する方法、setTimeoutの再帰呼び出しとの違い(処理時間のずれ問題)、バックグラウンドタブでの挙動、メモリリーク防止のクリーンアップ、カウントダウンタイマー・リアルタイム時計・自動スライドショー・ポーリングの実務パターンまで網羅。
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】スムーススクロールを実装する方法|scrollIntoView・scrollTo・CSS scroll-behavior・固定ヘッダー対応まで解説

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