diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md index 4696fd30..d9b71985 100644 --- a/src/guide/component-basics.md +++ b/src/guide/component-basics.md @@ -1,14 +1,14 @@ -# Components Basics +# コンポーネントの基本 -## Base Example +## 基本例 -Here's an example of a Vue component: +Vue コンポーネントの例を次に示します: ```js -// Create a Vue application +// Vue アプリケーションを作成します const app = Vue.createApp({}) -// Define a new global component called button-counter +// グローバルな button-counter というコンポーネントを定義します app.component('button-counter', { data() { return { @@ -23,10 +23,10 @@ app.component('button-counter', { ``` ::: info -We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html). +ここでは単純な例を示していますが, 典型的な Vue アプリケーションでは文字列テンプレートではなく単一ファイルコンポーネントを使用します。 詳しくは[こちら](single-file-component.html)で解説しています。 ::: -Components are reusable instances with a name: in this case, ``. We can use this component as a custom element inside a root instance: +コンポーネントは名前付きの再利用可能なインスタンスです。この例の場合は``です。このコンポーネントをルートインスタンスの中でカスタム要素として使用することができます。 ```html
@@ -45,11 +45,11 @@ app.mount('#components-demo')

-Since components are reusable instances, they accept the same options as a root instance, such as `data`, `computed`, `watch`, `methods`, and lifecycle hooks. The only exceptions are a few root-specific options like `el`. +コンポーネントは再利用可能なインスタンスなので、`data`、 `computed`、 `watch`、 `methods`、そしてライフサイクルフックのようなルートインスタンスと同様のオプションが利用可能です。唯一の例外は `el` のようなルート固有のオプションです。 -## Reusing Components +## コンポーネントの再利用 -Components can be reused as many times as you want: +コンポーネントは必要なだけ何度でも再利用できます: ```html
@@ -66,35 +66,35 @@ Components can be reused as many times as you want:

-Notice that when clicking on the buttons, each one maintains its own, separate `count`. That's because each time you use a component, a new **instance** of it is created. +ボタンをクリックすると、それぞれが独自の `count` を保持することに注意してください。 これはコンポーネントを使用する度に新しいコンポーネントの**インスタンス**が作成されるためです。 -## Organizing Components +## コンポーネントの構成 -It's common for an app to be organized into a tree of nested components: +一般的にアプリケーションはネストされたコンポーネントのツリーに編成されます: -![Component Tree](/images/components.png) +![コンポーネントツリー](/images/components.png) -For example, you might have components for a header, sidebar, and content area, each typically containing other components for navigation links, blog posts, etc. +例えば、 ヘッダー、サイドバー、コンテンツエリアなどのコンポーネントがあり、それぞれには一般的にナビゲーションリンクやブログ投稿などのコンポーネントが含まれています。 -To use these components in templates, they must be registered so that Vue knows about them. There are two types of component registration: **global** and **local**. So far, we've only registered components globally, using `component` method of created app: +これらのコンポーネントをテンプレートで使用するためには、 Vue がそれらを認識できるように登録する必要があります。 コンポーネントの登録には**グローバル**と**ローカル**の 2 種類があります。これまでは、アプリケーションの `component` メソッドを利用してグローバルに登録してきただけです: ```js const app = Vue.createApp({}) app.component('my-component-name', { - // ... options ... + // ... オプション ... }) ``` -Globally registered components can be used in the template of `app` instance created afterwards - and even inside all subcomponents of that root instance's component tree. +グローバルに登録されたコンポーネントはその後作成された `app` インスタンスのテンプレートで使用することができます。さらに、ルートインスタンスのコンポーネントツリーの全てのサブコンポーネント内でも使用することが出来ます。 -That's all you need to know about registration 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 [Component Registration](component-registration.md). +とりあえずコンポーネント登録についてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて[コンポーネント登録](component-registration.md)の完全なガイドを読むことをお勧めします。 -## Passing Data to Child Components with Props +## プロパティを用いた子コンポーネントへのデータの受け渡し -Earlier, we mentioned creating a component for blog posts. The problem is, that component won't be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That's where props come in. +先ほど、 ブログ投稿用のコンポーネントの作成について触れました。問題は、 表示する特定の投稿のタイトルや内容のようなデータを作成したコンポーネントに渡せなければそのコンポーネントは役に立たないということです。プロパティはここで役立ちます。 -Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. To pass a title to our blog post component, we can include it in the list of props this component accepts, using a `props` option: +プロパティはコンポーネントに登録できるカスタム属性です。値がプロパティ属性に渡されると、そのコンポーネントインスタンスのプロパティになります。先ほどのブログ投稿用のコンポーネントにタイトルを渡すためには、`props`オプションを用いてこのコンポーネントが受け取るプロパティのリストの中に含めることができます: ```js const app = Vue.createApp({}) @@ -107,9 +107,9 @@ app.component('blog-post', { app.mount('#blog-post-demo') ``` -A component can have as many props as you'd like and by default, any value can be passed to any prop. In the template above, you'll see that we can access this value on the component instance, just like with `data`. +コンポーネントは必要に応じて多くのプロパティを持つことができ、デフォルトでは任意のプロパティに任意の値を渡すことができます。上記のテンプレートでは、`data` と同様に、コンポーネントインスタンスでこの値にアクセスできることが分かります。 -Once a prop is registered, you can pass data to it as a custom attribute, like this: +プロパティが登録されたら、 次のようにカスタム属性としてデータをプロパティに渡すことができます: ```html
@@ -126,7 +126,7 @@ Once a prop is registered, you can pass data to it as a custom attribute, like t

-In a typical app, however, you'll likely have an array of posts in `data`: +しかしながら、一般的なアプリケーションではおそらく `data` に投稿の配列を持っています: ```js const App = { @@ -151,7 +151,7 @@ app.component('blog-post', { app.mount('#blog-posts-demo') ``` -Then want to render a component for each one: +そしてコンポーネントをそれぞれ描画します: ```html
@@ -163,15 +163,15 @@ Then want to render a component for each one:
``` -Above, you'll see that we can use `v-bind` to dynamically pass props. This is especially useful when you don't know the exact content you're going to render ahead of time. +上記では、 `v-bind` を用いて動的にプロパティを渡すことができると分かります。これは描画する内容が事前に分からない場合に特に便利です。 -That's all you need to know about props 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 [Props](component-props.html). +とりあえずプロパティについてはこれで以上ですが、 このページを読み終えて十分に理解できたら、後から戻ってきて[プロパティ](component-props.html)の完全なガイドを読むことをお勧めします。 -## Listening to Child Components Events +## 子コンポーネントのイベントを購読する -As we develop our `` component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page its default size. +`` コンポーネントを開発する中で、いくつかの機能で親コンポーネントとの通信が必要になるかもしれません。例えば、残りの部分の大きさはそのままで、ブログ記事の文字の文字を拡大するアクセシビリティ機能を実装することを決めるかもしれません。 -In the parent, we can support this feature by adding a `postFontSize` data property: +親コンポーネントでは、`postFontSize` データプロパティを追加することでこの機能をサポートすることができます: ```js const App = { @@ -186,7 +186,7 @@ const App = { } ``` -Which can be used in the template to control the font size of all blog posts: +すべてのブログ投稿のフォントサイズを制御するためにテンプレート内で使用できます: ```html
@@ -196,7 +196,7 @@ Which can be used in the template to control the font size of all blog posts:
``` -Now let's add a button to enlarge the text right before the content of every post: +それでは、すべての投稿の内容の前にテキストを拡大するボタンを追加します: ```js app.component('blog-post', { @@ -212,7 +212,7 @@ app.component('blog-post', { }) ``` -The problem is, this button doesn't do anything: +問題は、このボタンが何もしないことです: ```html ``` -When we click on the button, we need to communicate to the parent that it should enlarge the text of all posts. Fortunately, component instances provide a custom events system to solve this problem. The parent can choose to listen to any event on the child component instance with `v-on` or `@`, just as we would with a native DOM event: +ボタンをクリックすると、全ての投稿のテキストを拡大する必要があることを親に伝える必要があります。親は、ネイティブ DOM イベントでの場合と同様に、 `v-on` や `@` を用いて子コンポーネントのインスタンスでのイベントを購読することができます: ```html ``` -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 ``` -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` を更新することができます。

See the Pen @@ -243,7 +243,7 @@ Thanks to the `v-on:enlarge-text="postFontSize += 0.1"` listener, the parent wil

-We can list emitted events in the component's `emits` option. +コンポーネントの `emits` オプションにより排出されたイベントをリストアップすることができます。 ```js app.component('blog-post', { @@ -252,11 +252,11 @@ 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 `` 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: +イベントを特定の値と一緒に送出すると便利な場合があります。例えば、テキストをどれだけ大きく表示するかを `` コンポーネントの責務とさせたいかもしれません。そのような場合、 `$emit` の第二引数を使ってこの値を渡すことができます: ```html ``` -Then when we listen to the event in the parent, we can access the emitted event's value with `$event`: +そして親でこのイベントを購読すると、 `$event` を用いて排出されたイベントの値にアクセスすることができます: ```html ``` -Or, if the event handler is a method: +または、イベントハンドラがメソッドの場合: ```html ``` -Then the value will be passed as the first parameter of that method: +値はそのメソッドの第一引数として渡されます: ```js methods: { @@ -286,21 +286,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 ``` -does the same thing as: +これは以下と同じことです: ```html ``` -When used on a component, `v-model` instead does this: +コンポーネントで使用する場合、 `v-model` は代わりにこれを行います: ```html ` inside the component must: +これが実際に機能するためには、テンプレート内の `` は以下でなければなりません: -- 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', { @@ -332,17 +332,17 @@ app.component('custom-input', { }) ``` -Now `v-model` should work perfectly with this component: +これで `v-model` はこのコンポーネントで完璧に動作します: ```html ``` -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', { @@ -363,11 +363,11 @@ 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 @@ -375,7 +375,7 @@ Just like with HTML elements, it's often useful to be able to pass content to a ``` -Which might render something like: +これは以下のように描画されるでしょう。:

See the Pen @@ -384,7 +384,7 @@ Which might render something like:

-Fortunately, this task is made very simple by Vue's custom `` element: +幸いにも、この作業は Vue のカスタム `` 要素により非常に簡単になります: ```js app.component('alert-box', { @@ -397,13 +397,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: +タブ付きのインターフェースのように、コンポーネント間を動的に切り替えると便利なことがあります:

See the Pen @@ -412,29 +412,29 @@ Sometimes, it's useful to dynamically switch between components, like in a tabbe

-The above is made possible by Vue's `` element with the `is` special attribute: +上記は Vue の `` 属性に特別な属性である `is` を持たせることで実現しています: ```html - + ``` -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 `
    `, `
      `, `` and ``, and `
      ` 、 `` 、 `
      @@ -442,7 +442,7 @@ This will lead to issues when using components with elements that have such rest
      ``` -The custom component `` 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: +このカスタムコンポート `` は無効なコンテンツとして摘み出され、最終的に描画された内容にエラーが発生します。幸い、これを回避するために `v-is` という特殊なディレクティブを使用することができます: ```html @@ -451,22 +451,22 @@ The custom component `` will be hoisted out as invalid content, c ``` :::warning -`v-is` value should be a JavaScript string literal: +`v-is` の値は JavaScript の文字列リテラルである必要があります: ```html - + - + ``` ::: -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'], @@ -477,17 +477,17 @@ app.component('blog-post', { ``` ```html - + ``` -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) - `