translate 03-advanced-svelte/05-bindings into Japanese

Author: tomoam

content/tutorial/03-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md

@@ -2,7 +2,7 @@
 title: Contenteditable bindings
 ---
 
-Elements with a `contenteditable="true"` attribute support `textContent` and `innerHTML` bindings:
+`contenteditable="true"` 属性を持つ要素は、`textContent` と `innerHTML` のバインディングをサポートします。
 
 ```svelte
 <div

content/tutorial/03-advanced-svelte/05-bindings/02-each-block-bindings/README.md

@@ -2,7 +2,7 @@
 title: Each block bindings
 ---
 
-You can even bind to properties inside an `each` block.
+`each` ブロック内のプロパティにバインドすることもできます。
 
 ```svelte
 {#each todos as todo}
@@ -18,4 +18,4 @@ You can even bind to properties inside an `each` block.
 {/each}
 ```
 
-> Note that interacting with these `<input>` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.
+> これらの `<input>` 要素と互いに作用すると、配列が突然変化することに注意してください。不変のデータを扱いたい場合は、バインディングを避け、代わりにイベントハンドラを使用する必要があります。

content/tutorial/03-advanced-svelte/05-bindings/03-media-elements/README.md

@@ -2,11 +2,11 @@
 title: Media elements
 ---
 
-> This exercise doesn't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/media-elements
+> この練習問題は現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.jp/tutorial/media-elements
 
-The `<audio>` and `<video>` elements have several properties that you can bind to. This example demonstrates a few of them.
+`<audio>` と `<video>` 要素にはいくつかバインドできるプロパティがあります。この例では、その内のいくつかをお見せします。
 
-On line 62, add `currentTime={time}`, `duration` and `paused` bindings:
+62行目に `currentTime={time}`、`duration`、`paused` プロパティを追加しバインドします:
 
 ```svelte
 <video
@@ -23,27 +23,27 @@ On line 62, add `currentTime={time}`, `duration` and `paused` bindings:
 </video>
 ```
 
-> `bind:duration` is equivalent to `bind:duration={duration}`
+> `bind:duration` は `bind:duration={duration}` に相当します
 
-Now, when you click on the video, it will update `time`, `duration` and `paused` as appropriate. This means we can use them to build custom controls.
+このとき動画をクリックすると、`time`、`duration`、`paused` が適宜更新されます。つまり、それらを使ってカスタムコントロールを構築することができるということです。
 
-> Ordinarily on the web, you would track `currentTime` by listening for `timeupdate` events. But these events fire too infrequently, resulting in choppy UI. Svelte does better — it checks `currentTime` using `requestAnimationFrame`.
+> 通常、 web 上では `timeupdate` イベントを検知することで `currentTime` を追跡しますが、これらのイベントはそれほど頻繁に発生しないため、結果的にぎこちない UI になってしまいます。それを Svelte は上手く処理しています。`requestAnimationFrame` を使用して `currentTime` をチェックすることで。
 
-The complete set of bindings for `<audio>` and `<video>` is as follows — six _readonly_ bindings...
+`<audio>` と `<video>` のバインディングの全セットは以下の通りです。6つの _読み込み専用_ バインディング…
 
-- `duration` (readonly) — the total duration of the video, in seconds
-- `buffered` (readonly) — an array of `{start, end}` objects
-- `seekable` (readonly) — ditto
-- `played` (readonly) — ditto
-- `seeking` (readonly) — boolean
-- `ended` (readonly) — boolean
+- `duration` (読み込み専用) — 動画の総再生時間（秒単位）
+- `buffered` (読み込み専用) — `{start, end}` オブジェクトの配列
+- `seekable` (読み込み専用) — 同上
+- `played` (読み込み専用) — 同上
+- `seeking` (読み込み専用) — 真偽値
+- `ended` (読み込み専用) — 真偽値
 
-...and five _two-way_ bindings:
+…と5つの _双方向_ バインディングです:
 
-- `currentTime` — the current point in the video, in seconds
-- `playbackRate` — how fast to play the video, where `1` is 'normal'
-- `paused` — this one should be self-explanatory
-- `volume` — a value between 0 and 1
-- `muted` — a boolean value where true is muted
+- `currentTime` — 動画内の現在のポイント（秒単位）
+- `playbackRate` — 動画の再生速度（`1` が 'normal'）
+- `paused` — これは自明のこと
+- `volume` — 0 から 1 の値
+- `muted` — true はミュートを意味するブーリアン値
 
-Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
+動画には読み取り専用の `videoWidth` と `videoHeight` バインディングも存在します。

content/tutorial/03-advanced-svelte/05-bindings/04-dimensions/README.md

@@ -2,16 +2,16 @@
 title: Dimensions
 ---
 
-Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
+全てのブロックレベル要素は `clientWidth`、 `clientHeight`、`offsetWidth`、`offsetHeight` バインディングを備えています:
 
 ```svelte
 <div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 ```
 
-These bindings are readonly — changing the values of `w` and `h` won't have any effect.
+これらのバインディングは読み取り専用です。`w` と `h` の値を変更しても何の影響もありません。
 
-> Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements.
+> 要素は[この方法](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/)に似た手法を用いて測定されます。オーバーヘッドを内包しているため、要素数が巨大な場合はこの方法を使用することはおすすめしません。
 >
-> `display: inline` elements cannot be measured with this approach; nor can elements that can't contain other elements (such as `<canvas>`). In these cases you will need to measure a wrapper element instead.
+> `display: inline` 要素、または他の要素を内包できない要素（`<canvas>` など）もこの手法では測定できません。この場合は、代わりにラッバー要素を測定する必要があります。

content/tutorial/03-advanced-svelte/05-bindings/05-bind-this/README.md

@@ -2,7 +2,7 @@
 title: This
 ---
 
-The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
+読み取り専用の `this` バインディングは全要素（および 全コンポーネント）に適用され、レンダリングされた要素を参照することができます。例えば、`<canvas>` 要素への参照を得られます:
 
 ```svelte
 <canvas
@@ -12,4 +12,4 @@ The readonly `this` binding applies to every element (and component) and allows
 ></canvas>
 ```
 
-Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).
+注意 `canvas` の値はコンポーネントがマウントされるまで `undefined` になるので、`onMount` という[ライフサイクル関数](/tutorial/onmount)内にロジックを含めていることに注意してください。

content/tutorial/03-advanced-svelte/05-bindings/06-component-bindings/README.md

@@ -2,7 +2,7 @@
 title: Component bindings
 ---
 
-Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
+DOM 要素のプロパティにバインドできるのと同様に、コンポーネントの props にもバインドできます。例えば、フォーム要素のように `<Keypad>` コンポーネントの `value` prop にバインドすることができます。
 
 ```svelte
 <Keypad
@@ -11,6 +11,6 @@ Just as you can bind to properties of DOM elements, you can bind to component pr
 />
 ```
 
-Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
+これで、ユーザがキーパッドを操作すると、親コンポーネントの `pin` の値が即座に更新されるようになりました。
 
-> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.
+> コンポーネントバインディングは控えめに使用してください。それらが多すぎるとアプリケーションの周りのデータの流れを追跡するのが困難になります。特に「信頼できる唯一の情報源(single source of truth)」が存在しない場合には。

content/tutorial/03-advanced-svelte/05-bindings/07-component-this/README.md

@@ -2,7 +2,7 @@
 title: Binding to component instances
 ---
 
-Just as you can bind to DOM elements, you can bind to component instances themselves. For example, we can bind the instance of `<InputField>` to a variable named `field` in the same way we did when binding DOM Elements
+DOM要素にバインドできるのと同じように、コンポーネントのインスタンス自体にもバインドできます。たとえば、DOM要素をバインドするときと同じように、`<InputField>` のインスタンスを `field` 変数にバインドすることができます。
 
 ```svelte
 <script>
@@ -12,12 +12,12 @@ Just as you can bind to DOM elements, you can bind to component instances themse
 <InputField bind:this={field} />
 ```
 
-Now we can programmatically interact with this component using `field`.
+これで、`field` を使って、このコンポーネントをプログラムで操作できるようになりました。
 
 ```svelte
 <button on:click="{() => field.focus()}">
 	Focus field
 </button>
 ```
 
-> Note that we can't do `{field.focus}` since field is undefined when the button is first rendered and throws an error.
+> なお、ボタンが最初にレンダリングされたとき、fieldは未定義であり、エラーが発生するため、`{field.focus}` をすることはできません。