From c655c465a59c5d0bb5b8ccd9e9f4a4dddd672ebd Mon Sep 17 00:00:00 2001
From: Kohei Ikeda <tdn.suama@gmail.com>
Date: Thu, 19 Aug 2021 02:33:39 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB?=
 =?UTF-8?q?=E3=82=AC=E3=82=A4=E3=83=89=E3=81=AE=E7=B6=9A=E3=81=8D=E3=82=92?=
 =?UTF-8?q?=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style-guide/README.md | 45 ++++++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 24d8f2b5..e372d32b 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -28,7 +28,7 @@ sidebar: auto
 2. ほとんどのコミュニティのコードサンプルを変更なしにコピーして貼り付ける事ができます。
 3. 少なくとも Vue に関しては、ほとんどの場合、新たな人材はあなたのコーディングスタイルよりも既に慣れ親しんだものを好みます。
 
-### 優先度 D: 使用注意
+### 優先度 D: 注意して使用
 
 Vue のいくつかの機能は、レアケースまたは従来のコードベースからスムーズな移行に対応するために存在します。しかしながらこれを使いすぎると、コードを保守することが難しくなり、またバグの原因になることさえあります。これらのルールは潜在的な危険な機能を照らし、いつ、なぜ避けなかればならないのかを説明しています。
 
@@ -1473,22 +1473,22 @@ computed: {
 ```
 </div>
 
-## Priority D Rules: Use with Caution <span class="hide-from-sidebar">(Potentially Dangerous Patterns)</span>
+## 優先度 D のルール: 注意して使用 <span class="hide-from-sidebar">(潜在的に危険なパターン)</span>
 
-### Element selectors with `scoped` <sup data-p="d">use with caution</sup>
+### `scoped` 付きの要素セレクタ <sup data-p="d">注意して使用</sup>
 
-**Element selectors should be avoided with `scoped`.**
+**`scoped` 付きの要素セレクタは避けるべきです。**
 
-Prefer class selectors over element selectors in `scoped` styles, because large numbers of element selectors are slow.
+たくさんの要素セレクタは低速になるため、 `scoped` スタイルでは要素セレクターよりもクラスセレクターを優先してください。
 
-::: details Detailed Explanation
-To scope styles, Vue adds a unique attribute to component elements, such as `data-v-f3f3eg9`. Then selectors are modified so that only matching elements with this attribute are selected (e.g. `button[data-v-f3f3eg9]`).
+::: details 詳細な説明
+スタイルの範囲を決めるために、 Vue は `data-v-f3f3eg9` のような一意の属性をコンポーネントの要素に追加します。  
 
-The problem is that large numbers of [element-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=a%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `button[data-v-f3f3eg9]`) will be considerably slower than [class-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=.class%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `.btn-close[data-v-f3f3eg9]`), so class selectors should be preferred whenever possible.
+問題は、 たくさんの[要素-属性セレクタ](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=a%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (例： `button[data-v-f3f3eg9]`) が [クラス-属性 セレクタ](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=.class%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (例： `.btn-close[data-v-f3f3eg9]`) よりもかなり遅くなるため、 可能な限りクラスセレクタを優先すべきだということです。
 :::
 
 <div class="style-example style-example-bad">
-<h4>Bad</h4>
+<h4>悪い例</h4>
 
 ```html
 <template>
@@ -1504,7 +1504,7 @@ button {
 </div>
 
 <div class="style-example style-example-good">
-<h4>Good</h4>
+<h4>よい例</h4>
 
 ```html
 <template>
@@ -1519,16 +1519,17 @@ button {
 ```
 </div>
 
-### Implicit parent-child communication <sup data-p="d">use with caution</sup>
+### 暗黙的な親子間のやりとり <sup data-p="d">注意して使用</sup>
 
-**Props and events should be preferred for parent-child component communication, instead of `this.$parent` or mutating props.**
+**親子コンポーネントのやり取りには、 `this.$parent` や プロパティの変更ではなく プロパティとイベントを優先するべきです。**
 
-An ideal Vue application is props down, events up. Sticking to this convention makes your components much easier to understand. However, there are edge cases where prop mutation or `this.$parent` can simplify two components that are already deeply coupled.
+理想的な Vue アプリケーションは props down, events up です。 この規則に従うことで、コンポーネントはより理解しやすくなります。しかし、プロパティの変更と `this.$parent` が、すでに深く結合している2つのコンポーネントを単純化できるエッジケースも存在します。
 
-The problem is, there are also many _simple_ cases where these patterns may offer convenience. Beware: do not be seduced into trading simplicity (being able to understand the flow of your state) for short-term convenience (writing less code).
+問題は、これらのパターンが利便性をもたらす _シンプルな_ ケースも多くあるということです。
+注意：シンプルさ（状態の流れを理解できること）と短期的な利便性（より少ないコードを書くこと）の交換に誘惑されないようにしましょう。
 
 <div class="style-example style-example-bad">
-<h4>Bad</h4>
+<h4>悪い例</h4>
 
 ```js
 app.component('TodoItem', {
@@ -1571,7 +1572,7 @@ app.component('TodoItem', {
 </div>
 
 <div class="style-example style-example-good">
-<h4>Good</h4>
+<h4>良い例</h4>
 
 ```js
 app.component('TodoItem', {
@@ -1612,16 +1613,16 @@ app.component('TodoItem', {
 ```
 </div>
 
-### Non-flux state management <sup data-p="d">use with caution</sup>
+### Flux以外の状態管理 <sup data-p="d">注意して使用</sup>
 
-**[Vuex](https://next.vuex.vuejs.org/) should be preferred for global state management, instead of `this.$root` or a global event bus.**
+**グローバルな状態管理には、 `this.$root` やグローバルイベントバスではなく [Vuex](https://next.vuex.vuejs.org/) を優先するべきです。**
 
-Managing state on `this.$root` and/or using a global event bus can be convenient for very simple cases, but it is not appropriate for most applications.
+`this.$root` での状態管理やグローバルイベントバスは非常に単純なケースでは便利ですが、ほとんどのアプリケーションには適していません。
 
-Vuex is the [official flux-like implementation](/guide/state-management.html#official-flux-like-implementation) for Vue, and offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes. It integrates well in the Vue ecosystem (including full [Vue DevTools](/guide/installation.html#vue-devtools) support).
+Vuex は Vue [公式の Flux ライクな実装](/guide/state-management.html#公式の-flux-ライクな実装) で、 状態を管理するための中心的な場所の提供だけでなく、状態の変更を整理、追跡、およびデバッグするためのツールも提供します。Vuexは、Vueのエコシステムにうまく統合されています ([Vue DevTools](/guide/installation.html#vue-devtools) の完全なサポートも含みます)。
 
 <div class="style-example style-example-bad">
-<h4>Bad</h4>
+<h4>悪い例</h4>
 
 ```js
 // main.js
@@ -1650,7 +1651,7 @@ const app = createApp({
 </div>
 
 <div class="style-example style-example-good">
-<h4>Good</h4>
+<h4>良い例</h4>
 
 ```js
 // store/modules/todos.js

From 7b58325cbe44960c49df9570bbc3c28a88689231 Mon Sep 17 00:00:00 2001
From: Kohei Ikeda <tdn.suama@gmail.com>
Date: Thu, 19 Aug 2021 02:35:15 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=E8=A1=A8=E8=A8=98=E3=83=96=E3=83=AC?=
 =?UTF-8?q?=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index e372d32b..858cfc05 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1504,7 +1504,7 @@ button {
 </div>
 
 <div class="style-example style-example-good">
-<h4>よい例</h4>
+<h4>良い例</h4>
 
 ```html
 <template>

From 5a42d54ed27ae7efd7edba59327082dd8109b4a0 Mon Sep 17 00:00:00 2001
From: Kohei ikeda <tdn.suama@gmail.com>
Date: Thu, 19 Aug 2021 12:39:26 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=E8=A1=A8=E8=A8=98=E3=83=96=E3=83=AC?=
 =?UTF-8?q?=E3=81=AE=E4=BF=AE=E6=AD=A3=E2=91=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style-guide/README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 858cfc05..040d2a7d 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1479,7 +1479,7 @@ computed: {
 
 **`scoped` 付きの要素セレクタは避けるべきです。**
 
-たくさんの要素セレクタは低速になるため、 `scoped` スタイルでは要素セレクターよりもクラスセレクターを優先してください。
+たくさんの要素セレクタは低速になるため、 `scoped` スタイルでは要素セレクタよりもクラスセレクタを優先してください。
 
 ::: details 詳細な説明
 スタイルの範囲を決めるために、 Vue は `data-v-f3f3eg9` のような一意の属性をコンポーネントの要素に追加します。  
@@ -1521,12 +1521,12 @@ button {
 
 ### 暗黙的な親子間のやりとり <sup data-p="d">注意して使用</sup>
 
-**親子コンポーネントのやり取りには、 `this.$parent` や プロパティの変更ではなく プロパティとイベントを優先するべきです。**
+**親子コンポーネントのやりとりには、 `this.$parent` や プロパティの変更ではなく プロパティとイベントを優先するべきです。**
 
 理想的な Vue アプリケーションは props down, events up です。 この規則に従うことで、コンポーネントはより理解しやすくなります。しかし、プロパティの変更と `this.$parent` が、すでに深く結合している2つのコンポーネントを単純化できるエッジケースも存在します。
 
-問題は、これらのパターンが利便性をもたらす _シンプルな_ ケースも多くあるということです。
-注意：シンプルさ（状態の流れを理解できること）と短期的な利便性（より少ないコードを書くこと）の交換に誘惑されないようにしましょう。
+問題は、これらのパターンが利便性をもたらす _単純な_ ケースも多くあるということです。
+注意：単純さ（状態の流れを理解できること）と短期的な利便性（より少ないコードを書くこと）の交換に誘惑されないようにしましょう。
 
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>

From e610ad384f714e7dc31b1dc4e5ff2bc62338650d Mon Sep 17 00:00:00 2001
From: Kohei ikeda <tdn.suama@gmail.com>
Date: Thu, 19 Aug 2021 12:42:26 +0900
Subject: [PATCH 4/4] fix lint error

---
 src/style-guide/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 040d2a7d..dbc5f91c 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1523,7 +1523,7 @@ button {
 
 **親子コンポーネントのやりとりには、 `this.$parent` や プロパティの変更ではなく プロパティとイベントを優先するべきです。**
 
-理想的な Vue アプリケーションは props down, events up です。 この規則に従うことで、コンポーネントはより理解しやすくなります。しかし、プロパティの変更と `this.$parent` が、すでに深く結合している2つのコンポーネントを単純化できるエッジケースも存在します。
+理想的な Vue アプリケーションは props down, events up です。 この規則に従うことで、コンポーネントはより理解しやすくなります。しかし、プロパティの変更と `this.$parent` が、すでに深く結合している 2 つのコンポーネントを単純化できるエッジケースも存在します。
 
 問題は、これらのパターンが利便性をもたらす _単純な_ ケースも多くあるということです。
 注意：単純さ（状態の流れを理解できること）と短期的な利便性（より少ないコードを書くこと）の交換に誘惑されないようにしましょう。
@@ -1619,7 +1619,7 @@ app.component('TodoItem', {
 
 `this.$root` での状態管理やグローバルイベントバスは非常に単純なケースでは便利ですが、ほとんどのアプリケーションには適していません。
 
-Vuex は Vue [公式の Flux ライクな実装](/guide/state-management.html#公式の-flux-ライクな実装) で、 状態を管理するための中心的な場所の提供だけでなく、状態の変更を整理、追跡、およびデバッグするためのツールも提供します。Vuexは、Vueのエコシステムにうまく統合されています ([Vue DevTools](/guide/installation.html#vue-devtools) の完全なサポートも含みます)。
+Vuex は Vue [公式の Flux ライクな実装](/guide/state-management.html#公式の-flux-ライクな実装) で、 状態を管理するための中心的な場所の提供だけでなく、状態の変更を整理、追跡、およびデバッグするためのツールも提供します。 Vuex は、 Vue のエコシステムにうまく統合されています ([Vue DevTools](/guide/installation.html#vue-devtools) の完全なサポートも含みます)。
 
 <div class="style-example style-example-bad">
 <h4>悪い例</h4>