Skip to content

update ja docs #228

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 9 commits into from
Feb 9, 2019
Merged

update ja docs #228

merged 9 commits into from
Feb 9, 2019

Conversation

kazupon
Copy link
Member

@kazupon kazupon commented Feb 8, 2019

ref: #222

@kazupon
Copy link
Member Author

kazupon commented Feb 8, 2019

@ktsn
Can you review this PR ? 🙏

:::

The `template` option can also be function that returns the rendered HTML or a Promise that resolves to the rendered HTML. This allows you to leverage native JavaScript template strings and potential async operations in the template rendering process.
`template` オプションは、描画された HTML 、もしくは描画された HTML を解決する Promise を返す関数を指定できます。これにより、ネイティブの JavaScript 文字列、そしてテンプレート描画プロセスにおける可能性としてある非同期な操作を利用できます。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ネイティブの JavaScript 文字列

原文ではテンプレート文字列のことを言ってるように見えます。

:::

The `template` option can also be function that returns the rendered HTML or a Promise that resolves to the rendered HTML. This allows you to leverage native JavaScript template strings and potential async operations in the template rendering process.
`template` オプションは、描画された HTML 、もしくは描画された HTML を解決する Promise を返す関数を指定できます。これにより、ネイティブの JavaScript 文字列、そしてテンプレート描画プロセスにおける可能性としてある非同期な操作を利用できます。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

そしてテンプレート描画プロセスにおける可能性としてある非同期な操作を利用できます。

potential async operations なので、"可能性" は "非同期な操作" にかかっていますが、この訳文だと少しそれが見えづらいように思います。
"テンプレート描画プロセスにおいてあり得る非同期な操作を利用できます。" みたいな感じでどうでしょうか?


1. The rendering result of the app component as a string;
2. The rendering context object.
1. 文字列としてアプリケーションコンポーネントの描画結果
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

アプリケーションコンポーネントの描画結果の文字列
とか。

1. The rendering result of the app component as a string;
2. The rendering context object.
1. 文字列としてアプリケーションコンポーネントの描画結果
2. コンテキストオブジェクトの描画
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rendering は context object にかかっているので、"描画コンテキストオブジェクト" にしてしまって良い気がします。

@@ -140,7 +140,7 @@ const renderer = createRenderer({
})
```

Note that when using a custom template function, nothing will be automatically injected - you will be in full control of what the eventual HTML includes, but also will be responsible for including everything yourself (e.g. asset links if you are using the bundle renderer).
カスタムテンプレート関数を使用するとき、自動的に注入されるものが何もないことに注意してください。最終的な HTML に含まれるものを完全に制御できますが、全てあなた自身で含める責任があります (例えば、バンドルレンダラを使用する場合、アセットリンク)。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

責任があります

直訳だとこうなのですが、この文脈だと違和感があるので必要がありますにするのはどうですか?

@@ -86,13 +85,13 @@ export function createApp () {

フェッチする必要があるデータはアクセスしたルート (route) によって決まります。またそのルートによってどのコンポーネントが描画されるかも決まります。実のところ、与えられたルートに必要とされるデータは、そのルートで描画されるコンポーネントに必要とされるデータでもあるのです。したがって、データをフェッチするロジックはルートコンポーネントの中に置くのが自然でしょう。

We will use the `serverPrefetch` option (new in 2.6.0+) in our components. This option is recognized by the server renderer and will pause the rendering until the promise it returns is resolved. This allows us to "wait" on async data during the rendering process.
コンポーネントでは、 `serverPrefetch` オプション (新規2.6.0以降)を使用します。このオプションは、サーバレンダラによって認識され、そして Promise が解決されるまで描画を一時停止します。これにより、描画処理中に非同期データを"待つ"ことができます。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

そして Promise が解決されるまで描画を一時停止します。

原文の it returns が抜けてしまってますね。


Now we know that the rendering process will wait for data fetching in our components, how do we know when it is "done"? In order to do that, we need to attach a `rendered` callback to the render context (also new in 2.6), which the server renderer will call when the entire rendering process is finished. At this moment, the store should have been filled with the final state. We can then inject it on to the context in that callback:
これで、描画プロセスがコンポーネント内のデータフェッチを待つことがわかりましたが、それが"完了"したというのをどうやって分かるのでしょうか?それをするために、描画プロセス全体が終了したときに、サーバレンダラは、"rendered" コールバックを描画コンテキストにアタッチする必要があります(これも 2.6 での新機能)。現時点で、ストア最終的な状態で満たされているはずです。そのコールバックでそのコンテキストにそれを注入することができます:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

それをするために、描画プロセス全体が終了したときに、サーバレンダラは、"rendered" コールバックを描画コンテキストにアタッチする必要があります(これも 2.6 での新機能)。

それをするために、描画コンテキストに rendered コールバックをアタッチする必要があります(これも 2.6 での新機能)。これは描画プロセス全体が終了したときにサーバーレンダラによって呼ばれます。

みたいな感じですかねー。


Now we know that the rendering process will wait for data fetching in our components, how do we know when it is "done"? In order to do that, we need to attach a `rendered` callback to the render context (also new in 2.6), which the server renderer will call when the entire rendering process is finished. At this moment, the store should have been filled with the final state. We can then inject it on to the context in that callback:
これで、描画プロセスがコンポーネント内のデータフェッチを待つことがわかりましたが、それが"完了"したというのをどうやって分かるのでしょうか?それをするために、描画プロセス全体が終了したときに、サーバレンダラは、"rendered" コールバックを描画コンテキストにアタッチする必要があります(これも 2.6 での新機能)。現時点で、ストア最終的な状態で満たされているはずです。そのコールバックでそのコンテキストにそれを注入することができます:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ストア最終的な状態

ストア ですかね。


Now we know that the rendering process will wait for data fetching in our components, how do we know when it is "done"? In order to do that, we need to attach a `rendered` callback to the render context (also new in 2.6), which the server renderer will call when the entire rendering process is finished. At this moment, the store should have been filled with the final state. We can then inject it on to the context in that callback:
これで、描画プロセスがコンポーネント内のデータフェッチを待つことがわかりましたが、それが"完了"したというのをどうやって分かるのでしょうか?それをするために、描画プロセス全体が終了したときに、サーバレンダラは、"rendered" コールバックを描画コンテキストにアタッチする必要があります(これも 2.6 での新機能)。現時点で、ストア最終的な状態で満たされているはずです。そのコールバックでそのコンテキストにそれを注入することができます:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

そのコールバックでそのコンテキストにそれを注入することができます

"その", "それ"が続いていて難しいので、以下のような感じでどうでしょうか。

そのコールバック内でコンテキストに状態を注入できます。

@@ -275,5 +274,5 @@ export default {
モジュールはルートコンポーネントの依存関係になっているので、webpack によってルートコンポーネントの非同期チャンクに移動されます。

::: warning
Don't forget to use the `preserveState: true` option for `registerModule` so we keep the state injected by the server.
サーバによって注入された状態が維持されるため、`registerModule` に `preserveState: true` オプションを使用することを忘れないでください。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

サーバによって注入された状態が維持されるため

この書き方だと逆の意味でも取れてしまいます。
状態を維持するため にするのはどうでしょうか?

Copy link
Member

@ktsn ktsn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@kazupon
Copy link
Member Author

kazupon commented Feb 9, 2019

Thanks!

@kazupon kazupon merged commit 14e3169 into vuejs:master Feb 9, 2019
@kazupon kazupon deleted the docs/ja branch February 9, 2019 06:07
coolkei added a commit to coolkei/vue-ssr-docs24 that referenced this pull request Apr 14, 2024
* merge 2.6 updating en docs to ja docs

* docs(ja): translates

* docs(ja): more translation

* docs(ja): update

ref:
- vuejs/vue2-ssr-docs#228 (review)
- vuejs/vue2-ssr-docs#228 (comment)

* docs(ja): update template function explanation

ref:
- vuejs/vue2-ssr-docs#228 (comment)
- vuejs/vue2-ssr-docs#228 (comment)

* docs(ja): update template function example codes

ref:
- vuejs/vue2-ssr-docs#228 (comment)

* docs(ja): update serializer

ref:
- vuejs/vue2-ssr-docs#228 (comment)
- vuejs/vue2-ssr-docs#228 (comment)

* docs(ja): update server only component options

ref:
- vuejs/vue2-ssr-docs#228 (comment)
- vuejs/vue2-ssr-docs#228 (comment)

* docs(ja): update data section

ref:
- vuejs/vue2-ssr-docs#228 (comment)
- vuejs/vue2-ssr-docs#228 (comment)
- vuejs/vue2-ssr-docs#228 (comment)
- vuejs/vue2-ssr-docs#228 (comment)
- vuejs/vue2-ssr-docs#228 (comment)
- vuejs/vue2-ssr-docs#228 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants