Skip to content

Commit 904c517

Browse files
authored
Fix Japanese translation (#289)
* fix: 一般的な慣例を指してのas ではなく、次に例示してるcodeを指してas (seen) なので少し誤訳。 * fix: 直訳するとhydrateがわからないと難解なのと後半が若干誤訳。 * fix: タグがclient に対してhydrateしろ、と言っているのであって、documentが学習者に教えているわけじゃないので。 * fix: it は'data-server-rendered'を指していて、これが主語です。なので文としては'data-server-rendered'がidやセレクタなどに関して何もしないので自分で追加して、と意味です。 * add: 追加翻訳されてない部分を対応 * fix: 難解な部分なのでわかりやすく的確な内容に修正 * fix: 誤訳修正と訳をわかりやすく修正。 * fix 誤訳修正 * fix 誤訳修正 * fix 誤訳修正
1 parent 78f2cff commit 904c517

File tree

3 files changed

+16
-9
lines changed

3 files changed

+16
-9
lines changed

docs/ja/guide/bundle-renderer.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ const createApp = require('/path/to/built-server-bundle.js')
1616

1717
- ビルトインソースマップのサポート ( webpack の設定オプションに `devtool: 'source-map'` を指定)
1818

19-
- 開発中、デプロイ中のホットリロード(更新されたバンドルや、再作成されたレンダラのインスタンスを読み込むだけです)
19+
- 開発中、デプロイ中のホットリロード(シンプルに更新されたバンドルを読み込み、レンダラのインスタンス再生成します)
2020

21-
- クリティカル CSS の評価 (`*.vue` ファイルを利用しているとき): インライン CSS は、描画中に利用されるコンポーネントによって必要とされます。詳細は [CSS](./css.md) を参照してください。
21+
- クリティカル CSS 注入 (`*.vue` ファイルを利用しているとき): 描画中に利用されるコンポーネントによって必要とされている CSS をインラインに追加します。詳細は [CSS](./css.md) を参照してください。
2222

23-
- [clientManifest](../api/#clientmanifest) によるアセットの注入: 自動的に最適なディレクティブが推測され、プリロードとプリフェッチを実行します。また、初期描画時にはコード分割チャンクを必要とします
23+
- [clientManifest](../api/#clientmanifest) によるアセットの注入: 自動的に最適なプリロードとプリフェッチディレクティブ、そして初期描画時に必要なコード分割チャンクを推測します
2424

2525
---
2626

docs/ja/guide/hydration.md

+12-5
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,33 @@
77
app.$mount('#app')
88
```
99

10-
サーバがマークアップを描画後に、この処理を実行し、すべての DOM を再生成することを私たちは当然したくありません。代わりに、静的なマークアップの"ハイドレート (hydrate)"とそれをインタラクティブに生成したいです
10+
サーバがマークアップを描画後に、この処理を実行し、すべての DOM を再生成することを私たちは当然したくありません。代わりに、"ハイドレート (hydrate)"することで、静的なマークアップを単にインタラクティブにしたいです
1111

1212
サーバの描画出力を調べたら、アプリケーションのルート要素が以下のような特別な属性を持っていることに気づくでしょう:
1313

1414
```js
1515
<div id="app" data-server-rendered="true">
1616
```
1717

18-
この `data-server-rendered` という特別な属性は、クライアントサイドの Vue に、これがサーバ上で描画されたことを知らせ、この要素はハイドレーションモードでマウントされるはずです。`id="app"` に、単に `data-server-rendered` が追加されていないことに注意してください。ID または 他のセレクタを自分自身のルート要素に追加する必要があります。そうしないと、アプリケーションが適切にハイドレーションできなくなります
18+
この `data-server-rendered` という特別な属性は、クライアントサイドの Vue に、これがサーバ上で描画されたことと、この要素はハイドレーションモードでマウントしなくてはいけないといことを知らせます。この属性は`id="app"`をタグに追加しないことに注意してください。それは単なる`data-server-rendered`属性です。つまり、ID または 他のセレクタをあなた自身でルート要素に追加する必要があります。そうしないと、アプリケーションが適切にハイドレートできなくなります
1919

20-
開発モードでは、Vue はクラインアントサイドで生成された仮想 DOM が、サーバで描画された DOM の構成と一致しているか検証を行います。もしこれが一致していない場合、ハイドレーションを取りやめ、元の DOM を無視しスクラッチから描画を行います。**プロダクションモードでは、パフォーマンスの最大化のため、このアサーションは無効になります。**
20+
21+
`data-server-rendered`属性を要素に指定しない場合でも、`$mount``hydrating`実引数に`true`を指定することでハイドレートさせることができます。
22+
```js
23+
// Force hydration of the app
24+
app.$mount('#app', true)
25+
```
26+
27+
開発モードでは、Vue はクラインアントサイドで生成された仮想 DOM が、サーバで描画された DOM の構成と一致しているかアサートを行います。もしこれが一致しない場合、 Vue はハイドレーションを取りやめ、サーバーが生成した既存の DOM を破棄して一から DOM の描画を行います。**プロダクションモードでは、パフォーマンスの最大化のため、このアサーションは無効に設定されています。**
2128

2229
### ハイドレーション時の注意
2330

24-
サーバサイドの描画とクライアントサイドでのハイドレーションを行なった場合、ある特定の HTML の構造はブラウザによって変換されるかもしれないことがわかっています。例えば、あなたが Vue のテンプレート内に、以下のような記述をした場合です:
31+
サーバサイドの描画とクライアントサイドでのハイドレーションを行う時に一つ気をつけなければいけないことは、ある特定の HTML の構造はブラウザによって変換されてしまうかもしれないということです。例えば、あなたが Vue のテンプレート内に、以下のような記述をした場合です:
2532

2633
```html
2734
<table>
2835
<tr><td>hi</td></tr>
2936
</table>
3037
```
3138

32-
ブラウザは、自動で `<tbody>``<table>` に挿入します。しかし、Vue によって生成された仮想 DOM は、`<tbody>` を含みません。そのため、不一致が起こります。正しいマッチングを保証するために、あなたのテンプレート内では、必ず有効な HTML を記述してください。
39+
ブラウザは、自動で `<tbody>``<table>` に挿入します。しかし、Vue によって生成された仮想 DOM は、`<tbody>` を含みません。そのため、不一致が起こります。確実に一致させるためには、あなたのテンプレート内で必ず有効な HTML を記述してください。

docs/ja/guide/structure.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
クライアントのみのコードを書くとき、私たちはコードが毎回新しいコンテキストで評価されるという事実に慣れています。しかし、 Node.js サーバーは長時間実行されるプロセスです。私たちのコードがプロセスに要求されるとき、それは一度評価されメモリにとどまります。つまりシングルトンのオブジェクトを作成したとき、それは全ての受信リクエスト間でシェアされると言うことです。
66

7-
基本的な例としては、私たちは **リクエストごとに新しいルート Vue インスタンスを作成します**。それは各ユーザがそれぞれのブラウザでアプリケーションの新しいインスタンスを使用することに似ています。もし私たちが複数のリクエストをまたいでインスタンスを共有すると、それは容易にクロスリクエスト状態の汚染につながるでしょう。
7+
以下の基本的な例を見て分かるように、私たちは **リクエストごとに新しいルート Vue インスタンスを作成します**。それは各ユーザがそれぞれのブラウザでアプリケーションの新しいインスタンスを使用することに似ています。もし私たちが複数のリクエストをまたいでインスタンスを共有すると、それは容易にクロスリクエスト状態の汚染につながるでしょう。
88

99
そのため、直接アプリケーションのインスタンスを作成するのではなく、各リクエストで繰り返し実行される新しいアプリケーションのインスタンスを作成するファクトリ関数を公開する必要があります:
1010

0 commit comments

Comments
 (0)