ブログをリニューアルしました。リニューアルといっても見た目はほぼ変えていません。  
ちなみに前のブログは[こちら](https://test-blog-a5123.firebaseapp.com/)

以前は Vue.js で作っていたのを、React と Next.js で作り変えました。

このブログを作った当時は、作り変えるなら Gatsby.js かなーと言っていたのですが、今の御時世 Next が物凄い進化を遂げていると聞いたので、Next にしてみました。

なぜ React に寝返ったか、Next の何が良いかをざっと見ていきます。

### Vue.js のいいところ

このブログの記事タイトルを描画しているコンポーネントをコードで比較してみましょう。

React
[![react.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/react.png?alt=media&token=dcb90931-8148-49f5-a05c-26d2590d0932)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/react.png?alt=media&token=dcb90931-8148-49f5-a05c-26d2590d0932)

React の方は、見慣れない Link タグや、className= のような書き方があります。
あと return の中に HTML タグがあるのがちょっと気持ち悪いですね。  
ちなみに CSS フレームワークに、Tailwind を使っています。

Vue
[![vue.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vue.png?alt=media&token=8f096650-c1cd-42d3-8bf7-20c3075b61c0)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vue.png?alt=media&token=8f096650-c1cd-42d3-8bf7-20c3075b61c0)

Vue は template タグの中に、HTML を書き、script タグの中に JavaScript の処理を書いていきます。書いてないですが、CSS を書く場合 style タグの中に書きます。  
CSS フレームワークに、Vuetify を使っています。

Vue のいいところは手軽さ、とよく言われています。

実際 React は JSX 記法で書いていくのに対し、Vue は素の HTML と CSS, JavaScript の組み合わせで書いていきますので、とっつきやすい気がします。

2つを比べると確かに Vue の方がシンプル・・・ですかね？

正直なところ大差ない気がしてるんですよね。なんなら React の方がちょっと見やすくないかとまで思います。

このあたりは個人差があるところですし、私もちょっと前まで JSX 気持ち悪い、学ぶなら Vue だなとか言っていたので、あまり React 贔屓をするわけにもいきません。

他に Vue が優れているものと言えば、

- 状態管理(Vuex)が比較的分かりやすい
- vue-cli による環境構築が簡単

あたりになると思いますが、これはそのとおりかな、といった印象です。

### React のいいところ

React のいいところと言えば、なんといっても TypeScript との相性がバッチリなところかなと思います。  
これはとても重要なことです。

そして状態管理の複雑さに関しては、React Hooks の登場で改善されました。

React に関してはそんなところです。続いて Next についてです！

### Next.js のいいところ

Next.js とは Vercel 社が開発した、React のフレームワークです。

React の環境構築、設定の難易度をぐっと下げてくれる他、ファイルパスによる動的ルーティングと、各propsメソッド の記述のし安さ、その他便利要素盛りだくさんです。

更に高機能なものとして、SSG と SSR をページ毎に選べる機能と、(Vercel でホスティングするときに限り) ISR ですかね。

急に3文字の英単語が3つもでてきました。

SSR は今更解説することもないかなと思いますので、他の2つに言及すると、  
SSG は 静的サイトジェネレーターといって、事前にビルドした静的なページをアクセス時に返すシステムです。  
静的なページなので速度面で最強、SEO 的にも最強クラスなので、可能な限り SSG にすべき、とまで言えます。  

デメリットとして、事前にビルドしないといけないので、ページが増えるたび、サイトを更新するたび、すべてのページをビルドしなければいけないです。

一方で ISR は、リクエスト時、もしくは一定時間ごとに対象のページのみをビルドし直します。  
更新後、最初のリクエストのみ更新前のページを返却する、もしくは SSR してビルドしたページを返す、といったことを、ページごとに設定できます。

これはもう凄いことで、全部これでいいじゃんって思うほどにハチャメチャ高機能なシステムです。

一方で認証等リクエスト時にサーバーとの通信が必要なページに関しては、SSR を選択したり、SSG + CSR を選択すればよいと思います。

何にせよページごとに設定できるのが強すぎですね。

### 総評
結局の所、Vue.js のいいところは、Next.js を導入した React と比べてしまうと、優れている要素が特に無い気がします。  
これは Vue に Nuxt を導入したとしてもです。

Vue は基本的に React の後を追っているので、やがて Next と Nuxt が同等の機能を持つかもしれませんが、そうだとしても最終的に、TypeScript の相性問題を解決しない限り、Vue が React を超えることはないと思われます。

以上がこのブログを Next.js でリニューアルした理由、Vue から React に寝返った理由になります。

そんなことを言っておきながら2,3年で情勢がころっと変わってくるのが Web フロントの闇だと思っているので、やっぱりサーバーサイドで生き続けたいと思う所存であります。

しかし、Next.js がこれだけ高機能で、サーバーサイドにも足を突っ込んできている現状、サーバーサイドも Next を軸に動いていくかもしれません。  
例えば Node.js 一強になる。Node のフルスタックフレームワーク(例えば frourio とか)が ファーストチョイスになるとか。

ちなみに lighthouse の結果

[![lighthouse.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/lighthouse.png?alt=media&token=d12dd79e-9841-45ef-b1e1-72b545c76125)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/lighthouse.png?alt=media&token=d12dd79e-9841-45ef-b1e1-72b545c76125)

すげぇ

ブログをリニューアルした