2025-12

要素の挿入（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 は ...

再試行ロジック（簡易） — for(i=0;i<3;i++){ try{await f();break}catch{} }「失敗するかもしれない処理を、何度か繰り返して成功を狙う」仕組みが 再試行ロジ...

カスタムエラー投げるの基本 — throw new Error('msg')「想定外の入力」「外部APIの不整合」「ビジネスルール違反」など、続行できない状況を即座に知らせたいときは、エラーを投げて処...

カスタムエラー投げる — throw new Error('msg') の基本と実践「想定外の入力」「外部APIの不整合」「ビジネスルール違反」など、続行できない状況を即座に知らせたいときは、エラーを...

エラーハンドリング（try/catch）の基本と実践JavaScript では try/catch 構文を使って「エラーが起きてもプログラム全体が止まらないようにする」ことができます。初心者がまず覚え...