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

Translate template-syntax #165

Merged
merged 4 commits into from Sep 29, 2016

Conversation

Projects
None yet
2 participants
@kitak
Collaborator

kitak commented Sep 28, 2016

Closes #129

"Template syntax" のドキュメントを翻訳しました。レビューをお願いします。

@kazupon

レビュー 👀 しました。レビューコメントの対応お願いします。

Show outdated Hide outdated src/guide/syntax.md
@@ -4,59 +4,68 @@ type: guide
order: 4
---
Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Vue.js では、HTML ベースのテンプレートシンタックスを使います。これは、Vue インスタンスのデータとレンダリングされた DOM を宣言的に対応させることを可能にします。
全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な HTML です。

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

一応原文と対応させるため、ここの翻訳した行は、原文に合わせましょう!

@kazupon

kazupon Sep 29, 2016

Member

一応原文と対応させるため、ここの翻訳した行は、原文に合わせましょう!

Show outdated Hide outdated src/guide/syntax.md
Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
内部では、Vue はテンプレートを Virtual DOM render 関数にコンパイルします。
リアクティビティ システムと組み合わせて、Vue は再描画が必要最低限のコンポーネントの数を賢く把握することが可能です。

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

下記の訳の方が分かりやすくないですか?

リアクティブシステムと組み合わせて、Vue は最小限のコンポーネント数でインテリジェントに再描画が可能で、アプリケーションの状態が変わった時に最小限の DOM 操作を適用します。

@kazupon

kazupon Sep 29, 2016

Member

下記の訳の方が分かりやすくないですか?

リアクティブシステムと組み合わせて、Vue は最小限のコンポーネント数でインテリジェントに再描画が可能で、アプリケーションの状態が変わった時に最小限の DOM 操作を適用します。

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

後、原文と同じ段落にしましょう。

@kazupon

kazupon Sep 29, 2016

Member

後、原文と同じ段落にしましょう。

Show outdated Hide outdated src/guide/syntax.md
If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also [directly write render functions](/guide/render-function.html) instead of templates, with optional JSX support.
もし、あなたが Virtual DOM のコンセプトに詳しく、JavaScript の力を好む場合、[directory write render functions](/guide/render-function.html) をテンプレートの代わりに使うことが可能です。これはオプションで JSX をサポートしています。

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

ちょっと原文に独自のニュアンスが追加しますが、下記の訳でどうでしょう?

もし、あなたが Virtual DOM のコンセプトに詳しく、JavaScript で生でレンダリングするのを好む場合、テンプレートの代わりに[直接 render 関数で書く](/guide/render-function.html) のも可能で、オプションで JSX をサポートしています。

@kazupon

kazupon Sep 29, 2016

Member

ちょっと原文に独自のニュアンスが追加しますが、下記の訳でどうでしょう?

もし、あなたが Virtual DOM のコンセプトに詳しく、JavaScript で生でレンダリングするのを好む場合、テンプレートの代わりに[直接 render 関数で書く](/guide/render-function.html) のも可能で、オプションで JSX をサポートしています。

Show outdated Hide outdated src/guide/syntax.md
The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the `v-html` directive:
2重中括弧の mustaches は、データを HTML ではなく、プレーンなテキストとして扱います。

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

ここも原文と同じく同じ段落にしてください。

@kazupon

kazupon Sep 29, 2016

Member

ここも原文と同じく同じ段落にしてください。

Show outdated Hide outdated src/guide/syntax.md
``` html
<div v-html="rawHtml"></div>
```
The contents are inserted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
コンテンツは、プレーンな HTML として挿入され、データバインディングは無視されます。
Vue は、文字列ベースのテンプレートエンジンではないので、`v-html` をテンプレート部品を組み合わせるために使用できないことに注意しましょう。

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

テンプレート部品を組み合わせるために使用できないことに注意しましょう。

ですが、

テンプレート部品を構成して使用できないことに注意しましょう。

の方が訳として適切だと思います。

@kazupon

kazupon Sep 29, 2016

Member

テンプレート部品を組み合わせるために使用できないことに注意しましょう。

ですが、

テンプレート部品を構成して使用できないことに注意しましょう。

の方が訳として適切だと思います。

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

後、ここも原文と同じ段落構成にしておいてください。

@kazupon

kazupon Sep 29, 2016

Member

後、ここも原文と同じ段落構成にしておいてください。

Show outdated Hide outdated src/guide/syntax.md
Some directives can take an "argument", denoted by a colon after the directive name. For example, the `v-bind` directive is used to reactively update an HTML attribute:
いくつかのディレクティブは "引数" を取ります。これはディレクティブ名の後にコロンで表記します。
例えば、`v-bind`ディレクティブは、リアクティブに HTML 属性を更新します:

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

ここも原文と同じ段落構成にしてください。

@kazupon

kazupon Sep 29, 2016

Member

ここも原文と同じ段落構成にしてください。

Show outdated Hide outdated src/guide/syntax.md
Another example is the `v-on` directive, which listens to DOM events:
ここでの `href``v-bind` ディレクティブに要素の `href` 属性に式 `url` の値をバインドすることを教えるための引数です。
`v-on` ディレクティブの別の例を見てみましょう。これは DOM イベントを受け取ります:

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

ここは、原文と同じく、空行をいれましょう!

@kazupon

kazupon Sep 29, 2016

Member

ここは、原文と同じく、空行をいれましょう!

Show outdated Hide outdated src/guide/syntax.md
Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the `.prevent` modifier tells the `v-on` directive to call `event.preventDefault()` on the triggered event:
修飾子 (Modifier) は、ドットで表記された特別な接尾語で、ディレクティブが特別な方法でバインドされるべきということを示します。
例えば、`.prevent` 修飾子は `v-on` ディレクティブに、イベントがトリガーされた際 `event.preventDefault()` を呼ぶように伝えます:

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

ここも原文と同じ段落構成にしてください。

@kazupon

kazupon Sep 29, 2016

Member

ここも原文と同じ段落構成にしてください。

Show outdated Hide outdated src/guide/syntax.md
これは既存のマークアップに対して、 Vue.js を利用して動的な振る舞いを適用する場合に便利ですが、頻繁に利用されるディレクティブに対しては冗長に感じることがあるでしょう。
同時に [SPA](https://en.wikipedia.org/wiki/Single-page_application) を作成するにあたり、全てのテンプレートを Vue.js で管理しているとき、
`v-` 接頭子を付ける必要性は低いものになるでしょう。
したがって、 Vue.js は2つの最もよく使われるディレクティブ `v-bind``v-on` に対して特別な省略記法を提供しています:

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

ここも原文と同じ段落構成にしてください。

@kazupon

kazupon Sep 29, 2016

Member

ここも原文と同じ段落構成にしてください。

Show outdated Hide outdated src/guide/syntax.md
They may look a bit different from normal HTML, but `:` and `@` are valid chars for attribute names and all Vue.js supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.
これらは普通の HTML とはちょっと違うように見えるかもしれません。ですが、 `:``@` は属性名に使う文字として正しいです。
そして、すべての Vue.js のサポートしているブラウザで、それを正しくパースすることができます。加えて、最終的にレンダリングされるマークアップにそれらは現れません。
省略記法のシンタックスの利用は完全に任意ですが、後でその使用方法について詳しく学んだ時におそらく感謝するでしょう。

This comment has been minimized.

@kazupon

kazupon Sep 29, 2016

Member

ここも原文と同じ段落構成にしてください。

@kazupon

kazupon Sep 29, 2016

Member

ここも原文と同じ段落構成にしてください。

@kitak

This comment has been minimized.

Show comment
Hide comment
@kitak

kitak Sep 29, 2016

Collaborator

@kazupon

レビューしていただいた点、修正しました。段落構成の件、次の翻訳をおこなうときは注意します!

Collaborator

kitak commented Sep 29, 2016

@kazupon

レビューしていただいた点、修正しました。段落構成の件、次の翻訳をおこなうときは注意します!

@kazupon

再度みました。 👀
🙆 です。

@kazupon kazupon merged commit d30662e into vuejs:lang-ja-2.0 Sep 29, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment