Nuxt2->Nuxt3移行備忘録 `defineProps` #Vue.js

defineProps は Vue 3 の Composition API の一部です。この API は、コンポーネントが受け取るプロパティ (props) を定義および取得するために使用されます。

definePropsサンプルコード

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ user.name }} ({{ user.age }} years old)</p>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  message: string;
  user: {
    name: string;
    age: number;
  };
  items?: string[];
}>()
</script>

definePropsが用いられる理由

型安全性: TypeScriptと共にdefinePropsを使用することで、propsの型を定義でき、型安全性と開発体験が向上します。
簡潔さ: スクリプト内で直接propsの型を定義することで、追加のインポートやボイラープレートコードが不要になります。
Composition APIとの統合: definePropsはComposition APIとシームレスに統合され、コンポーネントロジックの管理と整理が容易になります。

Composition APIとは？

Composition APIは、リアクティビティAPI（refやreactive）、ライフサイクルフック（onMountedやonUnmounted）、依存性注入（provideやinject）などで構成されています。コンポーネントのロジックをより柔軟かつモジュール化するための新しい方法を提供します。setup関数を使用し、リアクティブデータ、ライフサイクルフック、メソッドなどをコンポーネントのトップレベルで定義できます。

definePropsと同等の機能を持つVue 2のコード

Vue 2では、同様の機能を実現するために、より多くのボイラープレートコードとPropTypeの使用が必要でした。

import Vue from 'vue'
import { PropType } from 'vue'

export default Vue.extend({
  name: 'MyComponent',
  props: {
    message: {
      type: String,
      required: true
    },
    user: {
      type: Object as PropType<{ name: string; age: number }>,
      required: true
    },
    items: {
      type: Array as PropType<string[]>,
      required: false,
      default: () => []
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <p>{{ user.name }} ({{ user.age }} years old)</p>
      <ul>
        <li v-for="item in items" :key="item">{{ item }}</li>
      </ul>
    </div>
  `
})

defineProps公式ドキュメンテーションのURL

definePropsについての詳細な情報は、公式のVueドキュメンテーションを参照してください：
https://vuejs.org/guide/typescript/composition-api.html

クイズ

1. Vue 3でdefinePropsを使用する主な目的は何ですか？

a) コンポーネントのスタイルを定義するため
b) コンポーネントのイベントを処理するため
c) propsの型を定義するため
d) コンポーネントのテンプレートを作成するため

2. 先ほどのdefinePropsサンプルコードで、userプロパティの型は何ですか？

a) 文字列
b) 数字
c) nameとageプロパティを持つオブジェクト
d) 文字列の配列

3. Vue 2でpropの型を定義するための同等の方法はどれですか？

a) defineProps関数を使用する
b) PropTypeを使用して、propsオブジェクトでpropsを定義する
c) defineEmits関数を使用する
d) 直接setup関数を使用する

クイズの答え

Vue 3でdefinePropsを使用する主な目的は何ですか？
答え: c) propsの型を定義するため
先ほどのdefinePropsサンプルコードで、userプロパティの型は何ですか？
答え: c) nameとageプロパティを持つオブジェクト
Vue 2でpropの型を定義するための同等の方法はどれですか？
答え: b) PropTypeを使用して、propsオブジェクトでpropsを定義する

Nuxt2->Nuxt3移行備忘録 `defineProps`

目次