toValue() 値/ref/getter を正規化して取得する

最終更新：2026-10-22

toValue() は通常の値、ref、getter 関数を現在値に統一して取得します。再利用可能な関数は 3 つの入力形態をすべて受け付けられ、呼び出し側は区別する必要がありません。

📝 構文

toValue(1)              // 1
toValue(count)          // count.value
toValue(() => count.value)  // count.value（呼び出しごとに再評価）

source	通常の値 / ref / 値を返す getter 関数

戻り値：正規化された現在値

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

出力：

Shows '42'.

💡 ヒント コンポーザブルの引数の設計に使うと、呼び出し側は値・ref・getter のどれを渡しても動作するようになり、API が寛容になります。

ℹ️ 補足 getter 形態は「他のリアクティブなデータへの依存」を表現でき、computed 内部で正しく追跡されます。

⚠️ 注意 3.3 以降でのみ使用可能です。それ以前のプロジェクトでは isRef での判定と手書きの値の取り出しで代用します。

Q unref との違いは？

A toValue は getter 関数もサポートし、呼び出しごとに再評価します。unref は ref のみ処理します。

Q なぜ ref のみを受け付ける設計にしないのですか？

A 静的な値、リアクティブな状態、計算ロジックのどれでも自然に渡せるよう、コンポーザブルに柔軟性を持たせるためです。

Q テンプレート内で自動的にアンラップされますか？

A されません。toValue は状態そのものではなく、実行時に値を取り出すツールです。JS ロジックの中で明示的に呼び出します。

Web-Tutorial 技術チーム

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