この記事について
2022年12月からNuxt3を使い始めて3ヶ月くらいの感想。
Nuxt2と比較して開発体験がめっっっっっっっちゃ良くなった！開発スピードが２倍になりました。
Nuxt2/Vue1,2は5年くらい経験あり。
React.jsよりも使いやすいし、Nuxt3を会社内で広めたい。
（最近はSvelteも良いと思っている）
Nuxt3を使ってNuxt2と比較したメリットなどを記載します。
TypeScriptネイティブ
Nuxt2のときにTypeScriptを導入したときにTypeScriptサポートに不満があった。
・後付でNuxtにTypeScriptを導入するパッケージをインストールしなければならない
・全コンポーネントに@Composition @Componentのようにアノテーションベースで毎回書かなければならず、ルールに縛られてしまう。
・そもそもネイティブじゃないので整合性が合わなかったり、タイプヒントが表示されないということが多かった
それが、Nuxt３だと lang="ts" と書けばサポートしてくれるようになったので楽になった。精度もネイティブなので完璧なのでストレスも無くなった。
setupによるテンプレコードの減少
setupを使わない場合
<script lang="ts">
export default defineComponent({
async setup() {
const { data: posts } = await useFetch('/api/posts')
return {
posts,
}
},
})
</script>
setupというattributeを使う場合
<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts')
</script>
必要なデータのみ定義したら完結するようになった。
これはかなりメリットが大きくて、全てのコンポーネントファイルで毎回同じことを書いているというのが消えました。コードの見通しが良くて、行いたいことしか書かなくて済むようになった。
composablesによるauto importによるimport文の減少。
composablesというトップ配下のディレクトリに .ts拡張子のファイルを作成すると、自動インポートのように、フレームワーク側でインポート文を自動で追記してくれるのである。（global定義というわけではなくインポート文が追記されるだけなのでtreeShake的にはファイル肥大化するわけではない）
useStateの状態管理を複数コンポーネントで監視するときに、
複数コンポーネント全てでインポート文を書かなくて済むようになる。
コードを書かなくてもやりたいことを行えるメリット
このような書かなくて済むということは非常にメリットが大きい。
Nuxt3を使うことによってNuxt２と比較してコード量は半分以下になった。別PrjでReact(Next)でも並行して開発しているが5分の1とかになる。
タイピング時間も減り、リファクタリングを行いやすくなるし、インポート忘れによるエラーもなくなるし、コードレビューだったり人に仕様を伝達するときも容易になる。
GitHub Copilotを使って自動記述させても正しいのかチェックする必要も減らせるようになった。
デプロイも簡単＋反映時間短縮＋コスト大幅削減
Nuxt２では、
DockerでNuxtが動く環境を用意して、Fargateでn台のサーバーを用意して、ロードバランシングして・・・
といったインフラ構築を行っていた。
Fargateではローリングアップデートのために、一時的にn*2台のサーバーを用意して、置き換わったら、n台のサーバーを消す必要がある（Fargateが勝手にやってくれるが）
クライアントサイドをエンドユーザーに提供するためにサーバーコストも大きく掛かっていた。
Nuxt3では、
Lambda上でSSRが構築できるようになっていて、これは革新的であった。（SPAではなくSSR）
SPAと比較してSSRの構築というのは非常に考慮するべきことが多かった。※書き始めると長くなる
viteとLambdaをつなげる設定が非常に簡単になっていて、API Gatewayなども簡単に書けるようになって、
今は、Fargate/ロードバランシングを使わなくなった。
nitroで作るapiでバックエンドとフロントエンドの型統一
トップディレクトリ配下に、serverディレクトリを置いて、そこにAPIサーバーを設置することができる。
1つのプロジェクト内でサーバーとクライアントを開発し、ModelやInterfaceを共通化できるので、
サーバーサイド向けのモデル構造とクライアント向けのモデル構造を１箇所で管理できるようになる。
nitroベースになっているので、nestjs/prismaなどのフルスタックフレームワーク(ORM/セキュリティ)としても使えるようになる。
使ってみたいのだが、今やっているプロジェクトではAPIサーバーが別で用意されているので、今回は使わなかったが、これによるメリットを享受できるようには今後していきたい。
nuxt.config/bable/eslintの設定を書かなくて済むようになった
nuxt.configは本当にシンプルになった。100行くらいの呪文が20行くらいになった。
※公式ドキュメントを参照いただきたい
typescript導入のための設定もなくなり、babelも使うことは無くなった。
コードフォーマットのために、eslint+prettierという構成で2つのlinterを競合させないようにしつつ、フォーマットをさせて上手く動作させるのも、nuxt3ではprettierを使わないようにしている。
eslintのみでautofixもさせるようにして、設定することを減らすことができた。
Discussion
祝！初投稿！！！