@@ -165,9 +165,9 @@ Vue.createApp(TwoWayBinding).mount('#two-way-binding')
-## Conditionals and Loops
+## 条件分岐とループ
-It's easy to toggle the presence of an element, too:
+要素の有無を切り替えることも非常に簡単です:
```html
@@ -187,9 +187,9 @@ const ConditionalRendering = {
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
```
-This example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](transitions-enterleave.md) when elements are inserted/updated/removed by Vue.
+この例は、テキストや属性だけでなく、DOM の**構造**にもデータを束縛できることを示しています。さらに Vue には、要素が Vue によって挿入/更新/削除されたとき、自動的に[トランジションエフェクト(遷移効果)](transitions-enterleave.md)を適用する強力なトランジションエフェクトシステムも提供します。
-You can change `seen` from `true` to `false` in the sandbox below to check the effect:
+以下のサンドボックスで `seen` を `true` から `false` に変更すると、エフェクトを確認することができます:
See the Pen
@@ -198,7 +198,7 @@ You can change `seen` from `true` to `false` in the sandbox below to check the e
-There are quite a few other directives, each with its own special functionality. For example, the `v-for` directive can be used to display a list of items using the data from an Array:
+Vue.js には他にもかなりの数のディレクティブがあり、それぞれが特定の機能を持っています。例えば、`v-for` ディレクティブを使えばアイテムのリストを配列内のデータを使って表示することができます:
```html
@@ -233,37 +233,37 @@ Vue.createApp(ListRendering).mount('#list-rendering')
-## Composing with Components
+## コンポーネントによる構成
-The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:
+コンポーネントシステムは Vue におけるもうひとつの重要なコンセプトです。それは「小さく、自己完結的で、（多くの場合）再利用可能なコンポーネント」を組み合わせることで、大規模アプリケーションの構築を可能にする概念です。考えてみれば、ほぼすべてのタイプのアプリケーションインターフェイスは、コンポーネントツリーとして抽象化できます。
-
+
-In Vue, a component is essentially an instance with pre-defined options. Registering a component in Vue is straightforward: we create a component object as we did with `App` objects and we define it in parent's `components` option:
+Vue において、コンポーネントは本質的にはあらかじめ定義されたオプションを持つインスタンスです。Vue を使ってコンポーネントを登録するのはいたって簡単で、`App` オブジェクトと同様にコンポーネントオブジェクトを作成し、親の `components` オプションで定義します:
```js
-// Create Vue application
+// Vue アプリケーションを生成する
const app = Vue.createApp(...)
-// Define a new component called todo-item
+// todo-item という名前の新しいコンポーネントを定義する
app.component('todo-item', {
template: `
This is a todo`
})
-// Mount Vue application
+// Vue application をマウントする
app.mount(...)
```
-Now you can compose it in another component's template:
+これで他のコンポーネントのテンプレートからこのコンポーネントを利用できるようになります:
```html
-
+
```
-But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](component-basics.html#passing-data-to-child-components-with-props):
+しかし、これでは全ての todo で同じ文字列がレンダリングされてしまうだけで、あまり面白くありません。親のスコープから子コンポーネントへとデータを渡せるようにすべきです。[プロパティ](component-basics.html#passing-data-to-child-components-with-props)を受け取れるようにコンポーネントの定義を変えてみましょう:
```js
app.component('todo-item', {
@@ -272,16 +272,15 @@ app.component('todo-item', {
})
```
-Now we can pass the todo into each repeated component using `v-bind`:
+こうすることで、繰り返されるコンポーネントそれぞれに `v-bind` を使って todo を渡すことができます:
```html
-This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `` component with more complex template and logic without affecting the parent app.
+このサンプルは不自然ではありますが、アプリケーションをより小さな単位に分割することに成功し、またプロパティのインターフェイスによって子コンポーネントは適切に疎結合な状態になりました。ここからさらに `` コンポーネントを、より複雑なテンプレートやロジックを使って、親コンポーネントに影響を与えることなく改良することができます。
-In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](component-basics.md), but here's an (imaginary) example of what an app's template might look like with components:
+大規模なアプリケーションでは、開発をおこないやすくするために、アプリケーション全体をコンポーネントに分割することが必要です。コンポーネントについては[ガイドの後半](component-basics.md)でより詳しく述べますが、コンポーネントを使ったアプリケーションのテンプレートがどういうものになるか、(架空の)例をここに載せておきます:
```html
@@ -336,18 +335,18 @@ In a large application, it is necessary to divide the whole app into components
```
-### Relation to Custom Elements
+### カスタム要素との関係
-You may have noticed that Vue components are very similar to **Custom Elements**, which are part of the [Web Components Spec](https://www.w3.org/wiki/WebComponents/). That's because Vue's component syntax is loosely modeled after the spec. For example, Vue components implement the [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) and the `is` special attribute. However, there are a few key differences:
+Vue のコンポーネントが [Web Components 仕様](https://www.w3.org/wiki/WebComponents/) の一部である **カスタム要素 (Custom Elements)** によく似ていることに気付いたかもしれません。これは Vue のコンポーネント構文はその仕様を手本にしているためです。例えば、Vue コンポーネントは [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) と `is` という特別な属性を実装しています。しかしながら、いくつか重要な違いがあります:
-1. The Web Components Spec has been finalized but is not natively implemented in every browser. Safari 10.1+, Chrome 54+ and Firefox 63+ natively support web components. In comparison, Vue components work consistently in all supported browsers (IE11 with compatibility build and above). When needed, Vue components can also be wrapped inside a native custom element.
+1. Web Components の仕様は確定しましたが、全てのブラウザにネイティブ実装されているわけではありません。Safari 10.1 以上、Chrome 54 以上、Firefox 63 以上が Web Components をネイティブでサポートしています。一方、Vue コンポーネントは、サポートされる全てのブラウザ（互換ビルドでは IE11 以上）で同じ動作をします。必要があれば、Vue コンポーネントはネイティブなカスタム要素内に含めることもできます。
[//]: # 'TODO: link to compatibility build'
-2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations.
+2. Vue コンポーネントは、通常のカスタム要素では利用できない重要な機能、中でもクロスコンポーネントデータフロー、カスタムイベント通信やビルドツールとの統合といったものを提供します。
-Although Vue doesn't use custom elements internally, it has [great interoperability](https://custom-elements-everywhere.com/#vue) when it comes to consuming or distributing as custom elements. Vue CLI also supports building Vue components that register themselves as native custom elements.
+Vue は内部的にはカスタム要素を使っていませんが、カスタム要素として使用または配布する場合に [優れた相互運用性](https://custom-elements-everywhere.com/#vue) があります。Vue CLI では、それ自身をネイティブのカスタム要素として登録するような Vue コンポーネントの構築もサポートしています。
-## Ready for More?
+## 準備ができましたか？
-We've briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all!
+Vue.js コアの基本的な機能について簡単に紹介しました。このガイドの残りの部分では、基本的な機能だけでなく他の高度な機能についてもっと詳しく扱うので、全てに目を通すようにしてください！