Skip to content

Commit 0d00395

Browse files
committed
docs: translate composition-api-provide-inject into ja
1 parent cb87291 commit 0d00395

File tree

1 file changed

+31
-26
lines changed

1 file changed

+31
-26
lines changed

src/guide/composition-api-provide-inject.md

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
# Provide / Inject
22

3-
> This guide assumes that you have already read [Provide / Inject](component-provide-inject.html), [Composition API Introduction](composition-api-introduction.html), and [Reactivity Fundamentals](reactivity-fundamentals.html).
3+
> このページは、すでに [Provide / Inject](component-provide-inject.html)[コンポジション API 導入](composition-api-introduction.html)[リアクティブの基礎](reactivity-fundamentals.html)を読み終えていることを想定しています。
44
5-
We can use [provide / inject](component-provide-inject.html) with the Composition API as well. Both can only be called during [`setup()`](composition-api-setup.html) with a current active instance.
5+
[provide / inject](component-provide-inject.html) は コンポジション API でも使うことができます。どちらも現在アクティブなインスタンスの [`setup()`](composition-api-setup.html) 中にのみ呼び出すことが可能です。
66

7-
## Scenario Background
87

9-
Let's assume that we want to rewrite the following code, which contains a `MyMap` component that provides a `MyMarker` component with the user's location, using the Composition API.
8+
## シナリオの背景
9+
10+
これから、コンポジション API を使用して、以下のコードを書き直そうとしているとしましょう。
11+
以下のコードでは、`MyMap` コンポーネントが `MyMaker` コンポーネントにユーザの位置情報を提供しています。
1012

1113
```vue
1214
<!-- src/components/MyMap.vue -->
@@ -41,16 +43,17 @@ export default {
4143
</script>
4244
```
4345

44-
## Using Provide
46+
## Provide の使い方
4547

46-
When using `provide` in `setup()`, we start by explicitly importing the method from `vue`. This allows us to define each property with its own invocation of `provide`.
48+
`setup()` 内で `provide` を使う場合、始めに `vue` から明示的に `provide` をインポートします。
49+
これにより、 各プロパティについて `provide` の呼び出しで定義することができるようになります。
4750

48-
The `provide` function allows you to define the property through two parameters:
51+
`provide` 関数は2つの引数によってプロパティを定義できます:
4952

50-
1. The property's name (`<String>` type)
51-
2. The property's value
53+
1. プロパティの名前 (`<String>` )
54+
2. プロパティの値
5255

53-
Using our `MyMap` component, our provided values can be refactored as the following:
56+
`MyMap` コンポーネントは、以下のようにリファクタリングすることができます:
5457

5558
```vue{7,14-20}
5659
<!-- src/components/MyMap.vue -->
@@ -77,16 +80,18 @@ export default {
7780
</script>
7881
```
7982

80-
## Using Inject
83+
## Inject の使い方
84+
85+
同様に `setup()``inject` を使う場合も `vue` から明示的に `inject` をインポートする必要があります。
86+
そうしておけば、これを呼び出すことで、注入された値をコンポーネントに公開する方法を定義することができるようになります。
8187

82-
When using `inject` in `setup()`, we also need to explicitly import it from `vue`. Once we do so, this allows us to invoke it to define how we want to expose it to our component.
88+
`inject` 関数は2つの引数をとります:
8389

84-
The `inject` function takes two parameters:
90+
1. 注入されるプロパティ名
91+
2. デフォルト値 (**Optional**)
8592

86-
1. The name of the property to inject
87-
2. A default value (**Optional**)
93+
`MyMaker` コンポーネントは、以下のようにリファクタリングすることができます:
8894

89-
Using our `MyMarker` component, we can refactor it with the following code:
9095

9196
```vue{3,6-14}
9297
<!-- src/components/MyMarker.vue -->
@@ -107,13 +112,13 @@ export default {
107112
</script>
108113
```
109114

110-
## Reactivity
115+
## リアクティブ
111116

112-
### Adding Reactivity
117+
### リアクティブの追加
113118

114-
To add reactivity between provided and injected values, we can use a [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) or [reactive](reactivity-fundamentals.html#declaring-reactive-state) when providing a value.
119+
提供された値と注入された値をリアクティブにするには、値を提供する際に [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) または [reactive](reactivity-fundamentals.html#declaring-reactive-state) を使います。
115120

116-
Using our `MyMap` component, our code can be updated as follows:
121+
`MyMap` コンポーネントは、以下のように変更できます:
117122

118123
```vue{7,15-22}
119124
<!-- src/components/MyMap.vue -->
@@ -143,13 +148,13 @@ export default {
143148
</script>
144149
```
145150

146-
Now, if anything changes in either property, the `MyMarker` component will automatically be updated as well!
151+
これで、どちらかのプロパティに何か変更があった場合、`MyMaker` コンポーネントも自動的に更新されるようになります。
147152

148-
### Mutating Reactive Properties
153+
### リアクティブプロパティの変更
149154

150-
When using reactive provide / inject values, **it is recommended to keep any mutations to reactive properties inside of the _provider_ whenever possible**.
155+
リアクティブな provide / inject の値を使う場合、**リアクティブなプロパティに対しての変更は可能な限り _提供する側_ の内部に留めることが推奨されます**
151156

152-
For example, in the event we needed to change the user's location, we would ideally do this inside of our `MyMap` component.
157+
例えば、以下の location を変更する必要があるイベントでは、location の変更は `MyMap` コンポーネント内で行われるのが理想的です。
153158

154159
```vue{28-32}
155160
<!-- src/components/MyMap.vue -->
@@ -188,7 +193,7 @@ export default {
188193
</script>
189194
```
190195

191-
However, there are times where we need to update the data inside of the component where the data is injected. In this scenario, we recommend providing a method that is responsible for mutating the reactive property.
196+
しかし、データが注入されたコンポーネント側でデータを更新する必要がある場合もあります。そのような場合、リアクティブなプロパティを更新する責務を持つメソッドを提供することを推奨します。
192197

193198
```vue{21-23,27}
194199
<!-- src/components/MyMap.vue -->
@@ -244,7 +249,7 @@ export default {
244249
</script>
245250
```
246251

247-
Finally, we recommend using `readonly` on provided property if you want to ensure that the data passed through `provide` cannot be mutated by the injected component.
252+
最後に、`provide` で渡したデータが、注入されたコンポーネント内で変更されないようにしたい場合は、提供するプロパティに `readonly` をつけることを推奨します。
248253

249254
```vue{7,25-26}
250255
<!-- src/components/MyMap.vue -->

0 commit comments

Comments
 (0)