メインコンテンツまでスキップ

[Hard] 📄 Framework

1. Please explain and compare the advantages and disadvantages of SPA and SSR​

SPA と SSR の長所と短所を説明し、比較してください

SPA（シングルページアプリケーション）​

SPA の長所​

  1. ユーザー体験：SPA の本質は単一のページであり、データを動的に読み込みフロントエンドのルーティングを組み合わせることで、ユーザーにページが切り替わっているように見せますが、実際には component を切り替えているだけです。このためユーザー体験はよりスムーズで高速です。
  2. フロントエンド・バックエンド分離：フロントエンドはページのレンダリングとインタラクションのみ担当し、バックエンドはデータ API の提供のみ行います。双方の開発負担を軽減し、メンテナンスも容易になります。
  3. ネットワーク最適化：ページを一度だけ読み込めばよく、従来のマルチページ構造のように毎回ページ遷移のたびに再読み込みする必要がないため、リクエスト回数が減少しサーバーの負担が軽減されます。

SPA の短所​

  1. SEO：SPA のページは動的に読み込まれるため、検索エンジンがページ内容を直接取得できません（近年 Google はこの点の改善を主張していますが）。検索エンジンのクローラーに対しては、従来の HTML には及びません。
  2. 初回読み込み時間：SPA はクライアント側で JavaScript を読み込んで実行してからページをレンダリングするため、初回読み込み時間が長くなります。特にネットワーク状況が悪い場合に遅延が生じる可能性があります。

SSR（サーバーサイドレンダリング）​

SSR の長所​

  1. SEO：SSR はサーバー側でデータを含むページを事前にレンダリングするため、検索エンジンがページ内容を直接取得できます。これが SSR の最大の利点です。
  2. 読み込み時間：SSR はレンダリングの負担をサーバー側に移すことで、初回アクセス時のレンダリング時間を短縮できます。

SSR の短所​

  1. 学習コストと複雑さ：Next と Nuxt を例にとると、それぞれ React と Vue をベースにしていますが、独自のエコシステムを発展させており、学習コストが高くなっています。最近の Next.js 14 の改訂を見ても、すべての開発者がこのような変更を受け入れられるわけではありません。
  2. サーバー負担：レンダリング作業がサーバー側に移るため、特に高トラフィックのアプリケーションシナリオではサーバーの負担が大きくなる可能性があります。

まとめ​

原則として、バックオフィスシステムでは SEO の必要がなければ SSR フレームワークを使用する必要はありません。検索エンジンに依存する製品ウェブページであれば、SSR フレームワークの採用を評価する価値があります。

2. 使用した Web Framework について述べ、長所と短所を比較してください​

両者とも近年「関数ベースのコンポーネント開発」に収斂しています：

Vue 3 は Composition API で、ロジックを再利用可能な composable に分割します。React は Hooks を中核としています。開発者体験では両者は非常に近いですが、全体的には Vue の学習コストが低く、React はエコシステムと柔軟性で優れています。

Vue（Vue 3 を主に）​

長所：

  • 学習曲線が緩やか：SFC（Single File Component）が template / script / style を一つにまとめており、従来のフロントエンド（バックエンドテンプレート）から移行する開発者にとって親しみやすいです。
  • 公式の規約が明確でチームに有利：公式のスタイルガイドと慣例が明確で、新メンバーがプロジェクトを引き継ぐ際に一貫性を維持しやすいです。
  • コアエコシステムが完備：公式が Vue Router、Pinia（または Vuex）、CLI / Vite Plugin 等を維持しており、プロジェクト作成から状態管理、ルーティングまで「公式の解答」があり、技術選定コストが下がります。
  • Composition API で保守性が向上：機能ごとに composable（例：useAuth、useForm）を分割でき、大規模プロジェクトでロジックを共有し重複コードを減らせます。

短所：

  • エコシステムとコミュニティの規模が React よりやや小さい：サードパーティパッケージの数と多様性が React に及ばず、先端ツールや統合では React 優先のものがあります。
  • 求人市場が特定の地域・産業に集中：React と比較すると、海外や多国籍チームは React が主流で、キャリアの柔軟性では相対的に不利です（ただし中国語圏では半々）。

React​

長所：

  • エコシステムが巨大で技術更新が速い：ほぼすべてのフロントエンド新技術、デザインシステム、サードパーティサービスが React 版を優先提供します。
  • 柔軟性が高くプロジェクトに応じて自由に技術スタックを組み合わせ可能：Redux / Zustand / Recoil など多種の状態管理と組み合わせ可能で、Next.js、Remix 等の Meta Framework もあり、SPA から SSR、SSG、CSR まで成熟したソリューションがあります。
  • TypeScript やフロントエンドエンジニアリングとの統合が成熟：型付けと大規模プロジェクトのベストプラクティスに関するコミュニティの議論が多く、長期メンテナンスの大規模プロジェクトに役立ちます。

短所：

  • 自由度が高く、チーム独自の規約が必要：明確なコーディングスタイルやアーキテクチャ規約がないと、開発者ごとに全く異なる書き方や状態管理方式になり、後の保守コストが上がります。
  • 学習曲線は実際には低くない：React 自体（JSX、Hooks の思考法）以外に、Router、状態管理、データフェッチ、SSR 等の一連の選定に直面し、初心者は「どのライブラリを選ぶべきか」で迷いやすいです。
  • API の変更とベストプラクティスの進化が速い：Class Component から Function Component + Hooks、さらに Server Components へと、旧プロジェクトと新しい書き方が共存する際に追加の移行・保守コストが必要です。