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 は「同じ...
スポンサーリンク