🤝

Nuxt3の本気を見た~Composablesの可能性~

hiroyuki akimoto

2023/06/05に公開

はじめに

みなさんはじめまして、株式会社ペライチでフロントエンドエンジニアをしている秋本と申します。
弊社では現在機能拡充やセキュリティ面強化など様々な角度からユーザーさんに使いやすいようプロジェクトが進行しております。
その中の一つである Nuxt3 化のプロジェクトが水面下で動いております。
今回はそこで得た知見で Nuxt3 の Composables 周りの情報を自分なりに解釈し、記事にできればと思っております。

Nuxt3 の新機能 Composables 関数の紹介

Composables 関数とは何か？

Nuxt3 の Docs では、

Nuxt 3 uses the composables/ directory to automatically import your Vue composables into your application using auto-imports!

と短い文で書かれています。
composables ディレクトリ内で定義した関数は自動で import され、どこでも使えるよ！的なノリかなと個人的には解釈しております。
composables 関数は Nuxt3 側が用意してくれている関数もあるのですが、もちろん自分で作ることもできます。関数の先頭にuseと付けることが習わしのようなので頭の片隅においておいてほしいです。

Nuxt2 と Nuxt3 の Composables の比較

さっきから「Nuxt3 は〜」みたいな文脈で話しているのですが、実は Nuxt2 から composables はあったりします。
下記の表は、Nuxt2 と Nuxt3 の composables の比較です。

Composables	Nuxt2	Nuxt3
useStore	✔
useAsync	✔
useContext	✔
useMeta	✔
useStatic	✔
useFetch	✔	✔
useRoute	✔	✔
useRouter	✔	✔
useAppConfig		✔
useAsyncData		✔
useCookie		✔
useError		✔
useHead		✔
useHydration		✔
useLazyAsyncData		✔
useStorage		✔
useLazyFetch		✔
useNuxtApp		✔
useNuxtData		✔
useRequestEvent		✔
useRequestHeaders		✔
useRuntimeConfig		✔
useState		✔

Nuxt3

Nuxt2

見て分かる通り Nuxt3 から composabeles が増えていることがわかりますね。
Nuxt3 ではぜひ Composables を使ってくれという現れでしょうか 🤔Nuxt コアチームの熱量が伺えます。

Composables の具体的な使用例

ここでは Nuxt3 で追加された composables の一部を紹介していこうかなと思います。
意外とこれ使えそうだな〜というのもあったりするので、参考にしていただけると幸いです。

useAsyncData

useAsyncData は API にリクエストを送り、レスポンスを受け取って返すための API です。
Nuxt3 からは axios は推奨されず、useFetch や useAsyncData という API が推奨されていたりします。
以下例文です。

const { data, pending, error, refresh } = await useAsyncData("mountains", () =>
  $fetch("https://api.nuxtjs.dev/mountains")
);

useAsyncData は 2 つの引数を取り、第一引数にはキーを指定しています。
これは内部でキャッシュを保持しており、2 回目移行は API リクエストを送らずとも前と同じ結果を返してくれます。
その判別をするため、一意なキーが必要で、このキーが指定されているようです。

第二引数には、非同期処理を行う関数を指定しており、このコールバック内で fetch の処理結果を返しています。

また、第三引数には、params でいろいろなオプションを設定することもできます。

default:非同期処理が終了する前に返すデフォルト値を設定できる
watch:変更検知をすることができ、検知後再度実行することができる
etc...
https://nuxt.com/docs/api/composables/use-async-data#params

useNuxtData

useNuxtData は、useFetch や useAsyncData がキャッシュしている値を取り出すことができます。
取得するときは、fetch した時にキーを指定したかと思いますが、そのキーを指定して取り出すことができます。

以下の例では、最新のデータをサーバーから取得する間、キャッシュされたデータをプレースホルダとして使用する方法を示しています。

archive.vue

// We can access same data later using 'posts' key
const { data } = await useFetch('/api/posts', { key: 'posts' })

single.vue

// Access to the cached value of useFetch in archive.vue
const { data: posts } = useNuxtData('posts')
const { data } = await useFetch(`/api/posts/${postId}`, {
  key: `post-${postId}`,
  default: () => {
    // Find the individual post from the cache and set it as the default value.
    return posts.value.find(post => post.id === postId)
  }
})

useCookie

useCookie はリアクティブに cookie を読み出しや書き込みができます。
以下の例では、Nuxt3 で提供されている例で、ログインした名前を useCookie を使って書き込みと読み出しを行っています。
具体的に触ったほうがイメージが付きやすいと思うので是非試してみてください。

オプションも備わっており、secure/domain/httpOnly など設定できます。
watch オプションを false にすると値を更新しても cookie へ書き込まれなかったりするので、いろいろ使い道がありそうです。

まとめ

簡単ではありますが、composables 周りの紹介でした。
Nuxt2 に比べて composables が増えたことによって、開発者は考える時間を減らし、より重要なビジネスロジックやユーザーエクスペリエンスに集中することができるような気がします。
まだまだ、便利な機能が他にもありますので、ぜひ docs を覗いてみてください。