JavaScript

スポンサーリンク
JavaScript

JavaScript 逆引き集 | localStorage 書き込み/読み出し

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

JavaScript 逆引き集 | smooth スクロール

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

JavaScript 逆引き集 | スクロール位置取得

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

JavaScript 逆引き集 | getBoundingClientRect で座標取得

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

JavaScript 逆引き集 | 要素の表示・非表示(CSSクラス)

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

JavaScript 逆引き集 | フォーカス制御

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

JavaScript 逆引き集 | イベントデリゲーション

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

JavaScript 逆引き集 | フラグメント利用で描画高効率化

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

JavaScript 逆引き集 | NodeList を配列に変換

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

JavaScript 逆引き集 | querySelectorAll(複数)

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

JavaScript 逆引き集 | querySelector(単一)

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

JavaScript 逆引き集 | 子要素の取得

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

JavaScript 逆引き集 | 親要素の取得

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

JavaScript 逆引き集 | CSS スタイル変更

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

JavaScript 逆引き集 | textContent を使う(テキストのみ)

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

JavaScript 逆引き集 | innerHTML を使う(注意:XSS)

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

JavaScript 逆引き集 | 要素の挿入

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

JavaScript 逆引き集 | 要素の生成

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

JavaScript 逆引き集 | dataset(data-*)の利用

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

JavaScript 逆引き集 | 属性の取得/設定

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

JavaScript 逆引き集 | クラス操作(classList)

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

JavaScript 逆引き集 | フォームのsubmit防止

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

JavaScript 逆引き集 | イベントリスナー削除

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

JavaScript 逆引き集 | イベントリスナー追加(DOM)

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

JavaScript 逆引き集 | throttle 実装(簡易)

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

JavaScript 逆引き集 | debounce 実装(簡易)

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

JavaScript 逆引き集 | clearInterval で解除

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

JavaScript 逆引き集 | 繰り返し(setInterval)

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

JavaScript 逆引き集 | 取消可能タイマー(clearTimeout)

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

JavaScript 逆引き集 | タイマー(setTimeout)

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