Skip to content

Commit 64d3786

Browse files
nalpankazupon
andauthored
docs: Essentials > Template Syntax の翻訳 (#5) (#91)
* docs: Essentials > Template Syntax の翻訳 (#5) * template-syntax.mdの翻訳 * Update src/guide/template-syntax.md Co-authored-by: kazuya kawaguchi <[email protected]> * Update src/guide/template-syntax.md Co-authored-by: kazuya kawaguchi <[email protected]> * review Co-authored-by: kazuya kawaguchi <[email protected]>
1 parent cb87291 commit 64d3786

File tree

1 file changed

+64
-64
lines changed

1 file changed

+64
-64
lines changed

src/guide/template-syntax.md

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
# Template Syntax
1+
# テンプレート構文
22

3-
Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying application instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
3+
Vue.js では HTML ベースのテンプレート構文を使っているので、Vue インスタンスのデータと描画された DOM を宣言的に対応させることができます。全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な HTML です。
44

5-
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 number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
5+
内部では、Vue はテンプレートを仮想 (Virtual) DOM の描画 (render) 関数にコンパイルします。リアクティブシステムと組み合わせて、Vue は再描画に必要なコンポーネントをインテリジェントに把握でき、アプリケーションの状態が変わった時に最低限の DOM 操作を適用します
66

7-
If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also [directly write render functions](render-function.html) instead of templates, with optional JSX support.
7+
もし、あなたが仮想 DOM の概要に詳しく、JavaScript で直接描画するのを好む場合、テンプレートの代わりに[直接 render 関数で書く](render-function.html)ことも可能で、オプションで JSX をサポートしています。
88

9-
## Interpolations
9+
## 展開
1010

11-
### Text
11+
### テキスト
1212

13-
The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces):
13+
データバインディングのもっとも基本的な形は、”Mustache” 構文(二重中括弧)を利用したテキスト展開です:
1414

1515
```html
1616
<span>Message: {{ msg }}</span>
1717
```
1818

19-
The mustache tag will be replaced with the value of the `msg` property on the corresponding data object. It will also be updated whenever the data object's `msg` property changes.
19+
mustache タグは、対応するオブジェクトの `msg` プロパティの値に置き換えられます。また、`msg` プロパティが変更される時、それに応じて更新されます。
2020

21-
You can also perform one-time interpolations that do not update on data change by using the [v-once directive](../api/directives.html#v-once), but keep in mind this will also affect any other bindings on the same node:
21+
[v-once ディレクティブ](../api/directives.html#v-once)を使用することで、データ変更時の更新はおこなわず、一度だけ展開することができます。ただし、同じノードのあらゆる他のバインディングが影響を受けることに注意してください:
2222

2323
```html
2424
<span v-once>This will never change: {{ msg }}</span>
2525
```
2626

27-
### Raw HTML
27+
### 生の HTML
2828

29-
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](../api/directives.html#v-html):
29+
2重中括弧の mustaches は、データを HTML ではなく、プレーンなテキストとして扱います。実際の HTML として出力するためには、[`v-html` ディレクティブ](../api/directives.html#v-html)を使用する必要があります:
3030

3131
```html
3232
<p>Using mustaches: {{ rawHtml }}</p>
@@ -40,31 +40,31 @@ The double mustaches interprets the data as plain text, not HTML. In order to ou
4040
</p>
4141
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
4242

43-
The contents of the `span` will be replaced with the value of the `rawHtml` property, interpreted 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.
43+
この `span` のコンテンツは `rawHtml` プロパティの値に置き換えられ、プレーンな HTML として解釈されます。Vue は、文字列ベースのテンプレートエンジンではないので、`v-html` をテンプレート部品を構成して使用できないことに注意しましょう。代わりに、UI の再利用や組み合わせのための基礎として、コンポーネントを利用することが好ましいです。
4444

4545
::: tip
46-
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content
46+
[XSS 脆弱性](https://en.wikipedia.org/wiki/Cross-site_scripting)を容易に引き起こすので、ウェブサイトで動的に任意の HTML を描画することは、非常に危険です。信頼できるコンテンツにだけ HTML 展開を利用してください。ユーザーから提供されたコンテンツに対しては**決して**使用してはいけません。
4747
:::
4848

49-
### Attributes
49+
### 属性
5050

51-
Mustaches cannot be used inside HTML attributes. Instead, use a [`v-bind` directive](../api/#v-bind):
51+
Mustache は、HTML 属性の内部で使用することはできません。代わりに、[`v-bind` ディレクティブ](../api/#v-bind)を使用してください:
5252

5353
```html
5454
<div v-bind:id="dynamicId"></div>
5555
```
5656

57-
In the case of boolean attributes, where their mere existence implies `true`, `v-bind` works a little differently. In this example:
57+
属性が単に存在していることを `true` と示すといった真偽値属性の場合、`v-bind` は少し異なった働きをします。この例では:
5858

5959
```html
6060
<button v-bind:disabled="isButtonDisabled">Button</button>
6161
```
6262

63-
If `isButtonDisabled` has the value of `null` or `undefined`, the `disabled` attribute will not even be included in the rendered `<button>` element.
63+
`isButtonDisabled` `null` または `undefined` の場合、`disabled` 属性は描画された `<button>` 要素に含められません。
6464

65-
### Using JavaScript Expressions
65+
### JavaScript 式の使用
6666

67-
So far we've only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings:
67+
これまで、テンプレートに単純なキーをバインディングしてきました。実際には Vue.js は全てのデータバインディング内部で JavaScript 式を完全にサポートします:
6868

6969
```html
7070
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('')
@@ -73,137 +73,137 @@ So far we've only been binding to simple property keys in our templates. But Vue
7373
<div v-bind:id="'list-' + id"></div>
7474
```
7575

76-
These expressions will be evaluated as JavaScript in the data scope of the current active instance. One restriction is that each binding can only contain **one single expression**, so the following will **NOT** work:
76+
これらの式は、Vue インスタンスが所有するデータスコープ内で JavaScript として評価されます。制限として、それぞれのバインディングは、**単一の式**だけ含むことができるというものです。なので、以下は動作**しません**:
7777

7878
```html
79-
<!-- this is a statement, not an expression: -->
79+
<!-- これは文であり、式ではありません: -->
8080
{{ var a = 1 }}
8181

82-
<!-- flow control won't work either, use ternary expressions -->
82+
<!-- フロー制御はいずれも動作しません。三項演算子を使用してください。 -->
8383
{{ if (ok) { return message } }}
8484
```
8585

86-
## Directives
86+
## ディレクティブ
8787

88-
Directives are special attributes with the `v-` prefix. Directive attribute values are expected to be **a single JavaScript expression** (with the exception of `v-for` and `v-on`, which will be discussed later). A directive's job is to reactively apply side effects to the DOM when the value of its expression changes. Let's review the example we saw in the introduction:
88+
ディレクティブは `v-` から始まる特別な属性です。ディレクティブ属性値は、**単一の JavaScript **を期待します(ただし、`v-for` `v-on` は例外で、これについては後から説明します)。ディレクティブの仕事は、属性値の式が変化したときに、リアクティブに副作用を DOM に適用することです。イントロダクションで見た例を振り返ってみましょう:
8989

9090
```html
9191
<p v-if="seen">Now you see me</p>
9292
```
9393

94-
Here, the `v-if` directive would remove/insert the `<p>` element based on the truthiness of the value of the expression `seen`.
94+
ここでの `v-if` ディレクティブは `seen` 式の値が真か否かに基づいて、`<p>` 要素を削除/挿入します。
9595

96-
### Arguments
96+
### 引数
9797

98-
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:
98+
ディレクティブの中には "引数" を取るものもあります。これはディレクティブ名の後にコロンで表記します。例えば、`v-bind` ディレクティブは、リアクティブに HTML 属性を更新します:
9999

100100
```html
101101
<a v-bind:href="url"> ... </a>
102102
```
103103

104-
Here `href` is the argument, which tells the `v-bind` directive to bind the element's `href` attribute to the value of the expression `url`.
104+
ここでの `href` は式 `url` の値を要素の `href` 属性へバインドすることを `v-bind` ディレクティブへ伝える引数です。
105105

106-
Another example is the `v-on` directive, which listens to DOM events:
106+
別の例で `v-on` ディレクティブを見てみましょう。これは DOM イベントを受け取ります:
107107

108108
```html
109109
<a v-on:click="doSomething"> ... </a>
110110
```
111111

112-
Here the argument is the event name to listen to. We will talk about event handling in more detail too.
112+
ここでの引数は受け取りたいイベント名です。ここからイベントハンドリングの詳細について説明します。
113113

114-
### Dynamic Arguments
114+
### 動的引数
115115

116-
It is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets:
116+
角括弧で囲むことで JavaScript 式をディレクティブの引数に使うこともできます:
117117

118118
```html
119119
<!--
120-
Note that there are some constraints to the argument expression, as explained
121-
in the "Dynamic Argument Expression Constraints" section below.
120+
動的引数には、"動的引数の式の制約" の節で後述されるように、いくつかの制約がある点に注意してください。
122121
-->
123122
<a v-bind:[attributeName]="url"> ... </a>
124123
```
125124

126-
Here `attributeName` will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument. For example, if your application instance has a data property, `attributeName`, whose value is `"href"`, then this binding will be equivalent to `v-bind:href`.
125+
ここで `attributeName` JavaScript 式として動的に評価され、その評価結果が引数の最終的な値として使われます。例えば、Vue インスタンスが `"href"` という値の `attributeName` という data プロパティをもつ場合、このバインディングは `v-bind:href` と等しくなります。
127126

128-
Similarly, you can use dynamic arguments to bind a handler to a dynamic event name:
127+
同様に、動的なイベント名にハンドラをバインドするために動的引数を使うこともできます:
129128

130129
```html
131130
<a v-on:[eventName]="doSomething"> ... </a>
132131
```
133132

134-
In this example, when `eventName`'s value is `"focus"`, `v-on:[eventName]` will be equivalent to `v-on:focus`.
133+
この例では、`eventName` の値が `"focus"` だとすると、`v-on:[eventName]` `v-on:focus` と等しくなります。
135134

136-
### Modifiers
135+
### 修飾子
137136

138-
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:
137+
修飾子 (Modifier) はドットで表記された特別な接尾語で、ディレクティブが特別な方法でバインドされるということを示します。例えば `.prevent` 修飾子は `v-on` ディレクティブに、イベントがトリガされた際 `event.preventDefault()` を呼ぶように伝えます:
139138

140139
```html
141140
<form v-on:submit.prevent="onSubmit">...</form>
142141
```
143142

144-
You'll see other examples of modifiers later, [for `v-on`](events.md#event-modifiers) and [for `v-model`](forms.md#modifiers), when we explore those features.
143+
後ほど[ `v-on` ](events.html#イベント修飾子)および[ `v-model` ](forms.html#修飾子)の節を読む際、修飾子の他の例を見るでしょう。
145144

146-
## Shorthands
145+
## 省略記法
147146

148-
The `v-` prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building a [SPA](https://en.wikipedia.org/wiki/Single-page_application), where Vue manages every template. Therefore, Vue provides special shorthands for two of the most often used directives, `v-bind` and `v-on`:
147+
`v-` 接頭辞は、テンプレート内の Vue 独自の属性を識別するための目印となっています。これは既存のマークアップに対して、Vue.js を利用して動的な振る舞いを適用する場合に便利ですが、頻繁に利用されるディレクティブに対しては冗長に感じることがあるでしょう。同じく全てのテンプレートを Vue で管理して[シングルページアプリケーション](https://en.wikipedia.org/wiki/Single-page_application)を作る場合、`v-` 接頭辞を付ける必要性は低いものになるでしょう。そのため、 Vue は2つの最もよく使われるディレクティブ `v-bind` `v-on` に対して特別な省略記法を提供しています:
149148

150-
### `v-bind` Shorthand
149+
### `v-bind` 省略記法
151150

152151
```html
153-
<!-- full syntax -->
152+
<!-- 完全な構文 -->
154153
<a v-bind:href="url"> ... </a>
155154

156-
<!-- shorthand -->
155+
<!-- 省略記法 -->
157156
<a :href="url"> ... </a>
158157

159-
<!-- shorthand with dynamic argument -->
158+
<!-- 動的引数の省略記法 -->
160159
<a :[key]="url"> ... </a>
161160
```
162161

163-
### `v-on` Shorthand
162+
### `v-on` 省略記法
164163

165164
```html
166-
<!-- full syntax -->
165+
<!-- 完全な構文 -->
167166
<a v-on:click="doSomething"> ... </a>
168167

169-
<!-- shorthand -->
168+
<!-- 省略記法 -->
170169
<a @click="doSomething"> ... </a>
171170

172-
<!-- shorthand with dynamic argument (2.6.0+) -->
171+
<!-- 動的引数の省略記法 -->
173172
<a @[event]="doSomething"> ... </a>
174173
```
175174

176-
They may look a bit different from normal HTML, but `:` and `@` are valid characters for attribute names and all Vue-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.
175+
これらは普通の HTML とはちょっと違うように見えるかもしれません。ですが `:` `@` は属性名に利用可能な文字で、Vue のサポートしているすべてのブラウザで正しくパースすることができます。加えて、最終的に描画されるマークアップにそれらは現れません。省略記法の構文の利用は完全に任意ですが、後でその使用方法について詳しく学んだ時に便利と感じることでしょう。
177176

178-
> From the next page on, we'll use the shorthand in our examples, as that's the most common usage for Vue developers.
177+
> 省略記法は Vue 開発者にとって一般的な使用法のため、次のページからの例は省略記法を使っています。
179178
180-
### Caveats
179+
### 注意事項
181180

182-
#### Dynamic Argument Value Constraints
181+
#### 動的引数の値の制約
183182

184-
Dynamic arguments are expected to evaluate to a string, with the exception of `null`. The special value `null` can be used to explicitly remove the binding. Any other non-string value will trigger a warning.
183+
動的引数は、`null` を除くと string に評価されることが想定されています。特殊値 `null` は、明示的にバインディングを削除するのに使われます。その他の string 以外の値は、警告を発生させます。
185184

186-
#### Dynamic Argument Expression Constraints
185+
#### 動的引数の式の制約
187186

188-
Dynamic argument expressions have some syntax constraints because certain characters, such as spaces and quotes, are invalid inside HTML attribute names. For example, the following is invalid:
187+
動的引数の式には構文上の制約があります。というのも、スペースや引用符のような一部の文字は、HTML の属性名としては不正な文字だからです。例えば、以下は不正です:
189188

190189
```html
191-
<!-- This will trigger a compiler warning. -->
190+
<!-- これはコンパイラ警告を引き起こします -->
192191
<a v-bind:['foo' + bar]="value"> ... </a>
193192
```
194193

195-
We recommend replacing any complex expressions with a [computed property](computed.html), one of the most fundamental pieces of Vue, which we'll cover shortly.
194+
回避策は複雑な式を[算出プロパティ](computed.html)で置き換える方法です、Vue の最も基本的な機能の一つであり後ほど説明します。
196195

197-
When using in-DOM templates (templates directly written in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:
196+
197+
in-DOM テンプレート (すなわち、HTML ファイルに直接書かれるテンプレート) を使う場合、ブラウザが強制的に属性名を小文字にするため、キー名を大文字にするのは避けるべきです:
198198

199199
```html
200200
<!--
201-
This will be converted to v-bind:[someattr] in in-DOM templates.
202-
Unless you have a "someattr" property in your instance, your code won't work.
201+
in-DOM テンプレートの中では、v-bind:[someattr] に変換されます。
202+
インスタンスに "someattr" プロパティがない場合、このコードは動作しません。
203203
-->
204204
<a v-bind:[someAttr]="value"> ... </a>
205205
```
206206

207-
#### JavaScript Expressions
207+
#### JavaScript 式 の制約
208208

209-
Template expressions are sandboxed and only have access to a [whitelist of globals](https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3) such as `Math` and `Date`. You should not attempt to access user defined globals in template expressions.
209+
テンプレート式はサンドボックスで、`Math``Date` といった [ホワイトリストにあるグローバルオブジェクト](https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3)だけにアクセスできます。テンプレート式内でユーザーが定義したグローバルオブジェクトにアクセスしようとしてはいけません。

0 commit comments

Comments
 (0)