Skip to content

Commit 9b063ec

Browse files
committed
Translate mixins into ja
1 parent 5821c03 commit 9b063ec

File tree

1 file changed

+27
-27
lines changed

1 file changed

+27
-27
lines changed

src/guide/mixins.md

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
# Mixins
1+
# ミックスイン
22

3-
## Basics
3+
## 基本
44

5-
Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component's own options.
5+
ミックスイン (mixin) は、Vue コンポーネントに再利用可能な機能を持たせるための柔軟な方法です。ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。コンポーネントがミックスインを使用するとき、ミックスインの全てのオプションはコンポーネント自身のオプションに"混ぜられ"ます。
66

7-
Example:
7+
:
88

99
```js
10-
// define a mixin object
10+
// ミックスインオブジェクトを定義
1111
const myMixin = {
1212
created() {
1313
this.hello()
@@ -19,19 +19,19 @@ const myMixin = {
1919
}
2020
}
2121

22-
// define an app that uses this mixin
22+
// このミックスインを使用する app を定義
2323
const app = Vue.createApp({
2424
mixins: [myMixin]
2525
})
2626

2727
app.mount('#mixins-basic') // => "hello from mixin!"
2828
```
2929

30-
## Option Merging
30+
## オプションのマージ
3131

32-
When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies.
32+
ミックスインとコンポーネントそれ自身が重複したオプションを含むとき、それらは適切なストラテジを使用して"マージ"されます。
3333

34-
For example, data objects undergo a recursive merge, with the component's data taking priority in cases of conflicts.
34+
例えば、データオブジェクトは再帰的にマージされ、コンフリクトした場合にはコンポーネントのデータが優先されます。
3535

3636
```js
3737
const myMixin = {
@@ -57,7 +57,7 @@ const app = Vue.createApp({
5757
})
5858
```
5959

60-
Hook functions with the same name are merged into an array so that all of them will be called. Mixin hooks will be called **before** the component's own hooks.
60+
同じ名前のフック関数はそれら全てが呼び出されるよう配列にマージされます。ミックスインのフックはコンポーネント自身のフック****に呼び出されます。
6161

6262
```js
6363
const myMixin = {
@@ -77,7 +77,7 @@ const app = Vue.createApp({
7777
// => "component hook called"
7878
```
7979

80-
Options that expect object values, for example `methods`, `components` and `directives`, will be merged into the same object. The component's options will take priority when there are conflicting keys in these objects:
80+
オブジェクトの値を期待するオプション、例えば、`methods``components`、そして`directives` では同じオブジェクトにマージされます。これらのオブジェクトでキーのコンフリクトがあるときは、コンポーネントオプションが優先されます:
8181

8282
```js
8383
const myMixin = {
@@ -110,16 +110,16 @@ vm.bar() // => "bar"
110110
vm.conflicting() // => "from self"
111111
```
112112

113-
## Global Mixin
113+
## グローバルミックスイン
114114

115-
You can also apply a mixin globally for a Vue application:
115+
Vue アプリケーションのためにグローバルにミックスインを適用することもできます:
116116

117117
```js
118118
const app = Vue.createApp({
119119
myOption: 'hello!'
120120
})
121121

122-
// inject a handler for `myOption` custom option
122+
// `myOption` カスタムオプションにハンドラを注入する
123123
app.mixin({
124124
created() {
125125
const myOption = this.$options.myOption
@@ -132,14 +132,14 @@ app.mixin({
132132
app.mount('#mixins-global') // => "hello!"
133133
```
134134

135-
Use with caution! Once you apply a mixin globally, it will affect **every** component instance created afterwards in the given app (for example, child components):
135+
使用に注意してください!一度、グローバルにミックスインを適用すると、それはその後にアプリ内で作成される**全ての** Vue コンポーネントインスタンスに影響します。 (例えば、子コンポーネント):
136136

137137
```js
138138
const app = Vue.createApp({
139139
myOption: 'hello!'
140140
})
141141

142-
// inject a handler for `myOption` custom option
142+
// `myOption` カスタムオプションにハンドラを注入する
143143
app.mixin({
144144
created() {
145145
const myOption = this.$options.myOption
@@ -149,7 +149,7 @@ app.mixin({
149149
}
150150
})
151151

152-
// add myOption also to child component
152+
// myOption を子コンポーネントにも追加
153153
app.component('test-component', {
154154
myOption: 'hello from component!'
155155
})
@@ -160,21 +160,21 @@ app.mount('#mixins-global')
160160
// => "hello from component!"
161161
```
162162

163-
In most cases, you should only use it for custom option handling like demonstrated in the example above. It's also a good idea to ship them as [Plugins](plugins.html) to avoid duplicate application.
163+
ほとんどの場合、上記の例のようなカスタムオプションを処理するものだけに使用すべきです。重複適用を避けるために、それらを [プラグイン](plugins.html) として作成することも良い方法です。
164164

165-
## Custom Option Merge Strategies
165+
## カスタムオプションのマージストラテジ
166166

167-
When custom options are merged, they use the default strategy which overwrites the existing value. If you want a custom option to be merged using custom logic, you need to attach a function to `app.config.optionMergeStrategies`:
167+
カスタムオプションがマージされるとき、それらは既存の値を上書きするデフォルトのストラテジを使用します。カスタムロジックを使用してカスタムオプションをマージしたい場合は、`app.config.optionMergeStrategies` をアタッチする必要があります。
168168

169169
```js
170170
const app = Vue.createApp({})
171171

172172
app.config.optionMergeStrategies.customOption = (toVal, fromVal) => {
173-
// return mergedVal
173+
// マージされた値を返す
174174
}
175175
```
176176

177-
The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. Let's try to check what do we have in these parameters when we use a mixin:
177+
マージストラテジは、親・子インスタンスで定義されたオプションの値をそれぞれ 1 番目、2 番目の引数として受け取ります。ミックスインを使用するときに、これらのパラメータに何が入っているかを確認してみましょう:
178178

179179
```js
180180
const app = Vue.createApp({
@@ -196,7 +196,7 @@ app.mixin({
196196
})
197197
```
198198

199-
As you can see, in the console we have `toVal` and `fromVal` printed first from the mixin and then from the `app`. We always return `fromVal` if it exists, that's why `this.$options.custom` is set to `hello!` in the end. Let's try to change a strategy to _always return a value from the child instance_:
199+
ご覧の通り、コンソールには最初にミックスインから、次に `app` から出力された `toVal` `fromVal` が表示されます。`fromVal` が存在する場合には常にそれが返されるため、最終的には `this.$options.custom` `hello!` がセットされます。ストラテジを*常に子インスタンスの値を返す*ように変更してみましょう:
200200

201201
```js
202202
const app = Vue.createApp({
@@ -213,10 +213,10 @@ app.mixin({
213213
})
214214
```
215215

216-
In Vue 2, mixins were the primary tool to abstract parts of component logic into reusable chunks. However, they have a few issues:
216+
Vue 2 では、ミックスインはコンポーネントロジックの一部を再利用可能なチャンクに抽象化する主要なツールでした。ただし、いくつかの問題があります:
217217

218-
- Mixins are conflict-prone: Since properties from each feature are merged into the same component, you still have to know about every other feature to avoid property name conflicts and for debugging.
218+
- ミックスインはコンフリクトしやすい: それぞれの機能のプロパティが同じコンポーネントにマージされるため、プロパティ名のコンフリクト回避とデバッグのために、全ての他の機能について知っておく必要があります。
219219

220-
- Reusability is limited: we cannot pass any parameters to the mixin to change its logic which reduces their flexibility in terms of abstracting logic
220+
- 再利用性は制限されている: ロジックを変更するためのパラメータをミックスインに渡せないことは、抽象化ロジックに関する柔軟性を低下させます。
221221

222-
To address these issues, we added a new way to organize code by logical concerns: the [Composition API](composition-api-introduction.html).
222+
これらの問題に対処するため、論理的な関心事によってコードを整理する新しい方法を追加しました: [Composition API](composition-api-introduction.html)

0 commit comments

Comments
 (0)