fix: correct translation of 'render'

Author: naokie

src/guide/change-detection.md

@@ -98,15 +98,15 @@ var vm = new Vue({
 vm.message = 'Hello!'
 ```
 
-data オプションで `message` を宣言していないと、Vue は render 関数が存在しないプロパティにアクセスしようとしていることを警告します。
+data オプションで `message` を宣言していないと、Vue は Render 関数が存在しないプロパティにアクセスしようとしていることを警告します。
 
 この制限の背後には技術的な理由があります。それは依存性追跡システムにおける一連のエッジケースを排除し、またコンポーネントインスタンスと型チェックシステムとの親和性を高めます。しかしコードの保守性の観点からも重要な事項があります: `data` オブジェクトはコンポーネントの状態のスキーマのようなものです。前もって全てのリアクティブなプロパティを宣言しておくと、後から見直したり別の開発者が読んだりしたときにコンポーネントのコードを簡単に理解することができます。
 
 ## 非同期更新キュー
 
 おそらく既にお気づきでしょうが、Vue は **非同期** に DOM 更新を実行します。データ変更が検出されると、Vue はキューをオープンし、同じイベントループで起こる全てのデータ変更をバッファリングします。同じウォッチャが複数回トリガされる場合、キューには一度だけ入ります。この重複除外バッファリングは不要な計算や DOM 操作を回避する上で重要です。そして、次のイベントループ "tick" で、Vue はキューをフラッシュし、実際の(すでに重複が除外された)作業を実行します。内部的には、Vue は非同期キューイング向けにネイティブな `Promise.then` と `MutationObserver`、`setImmediate` が利用可能ならそれを使い、`setTimeout(fn, 0)` にフォールバックします。
 
-例として、`vm.someData = 'new value'` をセットした時、そのコンポーネントはすぐには再描画しません。 次の "tick" でキューがフラッシュされる時に更新します。ほとんどの場合、私達はこれについて気にする必要はありませんが、更新した DOM の状態に依存する何かをしたい時は注意が必要です。Vue.js は一般的に"データ駆動"的な流儀で考え、DOM を直接触るのを避けることを開発者に奨励しますが、時にはその手を汚す必要があるかもしれません。データの変更後に Vue.js の DOM 更新の完了を待つには、データが変更された直後に `Vue.nextTick(callback)` を使用することができます。そのコールバックは DOM が更新された後に呼ばれます。例えば:
+例として、`vm.someData = 'new value'` をセットした時、そのコンポーネントはすぐには再レンダリングしません。 次の "tick" でキューがフラッシュされる時に更新します。ほとんどの場合、私達はこれについて気にする必要はありませんが、更新した DOM の状態に依存する何かをしたい時は注意が必要です。Vue.js は一般的に"データ駆動"的な流儀で考え、DOM を直接触るのを避けることを開発者に奨励しますが、時にはその手を汚す必要があるかもしれません。データの変更後に Vue.js の DOM 更新の完了を待つには、データが変更された直後に `Vue.nextTick(callback)` を使用することができます。そのコールバックは DOM が更新された後に呼ばれます。例えば:
 
 ```html
 <div id="example">{{ message }}</div>

src/guide/class-and-style.md

@@ -35,7 +35,7 @@ data() {
 }
 ```
 
-このように描画されます:
+このようにレンダリングされます:
 
 ```html
 <div class="static active"></div>
@@ -60,7 +60,7 @@ data() {
 }
 ```
 
-これは同じ結果を描画します。オブジェクトを返す[算出プロパティ](computed.md)に束縛することもできます。これは一般的で強力なパターンです:
+これは同じ結果をレンダリングします。オブジェクトを返す [算出プロパティ](computed.md) に束縛することもできます。これは一般的で強力なパターンです:
 
 ```html
 <div :class="classObject"></div>
@@ -100,7 +100,7 @@ data() {
 }
 ```
 
-これは次のように描画されます:
+これは次のようにレンダリングされます:
 
 ```html
 <div class="active text-danger"></div>
@@ -144,7 +144,7 @@ app.component('my-component', {
 </div>
 ```
 
-以下の HTML が描画されます:
+以下の HTML がレンダリングされます:
 
 ```html
 <p class="foo bar baz boo">Hi</p>
@@ -156,7 +156,7 @@ app.component('my-component', {
 <my-component :class="{ active: isActive }"></my-component>
 ```
 
-`isActive` が真と評価されるときは、以下の HTML が描画されます:
+`isActive` が真と評価されるときは、以下の HTML がレンダリングされます:
 
 ```html
 <p class="foo bar active">Hi</p>
@@ -241,4 +241,4 @@ style プロパティに複数の (接頭辞付き) 値の配列を設定でき
 <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
 ```
 
-これは、配列内でブラウザがサポートしている最後の値だけを描画します。この例では、flexbox の接頭されていないバージョンをサポートしているブラウザでは `display: flex` を描画します。
+これは、配列内でブラウザがサポートしている最後の値だけをレンダリングします。この例では、flexbox の接頭されていないバージョンをサポートしているブラウザでは `display: flex` をレンダリングします。

src/guide/component-attrs.md

@@ -21,10 +21,10 @@ app.component('date-picker', {
 `data-status` 属性を用いて date-picker コンポーネントの状態を定義するような場合には、この属性はルート要素 (すなわち `div.date-picker`) に適用されます。
 
 ```html
-<!-- プロパティでない属性 とともに用いられる Date-picker コンポーネント -->
+<!-- プロパティでない属性とともに用いられる Date-picker コンポーネント -->
 <date-picker data-status="activated"></date-picker>
 
-<!-- 実際には以下のような形で描画されます -->
+<!-- 実際には以下のような形でレンダリングされます -->
 <div class="date-picker" data-status="activated">
   <input type="datetime-local" />
 </div>
@@ -100,10 +100,10 @@ app.component('date-picker', {
 このように記述することで、`data-status` 属性は、 `input` 要素に適用されるようになります。
 
 ```html
-<!-- Date-picker component with a non-prop attribute -->
+<!-- プロパティでない属性とともに用いられる Date-picker コンポーネント -->
 <date-picker data-status="activated"></date-picker>
 
-<!-- Rendered date-picker component -->
+<!-- 実際には以下のような形でレンダリングされます -->
 <div class="date-picker">
   <input type="datetime-local" data-status="activated" />
 </div>

src/guide/component-basics.md

@@ -140,7 +140,7 @@ app.component('blog-post', {
 app.mount('#blog-posts-demo')
 ```
 
-そしてコンポーネントをそれぞれ描画します:
+そしてコンポーネントをそれぞれレンダリングします:
 
 ```html
 <div id="blog-posts-demo">
@@ -152,7 +152,7 @@ app.mount('#blog-posts-demo')
 </div>
 ```
 
-上記では、 `v-bind` を用いて動的にプロパティを渡すことができると分かります。これは描画する内容が事前に分からない場合に特に便利です。
+上記では、 `v-bind` を用いて動的にプロパティを渡すことができると分かります。これはレンダリングする内容が事前に分からない場合に特に便利です。
 
 とりあえずプロパティについてはこれで以上ですが、 このページを読み終えて十分に理解できたら、後から戻ってきて[プロパティ](component-props.html)の完全なガイドを読むことをお勧めします。
 
@@ -361,7 +361,7 @@ HTML 要素のように、コンポーネントに要素を渡すことができ
 </alert-box>
 ```
 
-これは以下のように描画されるでしょう。:
+これは以下のようにレンダリングされるでしょう。:
 
 <common-codepen-snippet title="Component basics: slots" slug="jOPeaob" :preview="false" />
 

src/guide/component-edge-cases.md

@@ -32,5 +32,5 @@ app.component('terms-of-service', {
 ```
 
 :::tip
-再度注意しますが、このパターンを多用しないようにしてください。多くの静的な内容を描画しなければならないとき、これらのレアケースは便利である一方、あなたが実際に遅いレンダリングに気付かない限りは絶対に必要ではありません。さらにそれは後に多くの混乱の原因になり得るでしょう。例えば、 `v-once` に精通していない開発者や、単純にテンプレート内にそれを見逃した開発者を想像してみてください。それらはなぜテンプレートが正確に更新されないのかの原因究明に時間を費やすことになるかもしれません。
+再度注意しますが、このパターンを多用しないようにしてください。多くの静的な内容をレンダリングしなければならないとき、これらのレアケースは便利である一方、あなたが実際に遅いレンダリングに気付かない限りは絶対に必要ではありません。さらにそれは後に多くの混乱の原因になり得るでしょう。例えば、 `v-once` に精通していない開発者や、単純にテンプレート内にそれを見逃した開発者を想像してみてください。それらはなぜテンプレートが正確に更新されないのかの原因究明に時間を費やすことになるかもしれません。
 :::

src/guide/component-slots.md

@@ -25,10 +25,10 @@ Vue には [Web Components spec draft](https://github.com/w3c/webcomponents/blob
 </button>
 ```
 
-コンポーネントを描画する時、 `<slot></slot>` は「Add todo」に置換されるでしょう:
+コンポーネントをレンダリングする時、 `<slot></slot>` は「Add todo」に置換されるでしょう:
 
 ```html
-<!-- 描画された HTML -->
+<!-- レンダリングされた HTML -->
 <button class="btn-primary">
   Add todo
 </button>
@@ -66,12 +66,12 @@ Vue には [Web Components spec draft](https://github.com/w3c/webcomponents/blob
 
 ```html
 <todo-button>
-  <!-- 次の行のテキストは描画されません -->
+  <!-- 次の行のテキストはレンダリングされません -->
   Add todo
 </todo-button>
 ```
 
-## 描画スコープ
+## レンダリングスコープ
 
 スロットの中でデータを扱いたい場合はこうします:
 
@@ -104,15 +104,15 @@ Vue には [Web Components spec draft](https://github.com/w3c/webcomponents/blob
 
 ## フォールバックコンテンツ
 
-スロットに対して、コンテンツがない場合にだけ描画されるフォールバック (つまり、デフォルトの) コンテンツを指定すると便利な場合があります。例えば、`<submit-button>` コンポーネントにおいて:
+スロットに対して、コンテンツがない場合にだけレンダリングされるフォールバック (つまり、デフォルトの) コンテンツを指定すると便利な場合があります。例えば、`<submit-button>` コンポーネントにおいて:
 
 ```html
 <button type="submit">
   <slot></slot>
 </button>
 ```
 
-ほとんどの場合には `<button>` の中に「Submit」という文字を描画したいかもしれません。「Submit」をフォールバックコンテンツにするには、 `<slot>` タグの中に記述します。
+ほとんどの場合には `<button>` の中に「Submit」という文字をレンダリングしたいかもしれません。「Submit」をフォールバックコンテンツにするには、 `<slot>` タグの中に記述します。
 
 ```html
 <button type="submit">
@@ -126,7 +126,7 @@ Vue には [Web Components spec draft](https://github.com/w3c/webcomponents/blob
 <submit-button></submit-button>
 ```
 
-フォールバックコンテンツの「Submit」が描画されます:
+フォールバックコンテンツの「Submit」がレンダリングされます:
 
 ```html
 <button type="submit">
@@ -142,7 +142,7 @@ Vue には [Web Components spec draft](https://github.com/w3c/webcomponents/blob
 </submit-button>
 ```
 
-指定されたコンテンツが代わりに描画されます:
+指定されたコンテンツが代わりにレンダリングされます:
 
 ```html
 <button type="submit">
@@ -168,7 +168,7 @@ Vue には [Web Components spec draft](https://github.com/w3c/webcomponents/blob
 </div>
 ```
 
-こういった場合のために、 `<slot>` 要素は `name` という特別な属性を持っていて、それぞれのスロットにユニークな ID を割り当てることによってコンテンツがどこに描画されるべきかを決定することができます:
+こういった場合のために、 `<slot>` 要素は `name` という特別な属性を持っていて、それぞれのスロットにユニークな ID を割り当てることによってコンテンツがどこにレンダリングされるべきかを決定することができます:
 
 ```html
 <div class="container">
@@ -207,7 +207,7 @@ Vue には [Web Components spec draft](https://github.com/w3c/webcomponents/blob
 
 これにより、`<template>` 要素の中身はすべて対応するスロットに渡されます。
 
-描画される HTML は以下のようになります:
+レンダリングされる HTML は以下のようになります:
 
 ```html
 <div class="container">
@@ -228,7 +228,7 @@ Vue には [Web Components spec draft](https://github.com/w3c/webcomponents/blob
 
 ## スコープ付きスロット
 
-スロットコンテンツから、子コンポーネントの中だけで利用可能なデータにアクセスできると便利なことがあります。コンポーネントがアイテムの配列を描画するためにつかわれていて、レンダリングされた各アイテムをカスタマイズできるようにしたい、などは典型的な例です。
+スロットコンテンツから、子コンポーネントの中だけで利用可能なデータにアクセスできると便利なことがあります。コンポーネントがアイテムの配列をレンダリングするためにつかわれていて、レンダリングされた各アイテムをカスタマイズできるようにしたい、などは典型的な例です。
 
 例えば、以下のようなコンポーネントがあり、 todo アイテムのリストを内部に持ってます。
 
@@ -258,7 +258,7 @@ app.component('todo-list', {
 </todo-list>
 ```
 
-しかし、これは動作しません。というのも、 `item` にアクセスすることができるのは `<todo-list>` コンポーネントだけですが、ここで指定しているコンテンツは親コンポーネントで描画されるからです。
+しかし、これは動作しません。というのも、 `item` にアクセスすることができるのは `<todo-list>` コンポーネントだけですが、スロットのコンテンツはその親コンポーネントから提供されているためです。
 
 親コンポーネント内でスロットコンテンツとして `item` を使えるようにするためには、これを `<slot>` 要素の属性として束縛します:
 

src/guide/composition-api-template-refs.md

@@ -19,7 +19,7 @@ Composition API を使うとき、 [リアクティブ参照](reactivity-fundame
       const root = ref(null)
 
       onMounted(() => {
-        // DOM 要素は初期描画の後に ref に代入されます
+        // DOM 要素は初回レンダリングの後に ref に代入されます
         console.log(root.value) // <div>This is a root element</div>
       })
 

src/guide/conditional.md

@@ -4,7 +4,7 @@
 
 ## `v-if`
 
-`v-if` ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。
+`v-if` ディレクティブは、ブロックを条件に応じてレンダリングしたい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみレンダリングされます。
 
 ```html
 <h1 v-if="awesome">Vue is awesome!</h1>
@@ -19,7 +19,7 @@
 
 ### `<template>` での `v-if` による条件グループ
 
-`v-if` はディレクティブなので、単一の要素に付加する必要があります。しかし、1 要素よりも多くの要素と切り替えたい場合はどうでしょうか？このケースでは、非表示ラッパー (wrapper) として提供される、`<template>` 要素で `v-if` を使用できます。最終的に描画される結果は、`<template>` 要素は含まれません。
+`v-if` はディレクティブなので、単一の要素に付加する必要があります。しかし、1 要素よりも多くの要素と切り替えたい場合はどうでしょうか？このケースでは、非表示ラッパー (wrapper) として提供される、`<template>` 要素で `v-if` を使用できます。最終的にレンダリングされる結果は、`<template>` 要素は含まれません。
 
 ```html
 <template v-if="ok">
@@ -73,19 +73,19 @@
 <h1 v-show="ok">Hello!</h1>
 ```
 
-違いは `v-show` による要素は常に描画されて DOM に維持するということです。`v-show` はシンプルに要素の `display` CSS プロパティを切り替えます。
+違いは `v-show` による要素は常レンダリングされて DOM に維持するということです。`v-show` はシンプルに要素の `display` CSS プロパティを切り替えます。
 
 `v-show` は `<template>` 要素をサポートせず、`v-else` とも連動しないということに注意してください。
 
 ## `v-if` vs `v-show`
 
 `v-if` は、イベントリスナと子コンポーネント内部の条件ブロックが適切に破棄され、そして切り替えられるまでの間再作成されるため、”リアル”な条件レンダリングです。
 
-`v-if` は **遅延描画 (lazy)** です。 初期表示において false の場合、何もしません。条件付きブロックは、条件が最初に true になるまで描画されません。
+`v-if` は **遅延レンダリング (lazy)** です。 初期表示において false の場合、何もしません。条件付きブロックは、条件が最初に true になるまでレンダリングされません。
 
-一方で、`v-show` はとてもシンプルです。要素は初期条件に関わらず常に描画され、シンプルな CSS ベースの切り替えとして保存されます。
+一方で、`v-show` はとてもシンプルです。要素は初期条件に関わらず常にレンダリングされ、シンプルな CSS ベースの切り替えとして保存されます。
 
-一般的に、`v-if` はより高い切り替えコストを持っているのに対して、 `v-show` はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば `v-show` を選び、条件が実行時に変更することがほとんどない場合は、`v-if` を選びます。
+一般的に、`v-if` はより高い切り替えコストを持っているのに対して、 `v-show` はより高い初期レンダリングコストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば `v-show` を選び、条件が実行時に変更することがほとんどない場合は、`v-if` を選びます。
 
 ## `v-if` と `v-for`