こんにちは！React、Vue、Angularの説明をする時にゼニガメ、フシギダネ、ヒトカゲに例えるとウケが良いことに気づきました。Mizutani(@sirycity)です。

今日はReactとvueそのものの比較ではなく、そいつらを使ったフレームワークとかライブラリの比較です。沢山あるから自分の確認含めてざっくり書いてきますわ。項表題をクリックすると公式に飛べるで。

初心者向け

reactとかvueを初めて触る人によく勧められるフレームワーク？です。機能はそんなにないけど分かりやすいやつ。

create-react-app

react初心者にぴったり。まずはここから始めよう！ってやつ。僕もフロントエンドエンジニア2年目でこれやった。

逆に言えば、これは完全に学習用にした方がいいです。ルーティングやSSR等、本番運用しようとすると欲しいものがないです。ここでreactの基本を理解したらgatsbyかnextに移行するのがいいと思います。

vue-cli

これは↑のvue版。vue最初に触る人がやるやつ。ただこれはcreate-react-appと比べると初心者向けでありながらも結構色々な機能がある。少し前にUIとか付いたし、最初にプロジェクト作る時の幅が広がってPWA対応とかも楽にできます。でもまあ、がっつり作るならnuxtの方がいいかな？といった印象です。

オールインワン

Next.js

Reactのオールインワンフレームワーク。reactのこと、全部これでok。ただ、オールインワンとは言ってもnextはかなりシンプルです。package.jsonとか見てみるといかにシンプルか分かる。

シンプルすぎて動的ルーティングとかがなかったのが欠点だった。このせいでnuxtにわりと遅れを取ってる感あったけど、v9からは動的ルーティングができるようになった。ついでにtypescriptや静的化の対応も始まりもう怖いものなし。今回紹介しているフレームワークの中でも人気ナンバーワンです。reactで全部入りだと一応RAZZLEとかもあります。

ちなみにNextはfacebookが開発元じゃないです。開発元の企業名はVercel。Vercelって言っても分からない人も多いかと思いますが、旧社名はZEITです。そう、あのNOWとか作ってるZEIT。なぜ社名変えた

Nuxt.js

Vueのオールインワン。こっちはnextと違ってまじで全部入り。全部入りすぎて、最近axiosすら手放して自分でhttpクライアント作り始めた。前はnext vs nuxtみたいな構図だったけど、nextとは方針が変わりすぎてむしろrails寄りになってきた。

ここ数年の日本のベンチャー系のフロントエンドはnuxtを使っている所がかなり多い。フロントエンドエンジニアなら使えて損はないです。ちなみにnuxtのシェアがnextを超えているのは世界で日本だけ(googleトレンド調べ)。nextについて日本語でググるとよく 「もしかして: nuxt」って出るくらい普及してる。他にもnestとかnodeとかjestとかフロントエンドは似た単語多いね。

高度な静的サイトジェネレーター

静的サイトを書き出すためのフレームワーク。↑のnextnuxtも静的サイト書き出せるけど、こっちはより静的サイトに特化した高度なやつ。主にfirebaseやnetlifyでホスティングされます。

Gatsby.js

静的サイトと言えばこれ。reactやvueどころか、静的サイトジェネレーター(SSG)全体でもjekyllやHugoの大御所と並ぶレベルの人気。モダンフロントエンドではnextに肉薄する人気です。

リソースの取得にGraphQLを使うのが特徴で、学習コストがやや高いものの慣れると静的サイトを爆速で生成できます。また、プラグインを使っての拡張も容易で最近のreact周り(typescriptとか)の導入が簡単です。

あと、ラスター画像の最適化があまりにも凄く「nextでよくね？」への回答たり得ています。pngやjpgを多用するならgatsby一択！

Gridsome

簡単に言うとvueのgatsby。nextに対するnuxtみたいな感じで作られた後発のフレームワークです。ロゴも名前もそっくり。nuxtはnextから離れていきましたがgridsomeは現状gatsbyと同様の方針、GraphQL使うあたりも一緒です。

現状はシェアの低さが課題かな？といった所。とくに国内だとnuxtが普及してるだけに、gridsomeを積極的に使う理由もない気がします。伸び率は高いんだけどね。

簡単な静的サイトジェネレーター

ReactStatic

名前そのまま。reactを使ったSSG。簡単なgatsbyのような位置づけです。

私事ですが、今回紹介するフレームワークの中で唯一使ったことがないなら記事にするな ので詳述は控えます。あまり使う理由はないかも…しれません。高機能と簡単の間の中途半端な位置にいるかんじ。

VuePress

ReactStaticのvue版。というといまいちに聞こえるかもしれないけど中々イケるやつ。

まず難易度が非常に低い。さすがeasyを重視してるvueの中でもさらに簡単なだけある。SSG全体でもここまで簡単なのはないと思う。特にSSGで一つのハードルになるmarkdownの扱い方が楽。ロゴにmarkdown書いてあるくらいだし。モダンフロントエンドで文書メインの静的サイト手軽に作りたいってだけの用途ならnuxtよりもかなり楽、向いていると思います。

ちなみにこのVuePress、Vue作者でもあるEvan Youさんが旗振ってます。vueは関連するフレームワークもわりと公式が面倒見てる傾向ありますね。

状態管理ライブラリ

Redux

JavsScriptの状態管理ライブラリ。JS用なので別にreact専用ってわけじゃなくvueでも使えるんだけど実際はほぼreact専用。

とにかく習得難易度が高い。関数型&非同期サポートなしのダブルパンチ。僕も初めて見た時はきれそうになりました。状態管理の方法は他にも色々あって、一昔前だとMobXとか、最近だとhooksとか、超最近だとRecoilとか色々あるのでredux必須ってわけじゃない。でも規模だとreduxが圧倒的です。

非同期の扱いはredux-thunkとredux-sagaがあったけど、前者がよく使われるようになったみたい。こんな感じで周辺ライブラリがバラバラなのはreact系列のつらみです。reduxすら最初はreactと別の開発チームでした(reduxの作者がその後Facebookに入社してひと段落)

Vuex

Vue用の状態管理ライブラリ。reduxと比較すると相当easy寄りです。基本手続き型+非同期サポートなのでほんとにeasy。

しかしこのvuex、typescriptとの相性が恐ろしく悪くvue3のcomposition apiに駆逐されそうな予感がします。とはいえ、javascriptで回してるvueプロジェクトも沢山あると思うので学んで損はないはず。reduxやった後にやると泣けてきます。簡単すぎて。

ネイティブアプリ

番外編。ネイティブアプリをwebを作る感覚で作れる、いわゆるクロスプラットフォームです。

ReactNative

webフロントエンドどころかweb系どころかクロスプラットフォーム最強クラス。ionicやcordovaを蹴散らし、xamarinやflutterと並び同分野の魁となろうかという所です。

この分野はReactNativeのFacebook、FlutterのGoogle、XamarinのMicrosoftと役者が揃ってます。でもMicrosoftはReactNativeに浮気しがち。MS系サービスは本家Reactの方も結構使ってたりします。Azure DevOpsとか。

蛇足ですが、reactnativeの開発支援サービスにexpoがあります。

WEEX

ReactNativeのvue版。…だけど使われている所は見たことないです。Alibabaがサポートしているのでこれから普及するかもしれませんが、現状はこういうのあるんだなーくらいの認識でいいかもしれないです。

さいごに

筆者がreact寄りなので若干バイアスかかっていますが、reactもvueもエコシステムに囲まれもはや一大勢力です。ぶっちゃけどっちかじゃなきゃできない事はほぼないので、個人やチームの好みで決めてしまってもいいかと思います！この記事の意味

あとmarkdownでリンク貼るのめんどくさいね。長文書いていて思いました。以上。