「API > Composition API > Composition API: Dependency Injection」の翻訳

.vitepress/config.ts

@@ -365,7 +365,7 @@ export const sidebar = {
           link: '/api/composition-api-lifecycle'
         },
         {
-          text: 'Dependency Injection',
+          text: '依存関係の注入',
           link: '/api/composition-api-dependency-injection'
         }
       ]

src/api/composition-api-dependency-injection.md

@@ -1,106 +1,106 @@
-# Composition API: <br>Dependency Injection
+# Composition API: <br>依存関係の注入
 
 ## provide()
 
-Provides a value that can be injected by descendent components.
+子孫コンポーネントから注入可能な値を提供する。
 
-- **Type**
+- **型**
 
   ```ts
   function provide<T>(key: InjectionKey<T> | string, value: T): void
   ```
 
-- **Details**
+- **詳細**
 
-  `provide()` takes two arguments: the key, which can be a string or a symbol, and the value to be injected.
+  `provide()` はキー（文字列またはシンボル）と注入される値の 2 つの引数を取ります。
 
-  When using TypeScript, the key can be a symbol casted as `InjectionKey` - a Vue provided utility type that extends `Symbol`, which can be used to sync the value type between `provide()` and `inject()`.
+  TypeScript を使用する場合、キーは `InjectionKey` としてキャストされたシンボルにできます。これは `Symbol` を継承した Vue のユーティリティー型で、 `provide()` と `inject()` の間で値の型を同期するために使用されます。
 
-  Similar to lifecycle hook registration APIs, `provide()` must be called synchronously during a component's `setup()` phase.
+  ライフサイクルフック登録 API と同様に、`provide()` はコンポーネントの `setup()` フェーズで同期的に呼び出される必要があります。
 
-- **Example**
+- **例**
 
   ```vue
   <script setup>
   import { ref, provide } from 'vue'
   import { fooSymbol } from './injectionSymbols'
 
-  // provide static value
+  // 静的な値を提供
   provide('foo', 'bar')
 
-  // provide reactive value
+  // リアクティブな値を提供
   const count = ref(0)
   provide('count', count)
 
-  // provide with Symbol keys
+  // シンボルのキーを使って提供
   provide(fooSymbol, count)
   </script>
   ```
 
-- **See also**:
-  - [Guide - Provide / Inject](/guide/components/provide-inject.html)
-  - [Guide - Typing Provide / Inject](/guide/typescript/composition-api.html#typing-provide-inject)
+- **参照**:
+  - [ガイド - Provide / Inject](/guide/components/provide-inject.html)
+  - [ガイド - Provide / Inject の型付け](/guide/typescript/composition-api.html#provide-inject-の型付け)
 
 ## inject()
 
-Injects a value provided by an ancestor component or the application (via `app.provide()`).
+祖先のコンポーネントや（`app.provide()` 経由で）アプリケーションから提供された値を注入します。
 
-- **Type**
+- **型**
 
   ```ts
-  // without default value
+  // デフォルト値なし
   function inject<T>(key: InjectionKey<T> | string): T | undefined
 
-  // with default value
+  // デフォルト値あり
   function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T
 
-  // with factory
+  // ファクトリーを使用
   function inject<T>(
     key: InjectionKey<T> | string,
     defaultValue: () => T,
     treatDefaultAsFactory: true
   ): T
   ```
 
-- **Details**
+- **詳細**
 
-  The first argument is the injection key. Vue will walk up the parent chain to locate a provided value with a matching key. If multiple components in the parent chain provides the same key, the one closest to the injecting component will "shadow" those higher up the chain. If no value with matching key was found, `inject()` returns `undefined` unless a default value is provided.
+  最初の引数は、注入キーです。Vue は、キーに一致する提供された値を見つけるために親チェーンを探索します。親チェーンにある複数のコンポーネントが同じキーを提供する場合、注入するコンポーネントに最も近いものが、より上位のコンポーネントを「シャドウ」します。キーに一致する値が見つからなかった場合、`inject()` はデフォルト値が提供されていない限り `undefined` を返します。
 
-  The second argument is optional and is the default value to be used when no matching value was found. It can also be a factory function to return values that are expensive to create. If the default value is a function, then `false` must be passed as the third argument to indicate that the function should be used as the value instead of the factory.
+  第 2 引数は省略可能で、一致する値が見つからなかった場合に使用されるデフォルト値です。また、作成に手間がかかる値を返すために、ファクトリー関数を指定できます。デフォルト値が関数の場合、ファクトリーの代わりに関数を値として使用することを示すために、3 番目の引数として `false` を渡す必要があります。
 
-  Similar to lifecycle hook registration APIs, `inject()` must be called synchronously during a component's `setup()` phase.
+  ライフサイクルフック登録 API と同様に、`inject()` はコンポーネントの `setup()` フェーズで同期的に呼び出される必要があります。
 
-  When using TypeScript, the key can be of type of `InjectionKey` - a Vue-provided utility type that extends `Symbol`, which can be used to sync the value type between `provide()` and `inject()`.
+  TypeScript を使用する場合、キーは `InjectionKey` 型にできます。これは `Symbol` を継承した Vue のユーティリティー型で、 `provide()` と `inject()` の間で値の型を同期するために使用されます。
 
-- **Example**
+- **例**
 
-  Assuming a parent component has provided values as shown in the previous `provide()` example:
+  前の `provide()` の例で示したように、親コンポーネントが値を提供したと仮定します:
 
   ```vue
   <script setup>
   import { inject } from 'vue'
   import { fooSymbol } from './injectionSymbols'
 
-  // inject static value with default
+  // デフォルトの静的な値を注入
   const foo = inject('foo')
 
-  // inject reactive value
+  // リアクティブな値を注入
   const count = inject('count')
 
-  // inject with Symbol keys
+  // シンボルのキーを使って注入
   const foo2 = inject(fooSymbol)
 
-  // inject with default value
+  // デフォルト値ありで注入
   const bar = inject('foo', 'default value')
 
-  // inject with default value factory
+  // デフォルト値のファクトリーを使って注入
   const baz = inject('foo', () => new Map())
 
-  // inject with function default value, by passing the 3rd argument
+  // 第 3 引数を渡して、関数のデフォルト値を使って注入
   const fn = inject('function', () => {}, false)
   </script>
   ```
 
-- **See also**:
-  - [Guide - Provide / Inject](/guide/components/provide-inject.html)
-  - [Guide - Typing Provide / Inject](/guide/typescript/composition-api.html#typing-provide-inject)
+- **参照**:
+  - [ガイド - Provide / Inject](/guide/components/provide-inject.html)
+  - [ガイド - Provide / Inject の型付け](/guide/typescript/composition-api.html#provide-inject-の型付け)

src/guide/components/provide-inject.md

@@ -12,7 +12,7 @@
 
 `<Footer>` コンポーネントはこれらの props を全く気にしないかもしれませんが、`<DeepChild>` がそれらにアクセスできるように宣言して渡す必要があることに注意してください。さらに長い親チェーンがある場合、より多くのコンポーネントが影響を受けることになります。これは "props のバケツリレー（Prop Drilling）" と呼ばれていて、対処するのが楽しいことでないことは明らかです。
 
-props のバケツリレーは `provide` と `inject` で解決できます。親コンポーネントは、そのすべての子孫コンポーネントに対して **依存関係を提供するプロバイダー (dependency provider)** として機能することができます。子孫ツリー内のどのコンポーネントも、その深さに関係なく、親チェーン内の上位コンポーネントが提供する依存性を**注入 (inject)** することができます。
+props のバケツリレーは `provide` と `inject` で解決できます。親コンポーネントは、そのすべての子孫コンポーネントに対して **依存関係を提供するプロバイダー (dependency provider)** として機能することができます。子孫ツリー内のどのコンポーネントも、その深さに関係なく、親チェーン内の上位コンポーネントが提供する依存関係を**注入 (inject)** することができます。
 
 ![Provide/inject スキーマ](./images/provide-inject.png)
 

src/guide/essentials/watchers.md

@@ -288,7 +288,7 @@ watchEffect(async () => {
 
 `watch` と `watchEffect` は、どちらとも副作用をリアクティブに処理することができます。両者の主な違いはリアクティブの依存先の監視方法にあります:
 
-- `watch` は明示的に示されたソースしか監視しません。コールバック内でアクセスされたものは追跡しません。加えて、コールバックはソースが実際に変更したときにのみ実行されます。`watch` は依存性の追跡を副作用から分離します。それにより、コールバックをいつ実行するかをより正確にコントロールすることができます。
+- `watch` は明示的に示されたソースしか監視しません。コールバック内でアクセスされたものは追跡しません。加えて、コールバックはソースが実際に変更したときにのみ実行されます。`watch` は依存関係の追跡を副作用から分離します。それにより、コールバックをいつ実行するかをより正確にコントロールすることができます。
 
 - それに対して、`watchEffect` は依存先の追跡と副作用を 1 つのフェーズにまとめたものになります。同期処理を実行している間にアクセスしたすべてのリアクティブのプロパティを自動的に追跡します。これにより、より便利で一般的にコードが短くなりますが、そのリアクティブの依存先はあまり明示的にならなくなってしまいます。
 

src/guide/extras/composition-api-faq.md

@@ -16,7 +16,7 @@ Composition API はオプションを宣言する代わりに関数をインポ
 
 - [Lifecycle Hooks](/api/composition-api-lifecycle.html)、 例: `onMounted()` や `onUnmounted()` で、コンポーネントのライフサイクルにプログラム的なフックを設定します。
 
-- [Dependency Injection](/api/composition-api-dependency-injection.html) 、すなわち `provide()` と `inject()` によって、 リアクティビティー API を使用しながら Vue の依存性注入システムを利用できます。
+- [Dependency Injection](/api/composition-api-dependency-injection.html) 、すなわち `provide()` と `inject()` によって、 リアクティビティー API を使用しながら Vue の依存関係注入システムを利用できます。
 
 Composition API は Vue 3 と [Vue 2.7](https://blog.vuejs.org/posts/vue-2-7-naruto.html) の組み込み機能です。Vue 2 の古いバージョンでは、公式にメンテナンスされている[`@vue/composition-api`](https://github.com/vuejs/composition-api)プラグインを使用してください。Vue 3 においては、 単一ファイルコンポーネント内で  [`<script setup>`](/api/sfc-script-setup.html) 構文を書くことで使えます。以下は Composition API を使った簡単なコンポーネントの例です。
 
@@ -82,7 +82,7 @@ Composition API のロジック再利用性は [VueUse](https://vueuse.org/) の
 
 ### より良い型推論
 
-ここ数年、多くのフロントエンドの開発者たちが [TypeScript](https://www.typescriptlang.org/) を取り入れ、より堅牢なコードを書き、より安心して変更を加えられるようにしていて、また IDE のサポートと共にすばらしい開発体験を提供してくれています。しかしながら、2013 年に Options API が生まれた当時、型推論の考慮がない状態でデザインされました。 Options API に型推論を取り入れるためには [とてもありえない複雑な型定義](https://github.com/vuejs/core/blob/44b95276f5c086e1d88fa3c686a5f39eb5bb7821/packages/runtime-core/src/componentPublicInstance.ts#L132-L165)をしなければなりませんでした。これだけの努力をしても、 Options API の型推論はミックスインや依存性の注入により壊れてしまいます。
+ここ数年、多くのフロントエンドの開発者たちが [TypeScript](https://www.typescriptlang.org/) を取り入れ、より堅牢なコードを書き、より安心して変更を加えられるようにしていて、また IDE のサポートと共にすばらしい開発体験を提供してくれています。しかしながら、2013 年に Options API が生まれた当時、型推論の考慮がない状態でデザインされました。 Options API に型推論を取り入れるためには [とてもありえない複雑な型定義](https://github.com/vuejs/core/blob/44b95276f5c086e1d88fa3c686a5f39eb5bb7821/packages/runtime-core/src/componentPublicInstance.ts#L132-L165)をしなければなりませんでした。これだけの努力をしても、 Options API の型推論はミックスインや依存関係の注入により壊れてしまいます。
 
 このため、 Vue を Typescript で使いたい多くの開発者が `vue-class-component` による Class API を使うようになりました。ですが、クラスベースの API は ES デコレータに重度に依存しているため、 機能的には Vue 3 が開発された 2019 年時点の、ステージ 2 のプロポーザル段階のものになっています。私たちは公式の API が不安定なプロポーザルベースに依存していることはリスキー過ぎると感じました。それ以降、デコレータのプロポーザルはまたも全面的に見直され、2022 年にようやくステージ 3 に到達しました。加えて、クラスベースの API は Options API と同様にロジックの再利用とコード整理の制限の悩みがあります。