翻訳終わり🎉（残: URLの日本語化）

Author: kou1127h

src/guide/component-basics.md

@@ -225,13 +225,13 @@ app.component('blog-post', {
 <blog-post ... @enlarge-text="postFontSize += 0.1"></blog-post>
 ```
 
-Then the child component can emit an event on itself by calling the built-in [**`$emit`** method](../api/instance-methods.html#emit), passing the name of the event:
+そして子コンポーネントはビルトインの [**`$emit`** メソッド](../api/instance-methods.html#emit) にイベントの名前を渡して呼び出すことで、イベントを送出することができます:
 
 ```html
 <button @click="$emit('enlarge-text')">Enlarge text</button>
 ```
 
-Thanks to the `v-on:enlarge-text="postFontSize += 0.1"` listener, the parent will receive the event and update `postFontSize` value.
+親コンポーネントは `v-on:enlarge-text="postFontSize += 0.1"` リスナーによって、このイベントを受け取り `postFontSize` を更新することができます。
 
 <p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="KKpGyrp" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: emitting events">
   <span>See the Pen <a href="https://codepen.io/team/Vue/pen/KKpGyrp">
@@ -240,7 +240,7 @@ Thanks to the `v-on:enlarge-text="postFontSize += 0.1"` listener, the parent wil
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
-We can list emitted events in the component's `emits` option.
+コンポーネントの `emits` オプションにより排出されたイベントをリストアップすることができます。
 
 ```js
 app.component('blog-post', {
@@ -249,29 +249,29 @@ app.component('blog-post', {
 })
 ```
 
-This will allow you to check all the events component emits and optionally [validate them](component-custom-events.html#validate-emitted-events)
+これにより、コンポーネントが排出する全てのイベントをチェックし、オプションでそれらを [検証する](component-custom-events.html#validate-emitted-events) ことができます。
 
-### Emitting a Value With an Event
+### イベントと値を送出する
 
-It's sometimes useful to emit a specific value with an event. For example, we may want the `<blog-post>` component to be in charge of how much to enlarge the text by. In those cases, we can use `$emit`'s 2nd parameter to provide this value:
+イベントを特定の値と一緒に送出すると便利な場合があります。例えば、テキストをどれだけ大きく表示するかを `<blog-post>` コンポーネントの責務とさせたいかもしれません。そのような場合、 `$emit` の第二引数を使ってこの値を渡すことができます:
 
 ```html
 <button @click="$emit('enlarge-text', 0.1)">Enlarge text</button>
 ```
 
-Then when we listen to the event in the parent, we can access the emitted event's value with `$event`:
+そして親でこのイベントを購読すると、 `$event` を用いて排出されたイベントの値にアクセスすることができます:
 
 ```html
 <blog-post ... @enlarge-text="postFontSize += $event"></blog-post>
 ```
 
-Or, if the event handler is a method:
+または、イベントハンドラがメソッドの場合:
 
 ```html
 <blog-post ... @enlarge-text="onEnlargeText"></blog-post>
 ```
 
-Then the value will be passed as the first parameter of that method:
+値はそのメソッドの第一引数として渡されます:
 
 ```js
 methods: {
@@ -281,21 +281,21 @@ methods: {
 }
 ```
 
-### Using `v-model` on Components
+### コンポーネントで `v-model` を使う
 
-Custom events can also be used to create custom inputs that work with `v-model`. Remember that:
+カスタムイベントは `v-model` で動作するカスタム入力を作成することもできます。このことを覚えておいてください:
 
 ```html
 <input v-model="searchText" />
 ```
 
-does the same thing as:
+これは以下と同じことです:
 
 ```html
 <input :value="searchText" @input="searchText = $event.target.value" />
 ```
 
-When used on a component, `v-model` instead does this:
+コンポーネントで使用する場合、 `v-model` は代わりにこれを行います:
 
 ```html
 <custom-input
@@ -305,15 +305,15 @@ When used on a component, `v-model` instead does this:
 ```
 
 ::: warning
-Please note we used `model-value` with kebab-case here because we are working with in-DOM template. You can find a detailed explanation on kebab-cased vs camelCased attributes in the [DOM Template Parsing Caveats](#dom-template-parsing-caveats) section
+ここでは in-DOM テンプレートを使用しているため、 `model-value` をケバブケースで表記していることに注意してください。ケバブケースの属性とキャメルケースの属性に関しては [DOM テンプレートの構文解析の注意点](#dom-template-parsing-caveats) の章で詳しく解説されています。
 :::
 
-For this to actually work though, the `<input>` inside the component must:
+これが実際に機能するためには、テンプレート内の `<input>` は以下でなければなりません:
 
-- Bind the `value` attribute to a `modelValue` prop
-- On `input`, emit an `update:modelValue` event with the new value
+- `value` 属性を `modelValue` プロパティにバインドする
+- `input` では、 `update:modelValue` イベントを新しい値と共に送出する
 
-Here's that in action:
+以下のようになります:
 
 ```js
 app.component('custom-input', {
@@ -327,17 +327,17 @@ app.component('custom-input', {
 })
 ```
 
-Now `v-model` should work perfectly with this component:
+これで `v-model` はこのコンポーネントで完璧に動作します:
 
 ```html
 <custom-input v-model="searchText"></custom-input>
 ```
 
-Another way of creating the `v-model` capability within a custom component is to use the ability of `computed` properties' to define a getter and setter.
+カスタムコンポーネント内で `v-model` を使うもう一つの方法は `computed` プロパティを利用してゲッターとセッターを定義することです。
 
-In the following example, we refactor the `custom-input` component using a computed property.
+以下の例では、computed プロパティを用いて `custom-input` コンポーネントをリファクタリングします。
 
-Keep in mind, the `get` method should return the `modelValue` property, or whichever property is being using for binding, and the `set` method should fire off the corresponding `$emit` for that property.
+注意して欲しいのは、 `get` メソッドは `modelValue` 属性を返し、バインディングに使用しているプロパティがどれであるかに関わらず、 `set` メソッドはそのプロパティに対応する `$emit` を送出しなければならないということです。
 
 ```js
 app.component('custom-input', {
@@ -358,17 +358,17 @@ app.component('custom-input', {
 })
 ```
 
-That's all you need to know about custom component events for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Custom Events](component-custom-events.md).
+とりあえずカスタムコンポーネントイベントについてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて [カスタムイベント](component-custom-events.md) の完全なガイドを読むことをお勧めします。
 
-## Content Distribution with Slots
+## スロットによるコンテンツ配信
 
-Just like with HTML elements, it's often useful to be able to pass content to a component, like this:
+HTML 要素のように、コンポーネントに要素を渡すことができると便利なことがよくあります。例えば以下の通り:
 
 ```html
 <alert-box> Something bad happened. </alert-box>
 ```
 
-Which might render something like:
+これは以下のように描画されるでしょう。:
 
 <p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="jOPeaob" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: slots">
   <span>See the Pen <a href="https://codepen.io/team/Vue/pen/jOPeaob">
@@ -377,7 +377,7 @@ Which might render something like:
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
-Fortunately, this task is made very simple by Vue's custom `<slot>` element:
+幸いにも、この作業は Vue のカスタム `<slot>` 要素により非常に簡単になります:
 
 ```js
 app.component('alert-box', {
@@ -390,13 +390,13 @@ app.component('alert-box', {
 })
 ```
 
-As you'll see above, we just add the slot where we want it to go -- and that's it. We're done!
+上で見た通り、ただ渡したいところにスロットを追加するだけです。それだけです。終わりです！
 
-That's all you need to know about slots for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Slots](component-slots.md).
+とりあえずスロットについてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて [スロット](component-slots.md) の完全なガイドを読むことをお勧めします。
 
-## Dynamic Components
+## 動的なコンポーネント
 
-Sometimes, it's useful to dynamically switch between components, like in a tabbed interface:
+タブ付きのインターフェースのように、コンポーネント間を動的に切り替えると便利なことがあります:
 
 <p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="oNXaoKy" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: dynamic components">
   <span>See the Pen <a href="https://codepen.io/team/Vue/pen/oNXaoKy">
@@ -405,37 +405,37 @@ Sometimes, it's useful to dynamically switch between components, like in a tabbe
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
-The above is made possible by Vue's `<component>` element with the `is` special attribute:
+上記は Vue の `<component>` 属性に特別な属性である `is` を持たせることで実現しています:
 
 ```html
-<!-- Component changes when currentTabComponent changes -->
+<!-- コンポーネントは currentTabComponent に変更があったときに変更されます -->
 <component :is="currentTabComponent"></component>
 ```
 
-In the example above, `currentTabComponent` can contain either:
+上記の例では、 `currentTabComponent` は以下のいずれかを含むことができます:
 
-- the name of a registered component, or
-- a component's options object
+- 登録されたコンポーネントの名前、または
+- コンポーネントのオプションオブジェクト
 
-See [this sandbox](https://codepen.io/team/Vue/pen/oNXaoKy) to experiment with the full code, or [this version](https://codepen.io/team/Vue/pen/oNXapXM) for an example binding to a component's options object, instead of its registered name.
+完全なコードを試すには [この例](https://codepen.io/team/Vue/pen/oNXaoKy)、登録された名前ではなくコンポーネントのオプションオブジェクトをバインドしている例は [こちらのバージョン](https://codepen.io/team/Vue/pen/oNXapXM) を参照してください。
 
-Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes **will be bound as DOM attributes**. For some properties such as `value` to work as you would expect, you will need to bind them using the [`.prop` modifier](../api/directives.html#v-bind).
+この属性は通常の HTML 要素で使用することができますが、それらはコンポーネントとして扱われ、すべての属性は **DOM 属性としてバインドされる**ことを覚えておいてください。 `value` のようないくつかのプロパティが期待通りに動作するためには、 [`.prop` 修飾子](../api/directives.html#v-bind) を用いてバインドする必要があります。
 
-That's all you need to know about dynamic components for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Dynamic & Async Components](./component-dynamic-async.html).
+とりあえず動的なコンポーネントについてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて [動的 & 非同期コンポーネント](./component-dynamic-async.html) の完全なガイドを読むことをお勧めします。
 
-## DOM Template Parsing Caveats
+## DOM テンプレートパース時の警告
 
-Some HTML elements, such as `<ul>`, `<ol>`, `<table>` and `<select>` have restrictions on what elements can appear inside them, and some elements such as `<li>`, `<tr>`, and `<option>` can only appear inside certain other elements.
+`<ul>` 、 `<ol>` 、 `<table>` 、 `<select>` のようないくつかの HTML 属性にはその内側でどの要素が現れるかに制限があり、`<li>` 、 `<tr>` 、 `<option>` のようないくつかの属性は他の特定の要素の中にしか現れません。
 
-This will lead to issues when using components with elements that have such restrictions. For example:
+このような制限を持つ属性を含むコンポーネントを使用すると問題が発生することがあります。例えば:
 
 ```html
 <table>
   <blog-post-row></blog-post-row>
 </table>
 ```
 
-The custom component `<blog-post-row>` will be hoisted out as invalid content, causing errors in the eventual rendered output. Fortunately, we can use `v-is` special directive as a workaround:
+このカスタムコンポート `<blog-post-row>` は無効なコンテンツとして摘み出され、最終的に描画された内容にエラーが発生します。幸い、これを回避するために `v-is` という特殊なディレクティブを使用することができます:
 
 ```html
 <table>
@@ -444,22 +444,22 @@ The custom component `<blog-post-row>` will be hoisted out as invalid content, c
 ```
 
 :::warning
-`v-is` value should be a JavaScript string literal:
+`v-is` の値は JavaScript の文字列リテラルである必要があります:
 
 ```html
-<!-- Incorrect, nothing will be rendered -->
+<!-- 間違い、何も出力されません-->
 <tr v-is="blog-post-row"></tr>
 
-<!-- Correct -->
+<!-- 正解 -->
 <tr v-is="'blog-post-row'"></tr>
 ```
 
 :::
 
-Also, HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names and event handler parameters need to use their kebab-cased (hyphen-delimited) equivalents:
+また、 HTML の属性名は大文字小文字を区別しないので、ブラウザは全ての大文字を小文字として解釈します。つまり、 in-DOM テンプレートを使用している場合、キャメルケースのプロパティ名やイベントハンドラのパラメータはそれと同等のケバブケース（ハイフンで区切られた記法）を使用する必要があります:
 
 ```js
-// camelCase in JavaScript
+// JavaScript ではキャメルケース
 
 app.component('blog-post', {
   props: ['postTitle'],
@@ -470,17 +470,17 @@ app.component('blog-post', {
 ```
 
 ```html
-<!-- kebab-case in HTML -->
+<!-- HTML ではケバブケース -->
 
 <blog-post post-title="hello!"></blog-post>
 ```
 
-It should be noted that **these limitations does _not_ apply if you are using string templates from one of the following sources**:
+**これらの制限は次のソースのいずれかの文字列テンプレートを使用している場合 _適用されない_ ことに**気をつけてください:
 
-- String templates (e.g. `template: '...'`)
-- [Single-file (`.vue`) components](single-file-component.html)
+- 文字列テンプレート (例: `template: '...'`)
+- [単一ファイル (`.vue`) コンポーネント](single-file-component.html)
 - `<script type="text/x-template">`
 
-That's all you need to know about DOM template parsing caveats for now - and actually, the end of Vue's _Essentials_. Congratulations! There's still more to learn, but first, we recommend taking a break to play with Vue yourself and build something fun.
+とりあえず DOM テンプレートパース時の警告についてはこれで以上です。そして実は、Vue の _本質_ の最後となります。おめでとうございます! まだまだ学ぶべきことはありますが、まずは一休みして自分で Vue で遊んで楽しいものを作ってみることをお勧めします。
 
-Once you feel comfortable with the knowledge you've just digested, we recommend coming back to read the full guide on [Dynamic & Async Components](component-dynamic-async.html), as well as the other pages in the Components In-Depth section of the sidebar.
+理解したばかりの知識に慣れてきたら、サイドバーのコンポーネントの詳細セクションの他のページと同様に、[動的 & 非同期コンポーネント](component-dynamic-async.html)の完全なガイドを読むために戻ってくることをお勧めします。