React と Next、Vue と Nuxt、Svelte と Sapper

もう語り尽くされたであろう、「コレってどう違うの？」ネタまとめ。

目次

• React (create-react-app) と Next.js
• Vue (Vue CLI・Vite) と Nuxt.js
• Angular は？ → Angular Universal
  • Universal JavaScript とは
• Svelte と Sapper
• 以上

React (create-react-app) と Next.js

• Create React App
  • SPA・フロントエンドオンリーのツールチェーン
  • どちらかというと学習用。ルーティングなどが含まれていない
• Next.js
  • SSR などを取り揃えたフレームワーク
  • Facebook ではなく Vercel (旧 Zeit) が作っている
  • Razzle という似たような全部入りフレームワークもある

React の場合は、とりあえず何か作るなら CRA ではなく Next.js で始めるのが良いっぽい。SSR の有無で CRA を選ぶ必要はないようだ。

• 参考：新しい React アプリを作る – React
• 参考：【JS】React系とVue系のフレームワーク色々比較まとめ | JavaScriptに関するお知らせ

Vue (Vue CLI・Vite) と Nuxt.js

• Vue CLI・Vite
  • ツールチェーン
  • ボイラープレート的に使った後は自由度が高い
• Nuxt.js
  • SSR など必要になりそうなモノが全部入っているフレームワーク
  • CoC。規約がしっかりしている

SSR が欲しい、チームで規約が欲しいなら Nuxt.js。Vue CLI や、Vue 3 で用意されている Vite なんかは、フロントエンドオンリーの SPA 用って感じ。自由度も高い。

• 参考：NUXT いるのかどうか (Vue CLI 3 との比較) - Qiita
• 参考：【Vue.js】Nuxt.js ？ VueCLI ？それは何、仲間なの？ - Qiita
• 参考：Nuxt.jsいらない説 - GAミント至上主義

Angular は？ → Angular Universal

Angular そのものが堅牢で、フレームワークの様相を呈していて、Angular CLI はそれをサポートする立場とすると、Next.js や Nuxt.js にほとんど相当しているといえる。

SSR に対応する、Universal JS を実現するという意味であれば、Angular Universal がその位置に来るかな。

• 参考：Angular 日本語ドキュメンテーション

もう少しバックエンドもサポートするなら、Angular に近い雰囲気でバックエンドが作れる NestJS の Universal モジュールを使うのが良いかと。

• 参考：NestJSでAngularUniversalを導入する - Qiita
• 参考：GitHub - nestjs/ng-universal: Angular Universal module for Nest framework (node.js) 🌷

Universal JavaScript とは

サーバサイドもクライアントサイドも JS にすることでコードが共通化できるという設計論。

• 参考：Universal / Isomorphic JavaScript について - Qiita
• 参考：Reactで実現するUniversal JavaScript - Qiita

Svelte と Sapper

• Svelte
  • コンパイラ。成果物はフロントエンドオンリーといえる
• Sapper
  • ルーティング、SSR など全部入りのフレームワーク

Next.js や Nuxt.js でお馴染みの構成。フロントオンリーの Svelte、全部入りフレームワークの Sapper。

• 参考：最近名前をよく見かけるsvelte/sapperを試してみた その1 導入編 - Qiita
• 参考：svelteとsapperでwebアプリを作ってherokuにデプロイする(した)方法 | Qrunch（クランチ）

以上

• React やるなら Next.js 一択
  • SPA でサクッとやりたければ CRA でも良いかもだが…
• Vue でフロントだけ作るなら Vue CLI or Vite
• Vue で SSR・大規模開発するなら Nuxt.js
• Angular やるなら Angular CLI 一択
  • SSR したけりゃ Angular Universal を追加
• Svelte でフロントだけ作るなら Svelte オンリー
  • Svelte で SSR したけりゃ Sapper

こんな感じかな。