From ad241dbc986a65cb1dfe4d88346da27883513066 Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Tue, 11 Jul 2017 19:05:36 +0900 Subject: [PATCH] Translate basic.md via GitLocalize --- ja/basic.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/ja/basic.md b/ja/basic.md index 9c9bac87..1cc2fef8 100644 --- a/ja/basic.md +++ b/ja/basic.md @@ -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 インスタンスを作成 @@ -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) @@ -72,7 +72,7 @@ server.listen(8080) ## ページテンプレートを使用する -Vueアプリを描画する際、レンダラはアプリのマークアップのみを生成します。この例では、出力を余計なHTMLページシェルでラップする必要がありました。 +Vue アプリを描画する際、レンダラはアプリのマークアップのみを生成します。この例では、出力を余計な HTML ページシェルでラップする必要がありました。 これをシンプル化するために、レンダラの作成時にページテンプレートを直接提供することができます。ほとんどの場合、ページテンプレートを単独のファイルに記述します。 例 `index.template.html`: @@ -86,22 +86,22 @@ Vueアプリを描画する際、レンダラはアプリのマークアップ ``` -`` コメントに注目してみてください。 -- これはあなたのアプリケーションのマークアップが注入される場所です。 +`` コメントに注目してみてください。 これはあなたのアプリケーションのマークアップが注入される場所です。 -ファイルを読み込み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 @@ -115,7 +115,7 @@ renderer.renderToString(app, (err, html) => { ``` -`renderToString` の第2引数として "描画コンテキストオブジェクト"(render context object) を渡すことで展開データを提供することができます +`renderToString` の第2引数として "描画コンテキストオブジェクト"(render context object) を渡すことで展開データを提供することができます: ```js const context = { @@ -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 防止の自動注入 関連する概念については、後でこのガイドで紹介します。