translate exercises into Japanese

Author: tomoam

content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md

@@ -2,11 +2,11 @@
 title: Adding parameters
 ---
 
-Like transitions and animations, an action can take an argument, which the action function will be called with alongside the element it belongs to.
+トランジションとアニメーションと同じように、アクションは引数を取ることができます。その引数と、アクション関数自身が属する要素を以って、アクション関数は呼び出されます。
 
-In this exercise, we want to add a tooltip to the `<button>` using the [`Tippy.js`](https://atomiks.github.io/tippyjs/) library. The action is already wired up with `use:tooltip`, but if you hover over the button (or focus it with the keyboard) the tooltip contains no content.
+この演習では、[`Tippy.js`](https://atomiks.github.io/tippyjs/) ライブラリを使って `<button>` にツールチップを追加したいと思います。アクションはすでに `use:tooltip` によって紐付けられていますが、ボタンをホバーしても (キーボードでフォーカスしても) ツールチップには何も表示されません。
 
-First, the action needs to accept some options and pass them to Tippy:
+最初に、アクションでオプションを受け取り、それを Tippy に渡さなければなりません:
 
 ```js
 /// file: App.svelte
@@ -21,7 +21,7 @@ function tooltip(node, +++options+++) {
 }
 ```
 
-Then, we need to pass some options into the action:
+それから、オプションをアクションに渡します:
 
 ```svelte
 /// file: App.svelte
@@ -30,7 +30,7 @@ Then, we need to pass some options into the action:
 </button>
 ```
 
-The tooltip now works — almost. If we change the text in the `<input>`, the tooltip will not reflect the new content. We can fix that by adding an `update` method to the returned object.
+これでツールチップが動作します — ほとんどは。`<input>` のテキストを変更しても、ツールチップに新しい内容が反映されません。`update` メソッドを追加し、オブジェクトを返すことでこれを修正します。
 
 ```js
 /// file: App.svelte

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

@@ -2,9 +2,9 @@
 title: Media elements
 ---
 
-You can bind to properties of `<audio>` and `<video>` elements, making it easy to (for example) build custom player UI, like `AudioPlayer.svelte`.
+`<audio>` 要素と `<video>` 要素のプロパティをバインドすることができるので、(例えば) `AudioPlayer.svelte` のようなカスタムのプレーヤー UI をとても簡単に作ることができます。
 
-First, add the `<audio>` element along with its bindings (we'll use the shorthand form for `duration` and `paused`):
+最初に、`<audio>` 要素とそのバインディングを追加します (`duration` と `paused` は短縮形を使います):
 
 ```svelte
 /// file: AudioPlayer.svelte
@@ -22,7 +22,7 @@ First, add the `<audio>` element along with its bindings (we'll use the shorthan
 	/>
 ```
 
-Next, add an event handler to the `<button>` that toggles `paused`:
+次に、`paused` を切り替える `<button>` にイベントハンドラを追加します:
 
 ```svelte
 /// file: AudioPlayer.svelte
@@ -33,7 +33,7 @@ Next, add an event handler to the `<button>` that toggles `paused`:
 />
 ```
 
-Our audio player now has basic functionality. Let's add the ability to seek to a specific part of a track by dragging the slider. Inside the slider's `pointerdown` handler there's a `seek` function, where we can update `time`:
+これでオーディオプレーヤーに基本的な機能が付きました。では、スライダーをドラッグして曲の指定した部分にシークできる機能を追加しましょう。スライダー(slider)の `pointerdown` ハンドラの内側にある `seek` 関数で、`time` を更新することができます:
 
 ```js
 /// file: AudioPlayer.svelte
@@ -48,7 +48,7 @@ function seek(e) {
 }
 ```
 
-When the track ends, be kind — rewind:
+曲が終わったら、親切に巻き戻しましょう:
 
 ```svelte
 /// file: AudioPlayer.svelte
@@ -63,21 +63,21 @@ When the track ends, be kind — rewind:
 />
 ```
 
-The complete set of bindings for `<audio>` and `<video>` is as follows — six _readonly_ bindings...
+`<audio>` と `<video>` のバインディングの完全なセットは以下の通りです — 6つの _読み取り専用(readonly)_ のバインディング…
 
-- `duration` (readonly) — the total duration of the video, in seconds
-- `buffered` (readonly) — an array of `{start, end}` objects
-- `seekable` (readonly) — ditto
-- `played` (readonly) — ditto
+- `duration` (readonly) — ビデオの総再生時間 (秒単位)
+- `buffered` (readonly) — `{start, end}` オブジェクトの配列
+- `seekable` (readonly) — 同上
+- `played` (readonly) — 同上
 - `seeking` (readonly) — boolean
 - `ended` (readonly) — boolean
 
-...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` — boolean で、true はミュートを意味します
 
-Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
+video には読み取り専用の `videoWidth` と `videoHeight` バインディングがあります。

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

@@ -2,11 +2,11 @@
 title: Binding to component instances
 ---
 
-Just as you can bind to DOM elements, you can bind to component instances themselves with `bind:this`.
+DOM 要素にバインドできるのと同じように、`bind:this` でコンポーネントインスタンス自体にバインドすることができます。
 
-This is useful in the rare cases that you need to interact with a component programmatically (rather than by providing it with updated props). Revisiting our canvas app from [a few exercises ago](actions), it would be nice to add a button to clear the screen.
+ごく稀に、(更新されたプロパティを提供するのではなく) プログラム的にコンポーネントと対話しなければならないことがあり、これはそれに有用です。[少し前の演習](actions)の canvas アプリを振り返ると、画面をクリアするボタンを追加するともっとよくなりそうです。
 
-First, let's export a function from `Canvas.svelte`:
+最初に、`Canvas.svelte` から関数をエクスポートしましょう:
 
 ```svelte
 /// file: Canvas.svelte
@@ -18,7 +18,7 @@ export let size;
 }+++
 ```
 
-Then, create a reference to the component instance:
+次に、コンポーネントインスタンスの参照を作成します:
 
 ```svelte
 /// file: App.svelte
@@ -38,7 +38,7 @@ Then, create a reference to the component instance:
 	<Canvas +++bind:this={canvas}+++ color={selected} size={size} />
 ```
 
-Finally, add a button that calls the `clear` function:
+最後に、`clear` 関数を呼び出すボタンを追加します:
 
 ```svelte
 /// file: App.svelte