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

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

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

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

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

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

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

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

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

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

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