data コンポーネントの状態

最終更新：2026-10-22

data オプションは、オブジェクトを返す関数としてコンポーネントのリアクティブな状態を宣言します。これにより、各インスタンスが独立したデータのコピーを持ちます。

📝 構文

export default {
  data() {
    return { count: 0, user: { name: "Ana" } }
  }
}

value	引数なし：初期データを返す関数（オブジェクトはルートインスタンスのみ許可）

戻り値：返されたフィールドはリアクティブになり、テンプレート内で名前で直接使われます

以下のコードを編集して結果を確認しましょう：

出力：

Shows 'Count: 0'; clicking increments it.

⚠️ 注意 必ず関数にしてください。オブジェクトを直接書くと複数インスタンス間で同じデータが共有され、データ漏れのバグの原因になります。

ℹ️ 補足 返すオブジェクトのすべてのフィールドは、ネストされたオブジェクトや配列も含めて深くリアクティブになります。

💡 ヒント _ や $ で始まるキーはインスタンスに公開されません（内部用に予約されています）。

Q なぜ data は関数でなければならないのですか？

A コンポーネントは何度もインスタンス化されるため、関数によって毎回新しいオブジェクトを返し、インスタンス間でデータが分離されます。

Q data の中で props を参照できますか？

A 直接の依存は信頼できません。props から派生させるには computed を使ってください（prop が変わっても data は自動更新されません）。

Q テンプレートで this は必要ですか？

A 不要です。テンプレートではフィールド名を直接書き、スクリプトのロジック内でのみ this.count のように使います。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。