translate 03-advanced-svelte/09-special-elements into Japanese

Author: tomoam

content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/README.md

@@ -2,9 +2,9 @@
 title: <svelte:self>
 ---
 
-Svelte provides a variety of built-in elements. The first, `<svelte:self>`, allows a component to contain itself recursively.
+Svelteは様々な組み込み要素を提供します。最初に `<svelte:self>` はコンポーネントがそれ自身を再帰的に含むことを可能にします。
 
-It's useful for things like this folder tree view, where folders can contain _other_ folders. In `Folder.svelte` we want to be able to do this...
+これはこのフォルダツリービューのように、フォルダの中に *他の* フォルダを含むことができるようにするのに便利です。`Folder.svelte` では、このようなことができるようにしたいのですが…
 
 ```svelte
 {#if file.files}
@@ -14,7 +14,7 @@ It's useful for things like this folder tree view, where folders can contain _ot
 {/if}
 ```
 
-...but that's impossible, because a module can't import itself. Instead, we use `<svelte:self>`:
+…しかし、モジュールは自分自身をインポートすることができないので、それは不可能です。代わりに `<svelte:self>` を使います。
 
 ```svelte
 {#if file.files}

content/tutorial/03-advanced-svelte/09-special-elements/02-svelte-component/README.md

@@ -2,7 +2,7 @@
 title: <svelte:component>
 ---
 
-A component can change its category altogether with `<svelte:component>`. Instead of a sequence of `if` blocks...
+コンポーネントは `<svelte:component>` でカテゴリを完全に変更することができます。一連の `if` ブロックの代わりに…
 
 ```svelte
 {#if selected.color === 'red'}
@@ -14,10 +14,10 @@ A component can change its category altogether with `<svelte:component>`. Instea
 {/if}
 ```
 
-...we can have a single dynamic component:
+…我々は単一の動的なコンポーネントを持つことができます。
 
 ```svelte
 <svelte:component this={selected.component}/>
 ```
 
-The `this` value can be any component constructor, or a falsy value — if it's falsy, no component is rendered.
+`this` 値には任意のコンポーネントコンストラクタ、または falsy な値を指定できます。falsy の値を指定した場合、コンポーネントはレンダリングされません。

content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-window/README.md

@@ -2,12 +2,12 @@
 title: <svelte:window>
 ---
 
-Just as you can add event listeners to any DOM element, you can add event listeners to the `window` object with `<svelte:window>`.
+イベントリスナーを任意の DOM 要素に追加できるのと同じように、`window` オブジェクトにも `<svelte:window>` でイベントリスナーを追加できます。
 
-On line 11, add the `keydown` listener:
+11行目に `keydown` リスナーを追加します。
 
 ```svelte
 <svelte:window on:keydown={handleKeydown}/>
 ```
 
-> As with DOM elements, you can add [event modifiers](/tutorial/event-modifiers) like `preventDefault`.
+> DOM要素と同様に `preventDefault` のような[イベント修飾子](/tutorial/event-modifiers)を追加することができます。

content/tutorial/03-advanced-svelte/09-special-elements/04-svelte-window-bindings/README.md

@@ -2,20 +2,20 @@
 title: <svelte:window> bindings
 ---
 
-We can also bind to certain properties of `window`, such as `scrollY`. Update line 7:
+また、`window` の特定のプロパティ、例えば `scrollY` のようなプロパティにバインドすることもできます。7行目を更新してください。
 
 ```svelte
 <svelte:window bind:scrollY={y}/>
 ```
 
-The list of properties you can bind to is as follows:
+バインドできるプロパティの一覧は以下の通りです。
 
-- `innerWidth`
-- `innerHeight`
-- `outerWidth`
-- `outerHeight`
-- `scrollX`
-- `scrollY`
-- `online` — an alias for `window.navigator.onLine`
+* `innerWidth`
+* `innerHeight`
+* `outerWidth`
+* `outerHeight`
+* `scrollX`
+* `scrollY`
+* `online` — これは `window.navigator.onLine` の別名です
 
-All except `scrollX` and `scrollY` are readonly.
+`scrollX` と `scrollY` 以外はすべて読み込み専用です。

content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-body/README.md

@@ -2,13 +2,13 @@
 title: <svelte:body>
 ---
 
-Similar to `<svelte:window>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
+`<svelte:window>` と同様に、`<svelte:body>` 要素では `document.body` で発生するイベントをリッスンすることができます。これは `window` では発生しない `mouseenter` と `mouseleave` イベントを利用する際に便利です。
 
-Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
+`<svelte:body>` タグに `mouseenter` と `mouseleave` ハンドラを追加してください。
 
 ```svelte
 <svelte:body
 	on:mouseenter={handleMouseenter}
 	on:mouseleave={handleMouseleave}
 />
-```
+```

content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-head/README.md

@@ -2,12 +2,12 @@
 title: <svelte:head>
 ---
 
-The `<svelte:head>` element allows you to insert elements inside the `<head>` of your document:
+`<svelte:head>` 要素を使うと、ドキュメントの `<head>` 内に要素を挿入することができます。
 
 ```svelte
 <svelte:head>
 	<link rel="stylesheet" href="tutorial/dark-theme.css">
 </svelte:head>
 ```
 
-> In server-side rendering (SSR) mode, contents of `<svelte:head>` are returned separately from the rest of your HTML.
+> サーバサイドレンダリング (SSR) モードでは、`<svelte:head>` の内容は残りのHTMLとは別に返されます。

content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/README.md

@@ -2,29 +2,29 @@
 title: <svelte:options>
 ---
 
-The `<svelte:options>` element allows you to specify compiler options.
+`<svelte:options>` 要素はコンパイラのオプションを指定することができます。
 
-We'll use the `immutable` option as an example. In this app, the `<Todo>` component flashes whenever it receives new data. Clicking on one of the items toggles its `done` state by creating an updated `todos` array. This causes the _other_ `<Todo>` items to flash, even though they don't end up making any changes to the DOM.
+例として `immutable` オプションを使用します。このアプリでは、新しいデータを受け取るたびに `<Todo>` コンポーネントが点滅します。アイテムの1つをクリックすると、更新された `todos` 配列が作成され、`done` 状態が切り替わります。これにより、*他の* `<Todo>` アイテムも点滅しますが、DOM は変更されません。
 
-We can optimise this by telling the `<Todo>` component to expect _immutable_ data. This means that we're promising never to _mutate_ the `todo` prop, but will instead create new todo objects whenever things change.
+これを最適化するには、`<Todo>` コンポーネントに *immutable* データを期待するように指示します。これは、`todo` プロパティを *変更* しないことを約束していることを意味します。
 
-Add this to the top of the `Todo.svelte` file:
+これを `Todo.svelte` ファイルの先頭に追加します。
 
 ```svelte
 <svelte:options immutable={true}/>
 ```
 
-> You can shorten this to `<svelte:options immutable/>` if you prefer.
+> お好みであれば、これを `<svelte:options immutable/>` と短くしても構いません。
 
-Now, when you toggle todos by clicking on them, only the updated component flashes.
+これで、Todos をクリックして切り替えると、更新されたコンポーネントだけが点滅するようになりました。
 
-The options that can be set here are:
+ここで設定できるオプションは
 
-- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
-- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
-- `accessors={true}` — adds getters and setters for the component's props
-- `accessors={false}` — the default
-- `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
-- `tag="..."` — the name to use when compiling this component as a custom element
+* `immutable={true}` — 変更可能なデータは使用できません、コンパイラは値が変更されたかどうかを判断するために単純な参照等価性チェックを行うことができます。
+* `immutable={false}` — デフォルトです。Svelteは、変更可能なオブジェクトが変更されたかどうかについて、より保守的になります。
+* `accessors={true}` — コンポーネントのプロパティ(props)のゲッターとセッターを追加します。
+* `accessors={false}` — デフォルトの値です。
+* `namespace="..."` —  このコンポーネントが使用される名前空間。最も一般的なものは `"svg"` です。
+* `tag="..."` — このコンポーネントをカスタム要素としてコンパイルする際に使用する名前。
 
-Consult the [API reference](https://svelte.dev/docs) for more information on these options.
+これらのオプションの詳細については、[API リファレンス](/docs)を参照してください。

content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-fragment/README.md

@@ -2,9 +2,9 @@
 title: <svelte:fragment>
 ---
 
-The `<svelte:fragment>` element allows you to place content in a named slot without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
+`<svelte:fragment>` 要素は、コンテナ DOM 要素でラップすることなく、名前のついたスロットにコンテンツを配置する事ができます。これによりドキュメントのフローレイアウトが維持されます。
 
-In the example notice how we applied a flex layout with a gap of `1em` to the box.
+例では box クラスに `1em` の gap を持つ flex レイアウトを適用しています。
 
 ```sv
 <!-- Box.svelte -->
@@ -23,9 +23,9 @@ In the example notice how we applied a flex layout with a gap of `1em` to the bo
 </style>
 ```
 
-However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.
+しかしながら、footer のコンテンツは新たなフローレイアウトを生成した div 要素でラップされているため、このリズムに沿った配置がされていません。
 
-We can solve this by changing `<div slot="footer">` in the `App` component. Replace the `<div>` with `<svelte:fragment>`:
+これは `App` コンポーネントの `<div slot="footer">` を書き換えることで解決できます。この `<div>` を `<svelte:fragment>` に書き換えます。
 
 ```sv
 <svelte:fragment slot="footer">