JavaScript
JavaScript | 1 日 120 分 × 7 日アプリ学習：モーダルウィンドウ管理
JavaScript
JavaScript JavaScript | 基礎構文：変数・定数 – 暗黙的なグローバル
まず「暗黙的なグローバル」を一言でいうと暗黙的なグローバルは、「自分ではグローバル変数を作ったつもりがないのに、“こっそり”グローバル変数が作られてしまう現象」のことです。もっと砕くと、本当は let...
JavaScript JavaScript | 基礎構文：変数・定数 – グローバル変数の扱い
まず「グローバル変数」とは何かグローバル変数は、「プログラムの“どこからでも”読めて・書けてしまう変数」 のことです。もう少し具体的に言うと、どの関数の中にも入っていない場所（ファイルの一番上とか）で...
JavaScript JavaScript | 基礎構文：変数・定数 – ブロックスコープ
まず「ブロックスコープ」を一言でいうとブロックスコープは、「{ ... } のカタマリの中だけで有効な“変数の生息範囲”」 のことです。JavaScript の let と const で宣言した変数...
JavaScript JavaScript | 基礎構文：変数・定数 – 再代入の可否とは
「再代入の可否」を一言でいうと「再代入の可否（さいだいにゅうの かひ）」は、「一度値を入れた変数に、あとから“別の値を入れ直していいかどうか」というルールのことです。もう少しくだいて言うと、一度入れた...
JavaScript JavaScript | 基礎構文：変数・定数 – let と const の違い
まず「共通点」と「一言での違い」let と const は、どちらも 「変数（名前付きの箱）を作るためのキーワード」 です。共通しているのは、ブロックスコープ（{} の中だけ有効）var より新しい書...
JavaScript JavaScript | 基礎構文：変数・定数 – var を使わない理由
まず結論：「新しく書くコードでは var はほぼ使わない」JavaScript には変数宣言が 3 種類あります。varletconstvarletconstJavaScript昔の JavaScri...
JavaScript JavaScript | 基礎構文：変数・定数 – 変数とは何か
まず「変数」をざっくり一言でいうと変数は、「あとで使うために値を入れておく“名前付きの箱”」だと思ってください。数字文字文字列（文章）true / falseオブジェクトや配列など、プログラムの中で扱...
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 は「同じ...