From 818d7ed46600904f762b3a9a746454a3634a2022 Mon Sep 17 00:00:00 2001 From: resessh Date: Sat, 26 Sep 2020 01:37:21 +0900 Subject: [PATCH 1/4] translate component-dynamic-async --- src/guide/component-dynamic-async.md | 40 ++++++++++++++-------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/guide/component-dynamic-async.md b/src/guide/component-dynamic-async.md index 7939342e..73383032 100644 --- a/src/guide/component-dynamic-async.md +++ b/src/guide/component-dynamic-async.md @@ -1,16 +1,16 @@ -# Dynamic & Async Components +# 動的 & 非同期コンポーネント -> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +> このページはすでに [コンポーネントの基本](component-basics.md) を読んでいる事を前提としています。コンポーネントをよく知らない方はそちらを先にお読みください。 -## Dynamic Components with `keep-alive` +## 動的コンポーネントにおける `keep-alive` の利用 -Earlier, we used the `is` attribute to switch between components in a tabbed interface: +まず、`is` 属性を利用してタブインタフェースのコンポーネントを切り替えることができます: ```vue-html ``` -When switching between these components though, you'll sometimes want to maintain their state or avoid re-rendering for performance reasons. For example, when expanding our tabbed interface a little: +しかし、コンポーネントを切り替える時、コンポーネントの状態を保持したり、パフォーマンスの理由から再レンダリングを避けたいときもあるでしょう。例えば、タブインターフェースを少し拡張した場合:

See the Pen @@ -19,18 +19,18 @@ When switching between these components though, you'll sometimes want to maintai

-You'll notice that if you select a post, switch to the _Archive_ tab, then switch back to _Posts_, it's no longer showing the post you selected. That's because each time you switch to a new tab, Vue creates a new instance of the `currentTabComponent`. +投稿を選択し、 _Archive_ タブに切り替えてから _Posts_ に戻ると、選択していた投稿は表示されなくなります。 これは、新しいタブに切り替えるたびに、Vue が `currentTabComponent` の新しいインスタンスを作成するからです。 -Recreating dynamic components is normally useful behavior, but in this case, we'd really like those tab component instances to be cached once they're created for the first time. To solve this problem, we can wrap our dynamic component with a `` element: +動的コンポーネントの再生成は通常は便利な挙動です。しかし、このケースでは最初に作成されたタブコンポーネントのインスタンスがキャッシュされるのが好ましいでしょう。この問題を解決するために、動的コンポーネントを `` 要素でラップすることができます: ```vue-html - + ``` -Check out the result below: +以下の様になります:

See the Pen @@ -39,13 +39,13 @@ Check out the result below:

-Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered. +このように _Posts_ タブがレンダリングされていなくても、自身の状態(選択された投稿)を保持するようになります。 -Check out more details on `` in the [API reference](../api/built-in-components.html#keep-alive). +`` の詳細な情報については [API リファレンス](../api/built-in-components.html#keep-alive) を参照してください。 -## Async Components +## 非同期コンポーネント -In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a `defineAsyncComponent` method: +大規模なアプリケーションでは、アプリケーションを小さなまとまりに分割し、必要なコンポーネントだけサーバからロードしたい場合があるでしょう。これを可能にするために、 Vue は `defineAsyncComponent` メソッドを持ちます: ```js const app = Vue.createApp({}) @@ -62,9 +62,9 @@ const AsyncComp = Vue.defineAsyncComponent( app.component('async-example', AsyncComp) ``` -As you can see, this method accepts a factory function returning a `Promise`. Promise's `resolve` callback should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. +ご覧の通り、このメソッドは `Promise` を返すファクトリ関数を受けます。サーバからコンポーネント定義を取得したら Promise の `resolve` コールバックが呼ばれるべきです。また、読み込みが失敗したことを示すために `reject(reason)` を呼ぶこともできます。 -You can also return a `Promise` in the factory function, so with Webpack 2 or later and ES2015 syntax you can do: +ファクトリ関数の中で `Promise` を返すことができるので、 Webpack 2 以降と ES2015 の構文では以下のように書くこともできます: ```js import { defineAsyncComponent } from 'vue' @@ -76,7 +76,7 @@ const AsyncComp = defineAsyncComponent(() => app.component('async-component', AsyncComp) ``` -You can also use `defineAsyncComponent` when [registering a component locally](component-registration.html#local-registration): +[コンポーネントのローカル登録](component-registration.html#local-registration) でも、 `defineAsyncComponent` を利用することができます。 ```js import { createApp, defineAsyncComponent } from 'vue' @@ -91,10 +91,10 @@ createApp({ }) ``` -### Using with Suspense +### Suspense との併用 -Async components are _suspensible_ by default. This means if it has a [``](TODO) in the parent chain, it will be treated as an async dependency of that ``. In this case, the loading state will be controlled by the ``, and the component's own loading, error, delay and timeout options will be ignored. +非同期コンポーネントはデフォルトで _suspensible_ です。これは非同期コンポーネントが [``](TODO) を親に持ったとき、 `` の非同期の依存として取り扱われることを意味しています。このケースでは、読み込みの状態は `` から制御され、コンポーネント自身が持つ loading や error, delay, timeout といったオプションは無視されます。 -The async component can opt-out of `Suspense` control and let the component always control its own loading state by specifying `suspensible: false` in its options. +非同期コンポーネントのオプションに `suspensible: false` を指定することで、 `Suspense` の制御から外すことができ、常にコンポーネントが自身の読み込み状態を制御することができます。 -You can check the list of available options in the [API Reference](../api/global-api.html#arguments-4) +[API リファレンス](../api/global-api.html#arguments-4) で利用可能なオプションのリストを確認できます。 From 2bed9b73eb498b6f75ee7b72f247a14e0a123cd5 Mon Sep 17 00:00:00 2001 From: Xuesu Li Date: Sun, 27 Sep 2020 00:39:09 +0900 Subject: [PATCH 2/4] Update src/guide/component-dynamic-async.md Co-authored-by: kazuya kawaguchi --- src/guide/component-dynamic-async.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-dynamic-async.md b/src/guide/component-dynamic-async.md index 73383032..1fc09ac9 100644 --- a/src/guide/component-dynamic-async.md +++ b/src/guide/component-dynamic-async.md @@ -30,7 +30,7 @@ ``` -以下の様になります: +以下の結果を確認してみてください:

See the Pen From 64f02a8e79a7682ad8fbce8102967c48cb310b6e Mon Sep 17 00:00:00 2001 From: Xuesu Li Date: Sun, 27 Sep 2020 00:40:02 +0900 Subject: [PATCH 3/4] Update src/guide/component-dynamic-async.md Co-authored-by: kazuya kawaguchi --- src/guide/component-dynamic-async.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-dynamic-async.md b/src/guide/component-dynamic-async.md index 1fc09ac9..e8f2f0bd 100644 --- a/src/guide/component-dynamic-async.md +++ b/src/guide/component-dynamic-async.md @@ -45,7 +45,7 @@ ## 非同期コンポーネント -大規模なアプリケーションでは、アプリケーションを小さなまとまりに分割し、必要なコンポーネントだけサーバからロードしたい場合があるでしょう。これを可能にするために、 Vue は `defineAsyncComponent` メソッドを持ちます: +大規模なアプリケーションでは、アプリケーションを小さなまとまりに分割し、必要なコンポーネントだけサーバーから読み込みたい場合があるでしょう。これを可能にするために、 Vue は `defineAsyncComponent` メソッドを持ちます: ```js const app = Vue.createApp({}) From a9ad2b8239e01dff8a4a7f96c3e0ef7ec93a86bb Mon Sep 17 00:00:00 2001 From: Xuesu Li Date: Sun, 27 Sep 2020 00:40:23 +0900 Subject: [PATCH 4/4] Update src/guide/component-dynamic-async.md Co-authored-by: kazuya kawaguchi --- src/guide/component-dynamic-async.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-dynamic-async.md b/src/guide/component-dynamic-async.md index e8f2f0bd..5ce3ee73 100644 --- a/src/guide/component-dynamic-async.md +++ b/src/guide/component-dynamic-async.md @@ -62,7 +62,7 @@ const AsyncComp = Vue.defineAsyncComponent( app.component('async-example', AsyncComp) ``` -ご覧の通り、このメソッドは `Promise` を返すファクトリ関数を受けます。サーバからコンポーネント定義を取得したら Promise の `resolve` コールバックが呼ばれるべきです。また、読み込みが失敗したことを示すために `reject(reason)` を呼ぶこともできます。 +見て分かるとおり、このメソッドは `Promise` を返すファクトリ関数を受けます。サーバーからコンポーネント定義を取得したら Promise の `resolve` コールバックが呼ばれるべきです。また、読み込みが失敗したことを示すために `reject(reason)` を呼ぶこともできます。 ファクトリ関数の中で `Promise` を返すことができるので、 Webpack 2 以降と ES2015 の構文では以下のように書くこともできます: