Web概念ガイド

フロントエンド開発で使われる概念・用語を、MDN や W3C 仕様をベースに正確に整理。各概念のセキュリティ上の注意点も併記しています。

コンポーネント・UI

Web Components

ウェブコンポーネントは、一連のさまざまな技術です。これにより、再利用可能なカスタム要素を作成し、その機能を他のコードから分離してウェブアプリケーションで利用できるようにします。

ライフサイクル Shadow DOM XSS 注意点

React vs Web Components

React と Web Components のコンポーネントモデル、スタイル隔離、状態管理、ライフサイクルを比較。それぞれの強みと適切な使い分けを、コード例とともに解説。

ライフサイクル比較スタイル隔離並列コード例

レンダリング

MPA (Multi-Page Application)

MPA (Multi-Page Application) は、URL ごとにサーバーから完成した HTML を返す Web の伝統的なアーキテクチャ。Wikipedia・Amazon・GitHub・ニュースサイト等、現在もウェブの大半を占める。View Transitions API や Hotwire / Astro 等で再評価されている。

SPA (Single Page Application)

単一ページアプリケーション (SPA, Single-page application) はウェブアプリの実装方法の一種で、単一のウェブ文書のみを読み込み、別な内容を表する際には XMLHttpRequest やフェッチなどの JavaScript API を通じて単一文書の本文の内容を更新するものです。

SSR (Server-Side Rendering)

サーバーサイドレンダリング (SSR) とは、サーバー側で HTML コンテンツを生成し、クライアントに送信する手法を指します。 SSR は、クライアントサイドレンダリング（クライアントが JavaScript を使用して HTML コンテンツを生成する）とは対照的です。両方の手法は相互に排他的ではなく、同じアプリケーション内で併用できます。

SSG (Static Site Generator)

SSG (Static Site Generator) は、ビルド時に全ての HTML をあらかじめ生成して静的ファイルとして配信する仕組み。リクエストごとのサーバー処理が不要で、CDN から高速に配信できる。

Hydration (ハイドレーション)

Hydration は、サーバー or ビルド時に生成された静的 HTML に、クライアント側 JavaScript が「動作するための配線」を後付けするプロセス。React の hydrateRoot、Vue の createSSRApp、Astro の Islands 等、SSR / SSG を採用した場合に必ず通る工程。

ISR (Incremental Static Regeneration)

ISR は「SSG + 期限切れ後のバックグラウンド再生成」のレンダリング戦略。Next.js が 9.5 (2020) で導入した用語。Nuxt (Nitro) の swr や SvelteKit の isr 設定等、他フレームワークでも類似機能が広がっている。

SPA / SSR / SSG の違い

SPA・SSR・SSG の 3 つのレンダリング方式を比較。どのタイミングで HTML を生成するか、パフォーマンス・SEO・インフラ要件がどう変わるかを一覧で整理。