Hide all style guide links and add outdated warnings on style guide pages (#2448)

Author: jay-es

src/guide/essentials/conditional.md

@@ -110,8 +110,8 @@ const awesome = ref(true)
 
 ## `v-if` と `v-for` {#v-if-with-v-for}
 
+同じ要素に対して `v-if` と `v-for` が両方使用されている場合、`v-if` が先に評価されます。詳細は、[リストレンダリングガイド](list#v-for-with-v-if)を参照してください。
+
 ::: warning Note
-暗黙的な優先順位により、 `v-if` と `v-for` を同じ要素で利用することは **推奨されません**。 詳細については [スタイルガイド](/style-guide/rules-essential#avoid-v-if-with-v-for) を参照ください。
+暗黙的な優先順位により、 `v-if` と `v-for` を同じ要素で利用することは **推奨されません**。 詳細については[リストレンダリングガイド](list#v-for-with-v-if)を参照ください。
 :::
-
-`v-if` と `v-for` が同じ要素に両方つかわれる場合、 `v-if` が先に評価されます。詳細については[リストレンダリングのガイド](list.html#v-for-with-v-if)を参照してください。

src/guide/essentials/list.md

@@ -223,10 +223,6 @@ data() {
 
 ## `v-for` と `v-if` を組み合わせる場合 {#v-for-with-v-if}
 
-:::warning 注意
-暗黙の優先順位があるため、`v-if` と `v-for` を同一の要素に対して使用することは**推奨されません**。詳しくは[スタイルガイド](/style-guide/rules-essential#avoid-v-if-with-v-for)を参照してください。
-:::
-
 同じノードに両方が存在する場合、`v-for` よりも `v-if` のほうが優先順位が高くなります。これは、以下のように `v-for` のスコープにある変数には `v-if` の条件式からアクセスできないことを意味します:
 
 ```vue-html
@@ -249,6 +245,16 @@ data() {
 </template>
 ```
 
+:::warning 注意
+暗黙の優先順位があるため、`v-if` と `v-for` を同一の要素に対して使用することは**推奨されません**
+
+これを使用したくなる一般的なケースは 2 つあります。
+
+- リストの項目をフィルタリングする場合（例: `v-for="user in users" v-if="user.isActive"`）。このようなケースでは、フィルタリングされたリストを返す新しい算出プロパティ（例: `activeUsers`）で `users` を置き換えます。
+
+- リストを非表示にする必要があるので、レンダリングしないようにする場合（例: `v-for="user in users" v-if="shouldShowUsers"`）。このようなケースでは、`v-if` をコンテナ要素（例: `ul`, `ol`）に移動します。
+:::
+
 ## `key` による状態管理 {#maintaining-state-with-key}
 
 `v-for` でレンダリングされた要素のリストを Vue が更新するとき、デフォルトでは「その場での修繕」（in-place patch）という戦略が用いられます。データ項目の順序が変更された場合、Vue は項目の順序に合うように DOM 要素を移動させるのではなく、個々の要素をその位置のままで修正し、各インデックスでレンダリングされるべきものを反映させます。
@@ -275,7 +281,7 @@ Vue に各ノードを一意に追跡するためのヒントを与え、既存
 ここでいう `key` は、`v-bind` でバインドされる特別な属性です。[`v-for` をオブジェクトに適用する](#v-for-with-an-object)ときのプロパティのキーの変数と混同しないように注意してください。
 :::
 
-`v-for` の `key` 属性は、可能な場合は必ず指定することが[推奨されます](/style-guide/rules-essential#use-keyed-v-for)。ただし、反復処理する DOM の内容が単純なものである（つまりコンポーネントやステートフルな DOM 要素を含まない）場合、またはパフォーマンス向上のために意図的にデフォルト動作を用いたい場合は、この限りではありません。
+`v-for` の `key` 属性は、可能な場合は必ず指定することが推奨されます。ただし、反復処理する DOM の内容が単純なものである（つまりコンポーネントやステートフルな DOM 要素を含まない）場合、またはパフォーマンス向上のために意図的にデフォルト動作を用いたい場合は、この限りではありません。
 
 `key` のバインディングにはプリミティブ型の値、つまり文字列と数値が想定されます。`v-for` の key にオブジェクトを指定してはいけません。`key` 属性の詳しい使い方については、[`key` API のドキュメント](/api/built-in-special-attributes#key)を参照してください。
 

src/style-guide/index.md

@@ -4,6 +4,10 @@ outline: deep
 
 # スタイルガイド {#style-guide}
 
+::: warning Note
+この Vue.js スタイルガイドは古くなっていますので、見直しが必要です。ご質問やご意見がありましたら、[issue をオープン](https://github.com/vuejs/docs/issues/new)してください。
+:::
+
 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための素晴らしい参考資料となります。しかし、どんなスタイルガイドもすべてのチームやプロジェクトにとって理想的であるとは考えていません。そのため、過去の経験、周囲の技術スタック、および個人的な価値観に基づいて、注意深い逸脱が奨励されます。
 
 ほとんどの場合、一般的な JavaScript や HTML に関する提案も避けています。セミコロンや末尾のカンマの使用は気にしません。 HTML の属性値がシングルクオートで囲まれているかダブルクオートで囲まれているかも気にしません。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません。
@@ -12,30 +16,30 @@ outline: deep
 
 ## ルールのカテゴリー {#rule-categories}
 
-### 優先度A: 必須（エラー対策） {#priority-a-essential-error-prevention}
+### 優先度 A: 必須（エラー対策） {#priority-a-essential-error-prevention}
 
 これらのルールはエラーを防ぐのに役立ちますので、何としても学んで守ってください。例外はありますが、非常にまれで、 JavaScript と Vue の両方の専門的な知識を持つ人のみが行うべきことです。
 
-- [優先度Aのルールをすべて見る](./rules-essential)
+- [優先度 A のルールをすべて見る](./rules-essential)
 
-### 優先度B: 強く推奨 {#priority-b-strongly-recommended}
+### 優先度 B: 強く推奨 {#priority-b-strongly-recommended}
 
 これらのルールは、ほとんどのプロジェクトで可読性および/または開発者の経験を向上させることが判明しています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はまれで、十分に正当化されるべきです。
 
-- [優先度Bのルールをすべて見る](./rules-strongly-recommended)
+- [優先度 B のルールをすべて見る](./rules-strongly-recommended)
 
-### 優先度C: 推奨 {#priority-c-recommended}
+### 優先度 C: 推奨 {#priority-c-recommended}
 
 同じくらい良いオプションが複数ある場合、一貫性を確保するために任意の選択をすることができます。これらのルールでは、それぞれ許容可能なオプションを説明し、既定の選択を提案します。つまり、一貫性があり、良い理由を持ち続ける限り、独自のコードベースで自由に異なる選択肢を作ることができます。ですが、良い理由はあるのでしょうか！コミュニティーの標準に合わせることで、あなたは:
 
 1. 直面するコミュニティーのコードを容易に理解できるように脳を慣れさせます。
 2. ほとんどのコミュニティーのコードサンプルを変更なしにコピーして貼り付ける事ができます。
 3. 少なくとも Vue に関しては、ほとんどの場合、新たな人材はあなたのコーディングスタイルよりも既に慣れ親しんだものを好みます。
 
-- [優先度Cのルールをすべて見る](./rules-recommended)
+- [優先度 C のルールをすべて見る](./rules-recommended)
 
-### 優先順位D: 注意深く使用する {#priority-d-use-with-caution}
+### 優先順位 D: 注意深く使用する {#priority-d-use-with-caution}
 
  Vue のいくつかの機能は、まれなエッジケースに対応するため、またはレガシーコードベースからの移行をよりスムーズにするために存在します。しかし、使いすぎると、コードのメンテナンスが難しくなったり、バグの原因になったりすることがあります。これらのルールは、潜在的にリスクの高い機能に注目し、いつ、なぜ、それらを避けるべきかを説明するものです。
 
-- [優先度Dのルールをすべて見る](./rules-use-with-caution)
+- [優先度 D のルールをすべて見る](./rules-use-with-caution)

src/style-guide/rules-essential.md

@@ -1,4 +1,8 @@
-# 優先度A: 必須 {#priority-a-rules-essential}
+# 優先度 A: 必須 {#priority-a-rules-essential}
+
+::: warning Note
+この Vue.js スタイルガイドは古くなっていますので、見直しが必要です。ご質問やご意見がありましたら、[issue をオープン](https://github.com/vuejs/docs/issues/new)してください。
+:::
 
 これらのルールはエラーを防ぐのに役立ちますので、何としても学んで守ってください。例外はありますが、非常にまれで、 JavaScript と Vue の両方の専門的な知識を持つ人のみが行うべきことです。
 

src/style-guide/rules-recommended.md

@@ -1,5 +1,9 @@
 # 優先度 C: 推奨 {#priority-c-rules-recommended}
 
+::: warning Note
+この Vue.js スタイルガイドは古くなっていますので、見直しが必要です。ご質問やご意見がありましたら、[issue をオープン](https://github.com/vuejs/docs/issues/new)してください。
+:::
+
 同じくらい良いオプションが複数ある場合、一貫性を確保するために任意の選択をできます。これらのルールでは、それぞれ許容可能なオプションを説明し、既定の選択を提案します。つまり、一貫性があり、良い理由を持ち続ける限り、独自のコードベースで自由に異なる選択肢を作ることができます。ですが、良い理由はあるのでしょうか！コミュニティーの標準に合わせることで、あなたは:
 
 1. 直面するコミュニティーのコードを容易に理解できるように脳を慣れさせます。

src/style-guide/rules-strongly-recommended.md

@@ -1,4 +1,8 @@
-# 優先度B: 強く推奨 {#priority-b-rules-strongly-recommended}
+# 優先度 B: 強く推奨 {#priority-b-rules-strongly-recommended}
+
+::: warning Note
+この Vue.js スタイルガイドは古くなっていますので、見直しが必要です。ご質問やご意見がありましたら、[issue をオープン](https://github.com/vuejs/docs/issues/new)してください。
+:::
 
 これらのルールは、ほとんどのプロジェクトで可読性や開発者の使い勝手を向上させることが分かっています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はごく少数で十分に正当な理由がなければいけません。
 

src/style-guide/rules-use-with-caution.md

@@ -1,4 +1,8 @@
-# 優先度D: 注意深く使用する {#priority-d-rules-use-with-caution}
+# 優先度 D: 注意深く使用する {#priority-d-rules-use-with-caution}
+
+::: warning Note
+この Vue.js スタイルガイドは古くなっていますので、見直しが必要です。ご質問やご意見がありましたら、[issue をオープン](https://github.com/vuejs/docs/issues/new)してください。
+:::
 
 Vue のいくつかの機能は、まれなエッジケースに対応するため、またはレガシーコードベースからの移行をよりスムーズにするために存在します。しかし使いすぎると、コードのメンテナンスが難しくなったり、バグの原因になったりすることがあります。これらのルールは、潜在的にリスクの高い機能に注目し、いつ、なぜ、それらを避けるべきかを説明します。