はじめに

こんにちは。マイクロアドシステム開発部の東です。業務では主に画面などのプロダクトを開発しています。今回は新規プロダクトでNuxt 3を採用し、実際に開発してみて特に良かった機能を紹介します。

Nuxt 3の採用

Nuxt 3はNuxt.jsの最新バージョンで、以下の利点が主にあります。

Nitroエンジンによる高速・軽量化
TypescriptやVue 3(composition-api)のネイティブサポート

今回、新規プロダクト（catalyst-crossing）の開発をするにあたり、JavascriptのフレームワークにNuxt 3を採用しました。

主な採用理由としては、上記の他にも以下があります。

マイクロアドでは画面系プロダクトの開発でVue.jsを採用していることが多く、メンバーの保守開発コストという面で、Vue.jsをベースとしたJavaScriptフレームワークを採用したい
SSRやmetaタグなどのSEO施策をNuxt.jsでは簡単に実現できる
Nuxt 2(+ Vue 2)を採用しようとした矢先、近い将来Nuxt3(Vue 3)にマイグレートする未来が見えたので、最初からNuxt 3にした方が良い

開発体験

実際にNuxt 3を用いて開発し、特に良い開発体験を得られたと感じた機能をいくつか紹介します。

Auto-imports

Auto-importsは、その名の通り、import文を宣言せずとも、自動でやってくれます。

importする数が多ければ多いほど、コード量が大幅に削減できます。

従来

<template>
  <div>
    <A />
    <B />
    <p>{{ hoge }}</p>
  </div>
</template>

<script>
// import文と、componentsに記載がある
import { ref } from 'vue'
import A from '/components/a'
import B from '/components/b'

export default createComponent({
  components: {
    A,
    B
  },
  setup () {
    const hoge = ref('ほげ')
  }
  ...
})
</script>

Nuxt3

<template>
  <div>
    <A />
    <B />
  </div>
</template>

<script setup>
// import文と、componentsは全て不要になる
</script>

また、componentsディレクトリの構造を解析し、コンテキストが深くなるにつれて長くなるファイル名を短くできます。

ディレクトリ構造

.
└── components
    └── mypage
        └── profile.vue

コンポーネントを利用する側での記述

<template>
  <div>
    <!-- /compontents/mypage/profile.vue -->
    <MypageProfile />
  </div>
</template>

serverディレクトリ

Nuxt 3には標準でサーバーサイドの処理機能が備わっています。それがserverディレクトリです。

そのうちの1機能API Routesは、server/apiディレクトリ内で記述した内容を、APIのレスポンスとして処理できます。

APIサーバーが別に存在する場合は、APIサーバーとの結合前に、モック用のAPIとして利用できます。（今回の開発ではこの利用方法です）

例： /api/user?userId=???のGETリクエストをしたい。

// serverディレクトリの構造
.
└── server
    └── api
        └── user
            └── index.get.ts

/// server/api/user/index.get.ts
export default defineEventHandler((event) => {
  const query = getQuery(event)
  const userId = Number(query.userId)
  // userIdが1であればモック用のデータを、それ以外は404を返す
  if (userId === 1) {
    return {
      userName: 'マイクロアド太郎'
    }
  }
  throw createError({
    statusCode: 404,
    statusMessage: 'Not Found',
  })
})

// APIを呼び出す側
const { data: user1 } = useFetch(`/api/user?userId=1`)
console.log(user1.value) // { userName: 'マイクロアド太郎' }

const { data: user2, error } = useFetch(`/api/user?userId=2`)
console.log(user2) // null
console.log(error.value.statusCode) // 404

composables

composablesディレクトリを利用することで、コンポーネント間で再利用可能なロジック/ストアを記述できます。また、Nuxt 3では以下のものをcomposablesとしてネイティブサポートしています。 - headタグ(userHead) - Cookie(useCookie) - ルーティング(useRoute) - 状態の管理(useState) - etc...

もちろんcomposablesについてもAuto-importsの対象です。ただし、composablesディレクトリ内でネストしている場合は設定が必要になるので注意が必要です。

例: ユーザー情報をマイページに表示する。

// composables/useUser.ts
export default (() => {
  const user = useState('user', () => {
    name: 'マイクロアド太郎'  // ログインしているユーザーの情報を取得済みの想定
  })

  return { user }
})

<!-- pages/mypage.vue -->
<template>
  <div>
    <h1>マイページ</h1>
    <p>ユーザー名: {{ user.name }}</p>
  </div>
</template>

<script setup>
const { user } = useUser()

// headタグの設定
useHead({
  title: 'マイページ'
  meta: [
    { name: 'robots', content: 'noindex,nofollow' } // クロールされたくないページに設定
  ]
})
</script>

おわりに

今回は新規プロダクトでNuxt 3を採用し、実際に開発してみて特に良かった機能を紹介させていただきました。 Nuxt 3はNuxt.jsの最新バージョンということで、開発体験の良い機能が数多く存在していますし、今後のアップデートも大いに期待できます。今回紹介できなかった機能についても数多くあるので、気になった方はぜひ公式ドキュメントなどを見ていただけると幸いです。