translate 01-svelte/04-logic into Japanese

Author: tomoam

content/tutorial/01-svelte/04-logic/01-if-blocks/README.md

@@ -2,9 +2,9 @@
 title: If blocks
 ---
 
-HTML doesn't have a way of expressing _logic_, like conditionals and loops. Svelte does.
+HTML には条件式やループのような *ロジック* を表現する方法がありません。Svelteにはあります。
 
-To conditionally render some markup, we wrap it in an `if` block:
+条件付きでマークアップをレンダリングするために、私たちはそれを `if` ブロックで囲みます。
 
 ```svelte
 +++{#if user.loggedIn}+++
@@ -20,4 +20,4 @@ To conditionally render some markup, we wrap it in an `if` block:
 +++{/if}+++
 ```
 
-Try it — update the component, and click on the buttons.
+試してみてください。コンポーネントを更新し、ボタンをクリックしてみてください。

content/tutorial/01-svelte/04-logic/02-else-blocks/README.md

@@ -2,7 +2,7 @@
 title: Else blocks
 ---
 
-Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block:
+2つの条件（`if user.loggedIn` と `if !user.loggedIn`）は相互に排他的なので、`else` ブロックを使用することでこのコンポーネントを少しシンプルにすることができます。
 
 ```svelte
 {#if user.loggedIn}
@@ -16,4 +16,4 @@ Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are
 {/if}
 ```
 
-> A `#` character always indicates a _block opening_ tag. A `/` character always indicates a _block closing_ tag. A `:` character, as in `{:else}`, indicates a _block continuation_ tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
+> `#` の文字は常に *ブロックの開始* タグを示します。 `/` の文字は常に *ブロックの終了* タグを示します。  `:` の文字は `{:else}` のように *ブロックの継続* タグを示します。心配しないでください。あなたは既にSvelteがHTMLに追加する構文のほとんどを学んでいます。

content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md

@@ -2,7 +2,7 @@
 title: Else-if blocks
 ---
 
-Multiple conditions can be 'chained' together with `else if`:
+複数の条件を `else if` と一緒に '連結' することができます。
 
 ```svelte
 {#if x > 10}

content/tutorial/01-svelte/04-logic/04-each-blocks/README.md

@@ -2,7 +2,7 @@
 title: Each blocks
 ---
 
-If you need to loop over lists of data, use an `each` block:
+データのリストをループさせる必要がある場合は、`each` ブロックを使ってください。
 
 ```svelte
 <ul>
@@ -14,9 +14,9 @@ If you need to loop over lists of data, use an `each` block:
 </ul>
 ```
 
-> The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`.
+> 式(この場合は `cats`)は、任意の配列や配列に似たオブジェクトにすることができます(つまり、`length`プロパティを持っています)。一般的な反復可能なデータ構造は `each [...iterable]` を用いてループさせることができます。
 
-You can get the current _index_ as a second argument, like so:
+第2引数として現在の *index* をこのように取得することができます。
 
 ```svelte
 {#each cats as cat, i}
@@ -26,4 +26,4 @@ You can get the current _index_ as a second argument, like so:
 {/each}
 ```
 
-If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`.
+お好みであれば、分割代入（`each cats as { id, name }`）を使い、`cat.id` と `cat.name` を `id` と `name` に置き換えることができます。

content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md

@@ -2,20 +2,20 @@
 title: Keyed each blocks
 ---
 
-By default, when you modify the value of an `each` block, it will add and remove items at the _end_ of the block, and update any values that have changed. That might not be what you want.
+デフォルトでは、`each` ブロックの値を変更すると、ブロックの *末尾* にアイテムを追加・削除し、変更された値を更新します。これはあなたが望むものではないかもしれません。
 
-It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice what happens: It removes the first `<Thing>` component, but the _last_ DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji.
+説明するより見ていただいたほうがわかりやすいしょう。'Remove first thing' ボタンを何度かクリックして、何が起きるか確認してください。先頭の `<Thing>` コンポーネントは削除されず、*末尾の* DOM ノードが削除されます。そして残りの DOM ノードの `name` の値は更新されますが、絵文字は更新されません。
 
-Instead, we'd like to remove only the first `<Thing>` component and its DOM node, and leave the others unaffected.
+代わりに、先頭の `<Thing>` コンポーネントとその DOM ノードだけを削除して、残りには影響を与えないようにしたいと思います。
 
-To do that, we specify a unique identifier (or "key") for the `each` block:
+そのためには、`each` ブロックに一意な識別子 (または"key") を指定します。
 
 ```svelte
 {#each things as thing (thing.id)}
 	<Thing name={thing.name}/>
 {/each}
 ```
 
-Here, `(thing.id)` is the _key_, which tells Svelte how to figure out which DOM node to change when the component updates.
+ここで、`(thing.id)` は *key* であり、コンポーネントが更新されたときに変更するDOMノードを特定する方法を Svelte に伝えます。
 
-> You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.
+> Svelte は内部的に `Map` を使用しているので、どんなオブジェクトでもキーとして使用できます。つまり `(thing.id)` の代わりに `(thing)` を使うことができます。しかし、文字列または数値を使用する方が一般的に安全です。なぜなら、例えばAPIサーバーからの新しいデータで更新する場合に、参照が等しくなくても同一性が持続することを意味するからです。

content/tutorial/01-svelte/04-logic/06-await-blocks/README.md

@@ -2,7 +2,7 @@
 title: Await blocks
 ---
 
-Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to _await_ the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup:
+ほとんどの webアプリケーションでは、どこかの時点で非同期のデータを扱わなければなりません。Svelte ではマークアップの中で直接 [promises](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises) の値を簡単に *await* することができます。
 
 ```svelte
 {#await promise}
@@ -14,9 +14,9 @@ Most web applications have to deal with asynchronous data at some point. Svelte
 {/await}
 ```
 
-> Only the most recent `promise` is considered, meaning you don't need to worry about race conditions.
+> 直近の `promise` だけが処理されるので、他の非同期処理の状態を気にする必要はありません。
 
-If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves:
+promise が reject できないことがわかっている場合は、`catch` ブロックを省略することができます。また promise が resolve するまで何も表示したくない場合は、最初のブロックを省略することもできます。
 
 ```svelte
 {#await promise then number}