inject() 祖先が提供した依存を注入する
最終更新：2026-10-22
inject() 祖先が提供した依存を注入する
inject() は、祖先が provide したデータを任意の子孫コンポーネントで受け取れます。デフォルト値をつけてフォールバックも可能です。
| グループ | 依存性の注入 |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
const theme = inject("theme") // 未提供なら undefined
const theme = inject("theme", "light") // デフォルト値
const theme = inject("theme", () => ref("light")) // ファクトリのデフォルト値（推奨、共有インスタンスを避ける）⚙️ 引数
| key | 依存キー（provide と対応） |
|---|---|
| defaultValue | 省略可能なデフォルト値。ファクトリ関数を渡すと参照の共有を避けられます |
戻り値：注入された値（未提供ならデフォルト値または undefined）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Without a provider it shows 'Theme: light by default'.💡 ポイント
⚠️ 注意 デフォルト値にオブジェクトや配列リテラルを渡さないでください。複数コンポーネントが同じインスタンスを共有します。ファクトリ関数で新しいオブジェクトを返しましょう。
💡 ヒント リアクティブな依存は注入後も ref の形を保ちます。テンプレートでは自動でアンラップされ、スクリプト内では .value を書きます。
ℹ️ 補足 setup またはコンポーザブルの中（同時実行フェーズ）でしか呼び出せません。
🏷️ 関連依存性の注入
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q 祖先が提供していなければエラーになりますか？
A エラーにはなりません。undefined が返ります（開発環境ではヒントが出ます）。デフォルト値をつけるほうが安全です。
Q 注入後に変更すると祖先に影響しますか？
A 受け取るのは同じ参照なので、ref の .value を書き換えると祖先の状態に影響します。通常これは望ましくありません。
Q デフォルト値にファクトリを使うのはなぜですか？
A 呼び出しごとに独立したインスタンスが作られるため、複数コンポーネントがデフォルトデータを汚し合うバグを防げます。
