translate Essentials > Conditional Rendering (#86)

Co-authored-by: noriaki-yamada <noriaki.yamada@hakuhodo.co.jp>

Author: noliaki

src/guide/conditional.md

@@ -1,23 +1,23 @@
-# Conditional Rendering
+# 条件付きレンダリング
 
 ## `v-if`
 
-The directive `v-if` is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.
+`v-if` ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。
 
 ```html
 <h1 v-if="awesome">Vue is awesome!</h1>
 ```
 
-It is also possible to add an "else block" with `v-else`:
+これは、`v-else` で "else ブロック" を追加することも可能です:
 
 ```html
 <h1 v-if="awesome">Vue is awesome!</h1>
 <h1 v-else>Oh no 😢</h1>
 ```
 
-### Conditional Groups with `v-if` on `<template>`
+### `<template>` での `v-if` による条件グループ
 
-Because `v-if` is a directive, it has to be attached to a single element. But what if we want to toggle more than one element? In this case we can use `v-if` on a `<template>` element, which serves as an invisible wrapper. The final rendered result will not include the `<template>` element.
+`v-if` はディレクティブなので、単一の要素に付加する必要があります。しかし、1 要素よりも多くの要素と切り替えたい場合はどうでしょうか？このケースでは、非表示ラッパー (wrapper) として提供される、`<template>` 要素で `v-if` を使用できます。最終的に描画される結果は、`<template>` 要素は含まれません。
 
 ```html
 <template v-if="ok">
@@ -29,7 +29,7 @@ Because `v-if` is a directive, it has to be attached to a single element. But wh
 
 ### `v-else`
 
-You can use the `v-else` directive to indicate an "else block" for `v-if`:
+`v-if` に対して "else block" を示すために、`v-else` ディレクティブを使用できます:
 
 ```html
 <div v-if="Math.random() > 0.5">
@@ -40,11 +40,11 @@ You can use the `v-else` directive to indicate an "else block" for `v-if`:
 </div>
 ```
 
-A `v-else` element must immediately follow a `v-if` or a `v-else-if` element - otherwise it will not be recognized.
+`v-else` 要素は、`v-if` または `v-else-if` 要素の直後になければなりません。それ以外の場合は認識されません。
 
 ### `v-else-if`
 
-The `v-else-if`, as the name suggests, serves as an "else if block" for `v-if`. It can also be chained multiple times:
+`v-else-if` は、名前が示唆するように、`v-if` の "else if block" として機能します。また、複数回連結することもできます:
 
 ```html
 <div v-if="type === 'A'">
@@ -61,34 +61,34 @@ The `v-else-if`, as the name suggests, serves as an "else if block" for `v-if`.
 </div>
 ```
 
-Similar to `v-else`, a `v-else-if` element must immediately follow a `v-if` or a `v-else-if` element.
+`v-else` と同様に、`v-else-if` 要素は `v-if` 要素または`v-else-if` 要素の直後になければなりません。
 
 ## `v-show`
 
-Another option for conditionally displaying an element is the `v-show` directive. The usage is largely the same:
+条件的に要素を表示するための別のオプションは `v-show` です。使用方法はほとんど同じです:
 
 ```html
 <h1 v-show="ok">Hello!</h1>
 ```
 
-The difference is that an element with `v-show` will always be rendered and remain in the DOM; `v-show` only toggles the `display` CSS property of the element.
+違いは `v-show` による要素は常に描画されて DOM に維持するということです。`v-show` はシンプルに要素の `display` CSS プロパティを切り替えます。
 
-`v-show` doesn't support the `<template>` element, nor does it work with `v-else`.
+`v-show` は `<template>` 要素をサポートせず、`v-else` とも連動しないということに注意してください。
 
 ## `v-if` vs `v-show`
 
-`v-if` is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.
+`v-if` は、イベントリスナと子コンポーネント内部の条件ブロックが適切に破棄され、そして切り替えられるまでの間再作成されるため、”リアル”な条件レンダリングです。
 
-`v-if` is also **lazy**: if the condition is false on initial render, it will not do anything - the conditional block won't be rendered until the condition becomes true for the first time.
+`v-if` は **遅延描画 (lazy)** です。 初期表示において false の場合、何もしません。条件付きブロックは、条件が最初に true になるまで描画されません。
 
-In comparison, `v-show` is much simpler - the element is always rendered regardless of initial condition, with CSS-based toggling.
+一方で、`v-show` はとてもシンプルです。要素は初期条件に関わらず常に描画され、シンプルな CSS ベースの切り替えとして保存されます。
 
-Generally speaking, `v-if` has higher toggle costs while `v-show` has higher initial render costs. So prefer `v-show` if you need to toggle something very often, and prefer `v-if` if the condition is unlikely to change at runtime.
+一般的に、`v-if` はより高い切り替えコストを持っているのに対して、 `v-show` はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば `v-show` を選び、条件が実行時に変更することがほとんどない場合は、`v-if` を選びます。
 
-## `v-if` with `v-for`
+## `v-if` と `v-for`
 
 ::: tip Note
-Using `v-if` and `v-for` together is **not recommended**. See the [style guide](../style-guide/#avoid-v-if-with-v-for-essential) for further information.
+`v-if` と `v-for` を同時に利用することは **推奨されません**。 詳細については [スタイルガイド](../style-guide/#avoid-v-if-with-v-for-essential) を参照ください。
 :::
 
-When used together with `v-if`, `v-for` has a higher priority than `v-if`. See the [list rendering guide](list#v-for-with-v-if) for details.
+`v-if` と一緒に使用されるとき、`v-for` は `v-if` より優先度が高くなります。詳細については [リストレンダリングのガイド](list#v-for-with-v-if) を参照してください。