Vue.js の provide/inject は、コンポーネント階層を跨いでデータやメソッドを共有するためのシンプルで柔軟な仕組みです。通常、親から子へのデータ受け渡しには props を使いますが、コンポーネント階層が深くなると中間のコンポーネントが不要な props を受け取って単に渡すだけの “props ドリリング” が発生します。provide/inject は、この問題を解消し、特定の親コンポーネントからその直下に限らず「下位すべてのコンポーネント」へ値を渡すことを可能にします。
仕組みは非常に直感的です。親コンポーネントで provide を呼び出し、任意のキーと値を登録します。子側では inject を呼び出すだけで、その値を利用できます。Composition API では provide() と inject() をインポートして利用し、Options API では provide: {} と inject: [] の形で記述します。
provide/inject が有用なのは、グローバルにするほどではないが複数コンポーネントで共有したい状態を扱うときです。たとえばフォームのバリデーションコンテキスト、親ビューが持つロード状態、ツリー構造 UI の共通ロジック、テーマやレイアウト設定などが代表例です。Vuex や Pinia のような状態管理ほど大げさにしたくない場面で特に効果的です。
一方で注意点もあります。provide/inject は “疎結合のための依存性注入” が目的であり、本来はリアクティブな双方向データ共有には向きません。provide する値が ref や reactive であればリアクティブ性は保たれますが、親子間の明示的な同期を期待する場面では props/emits や state 管理の方が適切です。また、inject 側の依存が provide 側の実装に強く寄ってしまうと、コンポーネントの再利用性が下がる点にも注意が必要です。
まとめると、provide/inject は Vue.js における軽量で使い勝手の良い依存性注入機構であり、正しく使えばコードの煩雑さを大きく減らせます。しかし、全ての状態共有に使う万能ツールではありません。用途を明確にし、props/emits、Pinia、provide/inject の役割を整理した上で採用することが重要です。
入会申込
ログイン
