JavaScript

スポンサーリンク
JavaScript

JavaScript 逆引き集 | canvas.toDataURL で画像取得

Canvas から画像を取得 — canvas.toDataURL('image/png')canvas.toDataURL() は Canvas の内容を画像データ(Base64形式の文字列)に変換...
JavaScript

JavaScript 逆引き集 | 画像を Canvas に描画

画像を Canvas に描画 — ctx.drawImage(img, 0, 0)Canvas に画像を描くときの基本は「画像が読み込まれてから drawImage を呼ぶ」こと。img.onload...
JavaScript

JavaScript 逆引き集 | Canvas 基本描画

Canvas 基本描画 — const ctx = canvas.getContext('2d'); ctx.fillRect(0,0,100,100)HTML5 の <canvas> は「絵を描くた...
JavaScript

JavaScript 逆引き集 | input[type=file] の扱い

input の扱い — const f = input.filesブラウザでユーザーにファイルを選んでもらうときに使うのが <input type="file">。選ばれたファイルは input.fi...
JavaScript

JavaScript 逆引き集 | FileReader でローカルファイル読み込み

FileReader でローカルファイル読み込み — const fr = new FileReader(); fr.onload = e => console.log(e.target.result...
JavaScript

JavaScript 逆引き集 | ダウンロード(リンク生成)

ダウンロード(リンク生成) — const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='f...
JavaScript

JavaScript 逆引き集 | Blob とファイル作成

Blob とファイル作成 — const b = new Blob(, { type: 'text/plain' })Blob(Binary Large Object)は「生のデータのかたまり」を表す...
JavaScript

JavaScript 逆引き集 | popstate イベント検知

popstate イベント検知 — window.addEventListener('popstate', ()=>{})popstate イベントは ブラウザの「戻る」「進む」操作や history...
JavaScript

JavaScript 逆引き集 | history.pushState/replaceState

history.pushState/replaceState の基本 — history.pushState({}, '', '/page')history.pushState と history.r...
JavaScript

JavaScript 逆引き集 | URL 生成/解析(URLクラス)

URL クラスの基本 — const u = new URL('/a', 'URL クラスは「URL文字列を安全に生成・分解」するための標準APIです。相対パスと基準URLを組み合わせて絶対URLを作...
JavaScript

JavaScript 逆引き集 | URLSearchParams(クエリ操作)

URLSearchParams の基本(クエリ操作) — const p = new URLSearchParams(location.search)URL の「?以降」のクエリを簡単に読み書きできる...
JavaScript

JavaScript 逆引き集 | IndexedDB 基本(簡易)

IndexedDB 基本(簡易)— const req = indexedDB.open('db')IndexedDB はブラウザ内に大量・構造化データを保存できるクライアントサイドDBです。非同期A...
JavaScript

JavaScript 逆引き集 | Cookie セット(簡易)

Cookie を簡単にセット・取得 — document.cookie = 'k=v; path=/; max-age=3600'Cookie はブラウザに短い文字列を保存し、同一オリジンへの次回以降...
JavaScript

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

sessionStorage の基本 — sessionStorage.setItem('k', v) / sessionStorage.getItem('k')sessionStorage は「同じ...
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 は ...
JavaScript

JavaScript 逆引き集 | 再試行ロジック(簡易)

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

JavaScript 逆引き集 | カスタムエラー投げる

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

JavaScript 逆引き集 | カスタムエラー投げる

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

JavaScript 逆引き集 | エラーハンドリング(try/catch)

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

JavaScript 逆引き集 | axios(外部)基本

axios(外部ライブラリ)の基本 — axios.get(url).then(r => r.data)axios は人気のある HTTP クライアントライブラリで、ブラウザや Node.js で使え...
JavaScript

JavaScript 逆引き集 | fetch POST(JSON)

fetch で HTTP POST(JSON)の基本と実践fetch は HTTP リクエストを送る API。JSON を POST する場合は、メソッド指定・本文の JSON 化・ヘッダー指定(Co...
JavaScript

JavaScript 逆引き集 | fetch で HTTP GET

fetch で HTTP GET の基本と実践fetch は「URLへリクエストを送り、レスポンスを Promise として受け取る」ための API です。GET/POST などの HTTP メソッド...
JavaScript

JavaScript 逆引き集 | Promise.allSettled(結果全取得)

Promise.allSettled(結果全取得)の基本と実践Promise.allSettled は「複数の非同期処理が、成功か失敗かに関係なくすべて終わるまで待って、各結果のステータスと値(または...
JavaScript

JavaScript 逆引き集 | Promise.race(最初)

Promise.race の基本と実践(最初に決着したひとつ)Promise.race は「複数の非同期のうち、もっとも早く“決着”したひとつの結果(成功または失敗)で返す」ための静的メソッドです。配...
JavaScript

JavaScript 逆引き集 | Promise.all(並列)

Promise.all の基本と実践(並列処理)複数の非同期処理を「同時に走らせて、全部そろったら結果を受け取りたい」—その最短ルートが Promise.all。依存関係がないタスクをまとめて走らせる...
JavaScript

JavaScript 逆引き集 | async/await 基本

async/await 基本 — async function f(){ const r = await p }async/await は「非同期処理を同期処理のように読みやすく書く」ための構文です。...
JavaScript

JavaScript 逆引き集 | Promise 基本生成

Promise の基本生成 — new Promise((resolve, reject) => {...})Promiseは「未来のある時点で値が返ることを約束する」オブジェクト。非同期処理の結果と...
JavaScript

JavaScript 逆引き集 | WeakMap の利用(ガベージに強い参照)

WeakMap の基本 — new WeakMap()WeakMap は「キーにオブジェクトだけを使える特殊なマップ」です。最大の特徴は キーとなるオブジェクトがガベージコレクション(不要メモリ解放)...
JavaScript

JavaScript 逆引き集 | Map から配列へ

Map から配列へ — の基本と実践Map の「キーと値のペア」を配列にしたいときは、 が最短です。配列化すれば map/filter/sort などの配列操作が自由に使えます。基本の使い方const...
JavaScript

JavaScript 逆引き集 | Set の基本

Set の基本 — new Set(arr)JavaScript の Set は「重複を許さない値の集合」を扱うための組み込みオブジェクトです。配列と似ていますが、同じ値を二度入れることはできません。...
JavaScript

JavaScript 逆引き集 | Map の基本

Map の基本 — new Map(), set, getJavaScript の Map は「キーと値のペア」を保持するコレクションです。オブジェクトと似ていますが、任意の型をキーにできるのが大きな...
スポンサーリンク