Skip to content

Commit 34b48e8

Browse files
authored
Translate basic.md via GitLocalize (vuejs#97)
1 parent a53cc82 commit 34b48e8

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

ja/basic.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ npm install vue vue-server-renderer --save
1010

1111
#### 注意
1212

13-
- Node.jsのバージョンは6以上を使用することを推奨します
13+
- Node.js のバージョンは6以上を使用することを推奨します
1414
- `vue-server-renderer``vue` のバージョンは一致している必要があります
15-
- `vue-server-renderer` はNode.jsのネイティブモジュールに依存しているため、Node.jsでのみ使用できます。 私たちは、将来的に他のJavaScriptランタイムで実行できるよりシンプルなビルドを提供するかもしれません
15+
- `vue-server-renderer` は Node.js のネイティブモジュールに依存しているため、Node.js でのみ使用できます。 私たちは、将来的に他のJavaScript ランタイムで実行できるよりシンプルなビルドを提供するかもしれません
1616

17-
## Vue インスタンスをレンダリング
17+
## Vue インスタンスを描画
1818

1919
```js
2020
// ステップ 1: Vue インスタンスを作成
@@ -24,7 +24,7 @@ const app = new Vue({
2424
})
2525
// ステップ 2: レンダラを作成
2626
const renderer = require('vue-server-renderer').createRenderer()
27-
// ステップ 3: Vue インスタンスをHTMLに描画
27+
// ステップ 3: Vue インスタンスを HTML に描画
2828
renderer.renderToString(app, (err, html) => {
2929
if (err) throw err
3030
console.log(html)
@@ -72,7 +72,7 @@ server.listen(8080)
7272

7373
## ページテンプレートを使用する
7474

75-
Vueアプリを描画する際、レンダラはアプリのマークアップのみを生成します。この例では、出力を余計なHTMLページシェルでラップする必要がありました
75+
Vue アプリを描画する際、レンダラはアプリのマークアップのみを生成します。この例では、出力を余計な HTML ページシェルでラップする必要がありました
7676

7777
これをシンプル化するために、レンダラの作成時にページテンプレートを直接提供することができます。ほとんどの場合、ページテンプレートを単独のファイルに記述します。 例 `index.template.html`:
7878

@@ -86,22 +86,22 @@ Vueアプリを描画する際、レンダラはアプリのマークアップ
8686
</html>
8787
```
8888

89-
`<!--vue-ssr-outlet-->` コメントに注目してみてください。 -- これはあなたのアプリケーションのマークアップが注入される場所です。
89+
`<!--vue-ssr-outlet-->` コメントに注目してみてください。 これはあなたのアプリケーションのマークアップが注入される場所です。
9090

91-
ファイルを読み込みVueレンダラに渡すことができます。
91+
ファイルを読み込み Vue レンダラに渡すことができます:
9292

9393
```js
9494
const renderer = createRenderer({
9595
template: require('fs').readFileSync('./index.template.html', 'utf-8')
9696
})
9797
renderer.renderToString(app, (err, html) => {
98-
console.log(html) // will be the full page with app content injected.
98+
console.log(html) // アプリのコンテンツを含む完全なページになります
9999
})
100100
```
101101

102-
### テンプレート展開
102+
### テンプレートの展開
103103

104-
テンプレートはシンプルな展開にも対応しています。 次のようなテンプレートであれば
104+
テンプレートはシンプルな展開 (interpolation) にも対応しています。 次のようなテンプレートであれば:
105105

106106
```html
107107
<html>
@@ -115,7 +115,7 @@ renderer.renderToString(app, (err, html) => {
115115
</html>
116116
```
117117

118-
`renderToString` の第2引数として "描画コンテキストオブジェクト"(render context object) を渡すことで展開データを提供することができます
118+
`renderToString` の第2引数として "描画コンテキストオブジェクト"(render context object) を渡すことで展開データを提供することができます:
119119

120120
```js
121121
const context = {
@@ -127,16 +127,16 @@ const context = {
127127
}
128128
renderer.renderToString(app, context, (err, html) => {
129129
// ページタイトルは "hello" になり、
130-
// メタタグが注入されます
130+
// メタタグが注入されます
131131
})
132132
```
133133

134-
`context` オブジェクトもVueアプリインスタンスと共有することができ、コンポーネントがテンプレート展開のためにデータを動的に追加することができます。
134+
`context` オブジェクトも Vue アプリインスタンスと共有することができ、コンポーネントがテンプレート展開のためにデータを動的に追加することができます。
135135

136136
さらに、テンプレートは次のような高度な機能をサポートしています:
137137

138-
- `*.vue` コンポーネントを使用する際の、重要なCSSの自動注入
138+
- `*.vue` コンポーネントを使用する際の、重要な CSS の自動注入
139139
- `clientManifest` を使用する際の、アセットリンクとリソースヒントの自動注入
140-
- クライアントサイドハイドレーションのためにVuexの状態を埋め込む際にXSS防止の自動注入
140+
- クライアントサイドハイドレーションのために Vuex の状態を埋め込む際に XSS 防止の自動注入
141141

142142
関連する概念については、後でこのガイドで紹介します。

0 commit comments

Comments
 (0)