Skip to content

Commit cdc1530

Browse files
committed
fix: translate 'composition api'
1 parent 57398ee commit cdc1530

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

src/guide/composition-api-introduction.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# はじめに
22

3-
## なぜコンポジション API なのか?
3+
## なぜ Composition API なのか?
44

55
::: tip Note
66
ドキュメントでここまで到達しているならば、[Vue の基本](introduction.md)[コンポーネントの作成](component-basics.md)の両方にすでに精通しているはずです。
@@ -63,17 +63,17 @@ export default {
6363

6464
このような分離は、複雑なコンポーネントを理解してメンテナンスすることを難しくします。このオプションの分離は背景にある論理的な関心事をわかりづらくします。さらに、単一の論理的な関心事に取り組む場合、関連するコードのオプションブロックを何度も "ジャンプ" する必要があります。
6565

66-
同じ論理的な関心事に関連するコードを並べることができれば、より良くなるでしょう。そして、これはまさにコンポジション API が可能にします。
66+
同じ論理的な関心事に関連するコードを並べることができれば、より良くなるでしょう。そして、これはまさに Composition API が可能にします。
6767

68-
## コンポジション API の基本
68+
## Composition API の基本
6969

70-
これで**なぜこの方法**にたどり着くのかわかりました。コンポジション API の使用を開始するには、初めに実際に使用できる場所が必要です。Vue コンポーネントでは、この場所を `setup` と呼びます。
70+
これで**なぜこの方法**にたどり着くのかわかりました。 Composition API の使用を開始するには、初めに実際に使用できる場所が必要です。Vue コンポーネントでは、この場所を `setup` と呼びます。
7171

7272
### `setup` コンポーネントオプション
7373

7474
<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references" title="Vue Mastery で setup がどのように動作するのか学ぶ">Vue Mastery で setup に関する無料ビデオを視聴する</VideoLesson>
7575

76-
新しい `setup` コンポーネントオプションは、コンポーネントが作成される前に `props` が解決されると実行され、コンポジション API のエントリポイントとして機能します。
76+
新しい `setup` コンポーネントオプションは、コンポーネントが作成される前に `props` が解決されると実行され、 Composition API のエントリポイントとして機能します。
7777

7878
::: warning
7979
`setup` が実行されたときは、まだコンポーネントのインスタンスが作られないため、`setup` オプションの中では `this` を使用できません。これは `props` を除いて、コンポーネント内で宣言されているあらゆるプロパティ (**ローカルの state****computed プロパティ****methods**) にアクセスできないことを意味します。
@@ -164,7 +164,7 @@ console.log(counter.value) // 1
164164
任意の値の周りにラッパーオブジェクトがあると、途中でリアクティブでなくなることがなく、アプリ全体に安全に渡すことができます。
165165

166166
::: tip Note
167-
言い換えれば、`ref` は値への**リアクティブな参照**を作成します。 **参照**を操作するという概念はコンポジション API 全体で頻繁に使用されます。
167+
言い換えれば、`ref` は値への**リアクティブな参照**を作成します。 **参照**を操作するという概念は Composition API 全体で頻繁に使用されます。
168168
:::
169169

170170
例に戻って、リアクティブな `repositories` 変数を作成しましょう:
@@ -242,7 +242,7 @@ export default {
242242

243243
### ライフサイクルフックを `setup` の中に登録する
244244

245-
オプション API に比べてコンポジション API の機能を完全にするには、ライフサイクルフックを `setup` の中に登録する必要があります。これは Vue から提供されるいくつかの新しい関数のおかげで可能になりました。コンポジション API におけるライフサイクルフックはオプション API と同様の名称ですが、`on` というプレフィックスが付いています。例: `mounted``onMounted` のようになっています。
245+
オプション API に比べて Composition API の機能を完全にするには、ライフサイクルフックを `setup` の中に登録する必要があります。これは Vue から提供されるいくつかの新しい関数のおかげで可能になりました。 Composition API におけるライフサイクルフックはオプション API と同様の名称ですが、`on` というプレフィックスが付いています。例: `mounted``onMounted` のようになっています。
246246

247247
それらの関数はコンポーネントによってフックが呼び出されるときに実行されるコールバックを受け付けます。
248248

@@ -401,7 +401,7 @@ setup (props) {
401401
}
402402
```
403403

404-
他の**論理的な関心事**にも同じことができますが、既に疑問があるかもしれません。- _これはコードを `setup` オプションに移動させて肥大させるだけではありませんか?_ そのため他の責務に移る前に、まず上記のコードをスタンドアロンな**コンポジション関数**に抽出します。 `useUserRepositories` の作成から始めましょう:
404+
他の**論理的な関心事**にも同じことができますが、既に疑問があるかもしれません。- _これはコードを `setup` オプションに移動させて肥大させるだけではありませんか?_ そのため他の責務に移る前に、まず上記のコードをスタンドアロンな**Composition 関数**に抽出します。 `useUserRepositories` の作成から始めましょう:
405405

406406
```js
407407
// src/composables/useUserRepositories.js
@@ -543,4 +543,4 @@ export default {
543543

544544
これで完了です!
545545

546-
コンポジション API の表面とできることについてほんの少し触れただけであることを覚えておいてください。より詳しく知りたい場合は、詳細ガイドを参照してください。
546+
Composition API の表面とできることについてほんの少し触れただけであることを覚えておいてください。より詳しく知りたい場合は、詳細ガイドを参照してください。

0 commit comments

Comments
 (0)