お疲れ様です！watnowアドベントカレンダー17日目担当のゆーとです！
今年ももう終わりですし雪が降る季節になりましたね笑
秋プロ発表も近づいてきたので気合い入れていきましょう！
さて、早速ですが我々watnowのフロントエンドエンジニアは、Next.jsでの実装がめっちゃ多くないですか？夏ハッカソンでもNext多いよねー見たいなFBもらった気がします。
そういった一つの技術を深掘りすることも重要ですが、さまざまな技術に触れ、視野を広げることやってった方がいいのかなーと思いました！
なので、今回は、フロントエンドフレームワークの三大巨頭の一つである Vue.js と、そのフレームワークである Nuxt の特徴を整理し、 React , Next.js とどんな部分が違うのかについてまとめていこうと思います。
🚀 はじめに：本記事で扱う技術
本記事では、主に以下の技術に焦点を当てて比較していきます。
1. Vue.js の特徴を整理
1.1. まず Vue.js とは？：プログレッシブフレームワークの利点
Vue.jsは、Javascriptのフレームワークでプログレッシブフレームワークであることが大きな特徴です。
プログレッシブとは「段階的な」という意味で、コア機能は非常にコンパクトに保たれており、必要に応じてルーティングや状態管理などの機能を段階的に追加できることを意味します。
具体的には、簡易計算機などの実際に動く部分だけをvueで作ることができます
1.2. 単一ファイルコンポーネント (SFC) による開発体験
ReactがJSX（JavaScript内にHTMLを記述）でコンポーネントを記述するのに対し、Vueでは 単一ファイルコンポーネント (.vue ファイル) を使用します。実際書き方的には以下になります。
-
<script>（ロジック）: JavaScriptでロジックや状態（データ）を記述。Vue 3ではReact Hooksに似た Composition API が主流。 -
<template>（マークアップ）: HTMLの構造を記述。v-bindやv-forといったVue独自のディレクティブを使用。 -
<style>（スタイル）: CSSを記述。scoped属性を付与することで、スタイルをコンポーネント内にカプセル化（閉じ込める）でき、CSSの競合を防ぐことができる。
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
1.3. リアクティビティシステムの違い（React Hooksとの比較）
Vue 3では、ReactのようにSetter関数（UseState内での変数等）を使わずに、変数を直接変更するだけで画面が更新されます。これがVueの強力なリアクティビティシステムでめちゃ便利！
| 項目 | Vue.js (Composition API) | React.js (Hooks) |
|---|---|---|
| 状態の宣言 | const count = ref(0) |
const [count, setCount] = useState(0) |
| 状態の更新 |
count.value++ (変数を直接変更)
|
setCount(count + 1) (Setter関数を使用)
|
| 仕組み | Proxy を使い、データへのアクセスや変更を監視。データが直接変更されると、依存するDOMが自動で更新される。 |
useState の Setter 関数が呼ばれると、コンポーネントが再レンダリングされ、DOMの差分が更新される。 |
Vue 3はJavaScriptのネイティブ機能であるProxyを利用して、状態オブジェクト自体をラップし、データの読み書きを監視しています。このため、我々がNext.jsで慣れている「コンポーネントの再レンダリング」という概念とは異なるアプローチでDOM更新が行われています。
2. Nuxt とは？ Next.js との対比
ここまでvue.jsについて話してきましたが、Vue.jsがReactであるとすれば、Reactに対してのNext.jsに相当するフレームワークとしてNuxtというはVueのエコシステムにおけるフレームワークがあります。
Nuxtは、Vueのアプリケーション開発に必要な設定（ルーティング、サーバーサイドレンダリング、データ取得など）を抽象化し、ゼロコンフィグに近い形で開発できるように設計されています。Next.js経験者は、この共通の設計思想のおかげでNuxtにスムーズに入り込めます！なのでNext触ったことある人は割と触りやすくて学習コストが低く済むのでぜひ触って欲しい。
2.1. ファイルベースルーティングと自動インポート
NuxtとNext.jsは、設定なしで開発を始められる「開発体験の良さ」を追求しており、特に以下の点で共通点と相違点があります。
| 機能 | Next.js (App Router) | Nuxt 3 | 備考 |
|---|---|---|---|
| ルーティング |
app/ や pages/ ディレクトリにファイルを作成すると自動でパスが生成される。 |
pages/ ディレクトリにファイルを作成すると自動でパスが生成される。 |
基本的な仕組みは同じ。 |
| コンポーネント管理 | 明示的な import が必要。 |
自動インポート機能により、コンポーネントをインポートせずに <ComponentName /> の形で使用可能。 |
Nuxtはインポートの手間を極力減らしている。 |
| TypeScript | 設定は必要だが、組み込みでサポート。 | 組み込みでサポート。 | どちらも型安全な開発が可能。 |
2.2. レンダリングモードの比較
SSR（Server-Side Rendering）やSSG（Static Site Generation）といったレンダリング戦略は、両フレームワークの最も重要な共通領域です。
Nuxt 3（Vue 3ベース）とNext.js（App Router）を比較する。
2.2. レンダリングモードの比較（表組み変更）
SSR（Server-Side Rendering）やSSG（Static Site Generation）といったレンダリング戦略は、両フレームワークの最も重要な共通領域です。それぞれのフレームワークがどのようなモードを提供しているかを比較します。
| フレームワーク | SSR / サーバーサイドレンダリング | SSG / 静的サイト生成 | ハイブリッド / その他のモード |
|---|---|---|---|
| Next.js (App Router) | RSC (React Server Components)、SSR | SSG (Static Site Generation) | ISR (Incremental Static Regeneration) |
| Nuxt 3 | SSR (Server-Side Rendering) | SSG (Static Site Generation) / プリレンダリング | ハイブリッドレンダリング（ページ単位でSSR/SSGを選択可能） |
💡 RSC（React Server Components）について
コンポーネントの一部をサーバーで実行し、クライアントにJavaScriptを送信しないという仕組み
💡 RSC（React Server Components）について
コンポーネントの一部をサーバーで実行し、クライアントに送信するJavaScriptバンドルのサイズを減らす仕組み
💡 SSR（Server-Side Rendering）について
サーバーサイドでHTMLを生成し、データを埋め込んだ状態でクライアントに送信する手法
💡 SSG（Static Site Generation）について
ビルド時（デプロイ前）にすべてのページのHTMLを生成し、CDN（コンテンツデリバリネットワーク）に配置しておく手法
💡 ISR（Incremental Static Regeneration）について
SSGで生成されたページを、サーバーを再起動せずに 一定間隔で再生成（再検証）する仕組み
3. まとめ：React/Next.js と Vue/Nuxt の違い
3.1. React/Next.js の強み：革新性と柔軟性
Next.js/Reactは、開発速度の速さ、大規模開発への適性、そして何よりも革新的なアーキテクチャが最大の強みです。
- RSCによる革新性: サーバーコンポーネント（RSC）は、コンポーネントの実行場所をサーバーとクライアントで分離することで、クライアントの負荷を劇的に減らします。これは、現在のフロントエンドのパフォーマンスにおける最先端の技術であり、Next.jsの優位性を示しています。
- 強力なエコシステムとコミュニティ: Meta社によるサポートと、世界最大のJavaScriptライブラリであるReactのエコシステムは、困ったときの解決策や、必要なライブラリが必ず見つかるという安心感につながります。
- 柔軟性: JSXによる記述は、HTMLとJavaScriptが密接に統合されており、複雑なロジックをコンポーネントに持たせやすい高い柔軟性を持っています。
3.2. Vue/Nuxt の強み：開発の容易さと直感性
Vue/Nuxtは、Next.js/Reactとは異なるアプローチで「開発体験」の最適化を図っています。
- 学習コストと導入の容易さ: プログレッシブフレームワークとしての特徴により、小さな機能から段階的に導入できるため、既存のプロジェクトへの組み込みや、新規メンバーの学習コストを抑えるのに優れています。
- 直感的なリアクティビティ: Setter関数なしで変数を直接変更するだけで状態が更新される仕組み（Proxyベース）は、初心者にとって非常に直感的で分かりやすく、コードがシンプルになります。
- 優れたドキュメントと公式ライブラリ: 公式の状態管理ライブラリであるPiniaやルーティングなど、主要な機能が公式サポートされているため、ライブラリ選定に迷うことが少ないのも魅力です。
3.3. 結論：
今回の比較を通じて、Next.js/Reactの強みはどこにあり、Vue/Nuxtがどのような開発体験を提供してくれるのか、少しは視野を広げられたかと思います。
僕たちの今回のプロダクトでもvue/Nuxt使ってるので乞うご期待ください！
難しいことも書いてますし自分自身ちゃんと理解できているのあやしい部分はありますので間違っている部分があれば教えていただけると幸いです！今回の記事が、watnowのフロントエンドチームメンバーの皆さんの技術的な視野を広げるきっかけになれば幸いです！