Vue 3で「Property was accessed during render but is not defined」エラーが出る原因

2025.08.20

Vue 3 を利用していると、コンポーネントのレンダリング中に 「Property was accessed during render but is not defined」 というエラーに遭遇することがあります。初心者から中級者まで一度は見かける典型的なエラーであり、setup 関数内で定義していない変数をテンプレートで参照した場合に発生します。

本記事では、このエラーの原因と解決法を Vue 3 特有の仕組みとあわせて解説します。

目次

1. エラーの概要と発生条件

このエラーは、Vue 3 コンポーネントでレンダリング時にテンプレートが存在しない変数を参照した場合に出力されます。特に Composition API の setup 関数を使っているとき、変数の定義や return 漏れが原因でよく発生します。

例：setup 内で定義していない変数を参照

<template>
  <div>{{ message }}</div>
</template>

<script setup>
// message を定義していない
</script>

この場合、レンダリング時に message が存在しないため、Vue が警告を出します。

図解イメージ：

[template] → {{ message }}
         ↳ [setup] に定義なし → エラー

2. ref と reactive の正しい使い方

Vue 3 の Composition API では、リアクティブな値を扱う場合 ref や reactive を使う必要があります。特にプリミティブ値は ref、オブジェクトは reactive が基本です。

例：正しく定義した場合

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello Vue 3!')
</script>

ここでは ref を使うことで message がリアクティブ変数としてテンプレートから参照可能になります。

図解イメージ：

[setup] const message = ref("...")
        ↓ return (暗黙的)
[template] {{ message }} OK

3. return 漏れの落とし穴

通常の setup 関数（<script setup> ではない形式）では、return でテンプレートに公開する変数を返却する必要があります。

例：return を忘れた場合

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    // return していない
  }
}
</script>

この場合も count が未定義扱いとなり、同様のエラーが発生します。

解決策：

setup() {
  const count = ref(0)
  return { count }
}

図解イメージ：

[setup] const count = ref(0)
        ↳ return { count }
[template] {{ count }} OK

4. reactive の展開ミス

オブジェクトを reactive で定義した場合、展開の仕方によって参照できないケースもあります。

例：展開せず直接参照してしまった

<template>
  <div>{{ state }}</div>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })
</script>

テンプレートで state をそのまま描画すると [object Object] になってしまいます。プロパティを参照する必要があります。

正しい参照方法：

<template>
  <div>{{ state.count }}</div>
</template>

図解イメージ：

[state] = reactive({ count: 0 })
[template] {{ state }} → [object Object]
[template] {{ state.count }} → OK

5. よくあるハマりポイント

  • setup で変数を定義していないのにテンプレートで参照してしまう
  • return を忘れる（<script setup> では不要だが通常 setup では必須）
  • ref を使わずにプリミティブを定義して参照できない
  • reactive オブジェクトをそのまま描画してしまう

これらはすべて「レンダリング時に存在しないプロパティを参照している」ことが根本原因です。

図解まとめ：

参照 → setup 内で定義なし ✕
参照 → return 漏れ ✕
参照 → ref/reactive 正しく定義 ✓

6. まとめ

Vue 3 の 「Property was accessed during render but is not defined」 エラーは、主に setup 内の変数定義や return 漏れ、ref/reactive の使い方の誤りが原因です。エラーメッセージそのものは抽象的ですが、

  • setup 内で定義したか？
  • return しているか？
  • ref/reactive を正しく使っているか？

といった観点を確認することで素早く解決できます。初心者は特に ref と reactive の使い分けを意識することが重要です。

参考

タイトルとURLをコピーしました