Vueの開発業務で、循環依存エラーの解決の際に依存性注入を知ったのと、プログラミングでよく出てくる 「依存」 をこの機会に調べたので、記事にまとめました。
そもそも「依存」とは？
依存（Dependency） とは、あるモジュール（ファイル・関数・クラス）が他のモジュールの機能を使っている（依存している）状態のこと。
自動車
↓ 使う（依存）
エンジン
↓ 使う（依存）
ガソリン
| 依存 | あるモジュールが他のモジュールの機能を使っている状態 |
| 依存関係 | どのモジュールがどのモジュールに依存しているかの関係 |
| 依存する側 | 機能を使う側（import する側） |
| 依存される側 | 機能を提供する側（import される側） |
| 直接依存 | 直接 import して使う |
| 間接依存 | 他のモジュールを経由して間接的に使う |
| 循環依存 | お互いに依存し合っている（本記事のテーマ） |
| 密結合 | 依存が強い（変更の影響が大きい） |
| 疎結合 | 依存が弱い（変更の影響が小さい） |
依存関係は同一モジュール内でも発生します。
例：関数間の依存
// utils.tsに以下2つの関数が定義されている
const calculateTax = (price: number): number => {
return price * 0.1
}
const calculateTotal = (price: number, quantity: number): number => {
const subtotal = price * quantity
const tax = calculateTax(subtotal) // ← calculateTax に依存
return subtotal + tax
}
- calculateTotalは依存する側で、calculateTaxは依存される側
- calculateTotal は calculateTax に依存している
- calculateTax がないと calculateTotal は動かない
- calculateTax の仕様が変わると calculateTotal に影響する
循環依存とは
2つ以上のモジュール（ファイル）がお互いに依存し合っている状態
分かりやすく言い換えると、2つ以上のモジュール（ファイル）がお互いにインポート（import）し合うことで発生するエラー。
両方が相手を必要としているため、どちらを先に初期化すればいいか分からず、エラーになります。
ストアとフックに限らす、フック同士でも起きる
*コンポーネント同士でもおきますが、コンポーネントを相互にインポートしあう事はあまりないかと思います。
循環依存エラーが起きるケース
// Store
import { useDoubleCounter } from '@/composables/useDoubleCounter' // ❌ hooksをインポート
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
increment = () => {
count.value++
}
// ❌ hooksを使用
incrementDouble = () => {
const { doubleAndIncrement } = useDoubleCounter()
doubleAndIncrement()
}
return {
count,
increment,
incrementDouble
}
})
// hooks
import { useCounterStore } from '@/stores/counter' // ❌ Storeをインポート
export function useDoubleCounter() {
doubleAndIncrement = () => {
const store = useCounterStore() // ❌ Storeを使用
// カウントを2倍にしてからインクリメント
store.count = store.count * 2
store.increment() // ❌ Storeのメソッドを使用
}
return { doubleAndIncrement }
}
Store → Hooks → Store の相互依存で初期化順序が決まらないのが原因。
依存性注入（Dependency Injection, DI）とは
オブジェクトやモジュールが必要とする依存関係を、外部から注入(渡す)する設計パターン
注入は依存関係を外部から渡すこと全般を指します。
// 関数を引数で渡す
useValidation = (updateFn: (value: string) => void) => {
updateFn('test') // 注入された関数を使用
}
useValidation((value) => console.log(value)) // 関数を注入
// コンストラクタで渡す
class UserService {
constructor(private repository: UserRepository) {}
}
const service = new UserService(new UserRepository())
つまりhooksの内部で必要なメソッドをストアからインポートするのではなく、ストアから注入してもらう
依存性注入により循環依存エラーを解決
前述の循環依存エラーを依存性注入で解決するサンプル
// Store
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
increment = () => {
count.value++
}
// ✅ hooksを初期化する際に必要なメソッド（依存）を注入
incrementDouble = () => {
const { doubleAndIncrement } = useDoubleCounter({
count: count.value,
increment
})
doubleAndIncrement()
}
return {
count,
increment,
incrementDouble
}
})
// hooks
// ❌ import { useCounterStore } from '@/stores/counter'
// ✅ Storeをインポートしない
interface DoubleCounterDeps {
count: number
increment: () => void
}
export function useDoubleCounter(deps?: DoubleCounterDeps) {
doubleAndIncrement = () => {
if (!deps) return
// ✅ 注入された値とメソッドを使用するので、Storeをインポートしなくていい
const doubled = deps.count * 2
console.log(`${deps.count} → ${doubled}`)
deps.increment()
}
return { doubleAndIncrement }
}
ポイント：
- hooksはStoreをimportしない
- Storeだけがhooksをimport
- Storeがhooksに必要なメソッドを渡す
これにより、一方向の依存になり、初期化順序が明確
*技術的には「コールバック関数」でもあるが、目的は「循環依存の解決」なので「依存性注入」と呼ぶ。
DI以外の解決策
Storeのメソッドを別のhooksに分離が可能であれば、Store側で両方のhooksをimportするのも手です。