translate 01-svelte/05-events into Japanese

Author: tomoam

content/tutorial/01-svelte/05-events/01-dom-events/README.md

@@ -2,7 +2,7 @@
 title: DOM events
 ---
 
-As we've briefly seen already, you can listen to any event on an element with the `on:` directive:
+今までざっと見てきたように、`on:` ディレクティブを使用して要素の任意のイベントをリスニングできます。
 
 ```svelte
 <div on:mousemove={handleMousemove}>

content/tutorial/01-svelte/05-events/02-inline-handlers/README.md

@@ -2,14 +2,14 @@
 title: Inline handlers
 ---
 
-You can also declare event handlers inline:
+イベントハンドラをインラインで宣言することもできます。
 
 ```svelte
 <div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
 	The mouse position is {m.x} x {m.y}
 </div>
 ```
 
-The quote marks are optional, but they're helpful for syntax highlighting in some environments.
+`""` 引用符はオプションですが、一部の環境で構文を強調表示する場合に役立ちます。
 
-> In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose.
+> 一部のフレームワークでは、パフォーマンス上の理由から、特にループ処理内で、イベントハンドラをインラインで宣言しないように推奨されています。しかし、この推奨事項はSvelteには当てはまりません。あなたがどのように書いたとしても、常に適切にコンパイルします。

content/tutorial/01-svelte/05-events/03-event-modifiers/README.md

@@ -2,7 +2,7 @@
 title: Event modifiers
 ---
 
-DOM event handlers can have _modifiers_ that alter their behaviour. For example, a handler with a `once` modifier will only run a single time:
+DOM イベントハンドラには、それらの動作を変更する修飾子（*modifiers*）を設定することができます。たとえば、`once` 修飾子をハンドラに設定すると、1回だけ実行します。
 
 ```svelte
 <script>
@@ -16,15 +16,15 @@ DOM event handlers can have _modifiers_ that alter their behaviour. For example,
 </button>
 ```
 
-The full list of modifiers:
+イベント修飾子の一覧:
 
-- `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example.
-- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
-- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
-- `nonpassive` — explicitly set `passive: false`
-- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
-- `once` — remove the handler after the first time it runs
-- `self` — only trigger handler if event.target is the element itself
-- `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.
+* `preventDefault` — ハンドラを実行する前に `event.preventDefault()` を呼び出します。たとえば、クライアントのフォーム処理に役立ちます。
+* `stopPropagation` — 次の要素にイベントが伝播しないように `event.stopPropagation()` を呼び出します。
+* `passive` — タッチ/ホイールイベントでスクロールのパフォーマンスを向上させます（Svelte が安全な場所に自動的に追加します）。
+* `nonpassive` — `passive: false` を明示的に設定します。
+* `capture` — *バブリング* フェーズではなく、*キャプチャ* フェーズ中にハンドラを起動します。([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
+* `once` — ハンドラを最初に実行した後に削除します。
+* `self` — 設定した要素が event.target の場合にのみ、ハンドラをトリガします。
+* `trusted` — `event.isTrusted` が `true` の場合にのみハンドラをトリガします。つまり、ユーザーのアクションによってイベントがトリガされた場合です。
 
-You can chain modifiers together, e.g. `on:click|once|capture={...}`.
+イベント修飾子を連結することができます。（例）`on:click|once|capture={...}`

content/tutorial/01-svelte/05-events/04-component-events/README.md

@@ -2,7 +2,7 @@
 title: Component events
 ---
 
-Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`:
+コンポーネントはイベントを発信することもできます。そのためには、イベントディスパッチャを作成する必要があります。`Inner.svelte` を更新してください。
 
 ```svelte
 <script>
@@ -18,10 +18,10 @@ Components can also dispatch events. To do so, they must create an event dispatc
 </script>
 ```
 
-> `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance.
+> `createEventDispatcher` はコンポーネントを最初にインスタンス化するときに呼び出す必要があります。（後から `setTimeout` のコールバックなどの内側で呼び出すことはできません。）これにより `dispatch` をコンポーネントインスタンスに関連づけます。
 
-Notice that the `App` component is listening to the messages dispatched by `Inner` component thanks to the `on:message` directive. This directive is an attribute prefixed with `on:` followed by the event name that we are dispatching (in this case, `message`).
+`App` コンポーネントは `Inner` コンポーネントによってディスパッチされたメッセージを `on:message` ディレクティブによって受信していることに注目してください。このディレクティブは、`on:` の前にディスパッチするイベント名(この場合は `message`)を付加した属性です。
 
-Without this attribute, messages would still be dispatched, but the App would not react to it. You can try removing the `on:message` attribute and pressing the button again.
+この属性がない場合、メッセージはディスパッチされますが、アプリはそれに反応しません。`on:message`属性を削除して、もう一度ボタンを押してみてください。
 
-> You can also try changing the event name to something else. For instance, change `dispatch('message')` to `dispatch('myevent')` in `Inner.svelte` and change the attribute name from `on:message` to `on:myevent` in the `App.svelte` component.
+> イベント名を他のものに変更してみることもできます。例えば、`Inner.svelte` の `dispatch('message')` を `dispatch('myevent')` に変更し、`App.svelte` コンポーネントの属性名を `on:message` から `on:myevent` に変更します。

content/tutorial/01-svelte/05-events/05-event-forwarding/README.md

@@ -2,11 +2,11 @@
 title: Event forwarding
 ---
 
-Unlike DOM events, component events don't _bubble_. If you want to listen to an event on some deeply nested component, the intermediate components must _forward_ the event.
+DOM イベントとは異なり、コンポーネントのイベントは *バブル* しません。もし深くネストされたコンポーネントでイベントをリッスンする場合、中間コンポーネントはイベントを *フォワード* する必要があります。
 
-In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
+今回のケースでは、[前のチャプタ](/tutorial/component-events)と同じように `App.svelte` と `Inner.svelte` がありますが、`<Inner/>` を含む `Outer.svelte` コンポーネントがあります。
 
-One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
+この問題を解決する1つの方法は、`Outer.svelte` に `createEventDispatcher` を追加して、`message` イベントをリッスンして、そのハンドラを作成することです。
 
 ```svelte
 <script>
@@ -23,7 +23,7 @@ One way we could solve the problem is adding `createEventDispatcher` to `Outer.s
 <Inner on:message={forward}/>
 ```
 
-But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'.
+しかし、これでは書くコードが多いので、Svelte は同等のショートハンドを提供します。値のない `on:message` イベントディレクティブは「全ての `message` イベントをフォワードする」ことを意味します。
 
 ```svelte
 <script>

content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md

@@ -2,9 +2,9 @@
 title: DOM event forwarding
 ---
 
-Event forwarding works for DOM events too.
+イベントフォワーディングは DOM イベントでも機能します。
 
-We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
+`<CustomButton>` でのクリックの通知を受け取るためには、`CustomButton.svelte` にある `<button>` 要素の `click` イベントをフォワードする必要があります。
 
 ```svelte
 <button on:click>