Skip to content

tweak ja/basic.md #97

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.

Sign up for GitHub

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 1 commit into from
Jul 11, 2017
Merged

tweak ja/basic.md #97

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
30 changes: 15 additions & 15 deletions ja/basic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ npm install vue vue-server-renderer --save

#### 注意

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

## Vue インスタンスをレンダリング
## Vue インスタンスを描画

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

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

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

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

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

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

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

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

### テンプレート展開
### テンプレートの展開

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

```html
<html>
Expand All @@ -115,7 +115,7 @@ renderer.renderToString(app, (err, html) => {
</html>
```

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

```js
const context = {
Expand All @@ -127,16 +127,16 @@ const context = {
}
renderer.renderToString(app, context, (err, html) => {
// ページタイトルは "hello" になり、
// メタタグが注入されます。
// メタタグが注入されます
})
```

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

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

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

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