JavaScript

JavaScript

【JavaScript】some / every の使い方|配列の条件判定・includes / find との違い・短絡評価・オブジェクト配列の検索まで解説

JavaScriptのsome・everyメソッドを完全解説。someで配列のいずれかが条件に一致するかを判定、everyで全要素が条件を満たすかを判定、includes・find・filterとの使い分け、空配列での挙動の違い、短絡評価(早期リターン)のパフォーマンスメリット、オブジェクト配列でのプロパティ検索、フォームバリデーション・権限チェック・禁止ワード検出の実務パターンまで網羅。
JavaScript

【JavaScript】ファイルをダウンロードする方法|Blob URL・CSV / JSON 生成・fetch + Blob・ファイル名指定・CORS 対策まで解説

JavaScriptでファイルをダウンロードする方法を完全解説。aタグのdownload属性による基本、Blob URLで動的生成データをダウンロード、CSV・JSON・テキストファイルの生成とダウンロード、fetch+Blobでサーバー上のファイルをダウンロード、ファイル名の指定方法、クロスオリジン(CORS)の制限と対策、URL.revokeObjectURLによるメモリ解放、ダウンロード進捗の表示、画像のダウンロードボタンの実務パターンまで網羅。
JavaScript

【JavaScript】input 入力値のリアルタイム計算と表示方法|input イベント・数値変換・消費税計算・BMI・ショッピングカートまで解説

JavaScriptでinputに入力された数値の計算結果をリアルタイム表示する方法を完全解説。inputイベントとchangeイベントの違い、parseFloat/parseIntによる数値変換、NaN対策、消費税計算機、BMI計算機、ショッピングカートの合計計算、rangeスライダーとの連動、toLocaleStringで金額フォーマット、バリデーションとエラー表示、デバウンスによるパフォーマンス最適化まで網羅。
JavaScript

【JavaScript】配列から偶数番目・奇数番目の要素を取得する方法|filter・for ループ・reduce・n 番おき・テーブル交互行まで解説

JavaScriptで配列から偶数番目・奇数番目の要素を取得する方法を完全解説。filterでインデックスの偶奇を判定、forループで偶奇を同時に分類、reduceで1回のループで偶奇を分離、n番おきの要素を取得する汎用関数、0始まりと1始まりの違い、テーブルの交互行にスタイルを適用、配列を2列に分割してレイアウト、ペアワイズ処理(隣接する要素をペアにする)の実務パターンまで網羅。
JavaScript

【JavaScript】配列の最初と最後の要素を取得・判定する方法|at(-1)・分割代入・forEach 内の判定・空配列チェックまで解説

JavaScriptで配列の最初と最後の要素を取得・判定する方法を完全解説。arr[0]とarr[arr.length-1]の基本、at(-1)で末尾を簡潔に取得(ES2022)、分割代入とレスト構文で先頭と残りを分離、forEachやmapのループ内で最初か最後かをインデックスで判定、shift/popとの違い(破壊的vs非破壊的)、空配列のundefinedチェック、findLast/findLastIndexで末尾から検索、区切り文字の出し分け・リストのスタイル制御・パンくずリストの実務パターンまで網羅。
JavaScript

【JavaScript】送信ボタンの二重クリックを防止する方法|disabled・ローディング表示・fetch + finally・サーバー側対策まで解説

JavaScriptで送信ボタンの二重クリック(連打・2度押し)を防止する方法を完全解説。disabled属性による無効化、ローディングスピナーの表示、フラグ変数による制御、fetch+try/catch/finallyで非同期処理の完了後に再有効化、form.addEventListener('submit')でフォーム全体を制御、AbortControllerで重複リクエストをキャンセル、サーバー側の冪等性トークン、CSS pointer-events:noneとaria-disabled、Reactでの対策まで網羅。
JavaScript

【JavaScript】クリップボードにコピーする方法|Clipboard API・writeText・フォールバック・コピー成功通知・HTTPS 制限まで解説

JavaScriptでクリップボードにテキストをコピーする方法を完全解説。Clipboard APIのnavigator.clipboard.writeTextによる推奨方法、execCommand('copy')によるレガシーフォールバック、HTTPS/localhost制限と対処法、コピー成功時のユーザーフィードバック(ボタンテキスト変更・トースト通知)、readTextでクリップボードから読み取り、ClipboardItemでリッチコンテンツ(HTML・画像)のコピー、コードブロックのコピーボタン・共有URL・招待コードの実務パターンまで網羅。
JavaScript

【JavaScript】最初・最後の子要素を取得する方法|firstElementChild・lastElementChild・firstChild との違い・CSS :first-child まで解説

JavaScriptで最初と最後の子要素を取得する方法を完全解説。firstElementChild/lastElementChildの基本、firstChild/lastChildとの違い(テキストノード問題)、children[0]とchildren[length-1]、querySelector(:first-child/:last-child)、子要素が存在しない場合のnullチェック、CSSの:first-child/:last-child/:first-of-type/:last-of-typeとの使い分け、リストの先頭/末尾操作・テーブルのヘッダー/フッター取得・パンくずリストの実務パターンまで網羅。
JavaScript

【JavaScript】n番目以外の子要素を取得する方法|filter・:not(:nth-child)・children・複数除外・実務パターンまで解説

JavaScriptでn番目以外の子要素を取得する方法を完全解説。Array.fromとfilterでインデックス除外、querySelectorAllの:not(:nth-child(n))で CSS セレクタベースの除外、childrenプロパティとforループ、複数のインデックスをまとめて除外、先頭・末尾・特定クラス以外の要素を取得、nth-childとnth-of-typeの違い、テーブル行のフィルタリング・タブ切り替え・リストの並び替えの実務パターンまで網羅。
JavaScript

【JavaScript】四捨五入の方法|Math.round・toFixed・小数桁数指定・浮動小数点の誤差対策・切り捨て / 切り上げとの比較まで解説

JavaScriptで四捨五入する方法を完全解説。Math.roundによる整数への四捨五入、小数第N位での四捨五入(10のN乗で掛け割り)、toFixedの使い方と戻り値が文字列である注意点、浮動小数点の誤差(1.005問題)と対策、Math.floor(切り捨て)・Math.ceil(切り上げ)・Math.trunc(小数除去)との比較、負の数での挙動の違い、Intl.NumberFormatによる通貨フォーマット、金額計算・消費税計算・表示フォーマットの実務パターンまで網羅。
JavaScript

【JavaScript】配列を比較する方法|=== が使えない理由・every・JSON.stringify・ネスト配列・差分と共通要素の取得まで解説

JavaScriptで配列を比較する方法を完全解説。===で配列が比較できない理由(参照比較)、everyメソッドで要素ごとに比較、JSON.stringifyによる簡易比較とその限界、順序を無視した比較(Setの活用)、ネスト配列の再帰的な比較、オブジェクト配列の比較、差分(片方にしかない要素)の取得、共通要素(積集合)の取得、Set同士の比較パターンまで網羅。
JavaScript

【JavaScript】配列の使い方まとめ|作成・追加・削除・ループ・スプレッド構文・分割代入・破壊的 / 非破壊的メソッドまで解説

JavaScriptの配列を体系的に解説。配列リテラル・Array.from・Array.ofによる作成、push/pop/unshift/shiftで要素の追加と削除、for/forEach/for...of/mapによるループ処理、スプレッド構文によるコピーと結合、分割代入による要素の取り出し、破壊的メソッドと非破壊的メソッドの分類、配列メソッド早見表、sort・flat・at・findLastなど最新メソッドまで網羅。
JavaScript

【JavaScript】イベントを無効化する方法|preventDefault・stopPropagation・disabled・removeEventListener・AbortController まで解説

JavaScriptでイベントを無効化する方法を完全解説。event.preventDefaultでデフォルト動作を止める、event.stopPropagationでバブリングを止める、event.stopImmediatePropagationで同一要素の他リスナーも止める、disabled属性・pointer-events:noneでUI的に無効化、removeEventListenerでリスナーを削除、AbortControllerでリスナーを一括解除、フォーム送信制御・リンク遷移防止・モーダル外クリック無効化の実務パターンまで網羅。
JavaScript

【JavaScript】計算と Math オブジェクトの使い方|四捨五入・切り捨て・乱数・べき乗・浮動小数点の注意点まで解説

JavaScriptの計算とMathオブジェクトを完全解説。算術演算子の基本、Math.round・Math.floor・Math.ceilによる四捨五入・切り捨て・切り上げ、Math.randomで乱数生成、Math.pow・べき乗演算子(**)、Math.abs・Math.max・Math.min・Math.sqrt・Math.PI、浮動小数点の誤差(0.1+0.2問題)と対策、toFixedの注意点、金額計算・税込計算・ランダム抽選の実務パターンまで網羅。
JavaScript

【JavaScript】フォーカスイベントの使い方|focus・blur・focusin・focusout・フォームバリデーション・アクセシビリティまで解説

JavaScriptでフォーカスイベントを使う方法を完全解説。focusイベントとblurイベントの基本、focusin/focusoutとの違い(バブリング問題)、element.focus()でプログラム的にフォーカスを移動、CSS :focusとの使い分け、tabindexでフォーカス可能にする方法、relatedTargetでフォーカス移動先を取得、フォームバリデーション・フローティングラベル・フォーカストラップの実務パターンまで網羅。
JavaScript

【JavaScript】マウスイベントの使い方|mouseenter・mouseleave・mouseover・mousemove・CSS :hover との使い分けまで解説

JavaScriptでマウスイベントを使う方法を完全解説。mouseenter/mouseleaveとmouseover/mouseoutの違い(バブリング問題)、mousemoveでマウス座標を取得、eventオブジェクトのclientX/clientY/offsetX/offsetY、CSS :hoverとJavaScriptの使い分け、Pointer Eventsでタッチ・ペン対応、ツールチップ・ドロップダウンメニュー・画像プレビュー・マウス追従エフェクトの実務パターンまで網羅。
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パース・テンプレートタグ処理の実務パターンまで網羅。