SQLite
SQLite | ゼロからはじめるSQL、30日で習得するSQLite：検索力強化 － Day15 結合②
JavaScript
JavaScript JavaScript 逆引き集 | fs.readFile（Node）
fs.readFile（Node.js） — const data = fs.readFileSync('a.txt','utf8')Node.js でファイルを読み込むときに使うのが fs モジュー...
JavaScript JavaScript 逆引き集 | Buffer の利用（Node）
Buffer の利用（Node.js） — Buffer.from('text')Node.js には Buffer という特別なオブジェクトがあります。これは「バイナリデータ（生のデータ列）」を扱う...
JavaScript JavaScript 逆引き集 | process.env（環境変数参照）
process.env（環境変数参照） — process.env.NODE_ENV（Node.js）Node.js では 環境変数 を process.env 経由で参照できます。環境変数は「アプリ...
JavaScript JavaScript 逆引き集 | require（CommonJS）
require（CommonJS） — const x = require('x')（Node.js）Node.js では昔から使われている モジュール読み込みの仕組み が CommonJS です。r...
JavaScript JavaScript 逆引き集 | export の基本
export の基本 — export function f(){} / export default ...JavaScript の モジュール では、ファイル内の関数や変数を外部に公開するために ...
JavaScript JavaScript 逆引き集 | 動的 import（コード分割）
動的 import（コード分割） — const mod = await import('./mod.js')JavaScript の 動的 import は「必要なときにだけモジュールを読み込む」仕...
JavaScript JavaScript 逆引き集 | Module（ESM）インポート
Module（ESM）インポート — import fs from 'fs'（環境による）JavaScript には モジュール という仕組みがあり、コードを分割して再利用できます。ESM（ECMAS...
JavaScript JavaScript 逆引き集 | Base64 エンコード／デコード
Base64 エンコード／デコード — btoa(str) / atob(b64)JavaScript には文字列を Base64 形式に変換するための関数が標準で用意されています。Base64 は「...
JavaScript JavaScript 逆引き集 | URL 文字列エンコード／デコード
URL 文字列エンコード／デコード — encodeURIComponent / decodeURIComponentWebアプリでは「URLに文字列を安全に含めたい」場面がよくあります。検索キーワー...
JavaScript JavaScript 逆引き集 | Web Crypto API（ランダム）
Web Crypto API（ランダム値生成） — crypto.getRandomValues(new Uint8Array(16))JavaScript には Web Crypto API という...
JavaScript JavaScript 逆引き集 | Clipboard API（取得）
Clipboard API（取得） — navigator.clipboard.readText().then(t => {})Clipboard API は「クリップボードにある文字列を読み取る」こ...
JavaScript JavaScript 逆引き集 | Clipboard API（コピー）
Clipboard API（コピー） — navigator.clipboard.writeText('text')Clipboard API を使うと、JavaScriptから「クリップボードに文字...
JavaScript JavaScript 逆引き集 | geolocation API（位置取得）
geolocation API（位置取得） — navigator.geolocation.getCurrentPosition(p => {})ブラウザには「現在地を取得する」ための Geoloca...
JavaScript JavaScript 逆引き集 | Navigator.online でオンライン判定
オンライン判定 — navigator.onLineブラウザには「今ネットに接続できているかどうか」を判定するためのプロパティがあります。それが navigator.onLine です。true なら...
JavaScript JavaScript 逆引き集 | SSE（EventSource）受信
SSE（Server-Sent Events）受信 — const es = new EventSource(url); es.onmessage = e => {}SSE (Server-Sent ...
JavaScript JavaScript 逆引き集 | WebSocket 基本接続
WebSocket 基本接続 — const ws = new WebSocket(url); ws.onmessage = e => {}WebSocket は「ブラウザとサーバーが双方向でリアルタ...
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 は ...