Web・フロントエンド
Web/フロントエンド
HTML・CSS・JavaScript から DOM・通信(API)・認証・レンダリング戦略まで。フロントエンドの「結局なに？」を、まず TL;DR で。
コレクション 01
フレームワーク(5)
React
UI ライブラリ
コンポーネントで UI を宣言的に組むライブラリ。仮想 DOM と巨大なエコシステムを持ち、フロントエンドの事実上の標準。
Vue.js
プログレッシブ・フレームワーク
学習しやすく段階的に導入できるフレームワーク。単一ファイルコンポーネントとリアクティブなデータが特徴。
Angular
フルスタック・フレームワーク
ルーティング・フォーム・DI まで揃った“全部入り”フレームワーク。規約重視で大規模・チーム開発に向く。
Svelte
コンパイラ型 UI フレームワーク
ビルド時にコンパイルしてランタイムを最小化する新しいアプローチ。記述量が少なく、軽量で高速。
Next.js
React メタフレームワーク
React に SSR/SSG・ルーティング・最適化を足したメタフレームワーク。本番 React の定番（このサイトも Next.js 製）。
| 項目 | React | Vue.js | Angular | Svelte | Next.js |
|---|---|---|---|---|---|
| 種別 | UI ライブラリ | プログレッシブ・フレームワーク | フルスタック・フレームワーク | コンパイラ型 UI フレームワーク | React メタフレームワーク |
| ベース | JavaScript / JSX | JavaScript | TypeScript | JavaScript | React / JavaScript |
| 登場 | 2013年 | 2014年 | 2016年 | 2016年 | 2016年 |
| 一番の強み | コンポーネント指向・宣言的 | 学習が容易・ドキュメントが丁寧 | 全部入りで一貫した作法 | 記述量が少なく直感的 | SSR/SSG/ISR を標準サポート |
| 主な用途 | SPA・大規模 UI | 中小規模 SPA | 大規模エンタープライズ SPA | 軽量・高速な UI | 本番 Web アプリ・SEO 重視 |
コレクション 02
Web サーバ(5)
Apache HTTP Server
Web サーバ
歴史ある定番 Web サーバ。モジュールが豊富で、.htaccess によるディレクトリ単位の柔軟な設定ができる。
IIS（Internet Information Services）
Web サーバ（Windows 標準）
Windows Server に標準搭載される Microsoft 製 Web サーバ。ASP.NET との統合や GUI 管理が強みで、Windows 中心の企業システムで使われる。
Apache Tomcat
Java サーブレットコンテナ
Java サーブレット/JSP を動かす定番のアプリケーションサーバ（サーブレットコンテナ）。Java Web アプリの実行環境として長年広く使われる。
Nginx
Web サーバ / リバースプロキシ
イベント駆動で大量同時接続に強い Web サーバ／リバースプロキシ。静的配信・ロードバランサ・SSL 終端に広く使われる。
Caddy
Web サーバ（自動 HTTPS）
Let’s Encrypt による HTTPS を自動化する新しい Web サーバ。設定が極めて簡単で、単一バイナリで動く。
| 項目 | Apache HTTP Server | IIS（Internet Information Services） | Apache Tomcat | Nginx | Caddy |
|---|---|---|---|---|---|
| 種別 | Web サーバ | Web サーバ（Windows 標準） | Java サーブレットコンテナ | Web サーバ / リバースプロキシ | Web サーバ（自動 HTTPS） |
| ベース | C | Windows / .NET | Java | C | Go |
| 登場 | 1995年 | 1995年 | 1999年 | 2004年 | 2015年 |
| 一番の強み | 長年の実績と豊富な情報 | Windows / .NET とシームレスに統合 | Java サーブレット/JSP の標準実装 | 大量同時接続に強い（イベント駆動） | HTTPS を自動取得・更新 |
| 主な用途 | 汎用 Web サーバ | ASP.NET アプリのホスティング | Java Web アプリの実行 | 静的配信・リバースプロキシ | 手軽に HTTPS 化 |
操作して学ぶ
ブラウザエンジンの系譜
1993年のMosaicから、KHTML→WebKit→Blinkの大分岐、消えたTrident・Presto・EdgeHTMLまで。 実線は実コードのフォーク・後継、 破線はエンジンの搭載や設計の影響。 ドラッグとズームで探検し、気になるエンジンをクリックすると解説が出ます。
ノードをクリックすると、そのOSの解説と関連記事がここに表示されます。
操作して学ぶ
URLを入力してから画面が表示されるまで — 1秒の内訳をステップ実行
DNS・TCP・TLS 1.3・HTTP・レンダリングを11ステップで辿る。面接定番の決定版。
リファレンス
HTTPステータスコード大全 — 意味と使いどころを検索
401と403、502と504の違いは？ 意味・使いどころ・よくある原因を検索＆クラス絞り込みで。
操作して学ぶ
HTTPキャッシュ可視化 — 初回・ヒット・再検証・変更
max-age内のヒット、304での再検証、変更時の200を4シナリオで。ネットワークに出るか出ないかが分かる。
操作して学ぶ
イベントループ可視化 — なぜPromiseはsetTimeoutより先か
コールスタック・タスク・マイクロタスク・rAFを並べて仕様どおりの1反復をステップ再生。awaitの正体や飢餓も確認できる。
操作して学ぶ
HTTP/2多重化可視化 — HOLブロッキングとHPACKを実測
接続数1/2/6のHTTP/1.1とHTTP/2の完了時間を実計算で比較。HPACKによるヘッダ圧縮のバイト削減も確認できる。
解説記事
考え方・基礎
HTML・CSS・通信・認証など、フレームワークの下で動く Web の土台。まず TL;DR で。
async/awaitの脱糖とPromiseジョブキューの実行順序
awaitの後がいつ・どの順で再開するかを内部から理解でき、実行順のバグを根本から読み解けるようになる。async関数の脱糖とマイクロタスクの並び方を仕様レベルで解説します。
Back/Forward Cache（bfcache）の保存条件と復元
戻る・進むが一瞬で表示される理由が分かる。ページをまるごとメモリに凍結して即復元する仕組み、bfcache を阻害する unload や開いた接続、pageshow/pagehide の使い方を内部から正確に解きます。
BroadcastChannelとタブ間メッセージングの仕組み
ログイン状態やテーマを全タブへ一発で同期できる。BroadcastChannelの同報の仕組みと、postMessage/StorageEventとの違い、配送順序や対象範囲の保証を内部動作から正確に整理します。
Brotli/gzipによるコンテンツ符号化と転送圧縮の原理
テキスト資産を数分の一に縮めて転送を速くする仕組み。Accept-Encoding交渉、DEFLATEとBrotliの辞書・圧縮率・CPUの差、事前圧縮と動的圧縮の使い分けまで原理から理解できる。
Cache APIとService Workerキャッシュストレージの内部
オフライン対応で「更新が反映されない」「容量超過で消える」が腑に落ちる。Cache Storageのキー照合・vary・部分応答、HTTPキャッシュとの独立性、退避の条件を内部から正確に解きます。
Canvas 2DとWebGL/WebGPUのレンダリング経路の違い
図形を描くだけならCanvas 2D、大量の頂点やGPU計算が要るならWebGL/WebGPUと、迷わず選べるようになる。即時モード・状態機械・コマンドバッファという3つの描画モデルの原理から適材適所を解説します。
Content Security Policyの内部動作と回避耐性
XSSをコードではなくポリシーで抑え込む防御線。ディレクティブの評価順、nonce／hash／strict-dynamic の判定、そして実在するバイパス経路まで原理から押さえ、本当に効く CSP を書けるようになります。
content-visibilityとCSS Containmentのレンダリング省略
巨大ページの初期表示やスクロールを、JSなしのCSS1行で軽くできる。layout/paint/size/styleの封じ込めが再計算を局所化する原理と、content-visibility:autoの画面外スキップを解説します。
Cookie とセッション
再訪してもログイン状態を保てる仕組み。Cookie の小さな印とサーバー側セッションの連携を理解し、HttpOnly / Secure / SameSite で安全に運用するまで。
Cookie・セッション・JWT（Web認証）
HTTP は毎回「初対面」。だからログイン状態を覚えさせる仕組みが要る。Cookie で情報を運び、サーバセッションか JWT で「誰か」を保持する。
Core Web Vitalsの計測アルゴリズム（LCP/CLS/INP）
なぜその数値になるのかを内部から説明できるようになる。LCP候補の確定、CLSの impact×distance、INPの遅延定義というブラウザ内部のアルゴリズムを正確に解説します。
CORS（オリジン間リソース共有）
別オリジンのデータを fetch すると出る、あの赤いエラーの正体。ブラウザの安全装置（同一オリジンポリシー）を、サーバー側のヘッダで“例外的に許可”する仕組み。
CORSプリフライトの判定アルゴリズムと単純リクエスト
なぜ GET は通るのに JSON の POST だけ OPTIONS が飛ぶのかが分かる。単純リクエストの厳密な条件、プリフライト発火の境界、Access-Control 系ヘッダの照合手続きとキャッシュ秒数の効き方を原理から解きます。
CSRFの成立条件と多層防御の原理
勝手に送金・設定変更されるCSRFの正体を、なぜブラウザが他サイト発のリクエストにCookieを付けて送るのかから解明。各防御の効きどころを見極め、堅い設計の判断軸が手に入ります。
CSS Houdiniとペイント/レイアウトワークレット
CSSの黒箱だった内部を開発者が拡張できる。Typed OMで文字列パースを捨て、@propertyで型付きカスタムプロパティを宣言し、Paint/Layoutワークレットでレンダリング段を直接書く仕組みを解説します。
CSS（見た目のスタイリング）
色・余白・レイアウトを思い通りに整える言語。どの要素を（セレクタ）どう見せるか（プロパティ）を宣言して、Web ページの見た目を組み立てる。
CSSアンカー位置指定
ツールチップやポップオーバーの位置合わせをJSの座標計算なしに解決でき、画面端でのはみ出しもCSSだけで自動反転できます。
CSSカスケード・詳細度・継承の解決アルゴリズム
なぜそのスタイルが勝つかを毎回ブラウザと同じ手順で判定でき、!important合戦やレイヤ事故を当て推量せず解消できる。オリジン・レイヤ・詳細度・出現順の比較順を原理から解き明かします。
CSSセレクタのマッチングと右から左の評価
セレクタが重いと感じる前に、ブラウザがどこで時間を使うかを正しく見積もれる。右端から評価する理由、has のコスト、再計算を一部に閉じ込める無効化の仕組みを原理から解説します。
CSSレイアウトアルゴリズム（Flexbox/Gridの解決過程）
Flex/Gridが「なぜその幅になるか」を式で説明できるようになり、潰れ・はみ出しを当て推量せず直せる。包含ブロック・BFC・内在サイズの解決順序を原理から解き明かします。
CSS値の計算過程（specified→computed→used→actual）
emやパーセントが最終的に何pxになるかをブラウザと同じ4段階で追え、継承の食い違いやcalc()の予想外を当て推量せず説明できる。宣言値から実際値までの変換と基準の決まり方を原理から解き明かします。
DOM-based XSSのsink/source分類と緩和原理
クライアント側だけで起きるXSSを、データの流れから根絶できる。sourceからsinkへ抜ける経路を分類し、反射／格納型との違い、エスケープとTrusted Typesの効きどころを原理から押さえます。
DOM（ドキュメントオブジェクトモデル）
JavaScript からページを自在に操作できる入口。ブラウザが HTML をメモリ上に展開したツリー構造で、要素の取得・生成・書き換えはすべてここを通る。
DOMツリーの内部表現とノード操作のコスト
なぜそのDOM操作が遅いのかを内部構造から判断でき、再描画とリスト走査のムダを根本から削れる。ノードの連結リスト表現、live／static、挿入コスト、DocumentFragmentまで解説。
ESモジュールの解決・リンク・評価フェーズ
なぜ import した値が後から更新されても反映されるのか、循環依存でも壊れにくいのか。3フェーズに分けて追えば、ESモジュールの挙動が原理から腑に落ちます。
Fetch APIの内部（リクエスト/レスポンスとボディストリーム）
fetchが「2回読めない」「CORSで詰まる」理由が腑に落ちる。Request/Responseの不変設計、modeとcredentials、ボディの一度きり消費、AbortControllerの中断を内部動作から正確に解きます。
GraphQL
欲しいデータだけを一度の問い合わせで取得し、REST の過不足取得を解消する API クエリ言語。クライアントが形を指定できる一方、キャッシュや複雑さの注意点も。
History APIとSPAルーティングの内部（pushState/popstate）
戻る・進むが効くのに画面が白くならない仕組みが腑に落ちる。pushState の履歴操作、popstate の発火条件、スクロール復元、Navigation API までを内部から解きます。
HTML（Webページの構造）
見出し・リンク・段落に意味づけして、Web ページの骨組みを作るマークアップ言語。タグで文書構造を組み立て、ブラウザや検索エンジンに中身を正しく伝える。
HTMLパーサの構築アルゴリズムと挿入モード
壊れたタグでもブラウザが必ず同じDOMを組む理由を仕様から理解でき、閉じ忘れの自動補正やdocument.writeの落とし穴を避けられる。トークナイズと挿入モード遷移を解説。
HTTP キャッシュ
一度取得した応答を再利用して、表示を速く通信を軽くする仕組み。Cache-Control / ETag、ブラウザと CDN の役割、更新時の無効化（キャッシュバスティング）まで整理。
HTTP/1.1・HTTP/2・HTTP/3のレイヤ構造比較図
同じHTTPでも下層が違えば詰まり方も違う。3バージョンの層構造を横並びにし、HOLブロッキングがどの層で起き、どこで消えるかを文章図解で一気に理解できる。
HTTP/2の多重化とHPACKヘッダ圧縮の原理
1本のTCP接続で多数のリクエストを同時に流し、ヘッダ重複も削れる。ストリーム多重化・フレーム・優先度・HPACK・残るHOLブロッキングまで原理から理解できる。
iframeサンドボックスと権限分離の境界
埋め込んだ第三者コンテンツを安全に閉じ込められる。sandbox属性が無効化する能力、allow-same-originが境界を壊す理由、Permissions Policyとの併用で隔離を設計する勘所を原理から押さえます。
IntersectionObserverとResizeObserverの非同期計測モデル
スクロール連動やサイズ追従を、強制同期レイアウトもカクつきも起こさず実装できるようになる。交差・サイズ変化をレイアウト後に非同期通知する仕組みと、ResizeObserverのループ抑止の原理を解説します。
Intlによる国際化フォーマットの内部（CLDRとロケール解決)
通貨や日付の表示が環境で変わる謎が原理から解ける。BCP47ロケール解決とCLDRデータ依存、表示折りたたみの仕組みを押さえ、env依存の表示バグを根絶します。
JavaScript（ブラウザの動的処理）
ブラウザの中で動き、ページを“動的”にする言語。クリックや入力に反応し、DOM を書き換え、サーバーと通信する。Web を静止画から動くアプリに変える。
JavaScriptエンジンの内部（JITとインラインキャッシュ）
同じコードでも書き方しだいで数倍速くなる理由が腑に落ちる。V8のIgnition/TurboFan、隠しクラスとインラインキャッシュ、脱最適化の原理を内部動作から解説します。
JavaScriptの数値表現とIEEE754が生む落とし穴
0.1+0.2が0.3にならない理由が原理から腑に落ちる。全数値が倍精度であるNumberの帰結、安全整数の限界、ビット演算の32bit変換、BigIntが必要な場面まで一気に整理します。
MIMEスニッフィングとX-Content-Type-Optionsの防御
アップロード画像がスクリプトとして実行される事故を、ヘッダ一行で塞げる。ブラウザがContent-Typeを推測する条件と危険性、nosniffが止める判定までを原理から押さえます。
MutationObserverの変更記録モデルとマイクロタスク配送
DOMの変更監視を、コールバック地獄も再入バグも起こさず実装できるようになる。変更をレコードへ束ね、マイクロタスクでまとめて配る仕組みと、同期通知をあえて避けた設計理由を原理から解説します。
navigator.sendBeaconと離脱時の確実な送信
離脱時にビーコンが消える事故を防げる。sendBeaconがブラウザにキューを預けてページ破棄後も送り切る仕組み、fetch keepaliveとの違い、計測設計の勘所を内部動作から正確に解きます。
Origin Private File System (OPFS)
ブラウザ内でネイティブDB並みのI/Oが出せる理由が分かる。OPFSの隔離ツリー構造と同期アクセスハンドル、WASMアプリの永続化基盤としての設計を正確に整理します。
Origin Private File SystemとFile System Access APIの内部
ブラウザでネイティブ並みのファイルI/Oが扱える理由が分かる。OPFS の隔離ツリーと同期アクセスハンドルの高速書き込み、ユーザー可視 FS への権限モデルを内部動作から正確に整理します。
Permissions Policyによる機能ゲートの委譲モデル
カメラや位置情報などの強力機能を、オリジン単位で許可し iframe へ委譲する仕組みを原理から理解。allowlist の継承規則と allow 属性の連携、レポーティングまで押さえ、埋め込みコンテンツの権限事故を防げるようになります。
Popover API
z-indexの数値合戦もJSの開閉制御も手放せる。popover属性1つでトップレイヤー描画・ライトディスマス・フォーカス管理が標準搭載される仕組みを原理から解説します。
Proxyとリフレクションの内部メソッド（トラップとMOP）
Proxyがなぜオブジェクト操作を丸ごと横取りできるのかが腑に落ちる。内部メソッド・トラップ・Reflectの三者対応と、違反すると例外になる不変条件までを仕様レベルで読み解きます。
PWA とサービスワーカー
Web サイトをアプリのように使えるようにする PWA。心臓部の Service Worker がオフライン対応やプッシュ通知、通信のプロキシを担う仕組みを整理します。
Reportingとエラー収集の仕組み（report-to/CSPレポート）
本番のCSP違反やレンダラークラッシュを取りこぼさず自動回収する仕組み。Reporting API の配送モデルと report-to、window.onerror との役割分担を原理から押さえ、穴のない監視を組めます。
requestAnimationFrameとブラウザの描画リズム同期
アニメーションがカクつく理由と、滑らかに動かすコツがはっきり分かる。rAFが描画直前に走る仕組み・vsync同期・フレーム落ちに強い時間ベース設計を解説します。
REST API と fetch（フロントとサーバーの通信）
フロントとサーバーがデータをやり取りする定番の作法。データを「リソース」と捉え、URL とHTTPメソッドで操作し、結果をJSONで受け取る。それをブラウザから呼ぶのが fetch。
SameSite Cookieとクロスサイト送信の制御モデル
CSRFの主因であるCookieの自動送信を、SameSite属性で原理から制御。Strict/Lax/Noneの送信判定とトップレベル例外、CHIPSまで押さえ、防御の効果と限界を正確に設計できます。
SEO の基礎
検索で見つけてもらい上位表示を狙うための SEO の基礎。クロールとインデックス、タイトルや構造化データ、表示速度・モバイル対応まで、効く打ち手を整理します。
Server-Sent Eventsの仕組みとWebSocketとの設計上の違い
サーバー起点の通知が、特別なプロトコルなしに普通のHTTPだけで実装できる。EventSourceのストリーミング・自動再接続・Last-Event-IDの取りこぼし防止と、双方向WebSocketとの使い分けを原理から整理する。
Service Workerのライフサイクルとキャッシュ戦略の内部
デプロイしたのに古いまま、が起きる理由が分かる。install/activate/waiting の状態遷移、制御権、skipWaiting や clients.claim、ナビゲーションプリロードの動作原理を内部から解きます。
Shadow DOMのカプセル化とスロット合成
スタイル衝突もイベント漏れも起きない部品を、ブラウザと同じ理屈で設計できる。shadowツリーの境界、slotによる光と影のツリー合成、partや::slottedの貫通規則を原理から解き明かします。
SharedArrayBufferとAtomicsによる共有メモリ並行性
ワーカー間で本当のマルチスレッドを実現できる。共有メモリとAtomicsの不可分操作、メモリ順序、wait／notifyによる同期を原理から解説します。
SPA / SSR / SSG（レンダリング戦略）
HTMLを「どこで・いつ」組み立てるかの選択。ブラウザで作るか(SPA)、サーバーで毎回作るか(SSR)、ビルド時に作り置きするか(SSG)で、表示速度・SEO・鮮度のバランスが変わる。
SPA と MPA
どちらで作るか迷ったときの判断材料に。JS で差し替える SPA とサーバーが毎回返す MPA を比べ、体感速度・初期表示・SEO のトレードオフを整理します。
Streams API（バックプレッシャと内部キュー）
巨大データを少ないメモリで安全に流せる理由が腑に落ちる。内部キューと高水位線、バックプレッシャの伝播、リーダー/ライターのロックを原理から正確に解きます。
structuredCloneと転送可能オブジェクトの内部
Worker間でデータを速く安全に渡せるようになる。構造化複製が扱える型と循環参照の解決、Transferableによる所有権移動でのゼロコピー、postMessageとの関係を内部動作から正確に整理します。
Subresource Integrityとリソース改ざん検出
CDN が乗っ取られても改ざんスクリプトを実行させない最後の砦。integrity 属性のハッシュ照合手続き、crossorigin が必須になる理由、複数ハッシュとキャッシュの相互作用まで原理から押さえ、SRI を確実に効かせます。
Temporal APIと日時計算の正確なモデル
Dateのバグに振り回される日々から抜け出せる。可変・タイムゾーン非対応というDateの構造的欠陥と、不変オブジェクト・暦/タイムゾーン明示・PlainとZonedの分離で正しさを設計するTemporalの考え方を原理から整理します。
thisバインディングの決定規則（4つの束縛と優先順位）
this が何を指すか迷わなくなる。既定・暗黙・明示・new の4束縛とアロー関数のレキシカル参照を、呼び出し時にどう決まるか優先順位つきで内部から整理します。
Trusted TypesによるDOM-based XSSの構造的防止
サニタイズ漏れを「うっかり」ではなく「構造的に不可能」へ変えられる。危険なsinkへの文字列代入を型でブロックし、ポリシー一点へ監査を集約する仕組みと段階導入を原理から押さえます。
TypedArray・ArrayBuffer・DataViewのメモリレイアウト
バイナリで値が化ける謎を解消。生バイト列ArrayBufferにTypedArrayとDataViewがどう被さるか、エンディアン・アラインメント・detach・転送・SharedArrayBufferの違いまで原理から解説します。
V8のオブジェクト表現と隠しクラスの遷移図
同じ形のオブジェクトを使い回すコードが速い理由が腑に落ちる。V8の隠しクラスがプロパティ追加でどう枝分かれし、インラインキャッシュが単型から多型過多へ劣化するまでを遷移ツリーで読み解きます。
View Transitions API
画面切り替えの一瞬をJSアニメ実装なしで滑らかにできる。DOM前後の状態をスナップショットし擬似要素で自動補間する仕組みを、SPA/MPA両対応の内部動作から正確に解きます。
WeakMap・WeakRef・FinalizationRegistryと弱参照の意味論
キャッシュやメタデータの保持でメモリを漏らさない方法がわかる。弱参照がGCの到達可能性をどう変えるか、WeakMapがキーをリークさせない原理、ファイナライザの非決定性と落とし穴を内部動作から解説します。
Web Locks API
複数タブが同じIndexedDBやトークン更新を同時に触って壊す事故を防げる。ロック取得の待機規則とリーダー選出への応用を内部動作から整理します。
Web Workerのスレッドモデルとメッセージパッシング
重い処理でUIが固まる問題を、原理から解決できる。専用／共有／サービスの3種の分離、構造化複製によるメッセージ受け渡し、メモリ非共有を前提にした並行モデルを内部から正確に整理します。
Web コンポーネント
フレームワークに依存せず再利用できる UI 部品を作れる Web Components。Custom Elements と Shadow DOM によるカプセル化で、どこでも使える標準のカスタム要素を作る基礎を整理します。
Web ストレージ（localStorage / sessionStorage）
ブラウザにデータを保存して再訪時に使える Web ストレージ。Cookie と違いサーバーへ自動送信されず容量も大きい利点と、機密情報を入れてはいけない注意点を整理します。
Web パフォーマンス（Core Web Vitals）
サイトの「速い・快適」を数値で測り改善するための Core Web Vitals（LCP / CLS / INP）。指標の意味と、画像最適化や遅延読み込みなど効く改善の勘所を整理します。
WebAssembly GCと参照型
線形メモリのコピー地獄から抜け出す仕組みがわかる。WasmGCが導入する構造体・配列型と参照型の原理、Kotlin/Dartなど言語コンパイラへの影響を解説します。
WebAssemblyの実行モデルとJSとの境界
なぜWasmは速いのに、JSと頻繁にやり取りすると遅くなるのか。スタックマシン・線形メモリ・型システムの原理から、JS境界の実コストとストリーミングコンパイルまでを解説します。
WebCodecs API
動画のエンコード・デコードをブラウザ内蔵コーデックへ直接アクセスして高速化できる。フレーム単位の制御でMediaStreamでは不可能だった低遅延処理と柔軟なトランスコードが実現する。
WebGPUの計算シェーダ
描画を経由せずGPUの並列計算をブラウザから直接引き出せる。WGSLとバインドグループでWebGLにはない汎用GPU計算の作法が身につきます。
WebRTCの接続確立（ICE/STUN/TURNとシグナリング）
ブラウザ同士をP2Pで直結し低遅延な音声・映像・データ通信を実現できる。ICE候補収集とSTUN/TURNによるNAT越え、SDPシグナリング、DTLS/SRTP暗号化の流れを原理から理解できる。
WebSocket
チャットや通知などリアルタイム機能を実現する WebSocket。1 本の接続を保ったままサーバーとブラウザが双方向に送り合える仕組みと、HTTP ポーリングとの違いを整理します。
WebSocketのフレーミングとハンドシェイク内部
WebSocketが「なぜ確実に双方向で通る」のか、ビット単位で腑に落ちる。Upgradeハンドシェイク・フレーム構造・マスク・制御フレーム・permessage-deflateまで原理から理解できる。
Web標準の策定プロセスと仕様の系統
どの団体がどの仕様を決めているかが一目で分かるように整理。WHATWG・W3C・TC39・IETF の役割分担と、HTML・CSS・ECMAScript・HTTP の系統を辿り、仕様を一次情報で読み解く足場が手に入ります。
アイランドアーキテクチャと部分ハイドレーション
ページ全体を巨大なSPAにせず、必要な部分だけJSを配ればいい。アイランド構成と部分ハイドレーションで初期JS量を削り、Resumabilityとの違いも原理から整理します。
アクセシビリティ（a11y）
誰もが使える Web にするための実践。セマンティック HTML・ARIA・キーボード操作・コントラストの勘所を押さえ、障害や環境を問わず届くサイトに整える。
アンチエイリアスとサブピクセルレンダリング、devicePixelRatio
高解像度ディスプレイで画像がぼやける理由と1pxボーダーが消える理由を内部から説明できるようになる。論理/物理ピクセルの対応、DPRによるスケール、アンチエイリアスの仕組みを原理から解説します。
イベントターゲットとリスナ登録の内部モデル
addEventListener が「効かない」「二重に呼ばれる」「消せない」謎が解ける。リスナリストの管理規則と capture／once／passive／signal の内部効果、重複判定の仕様を正確に解説します。
イベントループの内部構造（タスクキューとマイクロタスク）
なぜ Promise はsetTimeoutより先に走るのか、その理由がはっきり分かる。タスク・マイクロタスク・レンダリングの順序を内部アルゴリズムのレベルで解き明かします。
イベントループ実行モデルの状態遷移図
なぜ「Promise が setTimeout より先」「アニメーションがカクつく」が起きるのか、1ティックの順序を追えば腑に落ちる。実行モデルを状態遷移として文章で図解します。
インポートマップとモジュール解決
裸の指定子をバンドラなしでブラウザに解決させ、依存の差し替えもCDN移行もHTML1行で完結。import mapの解決アルゴリズムとスコープの仕組みを原理から押さえます。
カスタム要素のライフサイクルとアップグレード
独自タグがいつ・どの順で初期化されるかを正確に押さえれば、属性の取りこぼしや未定義要素のちらつきを防げる。define・アップグレード・各コールバックの発火順序とフォーム関連APIを原理から整理します。
ガベージコレクションのブラウザ内動作（世代別GCとメモリリーク）
GCがあるのに増え続けるメモリの正体がわかる。V8の世代別GC・インクリメンタル/並行回収の仕組みと、デタッチDOMやクロージャ由来のリークの見つけ方を原理から解説します。
クリックジャッキングとフレーミング防御（frame-ancestors）
見えないiframeで本物のボタンを踏ませる罠を、なぜ重ね合わせが成立するのかから解明。X-Frame-Options と CSP frame-ancestors の効きどころを見極め、埋め込みを正しく拒否する設計が手に入ります。
クリティカルレンダリングパスの最適化原理
初回表示までに本当に必要なリソースだけを最短経路で届けられるようになる。CSSのレンダリングブロックとJSのパーサブロッキングを解く順序設計を、原理から組み立てます。
コンテナクエリ
同じカードコンポーネントが置き場所ごとに正しく折り返る。ビューポート依存だったレスポンシブを要素単位にし、真に再利用可能な部品を作る仕組みを原理から解説します。
コンテンツネゴシエーションとVaryによるキャッシュ分割
同じURLで言語や形式を出し分けても、キャッシュ汚染を防げる仕組み。Accept系ヘッダによる表現選択、Varyがキャッシュキーを分割する原理、Client Hintsへの移行と落とし穴まで原理から理解できる。
ジェネレータとイテレータプロトコルの内部動作
for-of やスプレッドが内部で何を呼んでいるかが分かると、独自オブジェクトを自在に反復させられる。yield の中断・再開とイテレータプロトコルの仕組みを内部動作から解説します。
シグナルと細粒度リアクティビティ
画面更新のたびにコンポーネントごと再計算する仕組みをやめると、差分検出の手間そのものが要らなくなる。依存関係を自動追跡するシグナルの内部動作を原理から解説します。
スクロールの内部処理（コンポジタスクロールとアンカリング）
スクロールが指に吸い付くように滑らかな理由と、preventDefault付きのリスナがそれを台無しにする仕組みが分かる。コンポジタスクロール・passive必須の根拠・スクロールアンカリングの補正を解説します。
スケジューリングAPI（scheduler.yieldとタスク優先度）
長い処理でも画面が固まらない書き方が分かる。scheduler.postTaskの3段優先度とyieldによるタスク分割を、メインスレッドとイベントループの原理から正確に解説します。
スコープチェーンとクロージャの内部表現（環境レコード）
クロージャが変数を覚えている理由を内部から説明できるようになる。レキシカル環境・環境レコード・外部参照のチェーン構造から、捕捉と保持の仕組みを原理で解説します。
スタッキングコンテキストとz-indexの合成順序
要素が前後する理由を毎回ブラウザと同じ手順で説明でき、z-indexが効かない事故を当て推量せず直せる。生成条件とペイント順序を原理から解き明かします。
テキストエンコーディングの内部（UTF-16のサロゲートとコードポイント）
絵文字の文字数がずれる謎が原理から解ける。JS文字列がUTF-16コード単位列である帰結、サロゲートペア、lengthとIntl.Segmenterの違いまで一気に整理し、文字数バグを根絶します。
パッシブ/アクティブイベントとスクロール性能の関係
スクロールがカクつく原因を断ち、指の動きに張り付く滑らかさを取り戻せる。passiveリスナがpreventDefaultを封じられる理由と、コンポジタスクロールを妨げない設計を内部から解説します。
パフォーマンス計測API（PerformanceObserverとTiming）
実利用者の体感をコードで正確に拾えるようになる。Navigation/Resource/Paint/Long Tasks/Elementの計測モデルとPerformanceObserverのバッファ・エントリ型・フィールド計測設計を解説。
フォームとバリデーション
不正な入力をはじき、ユーザーには親切に直し方を伝えるための基礎。クライアントとサーバーで二重チェックする理由と、UX を損ねない勘所まで整理。
フォント読み込みとFOIT/FOUT（font-displayの内部）
なぜ文字が一瞬消えたり後から差し替わるのかを内部から説明でき、CLSを出さずにWebフォントを使い分けられるようになる。font-displayの3期間と状態機械、size-adjustによるフォールバック整合を原理から解説します。
ブラウザイベントの伝播モデル（キャプチャと委譲）
なぜ親要素1つのリスナで子の動きを全部拾えるのか、その原理がはっきり分かる。キャプチャ・ターゲット・バブリングの3フェーズと委譲・passiveの効きどころを内部から解説します。
ブラウザキャッシュの階層と判定アルゴリズム
なぜ更新が反映されないのかを根本から解決。メモリ／ディスク／HTTP／Service Worker の優先順、Cache-Control と ETag の再検証フロー、キャッシュキー分割まで内部動作を正確に整理します。
ブラウザストレージとIndexedDBのトランザクションモデル
なぜ書き込みが消えたり競合するのか、その理由がはっきり分かる。IndexedDB のトランザクション分離とオブジェクトストア、容量の退避ポリシー、永続化指定までを内部動作から正確に整理します。
ブラウザのピクセルパイプライン図解
なぜ transform は速く width は遅いのか、その境界が一段ずつ追える。DOM+CSSOM からレイアウト・ペイント・レイヤー・合成まで、各段の入出力と再実行範囲を文章で図解。
ブラウザのプリレンダリングと投機的ナビゲーション(Speculation Rules)
リンクを踏む前にページを丸ごと用意しておき、クリックの瞬間に即表示する。Speculation Rules による prerender/prefetch の指定、プリレンダ中のスクリプト制限とアクティベーション時の挙動を内部から正確に解きます。
ブラウザのマルチプロセス・サンドボックスアーキテクチャ
なぜタブが1つ落ちても巻き込まれず、悪意あるサイトに端末を乗っ取られにくいのかが分かる。Chrome のプロセス分離・Site Isolation・サンドボックス設計を原理から解説。
ブラウザのメモリ表現（文字列インターンとSmallInt最適化）
数値も文字列も同じ箱なのに速い理由が腑に落ちる。V8のSMIタグ付けとConsString・SlicedString、boxingの回避まで内部表現を整理し、メモリ効率の良いデータ構造選択を仕組みから判断できるようにします。
ブラウザのレイヤー化とGPUコンポジットの判断基準
アニメーションが60fpsで滑らかに動く理由と、will-changeを盛りすぎてかえって重くなる罠を回避できるようになる。合成レイヤーへの昇格条件・レイヤー爆発のコスト・transformが速い原理を解説します。
ブラウザのレンダリングの仕組み
なぜ表示が遅いのか、どこを直せば速くなるのかが見える。HTML と CSS が DOM・CSSOM →レンダーツリー→レイアウト→ペイント→合成を経て画面になるまでを図解。
ブラウザの自動メモリ管理とデタッチDOMリークの検出
長時間使うと重くなるSPAのメモリリークを自力で特定できるようになる。デタッチDOM・リスナ・タイマーが漏れる成立条件と、ヒープスナップショットでリテイナを追って直す手順を原理から解説します。
ブラウザの投機的パース処理とリソース優先度
なぜ script を head に置くと表示が止まり、画像に fetchpriority を付けると LCP が縮むのか。プリロードスキャナとリソース内部優先度の原理を、効かせ方まで詳説します。
プロトタイプチェーンの解決アルゴリズムと内部スロット
__proto__とprototypeの混同が消える。プロパティ探索が内部スロット[[Prototype]]のリンクをどう辿るか、Object.createや継承の内部動作をECMAScript仕様の原理から読み解きます。
リフローとリペイントを引き起こすCSSプロパティの分類
どのCSS変更が重いかを段ごとに即断でき、アニメーションのカクつきを根本から潰せるようになる。プロパティをレイアウト／ペイント／コンポジットに分類し、レイアウトスラッシングの原理と回避策まで解説します。
レスポンシブデザイン
スマホからPCまで、1つのHTML/CSSで多様な画面幅に最適表示。ビューポート設定とメディアクエリ、相対単位、Flex/Grid を土台に崩れないレイアウトを作る設計手法。
レンダリングパイプライン詳説（スタイル→レイアウト→ペイント→コンポジット）
なぜ transform は速く width は遅いのかを内部から説明できるようになる。スタイル計算からGPU合成までの各段と、リフロー回避の原理を詳説します。
レンダリングブロックとパース阻害（defer/async/moduleの差）
なぜ head の script で表示が止まり、defer と async で結果が変わるのか。取得と実行のタイミング、パーサ阻害の有無、実行順序保証の差を内部から整理し、置き場所の判断を確実にします。
画像のデコードとレンダリング（loading/decodingとIntrinsic Size）
画像でメインスレッドが固まる理由とCLSの原因を内部から理解し、decoding=async・loading=lazy・aspect-ratioを正しく使い分けられる。スレッド配分と発火境界、Intrinsic Sizeを原理から解説。
型強制と等価比較アルゴリズム（==の抽象比較手続き）
なぜ 0 と空文字は等しいのに 0 と 0 の文字列とで結果が変わるのか、その理由が仕様レベルでつかめる。ToPrimitive と緩い等価の手続きを順を追って解き明かします。
色空間とワイドガモット（CSS Color 4とディスプレイP3）
なぜP3対応画面でだけ色が鮮やかになるのかを原理から説明でき、oklchやcolor()でsRGBの外側まで安全に指定できるようになる。色域・色空間・知覚均等とHDR表示の扱いを内部動作から解き明かします。
正規表現エンジンの内部（バックトラッキングとReDoS）
なぜ短い入力でCPUが100%に張り付くのか、その正体がつかめる。バックトラッキングの探索木からReDoSの発生条件、安全に書き換えるパターンまで原理から押さえます。
同一オリジンポリシーとサイト分離の信頼境界
ブラウザが守る信頼境界を一段深く理解。オリジンとサイトの違い、COOP/COEP/CORP の役割、crossOriginIsolated の意味を整理し、Spectre 時代の防御設計を正確に組めるようになります。
包含ブロックと位置指定（position）の解決過程
absoluteが思わぬ親に吸着する、stickyが効かない、transformの中でfixedが固定されない——その全てを包含ブロックの決定規則から原理で説明し、当て推量なしに直せるようになります。