8000 Guide > Composition API > Introduction の翻訳を追従 by naokie · Pull Request #282 · vuejs-jp/ja.vuejs.org · GitHub
[go: up one dir, main page]

Skip to content

Guide > Composition API > Introduction の翻訳を追従 #282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Apr 26, 2021
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: translate 'composition api'
  • Loading branch information
naokie committed Apr 26, 2021
commit cdc1530240a62be15a3a22477ee5d104179a926a
18 changes: 9 additions & 9 deletions src/guide/composition-api-introduction.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# はじめに

## なぜコンポジション API なのか?
## なぜ Composition API なのか?

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

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

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

## コンポジション API の基本
## Composition API の基本

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

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

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

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

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

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

例に戻って、リアクティブな `repositories` 変数を作成しましょう:
Expand Down Expand Up @@ -242,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` のようになっています。

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

Expand Down Expand Up @@ -401,7 +401,7 @@ setup (props) {
}
```

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

```js
// src/composables/useUserRepositories.js
Expand Down Expand Up @@ -543,4 +543,4 @@ export default {

これで完了です!

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