主要フレームワークの位置づけ
このページで学ぶこと
Section titled “このページで学ぶこと”- UIライブラリとアプリケーションフレームワークの違い
- React、Vue、Angular、Svelteの大まかな位置づけ
- Next.js、Nuxt、SvelteKit、Astroが追加する機能
- 人気ではなく案件条件で比較する方法
- 採用後の体制・ビルド・更新・ホスティングまで含めて判断する方法
「フロントエンドフレームワーク」という言葉には、提供範囲の異なる技術が含まれます。
flowchart TD
WEB[Webサイト・Webアプリ]
WEB --> STD[Web標準<br/>HTML・CSS・JavaScript]
STD --> UI[UIライブラリ／フレームワーク<br/>React・Vue・Angular・Svelte]
UI --> APP[アプリケーションフレームワーク<br/>Next.js・Nuxt・SvelteKit]
STD --> CONTENT[コンテンツ指向フレームワーク<br/>Astro]
APP --> HOST[静的ホスティング・サーバー・サーバーレス]
CONTENT --> HOST
製品名を覚えることより、どこまでをその技術が担当するかを理解することが重要です。
UIライブラリとアプリケーションフレームワーク
Section titled “UIライブラリとアプリケーションフレームワーク”UIライブラリ・UIフレームワーク
Section titled “UIライブラリ・UIフレームワーク”画面をコンポーネントに分け、状態に応じて更新する仕組みを主に提供します。
- React
- Vue
- Angular
- Svelte
公式な呼び方や提供範囲は異なりますが、PMとしては「画面を組み立てる層」と捉えると理解しやすくなります。
アプリケーションフレームワーク
Section titled “アプリケーションフレームワーク”UI技術に加えて、次のようなサイト全体の仕組みを提供します。
- URLルーティング
- データ取得
- SSR・SSG
- サーバー側処理
- ビルド
- 画像最適化
- キャッシュ
- デプロイ先との連携
代表例はNext.js、Nuxt、SvelteKitです。
コンテンツ指向のWebフレームワーク
Section titled “コンテンツ指向のWebフレームワーク”ブログ、メディア、コーポレートサイトなど、コンテンツ中心のWebサイトを主な用途とし、静的HTMLと少ないJavaScriptを重視する製品があります。Astroが代表例です。
境界は製品アップデートで変化します。採用時点の公式資料で確認します。
Reactは、コンポーネントからユーザーインターフェースを構築するライブラリです。
- UIを部品へ分ける
- データや状態に応じて画面を更新する
- 既存サイトの一部分にも導入できる
- 周辺ツール・フレームワークの選択肢が多い
PMが確認すること
Section titled “PMが確認すること”React単体では、サイト全体の公開方式は決まりません。
- Next.js等と組み合わせるか
- SPAなのか、SSR・SSGなのか
- 状態管理・フォーム・ルーティングに何を使うか
- 保守担当が周辺構成まで理解できるか
「Reactを使う」という説明だけでは、インフラ・SEO・ビルド・運用は判断できません。
Vueは、標準的なHTML・CSS・JavaScriptを基礎とし、既存ページの一部分からサイト全体まで段階的に導入できるフレームワークです。
Vue単体で一部分のUIを作る場合と、Nuxtでサイト全体を作る場合では、レンダリング・ビルド・ホスティングが異なります。
PMは「Vueを採用する」ではなく、「Vueをどの範囲に、どの構成で採用するか」を確認します。
Angular
Section titled “Angular”Angularは、ルーティング、フォーム、通信など、Webアプリケーション構築に必要な幅広い機能を一体的に提供するフレームワークです。
大規模なチームや長期開発では、共通ルールを持ちやすいことが利点です。一方、コンテンツ中心の小規模サイトでは、必要以上に構成・学習範囲が大きくなる場合があります。
社内標準、既存資産、チーム経験が選定理由になることが多い技術です。
Svelte
Section titled “Svelte”Svelteは、コンポーネントをビルド時にJavaScript・CSS等へ変換するコンパイラ型のUIフレームワークです。
ブラウザ側の処理を抑えやすい設計を取れますが、「Svelteなら必ず高速」とは限りません。画像、API、第三者タグ、画面設計なども性能に影響します。
サイト全体を作る場合はSvelteKitと組み合わせることが多く、保守体制は両方を含めて確認します。
Next.js
Section titled “Next.js”Next.jsはReactを基盤にしたWebアプリケーションフレームワークです。
- ルーティング
- 静的生成
- サーバー側レンダリング
- サーバー側処理
- データ取得・キャッシュ
- ビルド・最適化
などを統合します。
同じNext.jsでも、すべて静的生成する構成、アクセス時に生成する構成、ページごとに方式を変える構成があります。
「Next.jsだからSEOに強い」「Next.jsだからサーバーレス」という説明ではなく、具体的なレンダリング・配信方式を確認します。
NuxtはVueを基盤とするフレームワークです。SSR、静的生成、サーバー処理、ルーティング等を統合します。
静的ホスティング、Node.jsサーバー、サーバーレス、エッジ等、出力・配信方式によって保守対象と費用が変わります。
SvelteKit
Section titled “SvelteKit”SvelteKitはSvelteを使ったWebアプリケーションフレームワークです。
ページごとにプリレンダリング、SSR、CSR等を選び、配信環境に応じたアダプターを利用します。どのページを静的にし、どのページをアクセス時に生成するかで、必要なホスティングが変わります。
Astroは、ブログ、メディア、マーケティングサイト、コーポレートサイトなど、コンテンツ中心のサイトを主な対象とするWebフレームワークです。
- 標準ではページを静的生成する
- HTML中心で配信する
- 必要なコンポーネントだけJavaScriptを有効化しやすい
- React、Vue、Svelte等を部分利用できる
- 必要なページだけアクセス時に生成できる
複雑な管理画面より、コンテンツ配信に向きやすい一方、ページ数が非常に多い場合はビルド時間を確認します。
| 技術 | 主な位置づけ | 向きやすいケース | 主な注意点 |
|---|---|---|---|
| React | UIライブラリ | 複雑なUI、既存サイトへの部分導入 | 周辺構成の選択肢が多い |
| Vue | 段階導入可能なUIフレームワーク | 部分UIからWebアプリまで | Vue単体とNuxtで構成が異なる |
| Angular | 統合型フレームワーク | 大規模・組織的なWebアプリ | 学習・構成が大きくなりやすい |
| Svelte | コンパイラ型UIフレームワーク | 軽量なUI、SvelteKitアプリ | 経験者・周辺体制を確認 |
| Next.js | Reactアプリケーションフレームワーク | ReactでSSR・SSG・サーバー機能を使う | レンダリング・キャッシュ設計が複雑 |
| Nuxt | Vueアプリケーションフレームワーク | Vueでサイト全体を構築 | 出力・配信方式を確認 |
| SvelteKit | Svelteアプリケーションフレームワーク | 静的・動的サイト | アダプター・ホスティングを確認 |
| Astro | コンテンツ指向Webフレームワーク | コーポレート、メディア、ブログ | 大量ページのビルド・動的機能 |
この表は優劣や市場順位を示すものではありません。
選定で比較する観点
Section titled “選定で比較する観点”サイトの性質
Section titled “サイトの性質”- コンテンツ中心か、操作中心か
- 会員・個別表示があるか
- CMS更新が多いか
- 動的機能の複雑さ
- 現在の経験者
- レビューできる人
- 保守を引き継ぐ人
- 採用・外注のしやすさ
- 静的ホスティングか、実行サーバーが必要か
- ビルド時間
- CMS反映時間
- プレビュー
- キャッシュ
- バージョン更新
- 想定運用年数
- メジャーアップデート
- 周辺プラグイン
- 特定ホスティングへの依存
- データ・ソースの移行可能性
実案件ではどう考えるか
Section titled “実案件ではどう考えるか”コーポレートサイト＋ヘッドレスCMS
Section titled “コーポレートサイト＋ヘッドレスCMS”Astro、Next.js、Nuxt等が候補になります。製品名より、静的生成か、CMS更新の反映時間、プレビュー、JavaScript量、運用担当を比較します。
会員・予約サービス
Section titled “会員・予約サービス”React＋Next.js、Vue＋Nuxt、Angular、SvelteKit等が候補になります。認証、状態管理、API、サーバー処理、監視・保守を含めて比較します。
既存サイトの一部分だけ改善
Section titled “既存サイトの一部分だけ改善”検索・シミュレーター等の部分だけReactやVueを導入できる場合があります。全面リプレイスだけを選択肢にしません。
PMチェックリスト
Section titled “PMチェックリスト”- 技術名ではなく提供範囲を確認している
- UIライブラリとアプリケーションフレームワークを区別している
- フレームワークを使わない案も比較している
- サイトのコンテンツ量・操作量に適している
- レンダリング方式とホスティングを確認している
- CMS更新・プレビュー・キャッシュへの影響を確認している
- チーム内にレビュー・保守できる経験者がいる
- 周辺ライブラリを含む更新方針がある
- 特定ホスティングへの依存を把握している
- 推奨案と不採用案の理由を文書化している
よくある誤解・失敗
Section titled “よくある誤解・失敗”「React、Next.js、Vercelは同じもの」
Section titled “「React、Next.js、Vercelは同じもの」”ReactはUIライブラリ、Next.jsはReactを基盤とするフレームワーク、Vercelはホスティング等を提供する企業・サービスです。
「人気の技術が正解」
Section titled “「人気の技術が正解」”知名度だけでは、要件、チーム、既存資産、運用への適合性は判断できません。
「Astroは静的サイトしか作れない」
Section titled “「Astroは静的サイトしか作れない」”標準では静的生成ですが、必要なルートをアクセス時に生成する構成も選べます。
「Angularは古い」
Section titled “「Angularは古い」”現在も公式に保守される統合型フレームワークです。案件との適合性で判断します。
「Svelteならどんなサイトでも最速」
Section titled “「Svelteならどんなサイトでも最速」”性能は画像、API、第三者タグ、実装設計等にも左右されます。
理解度チェック
Section titled “理解度チェック”Q1. ReactとNext.jsの違いは何ですか。
Section titled “Q1. ReactとNext.jsの違いは何ですか。”回答と解説
ReactはコンポーネントでUIを作るライブラリです。Next.jsはReactにルーティング、レンダリング、サーバー処理、ビルド等を加えるフレームワークです。Q2. Vueを採用すると公開方式まで決まりますか。
Section titled “Q2. Vueを採用すると公開方式まで決まりますか。”回答と解説
決まりません。部分導入、SPA、Nuxtを使ったSSR・SSG等、構成によって異なります。Q3. コーポレートサイトで優先する比較観点は何ですか。
Section titled “Q3. コーポレートサイトで優先する比較観点は何ですか。”回答と解説
コンテンツ量、更新頻度、SEO、JavaScript量、CMS反映、ビルド、プレビュー、ホスティング、保守人員です。Q4. 技術比較をエンジニアへ依頼するとき、何を求めますか。
Section titled “Q4. 技術比較をエンジニアへ依頼するとき、何を求めますか。”回答と解説
案件課題、採用・不採用理由、開発・運用コスト、体制、更新、依存、障害・移行への影響を求めます。Q5. 既存サイトの検索UIだけを改善する場合、全面移行は必須ですか。
Section titled “Q5. 既存サイトの検索UIだけを改善する場合、全面移行は必須ですか。”回答と解説
必須ではありません。必要な一部分だけフレームワークを導入する方法も比較します。- React公式
https://react.dev/ - Vue公式 Introduction
https://vuejs.org/guide/introduction - Angular公式 Overview
https://angular.dev/overview - Svelte公式 Overview
https://svelte.dev/docs/svelte - Next.js公式
https://nextjs.org/docs - Nuxt公式 Rendering Modes
https://nuxt.com/docs/guide/concepts/rendering - SvelteKit公式 Project types
https://svelte.dev/docs/kit/project-types - Astro公式 Why Astro
https://docs.astro.build/en/concepts/why-astro/