From 62c26d0404b9b3ad0b0915bce7a0a37873606816 Mon Sep 17 00:00:00 2001
From: daisuke <dsaito85a@gmail.com>
Date: Thu, 5 Nov 2020 22:22:35 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E5=89=8D=E3=83=95?=
 =?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E3=82=92=E7=8F=BE=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E6=9C=80=E6=96=B0=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?=
 =?UTF-8?q?=E3=81=A7=E6=9B=B4=E6=96=B0(#110)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

下記ファイルの最新版で上書きしました
https://github.com/vuejs/docs-next/blob/master/src/guide/migration/custom-directives.md
---
 src/guide/migration/custom-directives.md | 39 ++++++++++++------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md
index a0a5bb96..4070ba4b 100644
--- a/src/guide/migration/custom-directives.md
+++ b/src/guide/migration/custom-directives.md
@@ -10,7 +10,6 @@ badges:
 Here is a quick summary of what has changed:
 
 - API has been renamed to better align with component lifecycle
-- Custom directives will be controlled by child component via `v-bind="$attrs"`
 
 For more information, read on!
 
@@ -27,7 +26,7 @@ In Vue 2, custom directives were created by using the hooks listed below to targ
 Here’s an example of this:
 
 ```html
-<p v-highlight="yellow">Highlight this text bright yellow</p>
+<p v-highlight="'yellow'">Highlight this text bright yellow</p>
 ```
 
 ```js
@@ -49,7 +48,7 @@ In Vue 3, however, we’ve created a more cohesive API for custom directives. As
 - **beforeUpdate**: new! this is called before the element itself is updated, much like the component lifecycle hooks.
 - update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead.
 - componentUpdated → **updated**
-- **beforeUnmount** new! similar to component lifecycle hooks, this will be called right before an element is unmounted.
+- **beforeUnmount**: new! similar to component lifecycle hooks, this will be called right before an element is unmounted.
 - unbind -> **unmounted**
 
 The final API is as follows:
@@ -68,7 +67,7 @@ const MyDirective = {
 The resulting API could be used like this, mirroring the example from earlier:
 
 ```html
-<p v-highlight="yellow">Highlight this text bright yellow</p>
+<p v-highlight="'yellow'">Highlight this text bright yellow</p>
 ```
 
 ```js
@@ -83,26 +82,26 @@ app.directive('highlight', {
 
 Now that the custom directive lifecycle hooks mirror those of the components themselves, they become easier to reason about and remember!
 
-## Implementation Details
+### Edge Case: Accessing the component instance
 
-In Vue 3, we're now supporting fragments, which allow us to return more than one DOM node per component. You can imagine how handy that is for something like a component with multiple lis or the children elements of a table:
+It's generally recommended to keep directives independent of the component instance they are used in. Accessing the instance from within a custom directive is often a sign that the directive should rather be a component itself. However, there are situations where this actually makes sense.
 
-```html
-<template>
-  <li>Hello</li>
-  <li>Vue</li>
-  <li>Devs!</li>
-</template>
-```
+In Vue 2, the component instance had to be accessed through the `vnode` argument:
 
-As wonderfully flexible as this is, we can potentially encounter a problem with a custom directive that could have multiple root nodes.
-
-As a result, custom directives are now included as part of a virtual DOM node’s data. When a custom directive is used on a component, hooks are passed down to the component as extraneous props and end up in `this.$attrs`.
+```javascript
+bind(el, binding, vnode) {
+  const vm = vnode.context
+}
+```
 
-This also means it's possible to directly hook into an element's lifecycle like this in the template, which can be handy when a custom directive is too involved:
+In Vue 3, the instance is now part of the `binding`:
 
-```html
-<div @vnodeMounted="myHook" />
+```javascript
+mounted(el, binding, vnode) {
+  const vm = binding.instance
+}
 ```
 
-This is consistent with the attribute fallthrough behavior, so when a child component uses `v-bind="$attrs"` on an inner element, it will apply any custom directives used on it as well.
+:::warning
+With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown.
+:::
\ No newline at end of file

From fc9424fea80b6b4be8494d08ffa1da306f8662f8 Mon Sep 17 00:00:00 2001
From: daisuke <dsaito85a@gmail.com>
Date: Sun, 8 Nov 2020 12:02:16 +0900
Subject: [PATCH 2/4] =?UTF-8?q?Migration=20Guide=20>=20Custom=20Directives?=
 =?UTF-8?q?=20=E3=81=AE=E7=BF=BB=E8=A8=B3=20#110?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/guide/migration/custom-directives.md | 61 ++++++++++++------------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md
index 4070ba4b..811b3425 100644
--- a/src/guide/migration/custom-directives.md
+++ b/src/guide/migration/custom-directives.md
@@ -3,30 +3,30 @@ badges:
   - breaking
 ---
 
-# Custom Directives <MigrationBadges :badges="$frontmatter.badges" />
+# カスタムディレクティブ <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-Here is a quick summary of what has changed:
+変更点の概要は次のとおりです。
 
-- API has been renamed to better align with component lifecycle
+- API は、コンポーネントのライフサイクルとの整合性を高めるために名前が変更されました
 
-For more information, read on!
+詳細については、以下をお読みください。
 
-## 2.x Syntax
+## 2.x の文法
 
-In Vue 2, custom directives were created by using the hooks listed below to target an element’s lifecycle, all of which are optional:
+Vue 2 では、以下のフックを使用して要素のライフサイクルをターゲットにしたカスタムディレクティブが作成していました。これらはすべてオプションです。
 
-- **bind** - Occurs once the directive is bound to the element. Occurs only once.
-- **inserted** - Occurs once the element is inserted into the parent DOM.
-- **update** - This hook is called when the element updates, but children haven't been updated yet.
-- **componentUpdated** - This hook is called once the component and the children have been updated.
-- **unbind** - This hook is called once the directive is removed. Also called only once.
+- **bind** - ディレクティブが要素にバインドされると発生します。一度だけ発生します。
+- **inserted** - 要素が親 DOM に挿入された後に発生します。
+- **update** - 要素が更新されたときに呼び出されますが、子はまだ更新されていません。
+- **componentUpdated** - コンポーネントと子が更新されると呼び出されます。
+- **unbind** - ディレクティブが削除されると呼び出されます。 1回だけ呼び出されます。
 
-Here’s an example of this:
+この例を次に示します。
 
 ```html
-<p v-highlight="'yellow'">Highlight this text bright yellow</p>
+<p v-highlight="'yellow'">このテキストを明るい黄色で強調表示します</p>
 ```
 
 ```js
@@ -37,21 +37,22 @@ Vue.directive('highlight', {
 })
 ```
 
-Here, in the initial setup for this element, the directive binds a style by passing in a value, that can be updated to different values through the application.
+この要素の初期設定では、ディレクティブは値を渡してスタイルをバインドします。値は、アプリケーションにてさまざまな値に更新できます。
 
-## 3.x Syntax
+## 3.x の文法
 
-In Vue 3, however, we’ve created a more cohesive API for custom directives. As you can see, they differ greatly from our component lifecycle methods even though we’re hooking into similar events. We’ve now unified them like so:
+
+ただし、Vue 3 では、カスタムディレクティブ用のよりまとまりのあるAPIを作成しました。Vue 2 では、似たようなイベントにフックしているにもかかわらず、コンポーネントのライフサイクルメソッドとは大きく異なります。これらを次のように統合しました。
 
 - bind → **beforeMount**
 - inserted → **mounted**
-- **beforeUpdate**: new! this is called before the element itself is updated, much like the component lifecycle hooks.
-- update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead.
+- **beforeUpdate**: 追加されました! これは、コンポーネントのライフサイクルフックのように、要素自体が更新される前に呼び出されます。
+- update → 削除されました! updated と似たようなものが多すぎて冗長です。代わりに updated を使ってください。
 - componentUpdated → **updated**
-- **beforeUnmount**: new! similar to component lifecycle hooks, this will be called right before an element is unmounted.
+- **beforeUnmount**: 追加されました! コンポーネントのライフサイクルフックと同様に、要素がマウント解除される直前に呼び出されます。
 - unbind -> **unmounted**
 
-The final API is as follows:
+最終的なAPIは次のとおりです。
 
 ```js
 const MyDirective = {
@@ -59,15 +60,15 @@ const MyDirective = {
   mounted() {},
   beforeUpdate() {},
   updated() {},
-  beforeUnmount() {}, // new
+  beforeUnmount() {}, // 追加
   unmounted() {}
 }
 ```
 
-The resulting API could be used like this, mirroring the example from earlier:
+Vue 3 の API は、先ほどの例を用いてこのように使用できます。
 
 ```html
-<p v-highlight="'yellow'">Highlight this text bright yellow</p>
+<p v-highlight="'yellow'">このテキストを明るい黄色で強調表示します</p>
 ```
 
 ```js
@@ -80,13 +81,13 @@ app.directive('highlight', {
 })
 ```
 
-Now that the custom directive lifecycle hooks mirror those of the components themselves, they become easier to reason about and remember!
+カスタムディレクティブのライフサイクルフックがコンポーネントと同じになったことで、理由を説明したり、覚えるのがより簡単になりました。
 
-### Edge Case: Accessing the component instance
+### 特別な問題への対処: コンポーネントのインスタンスへのアクセス
 
-It's generally recommended to keep directives independent of the component instance they are used in. Accessing the instance from within a custom directive is often a sign that the directive should rather be a component itself. However, there are situations where this actually makes sense.
+一般的には、ディレクティブをコンポーネントのインスタンスから独立させることが推奨されています。カスタムディレクティブ内からインスタンスにアクセスする状況は、本来はディレクティブがコンポーネント自体であるべきことが多いです。しかし、まれにこれが有効なこともあります。
 
-In Vue 2, the component instance had to be accessed through the `vnode` argument:
+Vue 2 では、コンポーネントインスタンスは `vnode` 引数を使ってアクセスする必要がありました。
 
 ```javascript
 bind(el, binding, vnode) {
@@ -94,7 +95,7 @@ bind(el, binding, vnode) {
 }
 ```
 
-In Vue 3, the instance is now part of the `binding`:
+Vue 3 では、インスタンスは `binding` の一部になりました。
 
 ```javascript
 mounted(el, binding, vnode) {
@@ -103,5 +104,5 @@ mounted(el, binding, vnode) {
 ```
 
 :::warning
-With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown.
+[fragments](/guide/migration/fragments.html#overview) のサポートにより、コンポーネントは複数のルートノードを持つ可能性があります。マルチルートコンポーネントに適用すると、ディレクティブは無視され、警告がスローされます。
 :::
\ No newline at end of file

From a9804e8dc4b8b2f8c19719cb00eafd0e3002738b Mon Sep 17 00:00:00 2001
From: daisuke <dsaito85a@gmail.com>
Date: Wed, 11 Nov 2020 09:25:41 +0900
Subject: [PATCH 3/4] =?UTF-8?q?Migration=20Guide=20>=20Custom=20Directives?=
 =?UTF-8?q?=20=E3=81=AE=E7=BF=BB=E8=A8=B3=20=E3=83=AC=E3=83=93=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E6=8C=87=E6=91=98=E5=AF=BE=E5=BF=9C=20#110?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

resolve #110

レビュー指摘対応
- also が訳抜けしていたので該当箇所を追記
- 読みやすくなるよう修正
---
 src/guide/migration/custom-directives.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md
index 811b3425..fb0d332d 100644
--- a/src/guide/migration/custom-directives.md
+++ b/src/guide/migration/custom-directives.md
@@ -17,11 +17,11 @@ badges:
 
 Vue 2 では、以下のフックを使用して要素のライフサイクルをターゲットにしたカスタムディレクティブが作成していました。これらはすべてオプションです。
 
-- **bind** - ディレクティブが要素にバインドされると発生します。一度だけ発生します。
+- **bind** - ディレクティブが要素にバインドされると発生します。これは一度だけ発生します。
 - **inserted** - 要素が親 DOM に挿入された後に発生します。
 - **update** - 要素が更新されたときに呼び出されますが、子はまだ更新されていません。
 - **componentUpdated** - コンポーネントと子が更新されると呼び出されます。
-- **unbind** - ディレクティブが削除されると呼び出されます。 1回だけ呼び出されます。
+- **unbind** - ディレクティブが削除されると呼び出されます。 また、これは一度だけ呼び出されます。
 
 この例を次に示します。
 

From 61bd8067f3f349023fdc1ebcdf25f477c787f4ab Mon Sep 17 00:00:00 2001
From: daisuke <dsaito85a@gmail.com>
Date: Wed, 11 Nov 2020 10:21:43 +0900
Subject: [PATCH 4/4] =?UTF-8?q?fix:lint=E5=AF=BE=E5=BF=9C=20=E5=8D=8A?=
 =?UTF-8?q?=E8=A7=92=E3=81=A8=E5=85=A8=E8=A7=92=E3=81=AE=E9=96=93=E3=81=AF?=
 =?UTF-8?q?=E4=B8=80=E6=96=87=E5=AD=97=E3=81=82=E3=81=91=E3=82=8B(#110)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/guide/migration/custom-directives.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md
index fb0d332d..09520a18 100644
--- a/src/guide/migration/custom-directives.md
+++ b/src/guide/migration/custom-directives.md
@@ -42,7 +42,7 @@ Vue.directive('highlight', {
 ## 3.x の文法
 
 
-ただし、Vue 3 では、カスタムディレクティブ用のよりまとまりのあるAPIを作成しました。Vue 2 では、似たようなイベントにフックしているにもかかわらず、コンポーネントのライフサイクルメソッドとは大きく異なります。これらを次のように統合しました。
+ただし、Vue 3 では、カスタムディレクティブ用のよりまとまりのある API を作成しました。Vue 2 では、似たようなイベントにフックしているにもかかわらず、コンポーネントのライフサイクルメソッドとは大きく異なります。これらを次のように統合しました。
 
 - bind → **beforeMount**
 - inserted → **mounted**
@@ -52,7 +52,7 @@ Vue.directive('highlight', {
 - **beforeUnmount**: 追加されました! コンポーネントのライフサイクルフックと同様に、要素がマウント解除される直前に呼び出されます。
 - unbind -> **unmounted**
 
-最終的なAPIは次のとおりです。
+最終的な API は次のとおりです。
 
 ```js
 const MyDirective = {