WEB TRACK
Web/フロントエンド
HTML・CSS・JavaScript から DOM・通信(API)・認証・レンダリング戦略まで。フロントエンドの「結局なに？」を、まず TL;DR で。
Framework Index
フレームワーク・サーバ
UI を作るフレームワークと、HTTP を捌く Web サーバ。横断比較もできます。
Concept Map
考え方・基礎
HTML・CSS・通信・認証など、フレームワークの下で動く Web の土台。まず TL;DR で。
Cookie とセッション
Cookie でブラウザに小さな印を持たせ、サーバ側セッションと組み合わせてログイン状態を保ちます。属性 HttpOnly / Secure / SameSite の意味まで整理します。
Cookie・セッション・JWT（Web認証）
HTTP は毎回「初対面」。だからログイン状態を覚えさせる仕組みが要る。Cookie で情報を運び、サーバセッションか JWT で「誰か」を保持する。
CORS（オリジン間リソース共有）
別オリジンのデータを fetch すると出る、あの赤いエラーの正体。ブラウザの安全装置（同一オリジンポリシー）を、サーバ側のヘッダで“例外的に許可”する仕組み。
CSS（見た目のスタイリング）
HTML に「見た目」を与える言語。どの要素を（セレクタ）どう見せるか（プロパティ）を宣言し、レイアウトや色、余白を組み立てる。
DOM（ドキュメントオブジェクトモデル）
ブラウザが HTML を読み込んでメモリ上に作る“ツリー構造のオブジェクト”。JavaScript はこれを通してページを取得・生成・操作する。
GraphQL
クライアントが「欲しいデータの形」をクエリで指定して取得する API の問い合わせ言語です。REST の過不足取得を解消する一方、キャッシュや複雑さの注意点もあります。
HTML（Webページの構造）
Webページの“骨組み”を作るマークアップ言語。タグで「ここは見出し」「ここはリンク」と意味づけし、文書の構造を組み立てる。
HTTP キャッシュ
一度取得した応答を再利用して通信を省く仕組みです。Cache-Control / ETag、ブラウザと CDN の役割、更新時の無効化（キャッシュバスティング）を整理します。
JavaScript（ブラウザの動的処理）
ブラウザの中で動き、ページを“動的”にする言語。クリックや入力に反応し、DOM を書き換え、サーバと通信する。Web を静止画から動くアプリに変える。
PWA とサービスワーカー
Web サイトをアプリのように使える PWA と、その心臓部である Service Worker の仕組みです。オフライン対応やプッシュ通知、プロキシとして働く役割を整理します。
REST API と fetch（フロントとサーバの通信）
フロントとサーバがデータをやり取りする定番の作法。データを「リソース」と捉え、URL とHTTPメソッドで操作し、結果をJSONで受け取る。それをブラウザから呼ぶのが fetch。
SEO の基礎
検索エンジンに正しく理解され、上位に表示されやすくする SEO の基礎です。クロールとインデックス、タイトルや構造化データ、表示速度・モバイル対応を整理します。
SPA / SSR / SSG（レンダリング戦略）
HTMLを「どこで・いつ」組み立てるかの選択。ブラウザで作るか(SPA)、サーバで毎回作るか(SSR)、ビルド時に作り置きするか(SSG)で、表示速度・SEO・鮮度のバランスが変わる。
SPA と MPA
ページ遷移を JavaScript で差し替える SPA と、サーバが毎回ページを返す MPA の違いです。体感速度・初期表示・SEO のトレードオフを整理します。
Web コンポーネント
ブラウザ標準だけで再利用可能なカスタム要素を作る Web Components の基礎です。Custom Elements・Shadow DOM によるカプセル化・フレームワーク非依存の利点を整理します。
Web ストレージ（localStorage / sessionStorage）
ブラウザにキーと値を保存する仕組みです。Cookie と違いサーバへ自動送信されず容量も大きい一方、機密情報を入れてはいけない点を整理します。
Web パフォーマンス（Core Web Vitals）
表示速度や操作の快適さを測る指標 Core Web Vitals（LCP / CLS / INP）の意味と、画像最適化や遅延読み込みなど改善の勘所を整理します。
WebSocket
サーバとブラウザが 1 本の接続を保ったまま双方向にメッセージを送り合う仕組みです。HTTP ポーリングとの違いとリアルタイム用途を整理します。
アクセシビリティ（a11y）
障害の有無や環境に関わらず誰もが使える Web を目指す考え方です。セマンティック HTML・ARIA・キーボード操作・コントラストの基本を整理します。
フォームとバリデーション
ユーザーの入力が正しいかを検証するバリデーションの基礎です。クライアント側とサーバ側の二重チェックがなぜ両方必要か、UX の勘所まで整理します。
ブラウザのレンダリングの仕組み
受け取った HTML と CSS を、ブラウザが DOM・CSSOM →レンダーツリー→レイアウト→ペイント→合成と段階的に処理して、最終的にピクセルとして画面に描き出すまでの流れ。
レスポンシブデザイン
1つのHTML/CSSで、スマホからPCまで多様な画面幅にしなやかに対応する設計手法。ビューポート設定とメディアクエリ、相対単位、Flex/Grid が土台。