JavaScript

localStorage の基本 — localStorage.setItem('k', v) / localStorage.getItem('k')localStorage は「ブラウザに文字列とし...

スムーススクロールの基本 — window.scrollTo({ top: 0, behavior: 'smooth' })「スムーススクロール」は、画面を指定位置まで滑らかに移動する演出です。ユーザ...

スクロール位置取得の基本 — window.scrollY と el.scrollTopページ全体のスクロール量は window.scrollY（縦）/ window.scrollX（横）。特定のスク...

要素の座標取得の基本 — el.getBoundingClientRect() と表示制御（classList.toggle('is-hidden')）要素の「画面上での位置とサイズ」を取りたいときは...

要素の表示・非表示（CSSクラス） — el.classList.toggle('is-hidden')クラスを切り替えて見た目を制御するのが一番安全で保守しやすい方法です。classList.tog...

フォーカス制御の基本 — el.focus()フォームやボタンに「今ここを操作できます」と意識を集めるのがフォーカスです。el.focus() は要素にプログラムからフォーカスを当てる最小の一手。入力...

イベントデリゲーションの基本 — parent.addEventListener('click', e => { if (e.target.matches('button')) ... })イベントデ...

フラグメント利用で描画高効率化 — const frag = document.createDocumentFragment(); frag.append(...)大量の要素を1つずつDOMに挿入する...

NodeList を配列に変換の基本 — Array.from(nodeList) または document.querySelectorAll() が返すのは「配列のように見える NodeList」。...

querySelectorAll の基本 — document.querySelectorAll('li')querySelectorAll は「CSSセレクタに一致する要素を“全部”まとめて取得」す...

querySelector の基本 — document.querySelector('.cls')querySelector は「CSSセレクタで、最初に一致した1つの要素」を取得するメソッドです。...

子要素の取得の基本 — el.childrenel.children は「直下の子要素だけ」を順番付きで返します。返り値は配列“風”の HTMLCollection（ライブコレクション）で、テキストノ...

親要素の取得の基本 — el.parentElementある要素から「一つ上の箱（親要素）」を取得したいときに使うのが parentElement。DOMツリーを上に辿って、要素ノードだけを返します。...

CSSスタイル変更の基本 — el.style.display = 'none'要素を「非表示」にする最短の方法が style.display = 'none'。表示したいときは 'block' など...

テキストのみを扱う — el.textContent = 'text'textContent は「要素の中身をテキストとして読み書きする」ためのプロパティです。HTMLタグは解釈されず、そのまま文字列...

innerHTML の基本と注意点（XSS対策を含む） — el.innerHTML = '<b>hi</b>'innerHTML は「要素の中身をHTML文字列として読み書きする」ためのプロパティで...

要素の挿入（append / appendChild）の基本 — parent.append(child)「作った要素を画面に出す」最後の一手が挿入です。DOMの親要素に子をぶら下げることで、はじめて...

要素の生成の基本 — const n = document.createElement('div')画面に新しい箱（要素）を追加したいときは document.createElement(tagNam...

Dataset の基本 — el.dataset.foo = 'bar'data-* 属性は、HTML要素に開発者が自由なカスタムデータを埋め込むための仕組みです。JavaScriptでは eleme...

属性の取得／設定の基本 — el.getAttribute('data-x') と el.setAttribute('data-x', v)HTML要素の「属性」（id, class, href, s...

クラス操作の基本 — el.classList.add('a') と el.classList.toggle('b')CSSの見た目（色、サイズ、表示/非表示など）を切り替える最もシンプルな方法が「ク...

フォームの submit 防止 — e.preventDefault()フォームは送信するとページがリロードされます。JavaScriptで「リロードせずに自分の処理をしたい」ときは、submit イ...

イベントリスナー削除（DOM） — el.removeEventListener('click', fn)イベントを「もう受けたくない」瞬間は必ず来ます。removeEventListener は、追...

イベントリスナー追加（DOM） — el.addEventListener('click', fn)ボタンを押す、入力する、スクロールする。こうした「イベント」が起きた瞬間に処理を実行するのがイベント...

Throttle 実装（簡易） — 一定間隔だけ処理するスロットル「スクロールやマウス移動のように、イベントが大量に連続発火して重くなる」問題を減らすテクが throttle（スロットル）。一定間隔ご...

Debounce 実装（簡易） — 入力が落ち着いたら一度だけ実行「キー入力やスクロールなど“連打されるイベント”を落ち着いてから1回だけ処理したい」—その定番テクが debounce。短いコードで、...

clearInterval で解除の基本 — clearInterval(id)setInterval で始めた「一定間隔の繰り返し」を止めるのが clearInterval(id)。開始時に返される...

繰り返しタイマーの基本 — const id = setInterval(()=>{}, 1000)setInterval は「一定間隔ごとに関数を繰り返し実行する」ためのタイマーです。第2引数はミリ...

取消可能タイマーの基本 — const id = setTimeout(...); clearTimeout(id)「一定時間後に一度だけ実行」するのが setTimeout。その実行予約はタイマーI...

タイマーの基本 — setTimeout(()=>{}, 1000)setTimeout は「指定した時間の後に、関数を一度だけ実行する」タイマーです。第2引数はミリ秒で指定し、例えば 1000 は ...