Vue.jsでdefinePropsとdefaultを使う方法

definePropsとは何か

Vue.jsでは、コンポーネント間でデータを受け渡すための重要な概念がpropsです。definePropsは、Vue.js 3.0から導入されたComposition APIの一部で、コンポーネントが親から受け取ることができるpropsを定義するための関数です。

definePropsを使用すると、propsの型を指定したり、デフォルト値を設定したり、カスタムのバリデーションを行ったりすることができます。これにより、コンポーネントの再利用性と保守性が向上します。

以下に、definePropsの基本的な使用方法を示します。

import { defineComponent, defineProps } from 'vue'

export default defineComponent({
  props: defineProps({
    message: {
      type: String,
      default: 'Hello, Vue!'
    }
  })
})

この例では、messageという名前のpropを定義しています。このpropの型はStringで、デフォルト値は'Hello, Vue!'です。このコンポーネントが親からmessage propを受け取らなかった場合、デフォルト値が使用されます。

以上がdefinePropsの基本的な説明となります。次のセクションでは、defaultの詳細な使用方法について説明します。

defaultの基本的な使い方

Vue.jsのdefinePropsでdefaultを使用すると、propsが親コンポーネントから提供されなかった場合に使用されるデフォルト値を設定することができます。これは、コンポーネントが一定のデフォルト状態で動作することを保証し、親コンポーネントが特定のpropsを提供しなくてもコンポーネントが正常に動作するようにします。

以下に、defaultの基本的な使用方法を示します。

import { defineComponent, defineProps } from 'vue'

export default defineComponent({
  props: defineProps({
    message: {
      type: String,
      default: 'Hello, Vue!'
    }
  })
})

この例では、messageという名前のpropを定義し、そのデフォルト値を'Hello, Vue!'に設定しています。親コンポーネントがmessage propを提供しない場合、'Hello, Vue!'がデフォルト値として使用されます。

defaultは、基本的なデータ型（文字列、数値、ブール値）だけでなく、オブジェクトや配列に対しても使用することができます。ただし、オブジェクトや配列をデフォルト値として使用する場合は、関数を使用してデフォルト値を返すようにする必要があります。これについては次のセクションで詳しく説明します。

defaultで配列とオブジェクトを扱う方法

Vue.jsのdefinePropsでdefaultを使用するとき、配列やオブジェクトをデフォルト値として設定することができます。ただし、配列やオブジェクトをデフォルト値として使用する場合は、関数を使用してデフォルト値を返すようにする必要があります。これはJavaScriptの挙動によるもので、関数を使用しないと配列やオブジェクトが全てのインスタンス間で共有されてしまう可能性があります。

以下に、配列とオブジェクトをデフォルト値として使用する方法を示します。

import { defineComponent, defineProps } from 'vue'

export default defineComponent({
  props: defineProps({
    list: {
      type: Array,
      default: () => ([])  // 配列のデフォルト値
    },
    info: {
      type: Object,
      default: () => ({})  // オブジェクトのデフォルト値
    }
  })
})

この例では、listという名前のpropとinfoという名前のpropを定義しています。それぞれのデフォルト値は、空の配列と空のオブジェクトです。親コンポーネントがこれらのpropsを提供しない場合、それぞれのデフォルト値が使用されます。

以上がdefaultで配列とオブジェクトを扱う方法の説明となります。次のセクションでは、defaultの値が優先されるケースについて説明します。

defaultの値が優先されるケース

Vue.jsのdefinePropsでdefaultを使用するとき、親コンポーネントがpropsを提供しない場合や、提供したpropsの値がundefinedである場合に、defaultの値が使用されます。

以下に、defaultの値が優先されるケースを示します。

import { defineComponent, defineProps } from 'vue'

export default defineComponent({
  props: defineProps({
    message: {
      type: String,
      default: 'Hello, Vue!'
    }
  })
})

この例では、messageという名前のpropを定義し、そのデフォルト値を'Hello, Vue!'に設定しています。親コンポーネントがmessage propを提供しない場合、または提供したmessage propの値がundefinedである場合、'Hello, Vue!'がデフォルト値として使用されます。

ただし、親コンポーネントがnullを提供した場合、defaultの値は使用されません。これは、nullは明示的に何もないことを示す値であり、undefinedとは異なるためです。

以上がdefaultの値が優先されるケースの説明となります。次のセクションでは、エラーハンドリングについて説明します。

エラーハンドリング

Vue.jsのdefinePropsを使用するとき、エラーハンドリングは非常に重要な部分です。特に、propsの型が期待するものと異なる場合や、必須のpropsが提供されていない場合には、適切なエラーメッセージを表示することで、開発者が問題を迅速に特定し、修正することができます。

definePropsでは、validator関数を使用してカスタムのバリデーションを行うことができます。この関数は、propの値が期待するものと一致する場合にtrueを返し、一致しない場合にはfalseを返します。validator関数がfalseを返すと、Vue.jsは開発者に警告メッセージを表示します。

以下に、validator関数を使用したエラーハンドリングの例を示します。

import { defineComponent, defineProps } from 'vue'

export default defineComponent({
  props: defineProps({
    age: {
      type: Number,
      validator: (value) => {
        return value >= 0  // 年齢は0以上でなければならない
      }
    }
  })
})

この例では、ageという名前のpropを定義し、その値が0以上であることを確認するvalidator関数を設定しています。もし親コンポーネントが0未満のage propを提供した場合、Vue.jsは開発者に警告メッセージを表示します。

以上がdefinePropsにおけるエラーハンドリングの基本的な説明となります。これにより、Vue.jsのコンポーネントがより堅牢で信頼性の高いものになります。