|
1 | 1 | # はじめに
|
2 | 2 |
|
3 |
| -## なぜコンポジション API なのか? |
| 3 | +## なぜ Composition API なのか? |
4 | 4 |
|
5 | 5 | ::: tip Note
|
6 | 6 | ドキュメントでここまで到達しているならば、[Vue の基本](introduction.md)と[コンポーネントの作成](component-basics.md)の両方にすでに精通しているはずです。
|
@@ -63,17 +63,17 @@ export default {
|
63 | 63 |
|
64 | 64 | このような分離は、複雑なコンポーネントを理解してメンテナンスすることを難しくします。このオプションの分離は背景にある論理的な関心事をわかりづらくします。さらに、単一の論理的な関心事に取り組む場合、関連するコードのオプションブロックを何度も "ジャンプ" する必要があります。
|
65 | 65 |
|
66 |
| -同じ論理的な関心事に関連するコードを並べることができれば、より良くなるでしょう。そして、これはまさにコンポジション API が可能にします。 |
| 66 | +同じ論理的な関心事に関連するコードを並べることができれば、より良くなるでしょう。そして、これはまさに Composition API が可能にします。 |
67 | 67 |
|
68 |
| -## コンポジション API の基本 |
| 68 | +## Composition API の基本 |
69 | 69 |
|
70 |
| -これで**なぜこの方法**にたどり着くのかわかりました。コンポジション API の使用を開始するには、初めに実際に使用できる場所が必要です。Vue コンポーネントでは、この場所を `setup` と呼びます。 |
| 70 | +これで**なぜこの方法**にたどり着くのかわかりました。 Composition API の使用を開始するには、初めに実際に使用できる場所が必要です。Vue コンポーネントでは、この場所を `setup` と呼びます。 |
71 | 71 |
|
72 | 72 | ### `setup` コンポーネントオプション
|
73 | 73 |
|
74 | 74 | <VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references" title="Vue Mastery で setup がどのように動作するのか学ぶ">Vue Mastery で setup に関する無料ビデオを視聴する</VideoLesson>
|
75 | 75 |
|
76 |
| -新しい `setup` コンポーネントオプションは、コンポーネントが作成される前に `props` が解決されると実行され、コンポジション API のエントリポイントとして機能します。 |
| 76 | +新しい `setup` コンポーネントオプションは、コンポーネントが作成される前に `props` が解決されると実行され、 Composition API のエントリポイントとして機能します。 |
77 | 77 |
|
78 | 78 | ::: warning
|
79 | 79 | `setup` が実行されたときは、まだコンポーネントのインスタンスが作られないため、`setup` オプションの中では `this` を使用できません。これは `props` を除いて、コンポーネント内で宣言されているあらゆるプロパティ (**ローカルの state** や **computed プロパティ**、**methods**) にアクセスできないことを意味します。
|
@@ -164,7 +164,7 @@ console.log(counter.value) // 1
|
164 | 164 | 任意の値の周りにラッパーオブジェクトがあると、途中でリアクティブでなくなることがなく、アプリ全体に安全に渡すことができます。
|
165 | 165 |
|
166 | 166 | ::: tip Note
|
167 |
| -言い換えれば、`ref` は値への**リアクティブな参照**を作成します。 **参照**を操作するという概念はコンポジション API 全体で頻繁に使用されます。 |
| 167 | +言い換えれば、`ref` は値への**リアクティブな参照**を作成します。 **参照**を操作するという概念は Composition API 全体で頻繁に使用されます。 |
168 | 168 | :::
|
169 | 169 |
|
170 | 170 | 例に戻って、リアクティブな `repositories` 変数を作成しましょう:
|
@@ -242,7 +242,7 @@ export default {
|
242 | 242 |
|
243 | 243 | ### ライフサイクルフックを `setup` の中に登録する
|
244 | 244 |
|
245 |
| -オプション API に比べてコンポジション API の機能を完全にするには、ライフサイクルフックを `setup` の中に登録する必要があります。これは Vue から提供されるいくつかの新しい関数のおかげで可能になりました。コンポジション API におけるライフサイクルフックはオプション API と同様の名称ですが、`on` というプレフィックスが付いています。例: `mounted` は `onMounted` のようになっています。 |
| 245 | +オプション API に比べて Composition API の機能を完全にするには、ライフサイクルフックを `setup` の中に登録する必要があります。これは Vue から提供されるいくつかの新しい関数のおかげで可能になりました。 Composition API におけるライフサイクルフックはオプション API と同様の名称ですが、`on` というプレフィックスが付いています。例: `mounted` は `onMounted` のようになっています。 |
246 | 246 |
|
247 | 247 | それらの関数はコンポーネントによってフックが呼び出されるときに実行されるコールバックを受け付けます。
|
248 | 248 |
|
@@ -401,7 +401,7 @@ setup (props) {
|
401 | 401 | }
|
402 | 402 | ```
|
403 | 403 |
|
404 |
| -他の**論理的な関心事**にも同じことができますが、既に疑問があるかもしれません。- _これはコードを `setup` オプションに移動させて肥大させるだけではありませんか?_ そのため他の責務に移る前に、まず上記のコードをスタンドアロンな**コンポジション関数**に抽出します。 `useUserRepositories` の作成から始めましょう: |
| 404 | +他の**論理的な関心事**にも同じことができますが、既に疑問があるかもしれません。- _これはコードを `setup` オプションに移動させて肥大させるだけではありませんか?_ そのため他の責務に移る前に、まず上記のコードをスタンドアロンな**Composition 関数**に抽出します。 `useUserRepositories` の作成から始めましょう: |
405 | 405 |
|
406 | 406 | ```js
|
407 | 407 | // src/composables/useUserRepositories.js
|
@@ -543,4 +543,4 @@ export default {
|
543 | 543 |
|
544 | 544 | これで完了です!
|
545 | 545 |
|
546 |
| -コンポジション API の表面とできることについてほんの少し触れただけであることを覚えておいてください。より詳しく知りたい場合は、詳細ガイドを参照してください。 |
| 546 | +Composition API の表面とできることについてほんの少し触れただけであることを覚えておいてください。より詳しく知りたい場合は、詳細ガイドを参照してください。 |
0 commit comments