ref() リアクティブな参照を作成する
最終更新：2026-10-22
ref() リアクティブな参照を作成する
ref() は任意の値をリアクティブなオブジェクトで包み、.value を通してアクセスします。プリミティブ型（文字列・数値・真偽値）や、丸ごと置き換えたい値を保持するための方法です。
| グループ | リアクティビティ: 基本 |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
import { ref } from "vue"
const count = ref(0)
count.value++ // スクリプト内では .value で読み書き
template: {{ count }} // テンプレート内では自動でアンラップ⚙️ 引数
| value | 任意の型の初期値。省略した場合は undefined になります |
|---|
戻り値：.value プロパティを持つリアクティブなオブジェクト（Ref）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The page shows 'Clicked 0 times'; each click increments the number.💡 ポイント
⚠️ 注意 スクリプトコード内では必ず count.value と書きます。count++ と書くと変数が新しい数値に束縛し直され、リアクティビティが失われます。
💡 ヒント setup から ref を返すと、テンプレート内では自動的にアンラップされます。{{ count.value }} ではなく {{ count }} と書きましょう。
ℹ️ 補足 値を丸ごと置き換える場合は ref を使います。深くネストしたオブジェクトをリアクティブにしたい場合は reactive() が適しています。
🏷️ 関連基本
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q なぜ .value を省略できないのですか？
A JavaScript はプリミティブ型の読み書きを追跡できないため、getter/setter を持つラッパーオブジェクトでアクセスを捕捉する必要があります。そのラッパーのプロパティが .value です。
Q ref の中にオブジェクトを入れるとリアクティビティが失われますか？
A 失われません。ref(obj) は内部でオブジェクトを深く Proxy で包むため、.value.foo 経由の変更でも更新がトリガーされます。
Q ref と reactive はそれぞれいつ使うべきですか？
A デフォルトでは ref を推奨します（任意の型を扱え、丸ごと置き換えでき、分割代入してもリアクティビティが保たれます）。reactive はオブジェクトにしか使えず、分割代入するとリアクティビティが失われます。
