diff --git a/src/.vuepress/public/images/options-api.png b/src/.vuepress/public/images/options-api.png new file mode 100644 index 00000000..b8d75fe9 Binary files /dev/null and b/src/.vuepress/public/images/options-api.png differ diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md index 29b94297..23660ec5 100644 --- a/src/guide/composition-api-introduction.md +++ b/src/guide/composition-api-introduction.md @@ -1,6 +1,6 @@ # はじめに -## なぜコンポジション API なのか？ +## なぜ Composition API なのか？ ::: tip Note ドキュメントでここまで到達しているならば、[Vue の基本](introduction.md)と[コンポーネントの作成](component-basics.md)の両方にすでに精通しているはずです。 @@ -18,7 +18,10 @@ Vue コンポーネントを作成するとその機能と結合されたイン export default { components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList }, props: { - user: { type: String } + user: { + type: String, + required: true + } }, data () { return { @@ -54,29 +57,29 @@ export default { コンポーネントのオプション (`data`, `computed`, `methods`, `watch`) でまとめたロジックはたいていの場合は正しく動作します。しかし、コンポーネントがより大きくなれば、**論理的な関心事**のリストもまた大きくなります。これは、特に最初からコンポーネントを書いていない人々にとって、コンポーネントを読みづらく、理解しづらいものにするかもしれません。 -![Vue オプション API: オプションの種類によってグループ分けされたコード](https://user-images.githubusercontent.com/499550/62783021-7ce24400-ba89-11e9-9dd3-36f4f6b1fae2.png) +![Vue オプション API: オプションの種類によってグループ分けされたコード](/images/options-api.png) **論理的な関心事** が色でグループ化されている大きなコンポーネントを示す例。 このような分離は、複雑なコンポーネントを理解してメンテナンスすることを難しくします。このオプションの分離は背景にある論理的な関心事をわかりづらくします。さらに、単一の論理的な関心事に取り組む場合、関連するコードのオプションブロックを何度も "ジャンプ" する必要があります。 -同じ論理的な関心事に関連するコードを並べることができれば、より良くなるでしょう。そして、これはまさにコンポジション API が可能にします。 +同じ論理的な関心事に関連するコードを並べることができれば、より良くなるでしょう。そして、これはまさに Composition API が可能にします。 -## コンポジション API の基本 +## Composition API の基本 -これで**なぜこの方法**にたどり着くのかわかりました。コンポジション API の使用を開始するには、初めに実際に使用できる場所が必要です。Vue コンポーネントでは、この場所を `setup` と呼びます。 +これで**なぜこの方法**にたどり着くのかわかりました。 Composition API の使用を開始するには、初めに実際に使用できる場所が必要です。Vue コンポーネントでは、この場所を `setup` と呼びます。 ### `setup` コンポーネントオプション Vue Mastery で setup に関する無料ビデオを視聴する -新しい `setup` コンポーネントオプションは、コンポーネントが作成される前に `props` が解決されると実行され、コンポジション API のエントリポイントとして機能します。 +新しい `setup` コンポーネントオプションは、コンポーネントが作成される前に `props` が解決されると実行され、 Composition API のエントリポイントとして機能します。 ::: warning `setup` が実行されたときは、まだコンポーネントのインスタンスが作られないため、`setup` オプションの中では `this` を使用できません。これは `props` を除いて、コンポーネント内で宣言されているあらゆるプロパティ (**ローカルの state** や **computed プロパティ**、**methods**) にアクセスできないことを意味します。 ::: -`setup` オプションは `props` と[後で](composition-api-setup.html#arguments)紹介する `context` を受け付ける関数であるべきです。さらに、`setup` から返される全てのものは、コンポーネントの残りの要素 (computed プロパティ、methods、ライフサイクルフックなど) およびコンポーネントの template に公開されます。 +`setup` オプションは `props` と[後で](composition-api-setup.html#引数)紹介する `context` を受け付ける関数であるべきです。さらに、`setup` から返される全てのものは、コンポーネントの残りの要素 (computed プロパティ、methods、ライフサイクルフックなど) およびコンポーネントの template に公開されます。 `setup` をコンポーネントに追加しましょう: @@ -86,7 +89,10 @@ export default { export default { components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList }, props: { - user: { type: String } + user: { + type: String, + required: true + } }, setup(props) { console.log(props) // { user: '' } @@ -155,10 +161,10 @@ console.log(counter.value) // 1 ![参照渡し vs 値渡し](https://blog.penjee.com/wp-content/uploads/2015/02/pass-by-reference-vs-pass-by-value-animation.gif) -任意の値の周りにラッパーオブジェクトがあると、途中でリアクティブでなくなることがなく、アプリ全体に安全に渡すことができます。 +どんな値でもラッパーオブジェクトを持つことで、途中でリアクティブでなくなることがなく、アプリ全体に安全に渡すことができます。 ::: tip Note -言い換えれば、`ref` は値への**リアクティブな参照**を作成します。 **参照**を操作するという概念はコンポジション API 全体で頻繁に使用されます。 +言い換えれば、`ref` は値への**リアクティブな参照**を作成します。 **参照**を操作するという概念は Composition API 全体で頻繁に使用されます。 ::: 例に戻って、リアクティブな `repositories` 変数を作成しましょう: @@ -192,7 +198,10 @@ import { ref } from 'vue' export default { components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList }, props: { - user: { type: String } + user: { + type: String, + required: true + } }, setup (props) { const repositories = ref([]) @@ -233,7 +242,7 @@ export default { ### ライフサイクルフックを `setup` の中に登録する -オプション API に比べてコンポジション API の機能を完全にするには、ライフサイクルフックを `setup` の中に登録する必要があります。これは Vue から提供されるいくつかの新しい関数のおかげで可能になりました。コンポジション API におけるライフサイクルフックはオプション API と同様の名称ですが、`on` というプレフィックスが付いています。例: `mounted` は `onMounted` のようになっています。 +オプション API に比べて Composition API の機能を完全にするには、ライフサイクルフックを `setup` の中に登録する必要があります。これは Vue から提供されるいくつかの新しい関数のおかげで可能になりました。 Composition API におけるライフサイクルフックはオプション API と同様の名称ですが、`on` というプレフィックスが付いています。例: `mounted` は `onMounted` のようになっています。 それらの関数はコンポーネントによってフックが呼び出されるときに実行されるコールバックを受け付けます。 @@ -300,7 +309,7 @@ export default { } ``` -`watch` についての詳細は、[詳細ガイド]() を参照してください。 +`watch` についての詳細は、[詳細ガイド](reactivity-computed-watchers.md#watch) を参照してください。 **例に適用しましょう:** @@ -392,7 +401,7 @@ setup (props) { } ``` -他の**論理的な関心事**にも同じことができますが、既に疑問があるかもしれません。- _これはコードを `setup` オプションに移動させて肥大させるだけではありませんか？_ そのため他の責務に移る前に、まず上記のコードをスタンドアロンな**コンポジション関数**に抽出します。 `useUserRepositories` の作成から始めましょう: +他の**論理的な関心事**にも同じことができますが、既に疑問があるかもしれません。- _これはコードを `setup` オプションに移動させて肥大させるだけではありませんか？_ そのため他の責務に移る前に、まず上記のコードをスタンドアロンな**Composition 関数**に抽出します。 `useUserRepositories` の作成から始めましょう: ```js // src/composables/useUserRepositories.js @@ -416,7 +425,7 @@ export default function useUserRepositories(user) { } ``` -And then the searching functionality: +それから検索機能も: ```js // src/composables/useRepositoryNameSearch.js @@ -449,7 +458,10 @@ import { toRefs } from 'vue' export default { components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList }, props: { - user: { type: String } + user: { + type: String, + required: true + } }, setup (props) { const { user } = toRefs(props) @@ -495,7 +507,10 @@ import useRepositoryFilters from '@/composables/useRepositoryFilters' export default { components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList }, props: { - user: { type: String } + user: { + type: String, + required: true + } }, setup(props) { const { user } = toRefs(props) @@ -528,4 +543,4 @@ export default { これで完了です！ -コンポジション API の表面とできることについてほんの少し触れただけであることを覚えておいてください。より詳しく知りたい場合は、詳細ガイドを参照してください。 +Composition API の表面とできることについてほんの少し触れただけであることを覚えておいてください。より詳しく知りたい場合は、詳細ガイドを参照してください。