🌸

型推論が重要！Nuxt3でのプラグインヘルパー提供方法の選択

2023/03/26に公開

Firestore

Nuxt 3

tech

はじめに

はじめまして！
筆者は、資金繰りに困っている人をサポートするようなサービスを開発している、とあるスタートアップ企業に所属しています。

記事のきっかけは、Nuxt3でFirestoreを利用し、プラグインファイルからFirestoreに接続するための情報を渡すヘルパーを定義したいという思いから始まりました。
Nuxt3公式ドキュメントから2種類のヘルパー提供方法の違いと、筆者が良いと思う方法をこの記事で紹介します。

※ 本記事はプラグイン内からヘルパーを提供する方法について触れているので、他のケースは想定しておりません。

個人的に良いと思った方法

個人的には、defineNuxtPlugin内からreturnする方法が良いと思いました！
なぜなら、提供された際にany型ではなくFirestore型だと推論されるからです。
個人的にはできるだけany型は避けたいので、助かります。

【参考】

具体的なコード例

実際にどのように提供するかについては下記のコードを参考にしてください。
【Firebaseを利用する為のプラグイン】

firebase.client.ts

import { initializeApp } from "firebase/app";
import { defineNuxtPlugin } from "#app";
import { getFirestore } from "firebase/firestore";

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();
  const firebaseConfig = {
    apiKey: config.FIREBASE_API_KEY,
    authDomain: config.FIREBASE_AUTH_DOMAIN,
    projectId: config.FIREBASE_PROJECT_ID,
    storageBucket: config.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: config.FIREBASE_MESSAGING_SENDER_ID,
    appId: config.FIREBASE_APP_ID,
    measurementId: config.FIREBASE_MEASUREMENT_ID,
    databaseURL: config.FIREBASE_DATABASE_URL,
  };
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  // Firestoreに接続するための情報をアプリケーション全体に提供
  return {
    provide: {
      db: db,
    },
  };
});

【Firestoreを利用したいvueテンプレート】

hoge.vue

// 提供されているヘルパーを呼び出す
const { $db } = useNuxtApp()

メリット・デメリット

メリットは冒頭に説明した、any型ではなくきちんと型推論をしてくれる点だと思います。
デメリットとしては、別のヘルパー提供方法と混在することでチーム開発の場合は混乱する可能性があるかもしれません。

個人的に微妙かもと思った方法

個人的に微妙だった方法が、nuxtApp.provideで提供する方法です。
なぜなら、defineNuxtPlugin内からreturnする方法と違い、提供時の型推論がany型になってしまうからです。
できるだけany型は避けたいので、個人的にはあまり選択したくないと思いました。

【参考】

具体的なコード例

実際にどのように提供するかについては下記のコードを参考にしてください。
【Firebaseを利用する為のプラグイン】

firebase.client.ts

import { initializeApp } from "firebase/app";
import { defineNuxtPlugin } from "#app";
import { getFirestore } from "firebase/firestore";

export default defineNuxtPlugin(nuxtApp => {
  // 
  const config = useRuntimeConfig();
  const firebaseConfig = {
    apiKey: config.FIREBASE_API_KEY,
    authDomain: config.FIREBASE_AUTH_DOMAIN,
    projectId: config.FIREBASE_PROJECT_ID,
    storageBucket: config.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: config.FIREBASE_MESSAGING_SENDER_ID,
    appId: config.FIREBASE_APP_ID,
    measurementId: config.FIREBASE_MEASUREMENT_ID,
    databaseURL: config.FIREBASE_DATABASE_URL,
  };
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  // Firestoreに接続するための情報をアプリケーション全体に提供
  nuxtApp.provide("db", db);
});

【Firestoreを利用したいvueテンプレート】

hoge.vue

// 提供されているヘルパーを呼び出す
const { $db } = useNuxtApp()

メリット・デメリット

メリットとしては、コードに一貫性を持たせることができそうですね。
なぜなら、他の箇所でもnuxtAppオブジェクトを通じてグローバルにヘルパーを提供している可能性があるので。
デメリットとしては、繰り返しにはなってしまうのですが、型推論がany型とみなされてしまうことですね。

結論

この記事では、Nuxt3でプラグインヘルパーを提供する2つの方法について解説しました。「defineNuxtPlugin内からreturnする方法」と「nuxtApp.provideする方法」の違いと、それぞれのメリット・デメリットを紹介しました。

筆者の経験に基づくと、型推論がきちんと機能する「defineNuxtPlugin内からreturnする方法」がおすすめです。ただし、チーム開発の場合は混乱を避けるために、どちらの方法を採用するか事前に話し合うことが重要かもしれませんね。

それでは、皆さんのNuxt3プロジェクトがスムーズに進むことを願っています！

はじめに

個人的に良いと思った方法

具体的なコード例

メリット・デメリット

個人的に微妙かもと思った方法

具体的なコード例

メリット・デメリット

結論

Discussion