Web アプリの
中で何が起きているかを見よう
ブラウザが画面を描くまで、サーバが要求をさばくまで、データを守る作り方、コードが本番に届くまで。1 つの予約アプリを実際に動かした記録で解説します。
おすすめの見る順番入門 → 基礎 → 発展
ブラウザの中DOM・描画・JavaScript・速さ
通信と APIHTTP・API の設計・CORS・キャッシュ・リアルタイム
サーバの中nginx・ミドルウェア・同時の要求・DB・トランザクション・キュー・アップロード
画面の作り方MVC・MVVM と画面のフレームワーク
守る作り方ログインの状態・トークン・認可・安全な書き方
設計と概念索引・正規化・時刻・状態・層・移行・障害・アクセシビリティ・文字
開発の進め方Git・レビュー・テスト・CI・コンテナ・リリース
運用と設計観測・障害対応・スケール・分け方・スマートフォン
練習と総まとめ症状から原因を探す
全体地図Web アプリの部品どうしのつながりを 1 枚で
入門URL を入れてから画面が出るまで
ブラウザの中DOM・描画・JavaScript・速さの物差し
3:22HTML から DOM へ
パーサが木を作る。script の置き方で、解析と描画が変わる
2:38画面を描く段
スタイル計算・レイアウト・描画・合成。どの変更がどこからやり直しか
2:30JavaScript のイベントループ
1 本の道で順番に。重い処理がクリックを待たせる
2:12fetch と非同期
順番か同時か、失敗とタイムアウトの扱い
2:31ブラウザに残すもの
Cookie・localStorage・sessionStorage・IndexedDB の寿命と読める範囲
2:50速さの物差し
LCP・CLS・INP を測って直す
2:19SSR・CSR・SSG
HTML をいつ・どこで作るかで、表示までの時間が変わる
3:22スマートフォンと PWA
Service Worker でオフラインでも開く。更新の届き方
通信と APIHTTP・REST・CORS・キャッシュ・リアルタイム
サーバの中プロキシ・ルーティング・同時の要求・データベース
2:55Web サーバとアプリサーバ
nginx の静的ファイルとリバースプロキシ。プロセスを増やすとどう変わるか
2:57ルーティングとミドルウェア
1 つの要求が通る層 (ログ・認証・本体・エラー処理)
3:02同時に来た要求をさばく
待つ仕事は重ねられ、計算は並べる。プロセスを増やすとどう変わるか
3:01DB とつなぐ
接続プールと ORM の SQL。N+1 を 3 通りで測る
2:55同時の予約がぶつかる
二重予約の競合と、トランザクション・一意制約・ロックで防ぐ
3:10後でやる仕事
メール送信を列に出す。再試行と二重実行、重複を防ぐ印
3:23ファイルのアップロード
大きさの制限、種類の確かめ、保存場所
守る作り方セッション・トークン・ログイン・認可・脆弱性
3:06ログインの状態を保つ
セッションと Cookie。期限・属性・パスワード・共有の置き場所
3:20トークンと JWT
署名の検証・期限・取り消しにくさ。セッションとの比べ
3:22「〇〇でログイン」を作る
IdP にログインしてもらい、認可コードと ID トークンを確かめる
2:58認可: 何をしてよいか
持ち主・役割の確認。401 と 403。正しい作りをテストで確かめる
3:11脆弱性を作らない書き方
プレースホルダ・エスケープ・CSRF・CSP。正しい作りが効くことを確かめる
3:05依存パッケージを守る
lockfile・integrity・audit・更新。何が入ったかを固定する
2:32設定と秘密
環境変数・.gitignore・履歴に残る漏れ・差し替え
開発の進め方Git・レビュー・テスト・CI・コンテナ・リリース
2:42Git の中身
blob・tree・commit。.git の中を実際に読む
2:46ブランチとマージ
早送り・3 方向のマージ・rebase。衝突が起きる理由
2:52プルリクエストとレビュー
差分の読み方・小さく分ける理由・ブランチの運用の型
3:15テストの種類
単体・結合・E2E の数と時間。何が見つかるか
2:55ブラウザで自動で確かめる
Playwright・失敗の写し・不安定なテスト・retries・workers
3:18CI: push のたびに確かめる
workflow の読み方・ジョブの並び・緑と赤・act
3:52アプリをコンテナにする
Dockerfile の層とキャッシュ。イメージを小さくする
3:32開発の環境をそろえる
Compose でアプリ・DB・プロキシを一度に。起動の順番と保存
4:05本番へ届ける
止めて入れ替え・順番に・青緑・カナリア。失敗と戻し方
運用と設計観測・障害対応・スケール・設計
設計と概念索引・正規化・時刻・状態・層・移行・障害・アクセシビリティ・文字・キャッシュ・検索・国際化・二重送信
3:51インデックスと実行計画
予約 10 万件で、索引の有無と EXPLAIN の読み方
3:17テーブル設計と正規化
書き写すと何が起きるか。表を分けた形と比べる
3:53日付・時刻とタイムゾーン
日付だけの読み方・1 日ずれ・夏時間・timestamptz
3:44状態の置き場所
URL・メモリ・localStorage・サーバ。写しがいつ直るか
3:25層に分けた設計と依存の向き
予約のルールを DB・時計から切り離し、テストと import を比べる
3:53DB の変更を止めずに行う
100 万件の表で、索引・列・名前の変更のあいだの書き込み待ち
3:40タイムアウト・再試行・遮断
遅い・失敗する・止まる相手に、待ちの上限・やり直し・遮断を比べる
3:23アクセシビリティ
見た目だけの版と意味のある要素の版を、検査・キーボード・読み上げで比べる
4:01文字と Unicode
1 文字の数え方・絵文字の途中切れ・同じに見えて違う文字
3:27サーバ側のキャッシュとその消し方
ためると速いが古くなる。期限・書いたら消す・台数・一斉の取りに行き
4:00検索
部分一致・pg_trgm・全文検索・表記のゆれを 10 万件で確かめる
3:06国際化 (i18n)
文の差し替え・数と日付・複数形・並べ順・長さ・右から左
3:12二重送信と冪等キー
二度押し・送り直し・Idempotency-Key・先に鍵を書く
