スペースをつめる

Author: kou1127h

src/guide/component-basics.md

@@ -8,7 +8,7 @@ Vue コンポーネントの例を次に示します:
 // Vue アプリケーションを作成します
 const app = Vue.createApp({})
 
-// global な button-counter というコンポーネントを定義します
+// グローバルな button-counter というコンポーネントを定義します
 app.component('button-counter', {
   data() {
     return {
@@ -45,7 +45,7 @@ app.mount('#components-demo')
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
-コンポーネントは再利用可能なインスタンスなので、`data`、 `computed`、 `watch`、 `methods`、そしてライフサイクルフック のようなルートインスタンスと同様のオプションが利用可能です。唯一の例外は `el` のようなルート固有のオプションです。
+コンポーネントは再利用可能なインスタンスなので、`data`、 `computed`、 `watch`、 `methods`、そしてライフサイクルフックのようなルートインスタンスと同様のオプションが利用可能です。唯一の例外は `el` のようなルート固有のオプションです。
 
 ## コンポーネントの再利用
 
@@ -76,7 +76,7 @@ app.mount('#components-demo')
 
 例えば、 ヘッダー、サイドバー、コンテンツエリアなどのコンポーネントがあり、それぞれには一般的にナビゲーションリンクやブログ投稿などのコンポーネントが含まれています。
 
-これらのコンポーネントをテンプレートで使用するためには、 Vue がそれらを認識できるように登録する必要があります。 コンポーネントの登録には **グローバル** と **ローカル** の 2 種類があります。これまでは、アプリケーションの `component` メソッドを利用してグローバルに登録してきただけです:
+これらのコンポーネントをテンプレートで使用するためには、 Vue がそれらを認識できるように登録する必要があります。 コンポーネントの登録には**グローバル**と**ローカル**の2種類があります。これまでは、アプリケーションの `component` メソッドを利用してグローバルに登録してきただけです:
 
 ```js
 const app = Vue.createApp({})
@@ -88,7 +88,7 @@ app.component('my-component-name', {
 
 グローバルに登録されたコンポーネントはその後作成された `app` インスタンスのテンプレートで使用することができます。さらに、ルートインスタンスのコンポーネントツリーの全てのサブコンポーネント内でも使用することが出来ます。
 
-とりあえずコンポーネント登録についてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて [コンポーネント登録](component-registration.md)の完全なガイドを読むことをお勧めします。
+とりあえずコンポーネント登録についてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて[コンポーネント登録](component-registration.md)の完全なガイドを読むことをお勧めします。
 
 ## プロパティを用いた子コンポーネントへのデータの受け渡し
 
@@ -165,7 +165,7 @@ app.mount('#blog-posts-demo')
 
 上記では、 `v-bind` を用いて動的にプロパティを渡すことができると分かります。これは描画する内容が事前に分からない場合に特に便利です。
 
-とりあえずプロパティについてはこれで以上ですが、 このページを読み終えて十分に理解できたら、後から戻ってきて [プロパティ](component-props.html) の完全なガイドを読むことをお勧めします。
+とりあえずプロパティについてはこれで以上ですが、 このページを読み終えて十分に理解できたら、後から戻ってきて[プロパティ](component-props.html)の完全なガイドを読むことをお勧めします。
 
 ## 子コンポーネントのイベントを購読する
 
@@ -226,7 +226,7 @@ app.component('blog-post', {
 <blog-post ... @enlarge-text="postFontSize += 0.1"></blog-post>
 ```
 
-そして子コンポーネントはビルトインの [**`$emit`** メソッド](../api/instance-methods.html#emit) にイベントの名前を渡して呼び出すことで、イベントを送出することができます:
+そして子コンポーネントはビルトインの [**`$emit`** メソッド](../api/instance-methods.html#emit)にイベントの名前を渡して呼び出すことで、イベントを送出することができます:
 
 ```html
 <button @click="$emit('enlarge-text')">
@@ -252,14 +252,16 @@ app.component('blog-post', {
 })
 ```
 
-これにより、コンポーネントが排出する全てのイベントをチェックし、オプションでそれらを [検証する](component-custom-events.html#validate-emitted-events) ことができます。
+これにより、コンポーネントが排出する全てのイベントをチェックし、オプションでそれらを[検証する](component-custom-events.html#validate-emitted-events)ことができます。
 
 ### イベントと値を送出する
 
 イベントを特定の値と一緒に送出すると便利な場合があります。例えば、テキストをどれだけ大きく表示するかを `<blog-post>` コンポーネントの責務とさせたいかもしれません。そのような場合、 `$emit` の第二引数を使ってこの値を渡すことができます:
 
 ```html
-<button @click="$emit('enlarge-text', 0.1)">Enlarge text</button>
+<button @click="$emit('enlarge-text', 0.1)">
+  Enlarge text
+</button>
 ```
 
 そして親でこのイベントを購読すると、 `$event` を用いて排出されたイベントの値にアクセスすることができます:
@@ -308,7 +310,7 @@ methods: {
 ```
 
 ::: warning
-ここでは in-DOM テンプレートを使用しているため、 `model-value` をケバブケースで表記していることに注意してください。ケバブケースの属性とキャメルケースの属性に関しては [DOM テンプレートの構文解析の注意点](#dom-template-parsing-caveats) の章で詳しく解説されています。
+ここでは in-DOM テンプレートを使用しているため、 `model-value` をケバブケースで表記していることに注意してください。ケバブケースの属性とキャメルケースの属性に関しては[DOM テンプレートの構文解析の注意点](#dom-template-parsing-caveats)の章で詳しく解説されています。
 :::
 
 これが実際に機能するためには、テンプレート内の `<input>` は以下でなければなりません:
@@ -361,7 +363,7 @@ app.component('custom-input', {
 })
 ```
 
-とりあえずカスタムコンポーネントイベントについてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて [カスタムイベント](component-custom-events.md) の完全なガイドを読むことをお勧めします。
+とりあえずカスタムコンポーネントイベントについてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて[カスタムイベント](component-custom-events.md)の完全なガイドを読むことをお勧めします。
 
 ## スロットによるコンテンツ配信
 
@@ -397,7 +399,7 @@ app.component('alert-box', {
 
 上で見た通り、ただ渡したいところにスロットを追加するだけです。それだけです。終わりです！
 
-とりあえずスロットについてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて [スロット](component-slots.md) の完全なガイドを読むことをお勧めします。
+とりあえずスロットについてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて[スロット](component-slots.md)の完全なガイドを読むことをお勧めします。
 
 ## 動的なコンポーネント
 
@@ -422,11 +424,11 @@ app.component('alert-box', {
 - 登録されたコンポーネントの名前、または
 - コンポーネントのオプションオブジェクト
 
-完全なコードを試すには [この例](https://codepen.io/team/Vue/pen/oNXaoKy)、登録された名前ではなくコンポーネントのオプションオブジェクトをバインドしている例は [こちらのバージョン](https://codepen.io/team/Vue/pen/oNXapXM) を参照してください。
+完全なコードを試すには [この例](https://codepen.io/team/Vue/pen/oNXaoKy)、登録された名前ではなくコンポーネントのオプションオブジェクトをバインドしている例は[こちらのバージョン](https://codepen.io/team/Vue/pen/oNXapXM)を参照してください。
 
-この属性は通常の HTML 要素で使用することができますが、それらはコンポーネントとして扱われ、すべての属性は **DOM 属性としてバインドされる**ことを覚えておいてください。 `value` のようないくつかのプロパティが期待通りに動作するためには、 [`.prop` 修飾子](../api/directives.html#v-bind) を用いてバインドする必要があります。
+この属性は通常の HTML 要素で使用することができますが、それらはコンポーネントとして扱われ、すべての属性は **DOM 属性としてバインドされる**ことを覚えておいてください。 `value` のようないくつかのプロパティが期待通りに動作するためには、 [`.prop` 修飾子](../api/directives.html#v-bind)を用いてバインドする必要があります。
 
-とりあえず動的なコンポーネントについてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて [動的 & 非同期コンポーネント](./component-dynamic-async.html) の完全なガイドを読むことをお勧めします。
+とりあえず動的なコンポーネントについてはこれで以上ですが、このページを読み終えて十分に理解できたら、後から戻ってきて[動的 & 非同期コンポーネント](./component-dynamic-async.html)の完全なガイドを読むことをお勧めします。
 
 ## DOM テンプレートパース時の警告
 
@@ -486,6 +488,6 @@ app.component('blog-post', {
 - [単一ファイル (`.vue`) コンポーネント](single-file-component.html)
 - `<script type="text/x-template">`
 
-とりあえず DOM テンプレートパース時の警告についてはこれで以上です。そして実は、Vue の _本質_ の最後となります。おめでとうございます! まだまだ学ぶべきことはありますが、まずは一休みして自分で Vue で遊んで楽しいものを作ってみることをお勧めします。
+とりあえず DOM テンプレートパース時の警告についてはこれで以上です。そして実は、Vue の _本質_ の最後となります。おめでとうございます! まだまだ学ぶべきことはありますが、まずは一休みして自分で Vue を実際に使って楽しいものを作ってみることをお勧めします。
 
 理解したばかりの知識に慣れてきたら、サイドバーのコンポーネントの詳細セクションの他のページと同様に、[動的 & 非同期コンポーネント](component-dynamic-async.html)の完全なガイドを読むために戻ってくることをお勧めします。