translate 03-advanced-svelte/07-composition into Japanese

Author: tomoam

content/tutorial/03-advanced-svelte/07-composition/01-slots/README.md

@@ -2,23 +2,23 @@
 title: Slots
 ---
 
-Just like elements can have children...
+HTML要素が子を持つことができるように…
 
 ```svelte
 <div>
 	<p>I'm a child of the div</p>
 </div>
 ```
 
-...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Box.svelte`:
+…コンポーネントもそうすることができます。しかしコンポーネントが子を受け入れる前に、どこに子を置くかを知っておく必要があります。これを `<slot>` 要素で行います。これを `Box.svelte` の中に入れてください。
 
 ```svelte
 <div class="box">
 	<slot></slot>
 </div>
 ```
 
-You can now put things in the box:
+これで box に物を入れることができるようになりました。
 
 ```svelte
 <Box>

content/tutorial/03-advanced-svelte/07-composition/02-slot-fallbacks/README.md

@@ -2,7 +2,7 @@
 title: Slot fallbacks
 ---
 
-A component can specify _fallbacks_ for any slots that are left empty, by putting content inside the `<slot>` element:
+コンポーネントは、`<slot>` 要素の中にコンテンツを入れることで、空のままになっているスロットに対して *フォールバック* を指定することができます。
 
 ```svelte
 <div class="box">
@@ -12,7 +12,7 @@ A component can specify _fallbacks_ for any slots that are left empty, by puttin
 </div>
 ```
 
-We can now create instances of `<Box>` without any children:
+これで、子を持たない `<Box>` のインスタンスを作成できるようになりました。
 
 ```svelte
 <Box>

content/tutorial/03-advanced-svelte/07-composition/03-named-slots/README.md

@@ -2,9 +2,9 @@
 title: Named slots
 ---
 
-The previous example contained a _default slot_, which renders the direct children of a component. Sometimes you will need more control over placement, such as with this `<ContactCard>`. In those cases, we can use _named slots_.
+前の例では、コンポーネントの直接の子をレンダリングする *デフォルトスロット* が含まれていました。この `<ContactCard>` のように、配置をより制御したい場合もあるでしょう。そのような場合には、*名前付きスロット* を使うことができます。
 
-In `ContactCard.svelte`, add a `name` attribute to each slot:
+`ContactCard.svelte` の各スロットに `name` 属性を追加します。
 
 ```svelte
 <article class="contact-card">
@@ -28,7 +28,7 @@ In `ContactCard.svelte`, add a `name` attribute to each slot:
 </article>
 ```
 
-Then, add elements with corresponding `slot="..."` attributes inside the `<ContactCard>` component:
+そして、対応する `slot="...."` 属性を持つ要素を `<ContactCard>` コンポーネント内に追加します。
 
 ```svelte
 <ContactCard>

content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/README.md

@@ -2,21 +2,21 @@
 title: Checking for slot content
 ---
 
-> The images in this exercise don't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/optional-slots
+> この練習問題の画像の部分が現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.jp/tutorial/optional-slots
 
-In some cases, you may want to control parts of your component based on whether the parent passes in content for a certain slot. Perhaps you have a wrapper around that slot, and you don't want to render it if the slot is empty. Or perhaps you'd like to apply a class only if the slot is present. You can do this by checking the properties of the special `$$slots` variable.
+場合によっては、親が特定のスロットのコンテンツを渡すかどうかに基づいてコンポーネントの一部を制御したいことがあるかもしれません。おそらく、そのスロットの周りにラッパーを持っていて、スロットが空の場合はレンダリングしたくないでしょう。あるいは、スロットが存在する場合にのみクラスを適用したいと考えているかもしれません。これは、特別な変数 `$$slots` のプロパティをチェックすることで実現できます。
 
-`$$slots` is an object whose keys are the names of the slots passed in by the parent component. If the parent leaves a slot empty, then `$$slots` will not have an entry for that slot.
+`$$slots` は親コンポーネントから渡されたスロットの名前がキーとなるオブジェクトです。親コンポーネントがスロットを空にした場合、 `$$slots` はそのスロットのエントリを持ちません。
 
-Notice that both instances of `<Project>` in this example render a container for comments and a notification dot, even though only one has comments. We want to use `$$slots` to make sure we only render these elements when the parent `<App>` passes in content for the `comments` slot.
+この例の `<Project>` のインスタンスは、片方だけにしかコメントがないにも関わらず、両方ともコメント用のコンテナと通知用のドットをレンダリングしていることに注目してください。親の `<App>` が `comments` スロットにコンテンツを渡した場合にのみ、これらの要素をレンダリングするように `$$slots` を使用したいと思います。
 
-In `Project.svelte`, update the `class:has-discussion` directive on the `<article>`:
+`Project.svelte`において、`<article>`の `class:has-discussion` ディレクティブを更新してください。
 
 ```svelte
 <article class:has-discussion={$$slots.comments}>
 ```
 
-Next, wrap the `comments` slot and its wrapping `<div>` in an `if` block that checks `$$slots`:
+次に、`comments` スロットとそれを囲んでいる `<div>` を `$$slots` をチェックする `if` ブロックで囲みます。
 
 ```svelte
 {#if $$slots.comments}
@@ -27,4 +27,4 @@ Next, wrap the `comments` slot and its wrapping `<div>` in an `if` block that ch
 {/if}
 ```
 
-Now the comments container and the notification dot won't render when `<App>` leaves the `comments` slot empty.
+これで、`<App>` の `comments` スロットが空の時は、コメントコンテナと通知ドットがレンダリングされなくなりました。

content/tutorial/03-advanced-svelte/07-composition/05-slot-props/README.md

@@ -2,19 +2,19 @@
 title: Slot props
 ---
 
-In this app, we have a `<Hoverable>` component that tracks whether the mouse is currently over it. It needs to pass that data _back_ to the parent component, so that we can update the slotted contents.
+このアプリには、現在マウスがその上に乗ったかどうかを追跡する `<Hoverable>` コンポーネントがあります。スロットの中身を更新できるように、そのデータを親コンポーネントに *戻す* 必要があります。
 
-For this, we use _slot props_. In `Hoverable.svelte`, pass the `hovering` value into the slot:
+これには *slotプロパティ(slot props)* を使います。`Hoverable.svelte` の中で `hovering` の値をスロットに渡します。
 
 ```svelte
 <div on:mouseenter={enter} on:mouseleave={leave}>
 	<slot hovering={hovering}></slot>
 </div>
 ```
 
-> Remember you can also use the `{hovering}` shorthand, if you prefer.
+> お好みであれば、`{hovering}` というショートハンドを使えるのを覚えておいてください。
 
-Then, to expose `hovering` to the contents of the `<Hoverable>` component, we use the `let` directive:
+そして `<Hoverable>` コンポーネントの内容に `hovering` を公開するには、`let` ディレクティブを使います。
 
 ```svelte
 <Hoverable let:hovering={hovering}>
@@ -28,7 +28,7 @@ Then, to expose `hovering` to the contents of the `<Hoverable>` component, we us
 </Hoverable>
 ```
 
-You can rename the variable, if you want — let's call it `active` in the parent component:
+必要に応じて変数の名前を変更することができます。親コンポーネントでは `active` と呼ぶようにしましょう。
 
 ```svelte
 <Hoverable let:hovering={active}>
@@ -42,6 +42,6 @@ You can rename the variable, if you want — let's call it `active` in the paren
 </Hoverable>
 ```
 
-You can have as many of these components as you like, and the slotted props will remain local to the component where they're declared.
+これらのコンポーネントは好きなだけ持つことができ、slotプロパティは、それらが宣言されているコンポーネントに対してローカルであり続けます。
 
-> Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself.
+> 名前付きスロットはプロパティを持つこともできます。コンポーネント自身ではなく、`slot="...."` 属性を持つ要素に対して `let` ディレクティブを使用してください。