# Nuxtとは

Vue.jsのフレームワーク、SPAとSSRでの開発が可能、最近Nuxt3の話が話題になっている
Nuxtの言及に入る前に, そもそも論として Vue の話をしないといけない

## Vue.jsとは
オープンソースのフロントエンド用のHTML構築ライブラリ

### メリット
- HTML構造とそのUIが抱える機能をひとまとめに実装, 管理できる
- 配置したUIがそれぞれ状態を持つので, UIの状態を管理しやすく, 影響範囲も小さくできる
- 公式ライブラリで包括的に開発がサポートされている
- 1ファイルにつき1コンポーネントが原則になっているので, マークアップをしていた人はとっつきやすい(と言われている)

### デメリット
- **TypeScriptと相性が悪い**
- 主に `<template>` の中の値で値の型チェック(補完)が効かないなど
- エディターによって差がある. WebStorm はうまいことやってくれているが VSCode + Vetur では効かない
- 1ファイル1コンポーネントの縛りがある
- 非常に小さい構造を別コンポーネントに分けて繰り返させる, みたいなことをするのもファイルを分ける必要がある
- `v-for`, `v-if`, `:class` などの **ディレクティブ** と呼ばれるキーワードを覚える必要がある
- 1開発者としてこれが一番大きかった
- 初めてコンポーネントを扱えるライブラリを学習しようとして Vue を触ると, **コンポーネントを分けるメリットがわからない可能性がある**
- 理由として, 上記のディレクティブで繰り返しなどの実装が済んでしまう(構文が巨大化しても動作や可視性に極大なデメリットがない)ため
- 個人的には React を1回触ってから Vue に行くとすんなりいくかもしれない.

## Reactとは
Vue と対となるライブラリとして非常に有名のためこちらも言及する
旧Facebookが主導開発したJSのライブラリ、Facebook,Instagramの他多くのサービスで利用されている
Microsoft も Office365 のWeb版の実装など大々的に採用をしている

### メリット
- TSと相性が良い
- 1コンポーネントが **1関数** の体をしているので, 型表現に強い
- TS のリリースより前にメジャーリリースされており, **あくまでたまたま相性が良かった**
- スマホアプリにも拡張ができる
- ReactNative
- Redux に対しての理解が必要にはなるが, 非常に大きなアドバンテージとなる
- JSX 記法でかける
- JS の中にHTML(もとい XML)の構文が入ることから　JSX という名前になっている
- TSの場合は TSX という名称
- 初めてコンポーネントを扱うライブラリとして触るとスッと理解できる
- あくまでも**HTMLを吐き出すため**のライブラリのため

### デメリット
- **JSに対して理解が必要**
- [公式ドキュメントのチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html#setup-for-the-tutorial)も言及するほど
> HTML と JavaScript に多少慣れていることを想定していますが、他のプログラミング言語を使ってきた人でも進めていくことはできるはずです。また、関数、オブジェクト、配列、あるいは（相対的には重要ではありませんが）クラスといったプログラミングにおける概念について、馴染みがあることを想定しています。

> このチュートリアルでは、アロー関数、クラス、let および const ステートメントを使用しています。Babel REPL を使って ES6 のコードがどのようにコンパイルされるのか確認することができます。
- 学習コストがある
- 上記の通りJSに対する理解が必須のため
- CSSが標準で載せられない

## NL+内部のお話
社内のフロントエンジニアはReactの知見が少ない、Vue（Nuxt）の経験が豊富だったので、学習コスト, 開発スピードを考えるとVue.js（Nuxt）だった

### マークアップしか書けない人でもコンポーネントが書ける
弊社ではマークアップ（HTML+CSS）を専門としているエンジニアが在籍しているが、そういった人と協業する上でよりHTMLライクな記法が可能であるVue.jsの方が都合が良かった。ReactはJS側に倒しすぎている。

## この案件的なお話
- そもそもReactで開発しようというお話にはならなかった
- マークアップから書き始めたから、HTMLライクなVueが選ばれた
- キックオフ当初2ヶ月で納品できるレベルまで持っていく必要があり,スピードを第一と考えたため尚の事Reactは選択肢に入らなかった
- 要件的にNuxtのSPA＋SSRで開発せざるを得なかった
- SSR(ServerSideRendering)
- toC のサービスではファーストインプレッションの速さが離脱率にダイレクトに影響するためSSRで速度の向上を計った
- SPA(SinglePageApplication)
- ファーストインプレッション後, 再レンダリングする部分を最小限にとどめて遷移速度(ひいてはユーザー体験)を向上させる