From a500de453bd9485415281da00ee358a2fb92d3ea Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 17:31:06 +0900
Subject: [PATCH 01/17] docs: Add migration guide for h rendering registered
 component

https://github.com/vuejs/docs-next/commit/706a8cdeb0a6ff5aea4b8d6d7ed1996c785274fd#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index 4b676daf..ee810aa2 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -400,7 +400,7 @@ render() {
 
 ```js
 Vue.h(
-  'anchored-heading',
+  Vue.resolveComponent('anchored-heading'),
   {
     level: 1
   },

From 7ce9ffb4f606a888175b8ae8880020302aa72e7e Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 17:32:14 +0900
Subject: [PATCH 02/17] correct misleading content about render function

https://github.com/vuejs/docs-next/commit/9ae70db2aa1145b27bdd301729f79c6c1bb7ba1c#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index ee810aa2..d9dc6a03 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -301,26 +301,16 @@ render() {
 
 #### イベント修飾子
 
-`.passive` 、 `.capture` 、 `.once` イベント修飾子については、Vue はハンドラーのオブジェクトシンタックスを提供しています:
+For the `.passive`, `.capture`, and `.once` event modifiers, they can be concatenated after event name using camel case.
 
 例えば:
 
 ```javascript
 render() {
   return Vue.h('input', {
-    onClick: {
-      handler: this.doThisInCapturingMode,
-      capture: true
-    },
-    onKeyup: {
-      handler: this.doThisOnce,
-      once: true
-    },
-    onMouseover: {
-      handler: this.doThisOnceInCapturingMode,
-      once: true,
-      capture: true
-    },
+    onClickCapture: this.doThisInCapturingMode,
+    onKeyupOnce: this.doThisOnce,
+    onMouseoverOnceCapture: this.doThisOnceInCapturingMode,
   })
 }
 ```

From 0d60f4ed7e48ded755571813a2639dfe34b69880 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 17:33:42 +0900
Subject: [PATCH 03/17] fix: correct two examples of using h with components
 and slots

https://github.com/vuejs/docs-next/commit/dbeed5b73a88d8c8852a52626e9e431fe47ea991#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index d9dc6a03..35fc5295 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -375,11 +375,15 @@ render 関数で子コンポーネントにスロットを渡す方法:
 render() {
   // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
   return Vue.h('div', [
-    Vue.h('child', {}, {
+    Vue.h(
+      Vue.resolveComponent('child'),
+      {},
       // { name: props => VNode | Array<VNode> } の形で
       // 子供のオブジェクトを `slots` として渡す
-      default: (props) => Vue.h('span', props.text)
-    })
+      {
+        default: (props) => Vue.h('span', props.text)
+      }
+    )
   ])
 }
 ```
@@ -394,7 +398,9 @@ Vue.h(
   {
     level: 1
   },
-  [Vue.h('span', 'Hello'), ' world!']
+  {
+    default: () => [Vue.h('span', 'Hello'), ' world!']
+  }
 )
 ```
 

From 74996251c1c76df028abfe2ea376ecf5cb303399 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 17:34:23 +0900
Subject: [PATCH 04/17] fix: add an emits option to examples that emit events

https://github.com/vuejs/docs-next/commit/e554cd6f15fb201d8dc9e03e0f07e4a80e776f19#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index 35fc5295..e95b52ca 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -279,6 +279,7 @@ render() {
 
 ```js
 props: ['modelValue'],
+emits: ['update:modelValue'],
 render() {
   return Vue.h(SomeComponent, {
     modelValue: this.modelValue,

From 89dd25922441b4a6d70c1d320f2d1ad2cd0d64a7 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 17:35:25 +0900
Subject: [PATCH 05/17] Update render-function.md

https://github.com/vuejs/docs-next/commit/2915212b7e5d26ef797230a01aaee87b82bc0610#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index e95b52ca..e297e72e 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -238,7 +238,7 @@ render() {
 ```js
 render() {
   return Vue.h('div',
-    Array.apply(null, { length: 20 }).map(() => {
+    Array.from({ length: 20 }).map(() => {
       return Vue.h('p', 'hi')
     })
   )

From 1184c931de2413e9922d8ff5582135aa66dfafaa Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 17:44:16 +0900
Subject: [PATCH 06/17] Expand the page on render functions, especially their
 use of slots

https://github.com/vuejs/docs-next/commit/ac5bec37431e43f91c61db6089f4b48058d7961a#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 150 ++++++++++++++++++++++++++++++++---
 1 file changed, 141 insertions(+), 9 deletions(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index e297e72e..d1832e93 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -62,9 +62,7 @@ const app = Vue.createApp({})
 
 app.component('anchored-heading', {
   render() {
-    const { h } = Vue
-
-    return h(
+    return Vue.h(
       'h' + this.level, // タグ名
       {}, // props/属性
       this.$slots.default() // 子供の配列
@@ -169,6 +167,8 @@ h(
 )
 ```
 
+If there are no props then the children can usually be passed as the second argument. In cases where that would be ambiguous, `null` can be passed as the second argument to keep the children as the third argument.
+
 ## 完全な例
 
 この知識によって、書き始めたコンポーネントを今では完成させることができます:
@@ -245,6 +245,47 @@ render() {
 }
 ```
 
+## Creating Component VNodes
+
+To create a VNode for a component, the first argument passed to `h` should be the component itself:
+
+```js
+render() {
+  return Vue.h(ButtonCounter)
+}
+```
+
+If we need to resolve a component by name then we can call `resolveComponent`:
+
+```js
+render() {
+  const ButtonCounter = Vue.resolveComponent('ButtonCounter')
+  return Vue.h(ButtonCounter)
+}
+```
+
+`resolveComponent` is the same function that templates use internally to resolve components by name.
+
+A `render` function will normally only need to use `resolveComponent` for components that are [registered globally](/guide/component-registration.html#global-registration). [Local component registration](/guide/component-registration.html#local-registration) can usually be skipped altogether. Consider the following example:
+
+```js
+// We can simplify this
+components: {
+  ButtonCounter
+},
+render() {
+  return Vue.h(Vue.resolveComponent('ButtonCounter'))
+}
+```
+
+Rather than registering a component by name and then looking it up we can use it directly instead:
+
+```js
+render() {
+  return Vue.h(ButtonCounter)
+}
+```
+
 ## テンプレートの機能をプレーンな JavaScript で置き換える
 
 ### `v-if` と `v-for`
@@ -273,6 +314,8 @@ render() {
 }
 ```
 
+In a template it can be useful to use a `<template>` tag to hold a `v-if` or `v-for` directive. When migrating to a `render` function, the `<template>` tag is no longer required and can be discarded.
+
 ### `v-model`
 
 `v-model` ディレクティブは、テンプレートのコンパイル中に `modelValue` と `onUpdate:modelValue` プロパティに展開されます - 私たちはそれらのプロパティを自分自身で提供する必要があります:
@@ -302,7 +345,7 @@ render() {
 
 #### イベント修飾子
 
-For the `.passive`, `.capture`, and `.once` event modifiers, they can be concatenated after event name using camel case.
+For the `.passive`, `.capture`, and `.once` event modifiers, they can be concatenated after the event name using camel case.
 
 例えば:
 
@@ -311,7 +354,7 @@ render() {
   return Vue.h('input', {
     onClickCapture: this.doThisInCapturingMode,
     onKeyupOnce: this.doThisOnce,
-    onMouseoverOnceCapture: this.doThisOnceInCapturingMode,
+    onMouseoverOnceCapture: this.doThisOnceInCapturingMode
   })
 }
 ```
@@ -356,7 +399,7 @@ render() {
 ```js
 render() {
   // `<div><slot></slot></div>`
-  return Vue.h('div', {}, this.$slots.default())
+  return Vue.h('div', this.$slots.default())
 }
 ```
 
@@ -364,13 +407,13 @@ render() {
 props: ['message'],
 render() {
   // `<div><slot :text="message"></slot></div>`
-  return Vue.h('div', {}, this.$slots.default({
+  return Vue.h('div', this.$slots.default({
     text: this.message
   }))
 }
 ```
 
-render 関数で子コンポーネントにスロットを渡す方法:
+For component VNodes, we need to pass the children to `h` as an Object rather than an Array. Each property is used to populate the slot of the same name:
 
 ```js
 render() {
@@ -378,7 +421,7 @@ render() {
   return Vue.h('div', [
     Vue.h(
       Vue.resolveComponent('child'),
-      {},
+      null,
       // { name: props => VNode | Array<VNode> } の形で
       // 子供のオブジェクトを `slots` として渡す
       {
@@ -389,6 +432,95 @@ render() {
 }
 ```
 
+The slots are passed as functions, allowing the child component to control the creation of each slot's contents. Any reactive data should be accessed within the slot function to ensure that it's registered as a dependency of the child component and not the parent. Conversely, calls to `resolveComponent` should be made outside the slot function, otherwise they'll resolve relative to the wrong component:
+
+```js
+// `<MyButton><MyIcon :name="icon" />{{ text }}</MyButton>`
+render() {
+  // Calls to resolveComponent should be outside the slot function
+  const Button = Vue.resolveComponent('MyButton')
+  const Icon = Vue.resolveComponent('MyIcon')
+
+  return Vue.h(
+    Button,
+    null,
+    {
+      // Use an arrow function to preserve the `this` value
+      default: (props) => {
+        // Reactive properties should be read inside the slot function
+        // so that they become dependencies of the child's rendering
+        return [
+          Vue.h(Icon, { name: this.icon }),
+          this.text
+        ]
+      }
+    }
+  )
+}
+```
+
+If a component receives slots from its parent, they can be passed on directly to a child component:
+
+```js
+render() {
+  return Vue.h(Panel, null, this.$slots)
+}
+```
+
+They can also be passed individually or wrapped as appropriate:
+
+```js
+render() {
+  return Vue.h(
+    Panel,
+    null,
+    {
+      // If we want to pass on a slot function we can
+      header: this.$slots.header,
+
+      // If we need to manipulate the slot in some way
+      // then we need to wrap it in a new function
+      default: (props) => {
+        const children = this.$slots.default ? this.$slots.default(props) : []
+
+        return children.concat(Vue.h('div', 'Extra child'))
+      }
+    }
+  )
+}
+```
+
+### `<component>` and `is`
+
+Behind the scenes, templates use `resolveDynamicComponent` to implement the `is` attribute. We can use the same function if we need all the flexibility provided by `is` in our `render` function:
+
+```js
+// `<component :is="name"></component>`
+render() {
+  const Component = Vue.resolveDynamicComponent(this.name)
+  return Vue.h(Component)
+}
+```
+
+Just like `is`, `resolveDynamicComponent` supports passing a component name, an HTML element name, or a component options object.
+
+However, that level of flexibility is usually not required. It's often possible to replace `resolveDynamicComponent` with a more direct alternative.
+
+For example, if we only need to support component names then `resolveComponent` can be used instead.
+
+If the VNode is always an HTML element then we can pass its name directly to `h`:
+
+```js
+// `<component :is="bold ? 'strong' : 'em'"></component>`
+render() {
+  return Vue.h(this.bold ? 'strong' : 'em')
+}
+```
+
+Similarly, if the value passed to `is` is a component options object then there's no need to resolve anything, it can be passed directly as the first argument of `h`.
+
+Much like a `<template>` tag, a `<component>` tag is only required in templates as a syntactical placeholder and should be discarded when migrating to a `render` function.
+
 ## JSX
 
 たくさんの `render` 関数を書いていると、こういう感じのものを書くのがつらく感じるかもしれません:

From f77a33543cd40a965a9115bfe877218b772c23a9 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 17:46:37 +0900
Subject: [PATCH 07/17] chore: standartize Array casing

https://github.com/vuejs/docs-next/commit/363641a13f600cb965ece3fd1c93210826f61a17#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index d1832e93..988572e9 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -413,7 +413,7 @@ render() {
 }
 ```
 
-For component VNodes, we need to pass the children to `h` as an Object rather than an Array. Each property is used to populate the slot of the same name:
+For component VNodes, we need to pass the children to `h` as an object rather than an array. Each property is used to populate the slot of the same name:
 
 ```js
 render() {

From d571eac98d021f49898484e7cda4b354b3765792 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 18:08:07 +0900
Subject: [PATCH 08/17] Use destructuring to access createApp, etc. in
 render-function.md

https://github.com/vuejs/docs-next/commit/9e3d61a99e97a3c8448b001a71ea5cef97fdb7f9#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 115 +++++++++++++++++++----------------
 1 file changed, 62 insertions(+), 53 deletions(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index 988572e9..d259e2b3 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -21,7 +21,9 @@ Vue では、大多数のケースにおいてテンプレートを使ってア
 コンポーネントは、`level` の値に応じた見出しを生成する必要があります。手っ取り早くこれで実現しましょう:
 
 ```js
-const app = Vue.createApp({})
+const { createApp } = Vue
+
+const app = createApp({})
 
 app.component('anchored-heading', {
   template: `
@@ -58,11 +60,13 @@ app.component('anchored-heading', {
 ほとんどのコンポーネントでテンプレートがうまく働くとはいえ、明らかにこれはそうではないものの一つです。そこで、 `render()` 関数を使ってこれを書き直してみましょう。
 
 ```js
-const app = Vue.createApp({})
+const { createApp, h } = Vue
+
+const app = createApp({})
 
 app.component('anchored-heading', {
   render() {
-    return Vue.h(
+    return h(
       'h' + this.level, // タグ名
       {}, // props/属性
       this.$slots.default() // 子供の配列
@@ -93,20 +97,13 @@ render 関数に取り掛かる前に、ブラウザがどのように動くの
 
 ブラウザはこのコードを読み込むと、血縁関係を追跡するために家系図を構築するのと同じように、全てを追跡する [「DOM ノード」のツリー](https://javascript.info/dom-nodes)を構築します。
 
-<!-- NOTE:
-原文が分かりづらいため、v2の記述を元に翻訳
-When a browser reads this code, it builds a tree of “DOM nodes” to help it keep track of everything, just as you might build a family tree to keep track of your extended family.
--->
-
 上の HTML の DOM ノードツリーはこんな感じになります。
 
 ![DOM ツリーの可視化](/images/dom-tree.png)
 
 すべての要素はノードです。テキストのすべてのピースはノードです。コメントですらノードです！それぞれのノードは子供を持つことができます。 (つまり、それぞれのノードは他のノードを含むことができます)
 
-これらすべてのノードを効率的に更新することは難しくなり得ますが、ありがたいことに、それを手動で行う必要はありません。代わりに、テンプレートや render 関数で、ページ上にどのような HTML が欲しいかを Vue に伝えるのです。
-
-テンプレート:
+これらすべてのノードを効率的に更新することは難しくなり得ますが、ありがたいことに、それを手動で行う必要はありません。代わりに、Vue にどのような HTML を表示させたいのかをテンプレートで伝えます:
 
 ```html
 <h1>{{ blogTitle }}</h1>
@@ -116,7 +113,7 @@ When a browser reads this code, it builds a tree of “DOM nodes” to help it k
 
 ```js
 render() {
-  return Vue.h('h1', {}, this.blogTitle)
+  return h('h1', {}, this.blogTitle)
 }
 ```
 
@@ -127,7 +124,7 @@ render() {
 Vue は、実際の DOM に反映する必要のある変更を追跡するために **仮想 DOM** を構築して、ページを最新の状態に保ちます。この行をよく見てみましょう:
 
 ```js
-return Vue.h('h1', {}, this.blogTitle)
+return h('h1', {}, this.blogTitle)
 ```
 
 `h()` 関数が返すものはなんでしょうか？これは、 _正確には_ 実際の DOM 要素ではありません。それが返すのは、ページ上にどんな種類のノードをレンダリングするのかを Vue に伝えるための情報をもったプレーンなオブジェクトです。この情報には子供のノードの記述も含まれます。私たちは、このノードの記述を *仮想ノード* と呼び、通常 **VNode** と省略します。「仮想 DOM」というのは、Vue コンポーネントのツリーから構成される VNode のツリー全体のことなのです。
@@ -147,13 +144,15 @@ h(
   'div',
 
   // {Object} props
-  // テンプレート内で使うであろう属性、プロパティ、イベントに対応するオブジェクト
+  // テンプレート内で使うであろう
+  // 属性、プロパティ、イベントに対応するオブジェクト
   //
   // 省略可能
   {},
 
   // {String | Array | Object} children
-  // `h()` で作られた子供のVNode、または文字列(テキストVNodeになる)、
+  // `h()` で作られた子供のVNode、
+  // または文字列(テキストVNodeになる)、
   // またはスロットをもつオブジェクト
   //
   // 省略可能
@@ -174,7 +173,9 @@ If there are no props then the children can usually be passed as the second argu
 この知識によって、書き始めたコンポーネントを今では完成させることができます:
 
 ```js
-const app = Vue.createApp({})
+const { createApp, h } = Vue
+
+const app = createApp({})
 
 /** 子供のノードから再帰的にテキストを取得する */
 function getChildrenTextContent(children) {
@@ -197,8 +198,8 @@ app.component('anchored-heading', {
       .replace(/\W+/g, '-') // 英数字とアンダースコア以外の文字を-に置換する
       .replace(/(^-|-$)/g, '') // 頭と末尾の-を取り除く
 
-    return Vue.h('h' + this.level, [
-      Vue.h(
+    return h('h' + this.level, [
+      h(
         'a',
         {
           name: headingId,
@@ -225,8 +226,8 @@ app.component('anchored-heading', {
 
 ```js
 render() {
-  const myParagraphVNode = Vue.h('p', 'hi')
-  return Vue.h('div', [
+  const myParagraphVNode = h('p', 'hi')
+  return h('div', [
     // おっと - VNode が重複しています!
     myParagraphVNode, myParagraphVNode
   ])
@@ -237,9 +238,9 @@ render() {
 
 ```js
 render() {
-  return Vue.h('div',
+  return h('div',
     Array.from({ length: 20 }).map(() => {
-      return Vue.h('p', 'hi')
+      return h('p', 'hi')
     })
   )
 }
@@ -251,16 +252,20 @@ To create a VNode for a component, the first argument passed to `h` should be th
 
 ```js
 render() {
-  return Vue.h(ButtonCounter)
+  return h(ButtonCounter)
 }
 ```
 
 If we need to resolve a component by name then we can call `resolveComponent`:
 
 ```js
+const { h, resolveComponent } = Vue
+
+// ...
+
 render() {
-  const ButtonCounter = Vue.resolveComponent('ButtonCounter')
-  return Vue.h(ButtonCounter)
+  const ButtonCounter = resolveComponent('ButtonCounter')
+  return h(ButtonCounter)
 }
 ```
 
@@ -274,7 +279,7 @@ components: {
   ButtonCounter
 },
 render() {
-  return Vue.h(Vue.resolveComponent('ButtonCounter'))
+  return resolveComponent('ButtonCounter')
 }
 ```
 
@@ -282,7 +287,7 @@ Rather than registering a component by name and then looking it up we can use it
 
 ```js
 render() {
-  return Vue.h(ButtonCounter)
+  return h(ButtonCounter)
 }
 ```
 
@@ -305,11 +310,11 @@ render() {
 props: ['items'],
 render() {
   if (this.items.length) {
-    return Vue.h('ul', this.items.map((item) => {
-      return Vue.h('li', item.name)
+    return h('ul', this.items.map((item) => {
+      return h('li', item.name)
     }))
   } else {
-    return Vue.h('p', 'No items found.')
+    return h('p', 'No items found.')
   }
 }
 ```
@@ -324,7 +329,7 @@ In a template it can be useful to use a `<template>` tag to hold a `v-if` or `v-
 props: ['modelValue'],
 emits: ['update:modelValue'],
 render() {
-  return Vue.h(SomeComponent, {
+  return h(SomeComponent, {
     modelValue: this.modelValue,
     'onUpdate:modelValue': value => this.$emit('update:modelValue', value)
   })
@@ -337,7 +342,7 @@ render() {
 
 ```js
 render() {
-  return Vue.h('div', {
+  return h('div', {
     onClick: $event => console.log('clicked', $event.target)
   })
 }
@@ -351,7 +356,7 @@ For the `.passive`, `.capture`, and `.once` event modifiers, they can be concate
 
 ```javascript
 render() {
-  return Vue.h('input', {
+  return h('input', {
     onClickCapture: this.doThisInCapturingMode,
     onKeyupOnce: this.doThisOnce,
     onMouseoverOnceCapture: this.doThisOnceInCapturingMode
@@ -374,7 +379,7 @@ render() {
 
 ```js
 render() {
-  return Vue.h('input', {
+  return h('input', {
     onKeyUp: event => {
       // イベントを発行した要素がイベントが紐づけられた要素ではない場合は
       // 中断する
@@ -399,7 +404,7 @@ render() {
 ```js
 render() {
   // `<div><slot></slot></div>`
-  return Vue.h('div', this.$slots.default())
+  return h('div', this.$slots.default())
 }
 ```
 
@@ -407,7 +412,7 @@ render() {
 props: ['message'],
 render() {
   // `<div><slot :text="message"></slot></div>`
-  return Vue.h('div', this.$slots.default({
+  return h('div', this.$slots.default({
     text: this.message
   }))
 }
@@ -418,14 +423,14 @@ For component VNodes, we need to pass the children to `h` as an object rather th
 ```js
 render() {
   // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
-  return Vue.h('div', [
-    Vue.h(
-      Vue.resolveComponent('child'),
+  return h('div', [
+    h(
+      resolveComponent('child'),
       null,
       // { name: props => VNode | Array<VNode> } の形で
       // 子供のオブジェクトを `slots` として渡す
       {
-        default: (props) => Vue.h('span', props.text)
+        default: (props) => h('span', props.text)
       }
     )
   ])
@@ -438,10 +443,10 @@ The slots are passed as functions, allowing the child component to control the c
 // `<MyButton><MyIcon :name="icon" />{{ text }}</MyButton>`
 render() {
   // Calls to resolveComponent should be outside the slot function
-  const Button = Vue.resolveComponent('MyButton')
-  const Icon = Vue.resolveComponent('MyIcon')
+  const Button = resolveComponent('MyButton')
+  const Icon = resolveComponent('MyIcon')
 
-  return Vue.h(
+  return h(
     Button,
     null,
     {
@@ -450,7 +455,7 @@ render() {
         // Reactive properties should be read inside the slot function
         // so that they become dependencies of the child's rendering
         return [
-          Vue.h(Icon, { name: this.icon }),
+          h(Icon, { name: this.icon }),
           this.text
         ]
       }
@@ -463,7 +468,7 @@ If a component receives slots from its parent, they can be passed on directly to
 
 ```js
 render() {
-  return Vue.h(Panel, null, this.$slots)
+  return h(Panel, null, this.$slots)
 }
 ```
 
@@ -471,7 +476,7 @@ They can also be passed individually or wrapped as appropriate:
 
 ```js
 render() {
-  return Vue.h(
+  return h(
     Panel,
     null,
     {
@@ -483,7 +488,7 @@ render() {
       default: (props) => {
         const children = this.$slots.default ? this.$slots.default(props) : []
 
-        return children.concat(Vue.h('div', 'Extra child'))
+        return children.concat(h('div', 'Extra child'))
       }
     }
   )
@@ -495,10 +500,14 @@ render() {
 Behind the scenes, templates use `resolveDynamicComponent` to implement the `is` attribute. We can use the same function if we need all the flexibility provided by `is` in our `render` function:
 
 ```js
+const { h, resolveDynamicComponent } = Vue
+
+// ...
+
 // `<component :is="name"></component>`
 render() {
-  const Component = Vue.resolveDynamicComponent(this.name)
-  return Vue.h(Component)
+  const Component = resolveDynamicComponent(this.name)
+  return h(Component)
 }
 ```
 
@@ -513,7 +522,7 @@ If the VNode is always an HTML element then we can pass its name directly to `h`
 ```js
 // `<component :is="bold ? 'strong' : 'em'"></component>`
 render() {
-  return Vue.h(this.bold ? 'strong' : 'em')
+  return h(this.bold ? 'strong' : 'em')
 }
 ```
 
@@ -526,13 +535,13 @@ Much like a `<template>` tag, a `<component>` tag is only required in templates
 たくさんの `render` 関数を書いていると、こういう感じのものを書くのがつらく感じるかもしれません:
 
 ```js
-Vue.h(
-  Vue.resolveComponent('anchored-heading'),
+h(
+  resolveComponent('anchored-heading'),
   {
     level: 1
   },
   {
-    default: () => [Vue.h('span', 'Hello'), ' world!']
+    default: () => [h('span', 'Hello'), ' world!']
   }
 )
 ```

From 772c95c0e41d7808850c0a659935486b1cbe46cc Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 18:25:52 +0900
Subject: [PATCH 09/17] fix: using a keyCode with v-on is no longer supported

https://github.com/vuejs/docs-next/commit/7745e705222fc8c08bf81bfd61457ce218d8cd4f#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index d259e2b3..f98dd613 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -367,13 +367,13 @@ render() {
 その他すべてのイベントおよびキー修飾子については、特別な API は必要ありません。
 なぜなら、ハンドラーの中でイベントのメソッドを使用することができるからです:
 
-| 修飾子                                                | ハンドラーでの同等の記述                                                                                              |
-| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `.stop`                                               | `event.stopPropagation()`                                                                                            |
-| `.prevent`                                            | `event.preventDefault()`                                                                                             |
-| `.self`                                               | `if (event.target !== event.currentTarget) return`                                                                   |
-| Keys:<br>`.enter`, `.13`                              | `if (event.keyCode !== 13) return` (他のキー修飾子については、 `13` を [別のキーコード](http://keycode.info/) に変更する) |
-| Modifiers Keys:<br>`.ctrl`, `.alt`, `.shift`, `.meta` | `if (!event.ctrlKey) return` (`ctrlKey` をそれぞれ `altKey`、 `shiftKey`、 `metaKey` に変更する)                      |
+| 修飾子                                                 | ハンドラーでの同等の記述                                                                                              |
+| ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `.stop`                                              | `event.stopPropagation()`                                                                                            |
+| `.prevent`                                           | `event.preventDefault()`                                                                                             |
+| `.self`                                              | `if (event.target !== event.currentTarget) return`                                                                   |
+| Keys:<br>e.g. `.enter`                               | `if (event.key !== 'Enter') return`<br><br>Change `'Enter'` to the appropriate [key](http://keycode.info/) |
+| Modifier Keys:<br>`.ctrl`, `.alt`, `.shift`, `.meta` | `if (!event.ctrlKey) return`<br><br>Likewise for `altKey`, `shiftKey`, and `metaKey`                       |
 
 これらすべての修飾子を一緒に使った例がこちらです:
 
@@ -384,9 +384,9 @@ render() {
       // イベントを発行した要素がイベントが紐づけられた要素ではない場合は
       // 中断する
       if (event.target !== event.currentTarget) return
-      // 押されたキーが Enter(13) ではない場合、Shift キーが同時に押されて
-      // いなかった場合は中断する
-      if (!event.shiftKey || event.keyCode !== 13) return
+      // 押されたキーが Enter ではなく、
+      // また Shift キーが同時に押されていなかった場合は中断する
+      if (!event.shiftKey || event.key !== 'Enter') return
       // イベントの伝播(propagation)を止める
       event.stopPropagation()
       // この要素のデフォルトの keyup ハンドラが実行されないようにする

From 7bfc60867bc5bb52cd1c7de9c797bf32946edf4c Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 18:27:21 +0900
Subject: [PATCH 10/17] Add a section about using custom directives in render
 functions

https://github.com/vuejs/docs-next/commit/eb244fdd35b7e45b5fd3ac0a06a9c5cb54abe4cd#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index f98dd613..c9180e3f 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -530,6 +530,27 @@ Similarly, if the value passed to `is` is a component options object then there'
 
 Much like a `<template>` tag, a `<component>` tag is only required in templates as a syntactical placeholder and should be discarded when migrating to a `render` function.
 
+### Custom Directives
+
+Custom directives can be applied to a VNode using [`withDirectives`](/api/global-api.html#withdirectives):
+
+```js
+const { h, resolveDirective, withDirectives } = Vue
+
+// ...
+
+// <div v-pin:top.animate="200"></div>
+render () {
+  const pin = resolveDirective('pin')
+
+  return withDirectives(h('div'), [
+    [pin, 200, 'top', { animate: true }]
+  ])
+}
+```
+
+[`resolveDirective`](/api/global-api.html#resolvedirective) is the same function that templates use internally to resolve directives by name. That is only necessary if you don't already have direct access to the directive's definition object.
+
 ## JSX
 
 たくさんの `render` 関数を書いていると、こういう感じのものを書くのがつらく感じるかもしれません:

From 977c1579a307aaea97b8dc377333bb9ab0ca0dc3 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 18:28:26 +0900
Subject: [PATCH 11/17] Using built-in components with render and :is

https://github.com/vuejs/docs-next/commit/588c1f6d072f7c0763355ffddde2f26a0ecfa095#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index c9180e3f..726dc1f3 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -551,6 +551,22 @@ render () {
 
 [`resolveDirective`](/api/global-api.html#resolvedirective) is the same function that templates use internally to resolve directives by name. That is only necessary if you don't already have direct access to the directive's definition object.
 
+### Built-in Components
+
+[Built-in components](/api/built-in-components.html) such as `<keep-alive>`, `<transition>`, `<transition-group>`, and `<teleport>` are not registered globally by default. This allows bundlers to perform tree-shaking, so that the components are only included in the build if they are used. However, that also means we can't access them using `resolveComponent` or `resolveDynamicComponent`.
+
+Templates have special handling for those components, automatically importing them when they are used. When we're writing our own `render` functions, we need to import them ourselves:
+
+```js
+const { h, KeepAlive, Teleport, Transition, TransitionGroup } = Vue
+
+// ...
+
+render () {
+  return h(Transition, { mode: 'out-in' }, /* ... */)
+}
+```
+
 ## JSX
 
 たくさんの `render` 関数を書いていると、こういう感じのものを書くのがつらく感じるかもしれません:

From 508c5aeae7375593473b7d4373126264b237f633 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 18:32:01 +0900
Subject: [PATCH 12/17] docs: add a section about functional components

https://github.com/vuejs/docs-next/commit/1d2fb1696b540e94572046e0ecfcc23f22983581#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index 726dc1f3..31a65ff5 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -136,9 +136,9 @@ return h('h1', {}, this.blogTitle)
 ```js
 // @returns {VNode}
 h(
-  // {String | Object | Function } tag
-  // HTMLタグ名、コンポーネントまたは非同期コンポーネント
-  // nullを返す関数を使用した場合、コメントがレンダリングされます。
+  // {String | Object | Function} tag
+  // HTMLタグ名、コンポーネント、非同期コンポーネント、
+  // または関数型コンポーネント。
   //
   // 必須
   'div',
@@ -609,6 +609,31 @@ app.mount('#demo')
 
 JSX がどのように JavaScript に変換されるのか、より詳細な情報は、 [使用方法](https://github.com/vuejs/jsx-next#installation) を見てください。
 
+## Functional Components
+
+Functional components are an alternative form of component that don't have any state of their own. They are rendered without creating a component instance, bypassing the usual component lifecycle.
+
+To create a functional component we use a plain function, rather than an options object. The function is effectively the `render` function for the component. As there is no `this` reference for a functional component, Vue will pass in the `props` as the first argument:
+
+```js
+const FunctionalComponent = (props, context) => {
+  // ...
+}
+```
+
+The second argument, `context`, contains three properties: `attrs`, `emit`, and `slots`. These are equivalent to the instance properties [`$attrs`](/api/instance-properties.html#attrs), [`$emit`](/api/instance-methods.html#emit), and [`$slots`](/api/instance-properties.html#slots) respectively.
+
+Most of the usual configuration options for components are not available for functional components. However, it is possible to define [`props`](/api/options-data.html#props) and [`emits`](/api/options-data.html#emits) by adding them as properties:
+
+```js
+FunctionalComponent.props = ['value']
+FunctionalComponent.emits = ['click']
+```
+
+If the `props` option is not specified, then the `props` object passed to the function will contain all attributes, the same as `attrs`. The prop names will not be normalized to camelCase unless the `props` option is specified.
+
+Functional components can be registered and consumed just like normal components. If you pass a function as the first argument to `h`, it will be treated as a functional component.
+
 ## テンプレートのコンパイル
 
 あなたは Vue のテンプレートが実際に render 関数にコンパイルされることに興味があるかもしれません。これは通常知っておく必要のない実装の詳細ですが、もし特定のテンプレートの機能がどのようにコンパイルされるか知りたいのなら、これが面白いかもしれません。これは、 `Vue.compile` を使用してテンプレートの文字列をライブコンパイルする小さなデモです:

From e819a0e6bfbf5f32cd90c377e5e9147b8ab3ba36 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 18:33:51 +0900
Subject: [PATCH 13/17] docs: return values for render functions

https://github.com/vuejs/docs-next/commit/da874b21fab5d00cd6edb876d69a841c0052ee69#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index 31a65ff5..68129bba 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -567,6 +567,33 @@ render () {
 }
 ```
 
+## Return Values for Render Functions
+
+In all of the examples we've seen so far, the `render` function has returned a single root VNode. However, there are alternatives.
+
+Returning a string will create a text VNode, without any wrapping element:
+
+```js
+render() {
+  return 'Hello world!'
+}
+```
+
+We can also return an array of children, without wrapping them in a root node. This creates a fragment:
+
+```js
+// Equivalent to a template of `Hello<br>world!`
+render() {
+  return [
+    'Hello',
+    h('br'),
+    'world!'
+  ]
+}
+```
+
+If a component needs to render nothing, perhaps because data is still loading, it can just return `null`. This will be rendered as a comment node in the DOM.
+
 ## JSX
 
 たくさんの `render` 関数を書いていると、こういう感じのものを書くのがつらく感じるかもしれません:

From 9d8cb973b67756b1422dcf43bf0b65219045c920 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 29 Apr 2021 18:35:14 +0900
Subject: [PATCH 14/17] chore: switch javascript code blocks to js

https://github.com/vuejs/docs-next/commit/5753b78caa80309065554b2c2583bcdce03bc325#diff-0b635f32793fe88d869035c17f5143d6a7011183741021e19963a52beb70927a
---
 src/guide/render-function.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index 68129bba..89e01dfc 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -354,7 +354,7 @@ For the `.passive`, `.capture`, and `.once` event modifiers, they can be concate
 
 例えば:
 
-```javascript
+```js
 render() {
   return h('input', {
     onClickCapture: this.doThisInCapturingMode,

From f03a5e7ac1e5cf5345ad97818e8c309519d32729 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 4 May 2021 00:33:55 +0900
Subject: [PATCH 15/17] docs: translate h() args to slot section

---
 src/guide/render-function.md | 48 ++++++++++++++++++------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index 89e01dfc..748046e0 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -166,11 +166,11 @@ h(
 )
 ```
 
-If there are no props then the children can usually be passed as the second argument. In cases where that would be ambiguous, `null` can be passed as the second argument to keep the children as the third argument.
+props がない場合は、通常 children を第2引数として渡すことができます。それがあいまいな場合は、 `null` を第2引数として渡して、 children を第3引数にしておけます。
 
 ## 完全な例
 
-この知識によって、書き始めたコンポーネントを今では完成させることができます:
+この知識によって、今度は書き始めたコンポーネントを完成させることができます:
 
 ```js
 const { createApp, h } = Vue
@@ -246,9 +246,9 @@ render() {
 }
 ```
 
-## Creating Component VNodes
+## コンポーネントの VNodes を作る
 
-To create a VNode for a component, the first argument passed to `h` should be the component itself:
+コンポーネントの VNode を作るためには、 `h` の第1引数にコンポーネントそのものを渡します:
 
 ```js
 render() {
@@ -256,7 +256,7 @@ render() {
 }
 ```
 
-If we need to resolve a component by name then we can call `resolveComponent`:
+コンポーネントを名前解決する必要がある場合は、 `resolveComponent` で呼び出せます:
 
 ```js
 const { h, resolveComponent } = Vue
@@ -269,12 +269,12 @@ render() {
 }
 ```
 
-`resolveComponent` is the same function that templates use internally to resolve components by name.
+`resolveComponent` は、テンプレートがコンポーネントを名前解決するために内部的に使っているものと同じ関数です。
 
-A `render` function will normally only need to use `resolveComponent` for components that are [registered globally](/guide/component-registration.html#global-registration). [Local component registration](/guide/component-registration.html#local-registration) can usually be skipped altogether. Consider the following example:
+`render` 関数は通常、 [グローバルに登録された](/guide/component-registration.html#グローバル登録) コンポーネントにだけ `resolveComponent` を使う必要があります。 [ローカルのコンポーネント登録](/guide/component-registration.html#ローカル登録) は通常、完全に省略できます。次のような例を考えてみましょう:
 
 ```js
-// We can simplify this
+// これを単純化してみると
 components: {
   ButtonCounter
 },
@@ -283,7 +283,7 @@ render() {
 }
 ```
 
-Rather than registering a component by name and then looking it up we can use it directly instead:
+コンポーネントの名前を登録して、それを調べるというよりも、直接使うことができます:
 
 ```js
 render() {
@@ -319,7 +319,7 @@ render() {
 }
 ```
 
-In a template it can be useful to use a `<template>` tag to hold a `v-if` or `v-for` directive. When migrating to a `render` function, the `<template>` tag is no longer required and can be discarded.
+テンプレートでは、 `<template>` タグを使って `v-if` や `v-for` ディレクティブを当てておくと便利です。 `render` 関数に移行するときには、 `<template>` タグは不要となり、破棄することができます。
 
 ### `v-model`
 
@@ -350,7 +350,7 @@ render() {
 
 #### イベント修飾子
 
-For the `.passive`, `.capture`, and `.once` event modifiers, they can be concatenated after the event name using camel case.
+`.passive`、`.capture`、 `.once` イベント修飾子は、キャメルケースを使ってイベント名の後につなげます。
 
 例えば:
 
@@ -372,8 +372,8 @@ render() {
 | `.stop`                                              | `event.stopPropagation()`                                                                                            |
 | `.prevent`                                           | `event.preventDefault()`                                                                                             |
 | `.self`                                              | `if (event.target !== event.currentTarget) return`                                                                   |
-| Keys:<br>e.g. `.enter`                               | `if (event.key !== 'Enter') return`<br><br>Change `'Enter'` to the appropriate [key](http://keycode.info/) |
-| Modifier Keys:<br>`.ctrl`, `.alt`, `.shift`, `.meta` | `if (!event.ctrlKey) return`<br><br>Likewise for `altKey`, `shiftKey`, and `metaKey`                       |
+| キー:<br>例 `.enter`                               | `if (event.key !== 'Enter') return`<br><br>`'Enter'` キーを適切な [キー](http://keycode.info/) に変更 |
+| 修飾キー:<br>`.ctrl`, `.alt`, `.shift`, `.meta` | `if (!event.ctrlKey) return`<br><br>`altKey`、`shiftKey`、`metaKey` も同様                       |
 
 これらすべての修飾子を一緒に使った例がこちらです:
 
@@ -418,7 +418,7 @@ render() {
 }
 ```
 
-For component VNodes, we need to pass the children to `h` as an object rather than an array. Each property is used to populate the slot of the same name:
+コンポーネントの VNodes の場合、引数 children を配列ではなくオブジェクトとして `h` に渡す必要があります。各プロパティは、同名のスロットに移植するために使われます:
 
 ```js
 render() {
@@ -437,12 +437,12 @@ render() {
 }
 ```
 
-The slots are passed as functions, allowing the child component to control the creation of each slot's contents. Any reactive data should be accessed within the slot function to ensure that it's registered as a dependency of the child component and not the parent. Conversely, calls to `resolveComponent` should be made outside the slot function, otherwise they'll resolve relative to the wrong component:
+スロットは関数として渡され、子コンポーネントが各スロットのコンテンツの作成を制御できるようになっています。リアクティブなデータは、親コンポーネントではなく子コンポーネントの依存関係として登録されるように、スロット関数内でアクセスする必要があります。逆に `resolveComponent` の呼び出しは、スロット関数の外で行うべきで、そうしないと間違ったコンポーネントへの相対的な解決になってしまいます:
 
 ```js
 // `<MyButton><MyIcon :name="icon" />{{ text }}</MyButton>`
 render() {
-  // Calls to resolveComponent should be outside the slot function
+  // resolveComponent の呼び出しはスロット関数の外側でなければなりません
   const Button = resolveComponent('MyButton')
   const Icon = resolveComponent('MyIcon')
 
@@ -450,10 +450,10 @@ render() {
     Button,
     null,
     {
-      // Use an arrow function to preserve the `this` value
+      // アロー関数を使って `this` の値を保持します
       default: (props) => {
-        // Reactive properties should be read inside the slot function
-        // so that they become dependencies of the child's rendering
+        // リアクティブなプロパティは、子のレンダリングの依存関係になるように
+        // スロット関数の内側で読み込む必要があります
         return [
           h(Icon, { name: this.icon }),
           this.text
@@ -464,7 +464,7 @@ render() {
 }
 ```
 
-If a component receives slots from its parent, they can be passed on directly to a child component:
+コンポーネントが親からスロットを受け取った場合、そのスロットを子のコンポーネントに直接渡せます:
 
 ```js
 render() {
@@ -472,7 +472,7 @@ render() {
 }
 ```
 
-They can also be passed individually or wrapped as appropriate:
+また、必要に応じて個別に渡したり、ラップすることもできます:
 
 ```js
 render() {
@@ -480,11 +480,11 @@ render() {
     Panel,
     null,
     {
-      // If we want to pass on a slot function we can
+      // スロット関数を渡したい場合は次のようになります
       header: this.$slots.header,
 
-      // If we need to manipulate the slot in some way
-      // then we need to wrap it in a new function
+      // スロットを何らかの方法で操作する必要がある場合は、
+      // 新しい関数でそれをラップする必要があります
       default: (props) => {
         const children = this.$slots.default ? this.$slots.default(props) : []
 

From a4ac58e6d176bd143b16810750c77fc992609afe Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 4 May 2021 14:10:36 +0900
Subject: [PATCH 16/17] docs: translate a render function page

---
 src/guide/render-function.md | 56 ++++++++++++++++++------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index 748046e0..bb67534f 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -495,9 +495,9 @@ render() {
 }
 ```
 
-### `<component>` and `is`
+### `<component>` と `is`
 
-Behind the scenes, templates use `resolveDynamicComponent` to implement the `is` attribute. We can use the same function if we need all the flexibility provided by `is` in our `render` function:
+舞台裏では、テンプレートは `resolveDynamicComponent` をつかって `is` 属性を実装しています。 `render` 関数で `is` 属性がもつ、すべての柔軟性が必要な場合は、同じ関数を使うことができます:
 
 ```js
 const { h, resolveDynamicComponent } = Vue
@@ -511,13 +511,13 @@ render() {
 }
 ```
 
-Just like `is`, `resolveDynamicComponent` supports passing a component name, an HTML element name, or a component options object.
+`is` と同じように `resolveDynamicComponent` は、コンポーネント名、HTML 要素名、コンポーネントのオプションオブジェクトをサポートします。
 
-However, that level of flexibility is usually not required. It's often possible to replace `resolveDynamicComponent` with a more direct alternative.
+しかし、通常このレベルの柔軟性はいりません。 `resolveDynamicComponent` をより直接的な代替手段で置き換えることができる場合が多いです。
 
-For example, if we only need to support component names then `resolveComponent` can be used instead.
+例えば、コンポーネント名をサポートするだけならば、代わりに `resolveComponent` が使えます。
 
-If the VNode is always an HTML element then we can pass its name directly to `h`:
+VNode が常に HTML 要素ならば、 `h` にその要素名を直接渡せます:
 
 ```js
 // `<component :is="bold ? 'strong' : 'em'"></component>`
@@ -526,13 +526,13 @@ render() {
 }
 ```
 
-Similarly, if the value passed to `is` is a component options object then there's no need to resolve anything, it can be passed directly as the first argument of `h`.
+同じように、 `is` に渡された値がコンポーネントのオプションオブジェクトならば、なにも解決する必要はなく、 `h` の第1引数として直接渡せます。
 
-Much like a `<template>` tag, a `<component>` tag is only required in templates as a syntactical placeholder and should be discarded when migrating to a `render` function.
+`<template>` タグと同様に、 `<component>` タグはテンプレートの中で構文上のプレースホルダとしてのみ必要で、 `render` 関数に移行するときには破棄してください。
 
-### Custom Directives
+### カスタムディレクティブ
 
-Custom directives can be applied to a VNode using [`withDirectives`](/api/global-api.html#withdirectives):
+カスタムディレクティブは、 [`withDirectives`](/api/global-api.html#withdirectives) を使って VNode に適用できます:
 
 ```js
 const { h, resolveDirective, withDirectives } = Vue
@@ -549,13 +549,13 @@ render () {
 }
 ```
 
-[`resolveDirective`](/api/global-api.html#resolvedirective) is the same function that templates use internally to resolve directives by name. That is only necessary if you don't already have direct access to the directive's definition object.
+[`resolveDirective`](/api/global-api.html#resolvedirective) は、テンプレートが内部でディレクティブの名前解決をするのと同じ関数です。これは、まだディレクティブの定義オブジェクトに直接アクセスしていない場合にのみ必要です。
 
-### Built-in Components
+### 組み込みコンポーネント
 
-[Built-in components](/api/built-in-components.html) such as `<keep-alive>`, `<transition>`, `<transition-group>`, and `<teleport>` are not registered globally by default. This allows bundlers to perform tree-shaking, so that the components are only included in the build if they are used. However, that also means we can't access them using `resolveComponent` or `resolveDynamicComponent`.
+`<keep-alive>`、`<transition>`、`<transition-group>`、 `<teleport>` などの [組み込みコンポーネント](/api/built-in-components.html) はデフォルトではグローバルに登録されません。これによりバンドラーが Tree Shaking（ツリーシェイキング）を行い、コンポーネントが使われている場合にだけビルドに含まれるようになります。しかし、これは `resolveComponent` や `resolveDynamicComponent` を使ってアクセスできないということです。
 
-Templates have special handling for those components, automatically importing them when they are used. When we're writing our own `render` functions, we need to import them ourselves:
+テンプレートはこれらのコンポーネントを特別扱いしていて、使われるときには自動的にインポートします。自分で `render` 関数を書く場合は、自身でそれらをインポートする必要があります:
 
 ```js
 const { h, KeepAlive, Teleport, Transition, TransitionGroup } = Vue
@@ -567,11 +567,11 @@ render () {
 }
 ```
 
-## Return Values for Render Functions
+## Render 関数の返り値
 
-In all of the examples we've seen so far, the `render` function has returned a single root VNode. However, there are alternatives.
+これまで見てきた例は、 `render` 関数が1つのルート VNode を返してきました。しかし、これには代替手段があります。
 
-Returning a string will create a text VNode, without any wrapping element:
+文字列を返すと、ラップする要素のないテキストの VNode が作成されます:
 
 ```js
 render() {
@@ -579,10 +579,10 @@ render() {
 }
 ```
 
-We can also return an array of children, without wrapping them in a root node. This creates a fragment:
+また、ルートノードでラップしない子の配列を返せます。これは Fragment を作成します:
 
 ```js
-// Equivalent to a template of `Hello<br>world!`
+// テンプレートの `Hello<br>world!` に相当します
 render() {
   return [
     'Hello',
@@ -592,7 +592,7 @@ render() {
 }
 ```
 
-If a component needs to render nothing, perhaps because data is still loading, it can just return `null`. This will be rendered as a comment node in the DOM.
+データの読み込み中など、コンポーネントがなにもレンダリングしない必要がある場合は、単に `null` を返すことができます。これは DOM のコメントノードとしてレンダリングされます。
 
 ## JSX
 
@@ -636,11 +636,11 @@ app.mount('#demo')
 
 JSX がどのように JavaScript に変換されるのか、より詳細な情報は、 [使用方法](https://github.com/vuejs/jsx-next#installation) を見てください。
 
-## Functional Components
+## 関数型コンポーネント
 
-Functional components are an alternative form of component that don't have any state of their own. They are rendered without creating a component instance, bypassing the usual component lifecycle.
+関数型コンポーネントとは、それ自体にはなんの状態も持たないコンポーネントの別方式です。これはコンポーネントのインスタンスを作成しないでレンダリングされるため、通常のコンポーネントのライフサイクルを無視します。
 
-To create a functional component we use a plain function, rather than an options object. The function is effectively the `render` function for the component. As there is no `this` reference for a functional component, Vue will pass in the `props` as the first argument:
+関数型コンポーネントを作成するには、オプションオブジェクトではなく、単純な関数を使います。この関数は、事実上、コンポーネントの `render` 関数です。関数型コンポーネントには `this` の参照がないため、 Vue は `props` を最初の引数として渡します:
 
 ```js
 const FunctionalComponent = (props, context) => {
@@ -648,21 +648,21 @@ const FunctionalComponent = (props, context) => {
 }
 ```
 
-The second argument, `context`, contains three properties: `attrs`, `emit`, and `slots`. These are equivalent to the instance properties [`$attrs`](/api/instance-properties.html#attrs), [`$emit`](/api/instance-methods.html#emit), and [`$slots`](/api/instance-properties.html#slots) respectively.
+第2引数の `context` には3つのプロパティが含まれます: `attrs`、`emit`、`slots` です。これらはインスタンスプロパティの [`$attrs`](/api/instance-properties.html#attrs)、[`$emit`](/api/instance-methods.html#emit)、[`$slots`](/api/instance-properties.html#slots) に相当します。
 
-Most of the usual configuration options for components are not available for functional components. However, it is possible to define [`props`](/api/options-data.html#props) and [`emits`](/api/options-data.html#emits) by adding them as properties:
+コンポーネントで使う通常の設定オプションのほとんどは、関数型コンポーネントでは使えません。しかし、 [`props`](/api/options-data.html#props) や [`emits`](/api/options-data.html#emits) はプロパティとして追加定義することができます。:
 
 ```js
 FunctionalComponent.props = ['value']
 FunctionalComponent.emits = ['click']
 ```
 
-If the `props` option is not specified, then the `props` object passed to the function will contain all attributes, the same as `attrs`. The prop names will not be normalized to camelCase unless the `props` option is specified.
+`props` オプションが指定されていない場合、この関数に渡される `props` オブジェクトは `attrs` と同じく、すべての属性が含まれます。 `props` オプションが指定されていない場合、プロパティ名はキャメルケースに正規化されません。
 
-Functional components can be registered and consumed just like normal components. If you pass a function as the first argument to `h`, it will be treated as a functional component.
+関数型コンポーネントは、通常のコンポーネントと同様に登録したり、実行したりすることができます。関数を `h` の第1引数として渡すと、その関数は関数型コンポーネントとして扱われます。
 
 ## テンプレートのコンパイル
 
-あなたは Vue のテンプレートが実際に render 関数にコンパイルされることに興味があるかもしれません。これは通常知っておく必要のない実装の詳細ですが、もし特定のテンプレートの機能がどのようにコンパイルされるか知りたいのなら、これが面白いかもしれません。これは、 `Vue.compile` を使用してテンプレートの文字列をライブコンパイルする小さなデモです:
+あなたは Vue のテンプレートが実際に Render 関数にコンパイルされることに興味があるかもしれません。これは通常知っておく必要のない実装の詳細ですが、もし特定のテンプレートの機能がどのようにコンパイルされるか知りたいのなら、これが面白いかもしれません。これは、 `Vue.compile` を使用してテンプレートの文字列をライブコンパイルする小さなデモです:
 
 <iframe src="https://vue-next-template-explorer.netlify.app/" width="100%" height="420"></iframe>

From 5b66c2dbb4f42549778320e68c35cdf008378da5 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 6 May 2021 20:14:50 +0900
Subject: [PATCH 17/17] fix: re-translate 'behind the scene'

---
 src/guide/render-function.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index bb67534f..43c438ac 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -497,7 +497,7 @@ render() {
 
 ### `<component>` と `is`
 
-舞台裏では、テンプレートは `resolveDynamicComponent` をつかって `is` 属性を実装しています。 `render` 関数で `is` 属性がもつ、すべての柔軟性が必要な場合は、同じ関数を使うことができます:
+裏では、テンプレートは `resolveDynamicComponent` をつかって `is` 属性を実装しています。 `render` 関数で `is` 属性がもつ、すべての柔軟性が必要な場合は、同じ関数を使うことができます:
 
 ```js
 const { h, resolveDynamicComponent } = Vue