JavaScript
JavaScript | 基礎構文：スコープ・実行コンテキスト － レキシカルスコープ
JavaScript
JavaScript JavaScript | Web API：クリップボード・共有 － UX 改善パターン
クリップボード・共有の UX は「技術」より「気づかい」で差がつくコピー・ペースト・共有って、コード的にはどれも数行で書けます。でも、「使っていて気持ちいいかどうか」 はその数行の周りにある“気づかい...
JavaScript JavaScript | Web API：クリップボード・共有 － URL 共有
「URL 共有」は“このページを誰かに渡す”ための一番シンプルな機能URL 共有は、ざっくり言うと「今見ているページのリンクを、他の人や自分の別の端末に渡す」ための仕組みです。JavaScript で...
JavaScript JavaScript | Web API：クリップボード・共有 － ネイティブ共有
「ネイティブ共有」は“ブラウザの外の世界”に渡すための出口Web アプリの中だけなら、URL をコピーしたり、画面に何か表示したりすれば完結します。でも実際のユーザーは、このページを LINE で送り...
JavaScript JavaScript | Web API：クリップボード・共有 － Share API
Share API は「このページいい感じだから誰かに送ろう」をボタン一発にする仕組みスマホでブラウザを見ていると、「共有」ボタンからLINE やメール、Twitter などに URL を送れますよね...
JavaScript JavaScript | Web API：クリップボード・共有 － セキュリティ制限
クリップボードのセキュリティ制限は「ユーザーを守るための強いガード」クリップボードには、ユーザーがコピーしたあらゆる情報が入ります。パスワード、クレカ番号、住所、仕事の文章、社外秘のコード——全部です...
JavaScript JavaScript | Web API：クリップボード・共有 － 読み取り権限
クリップボードの「読み取り権限」は“ユーザーのプライバシーを守るための最重要ポイント”クリップボードには、ユーザーがコピーした パスワード・住所・クレカ番号・仕事の文章 など、とてもセンシティブな情報...
JavaScript JavaScript | Web API：クリップボード・共有 － 書き込み権限
「書き込み権限」は“クリップボードを勝手にいじらないためのブレーキ”Clipboard API の「書き込み権限」は、ざっくり言うと 「このサイトに、クリップボードへ書き込ませていいか？」 をブラウザ...
JavaScript JavaScript | Web API：クリップボード・共有 － ペースト処理
「ペースト処理」は“ユーザーのクリップボードの中身を、アプリに連れてくる”ことコピー処理が「アプリ → クリップボード」だとしたら、ペースト処理はその逆、「クリップボード → アプリ」 です。ユーザー...
JavaScript JavaScript | Web API：クリップボード・共有 － コピー処理
「コピー処理」は“ユーザーの手を 1 回減らす”ための仕組みコピー処理は、ユーザーが本来やるはずだったテキストをドラッグで選択Ctrl+C / 右クリック → コピーという手順を、ボタン 1 回で代わ...
JavaScript JavaScript | Web API：クリップボード・共有 － Clipboard API
Clipboard API は「コピー／ペーストをコードから扱うための正式な入口」普段、コピーやペースストはキーボードの Ctrl+C / Ctrl+V や右クリックメニューでやりますよね。Clipb...
JavaScript JavaScript | Web API：ファイル・データ操作 － 大容量ファイルの扱い
「大容量ファイルの扱い」は“全部一気にやらない”が合言葉まず前提からいきます。数 KB〜数 MB 程度のファイルなら、FileReader.readAsText や readAsArrayBuffer...
JavaScript JavaScript | Web API：ファイル・データ操作 － CSV / JSON ファイル処理
CSV / JSON ファイル処理は「テキストとして読み、オブジェクトとして扱い、またテキストに戻す」流れCSV も JSON も、本質はただのテキストファイルです。JavaScript から扱うとき...
JavaScript JavaScript | Web API：ファイル・データ操作 － バイナリデータ処理
「バイナリデータ処理」は“0と1の生データ”を意識して触ることふだん JavaScript で扱っているのは、文字列・数値・オブジェクトなど「人間に優しい形」のデータです。でも、画像・音声・PDF・Z...
JavaScript JavaScript | Web API：ファイル・データ操作 － input type=”file”
input type="file" は「ユーザーにファイルを選んでもらうための唯一の正規ルート」まず大前提として、ブラウザの JavaScript は、勝手にユーザーのパソコンの中を覗けません。「この...
JavaScript JavaScript | Web API：ファイル・データ操作 － ドラッグ＆ドロップ
ドラッグ＆ドロップは「マウスでつかんで、そのままブラウザに渡す入力方法」ドラッグ＆ドロップ（D&D）は、「ユーザーがファイルや要素をマウスでつかんで、別の場所に“落とす”操作をイベントとして扱う仕組み...
JavaScript JavaScript | Web API：ファイル・データ操作 － ダウンロード処理
「ダウンロード処理」は“ブラウザの中のデータ”を“ユーザーのファイル”に変えることJavaScript でいう「ダウンロード処理」は、ブラウザの中にあるデータ（文字列・JSON・画像・Blob など）...
JavaScript JavaScript | Web API：ファイル・データ操作 － URL.createObjectURL
URL.createObjectURL は「Blob や File に一時的な URL を貼る魔法」URL.createObjectURL は、Blob や File に「一時的にアクセスできる UR...
JavaScript JavaScript | Web API：ファイル・データ操作 － Blob
Blob は「生データ（バイナリやテキスト）をまとめて持つ“データのかたまり”」Blob は、「ファイルっぽい“データのかたまり”をメモリ上に表現するためのオブジェクト」 です。画像・テキスト・JSO...
JavaScript JavaScript | Web API：ファイル・データ操作 － FileReader
FileReader は「ファイルの中身を“いろんな形”で読み出すための専用リーダー」前回の File API で出てきた File は、「ユーザーが選んだファイルへのハンドル（取っ手）」でした。でも...
JavaScript JavaScript | Web API：ファイル・データ操作 － File API
File API は「ユーザーが選んだファイルをブラウザから触るための窓口」まず一番大事なことから。JavaScript は、勝手にユーザーのパソコンの中を覗いたり、好きなファイルを読みまくったりはで...
JavaScript JavaScript | Web API：DOM 拡張 API － shadow DOM の概要
shadow DOM は「外側から見えない、部品専用のプライベート DOM」まず一言でいうと、shadow DOM は「コンポーネントの中だけで完結する、外側から直接いじれない専用 DOM」 です。普...
JavaScript JavaScript | Web API：DOM 拡張 API － documentFragment
documentFragment は「画面にまだ挿していない一時作業用のミニ DOM」DocumentFragment（document.createDocumentFragment() で作るやつ）...
JavaScript JavaScript | Web API：DOM 拡張 API － NodeList 操作
NodeList は「querySelectorAll が返してくる“要素の集まり”」まず前提からいきます。document.querySelectorAll() を使うと、複数の要素が一度に取れます...
JavaScript JavaScript | Web API：DOM 拡張 API － dataset API
dataset は「HTML に自由にメモを書いておけるポケット」dataset は、HTML 要素に “自分で決めたデータ” を安全に持たせておくための仕組み です。HTML の data-◯◯ 属...
JavaScript JavaScript | Web API：DOM 拡張 API － classList API
classList は「要素に付いているクラス名を出し入れするための専用リモコン」HTML 要素には class 属性がありますよね。<div class="box active"></div>この ...
JavaScript JavaScript | Web API：DOM 拡張 API － Event コンストラクタ
Event コンストラクタは「既存イベントを自分の手で発火させるための素のイベント」Event コンストラクタは、「クリックや変更など、既に名前が決まっているイベントを、自分の手で“発生させたことにす...
JavaScript JavaScript | Web API：DOM 拡張 API － CustomEvent
CustomEvent は「自分で名前を付けられるオリジナルイベント」CustomEvent は、「クリックやスクロールみたいな“既存のイベント”ではなく、自分で名前を付けたイベントを作って、発火でき...
JavaScript JavaScript | Web API：DOM 拡張 API － ResizeObserver
ResizeObserver は「要素の大きさが変わった瞬間を教えてくれるセンサー」ResizeObserver は、「特定の要素の幅や高さが変わったときに、それを教えてくれる仕組み」 です。ウィンド...
JavaScript JavaScript | Web API：DOM 拡張 API － MutationObserver
MutationObserver は「DOM の変化を見張る監視カメラ」MutationObserver は、「DOM（要素の追加・削除・属性変更・テキスト変更など）が変わった瞬間を教えてくれる監視カ...
JavaScript JavaScript | Web API：DOM 拡張 API － IntersectionObserver
IntersectionObserver は「要素が画面に入ったかどうかを見張る番人」IntersectionObserver は、「ある要素が、画面（または指定した枠）の中に入ったか・出たか」を自動...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － ページリロード
「ページリロード」は「このURLをもう一度最初から開き直すこと」まずイメージからいきます。ブラウザの「再読み込みボタン」や F5 を押すと、今表示している URL にもう一度アクセスするHTML・CS...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － アラート（alert / confirm / prompt）
アラートは「ブラウザが出してくれる超シンプルなダイアログ」alert / confirm / prompt は、ブラウザが標準で用意してくれているダイアログ表示の仕組み です。画面の真ん中に、ブラウザ...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － タブ操作（open / close）
「タブ操作」は「新しい窓を開く権利」と「閉じていい範囲」を理解するところからJavaScript でのタブ操作は、window.open() と window.close() が中心です。ただし、ここ...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － リダイレクト
「リダイレクト」は「ユーザーを別のURLに連れて行くこと」まず言葉の整理からいきます。リダイレクト（redirect） は、ざっくり言うと「今このページを見ているユーザーを、別の URL に自動的に移...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － 画面サイズ取得
「画面サイズ取得」は「どの“枠”のサイズが欲しいか」を決めるところから始まるまず一番大事なことから。「画面サイズ」と一口に言っても、実は何種類かあります。ブラウザのウィンドウ全体のサイズウィンドウの中...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － userAgent
userAgent は「ブラウザが名乗る自己紹介テキスト」navigator.userAgent（ふつうは userAgent と呼ぶ）は、「このブラウザはこういう環境ですよ」とサーバーなどに伝えるた...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － navigator
navigator は「今使っているブラウザと環境のプロフィールカード」navigator は、「このページを開いているブラウザや環境の情報」をまとめたオブジェクト です。どんなブラウザか（Chrom...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － history API
history API は「ブラウザの戻る・進むをコードから操る仕組み」history は window.history のことで、ブラウザの「戻る」「進む」ボタンと同じようなことを、JavaScri...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － location
location は「今開いているページの住所カード」location は、「このタブで今開いているページの URL 情報をまとめたオブジェクト」 です。「今どの URL を見ているか知りたい」「別の...
JavaScript JavaScript | Web API：ウィンドウ・ブラウザ制御 － window オブジェクト
window オブジェクトは「ブラウザタブそのもの」を表す巨大な入り口JavaScript でいう window は、「今あなたが見ているブラウザのタブ（ウィンドウ）そのものを表すオブジェクト」 です...
JavaScript JavaScript | Web API：タイマー・スケジューリング － スケジューリング設計
「スケジューリング設計」は「いつ・どのくらい・どう止めるか」を決めることタイマーは「ちょっと遅らせて実行する便利関数」ではなく、「処理のタイミングを設計するための道具」 です。いつ実行するかどのくらい...
JavaScript JavaScript | Web API：タイマー・スケジューリング － UI 更新との関係
UI 更新とタイマーの関係は「JavaScript とブラウザの役割分担」を理解すると一気に分かりやすくなるタイマー（setTimeout / setInterval / requestAnimati...
JavaScript JavaScript | Web API：タイマー・スケジューリング － 無限ループ防止
「無限ループ防止」は「止まる出口を必ず用意する」という発想タイマーやループを書いているときに一番やっちゃいけないのが、「永遠に終わらない処理」＝無限ループ です。ブラウザが固まるCPU が 100% ...
JavaScript JavaScript | Web API：タイマー・スケジューリング － タイマー精度の問題
「タイマー精度の問題」は「指定した時間どおりには動かないことがある」という話まず一番大事なことを先に言います。setTimeout(…, 1000) と書いても、きっちり 1000ms 後に実行される...
JavaScript JavaScript | Web API：タイマー・スケジューリング － requestIdleCallback
requestIdleCallback は「ブラウザがヒマなときにやってもらう雑用係」requestIdleCallback は、「今すぐじゃなくて、ブラウザがヒマになったタイミングでやってほしい処理...
JavaScript JavaScript | Web API：タイマー・スケジューリング － requestAnimationFrame
requestAnimationFrame は「ブラウザに最適なタイミングでアニメを進めてもらう仕組み」requestAnimationFrame（略して rAF）は、「アニメーションを滑らかに動かす...
JavaScript JavaScript | Web API：タイマー・スケジューリング － clearInterval
clearInterval は「繰り返し処理を止めるためのスイッチ」clearInterval は、setInterval で始めた“繰り返し処理”を止めるための関数 です。setInterval は...
JavaScript JavaScript | Web API：タイマー・スケジューリング － clearTimeout
clearTimeout は「さっき予約した“◯秒後”をなかったことにする」関数clearTimeout は、setTimeout で予約した「あとで実行する処理」をキャンセルするための関数 です。「...
JavaScript JavaScript | Web API：タイマー・スケジューリング － setInterval
setInterval は「◯秒ごとにこれを繰り返して」と予約する関数setTimeout が「一回だけあとで実行」だとしたら、setInterval は 「一定間隔で同じ処理を何度も繰り返す」 ため...
JavaScript JavaScript | Web API：タイマー・スケジューリング － setTimeout
setTimeout は「◯秒後にこれやって」を予約する関数setTimeout は、「今すぐじゃなくて、少し時間が経ってから処理を実行したいとき」に使うタイマー関数 です。「3 秒後にメッセージを出...
JavaScript JavaScript | Web API：通信・ネットワーク系 － WebSocket の概要
WebSocket は「つなぎっぱなしでしゃべり続けられる通信」まずイメージからいきます。ふつうの HTTP（fetch など）は「用があるときだけノックして、用が済んだらすぐ帰る」通信です。リクエス...
JavaScript JavaScript | Web API：通信・ネットワーク系 － オフライン対応の基本
まず「オフライン対応って何を指しているのか」をはっきりさせるオフライン対応と聞くと、「ネットが切れても全部普通に動く魔法」みたいに思いがちですが、現実はもう少し地に足がついた話です。本質は、「ネットワ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Service Worker の概要
Service Worker は「ブラウザの中に住む、裏方の小さなサーバー」まずイメージからいきます。Service Worker は、「ブラウザの中で動く、あなたのサイト専用の“裏方サーバー”」 で...
JavaScript JavaScript | Web API：通信・ネットワーク系 － キャッシュ制御
「キャッシュ制御」は“いつまで古いデータを使っていいか”を決めるルールまずざっくりイメージからいきます。キャッシュは、「一度取ってきたデータを、次回以降は早く返すために手元に置いておく仕組み」 です。...
JavaScript JavaScript | Web API：通信・ネットワーク系 － 認証ヘッダ
認証ヘッダは「あなたが誰なのか」をサーバーに伝えるための“身分証”まずイメージからいきます。認証ヘッダ（Authentication Header）は、「このリクエストは誰として送っているのか」 をサ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Cookie の扱い
Cookie は「ブラウザが自動で持ち運んでくれる小さなメモ」まずイメージからいきます。Cookie は、「ブラウザがサーバーとの間で自動的に持ち運んでくれる小さなメモ」 です。サーバーが「このユーザ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － CORS の基本
まず「なぜ CORS なんてものがあるのか」からCORS を理解する一番の近道は、「ブラウザは、もともと“よそのサイトに勝手にリクエストさせない”ように作られている」という前提をちゃんと掴むことです。...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Headers
ヘッダーは「一緒にくっついて飛んでいくメモ書き」まずイメージからいきます。HTTP の世界では、リクエストやレスポンスは「封筒付きの手紙」みたいなものです。本文（ボディ）実際の中身。JSON や HT...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Request / Response オブジェクト
「Request / Response」は fetch がやり取りする“手紙の入れ物”まず大きなイメージからいきます。fetch は「サーバーと会話する窓口」でしたよね。その会話の中で実際に行き来して...
JavaScript JavaScript | Web API：通信・ネットワーク系 － fetch API
fetch は「ブラウザからサーバーにお願いしに行く関数」まずイメージからいきます。fetch は、「ブラウザからサーバーに“ちょっとデータください”とか“これ送ります”とお願いしに行くための関数」 ...