translate 03-advanced-svelte/04-actions into Japanese

Author: tomoam

content/tutorial/03-advanced-svelte/04-actions/01-actions/README.md

@@ -2,30 +2,30 @@
 title: The use directive
 ---
 
-Actions are essentially element-level lifecycle functions. They're useful for things like:
+アクションは基本的に要素レベルのライフサイクル関数です。これらは以下のような場合に便利です。
 
-- interfacing with third-party libraries
-- lazy-loaded images
-- tooltips
-- adding custom event handlers
+- サードパーティライブラリとの連携
+- 画像の遅延読み込み
+- ツールチップ
+- カスタムイベントハンドラの追加
 
-In this app, we want to make the orange modal close when the user clicks outside it. It has an event handler for the `outclick` event, but it isn't a native DOM event. We have to dispatch it ourselves. First, import the `clickOutside` function...
+このアプリでは、オレンジ色のモーダルを、その外側をクリックしたときに閉じるようにしたいと思います。このアプリには `outclick` イベント用のイベントハンドラがありますが、これはネイティブの DOM イベントではありません。このイベントを自分でディスパッチする必要があります。まず、`clickOutside` 関数をインポートします…
 
 ```js
 import { clickOutside } from './click_outside.js';
 ```
 
-...then use it with the element:
+…そして、それを要素と一緒に使用します。
 
 ```svelte
 <div class="box" use:clickOutside on:outclick="{() => (showModal = false)}">
 	Click outside me!
 </div>
 ```
 
-Open the `click_outside.js` file. Like transition functions, an action function receives a `node` (which is the element that the action is applied to) and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
+`click_outside.js` ファイルを開きます。トランジション関数と同様に、アクション関数は `node` (アクションが適用される要素) といくつかのオプションのパラメータを受け取り、アクションオブジェクトを返します。このオブジェクトは `destroy` 関数を持つことができ、要素がマウントされていないときに呼び出されます。
 
-We want to fire the `outclick` event when the user clicks outside the orange box. One possible implementation looks like this:
+ユーザがオレンジ色のボックスの外側をクリックしたときに、`outclick` イベントを発生させたいと考えています。考えられる実装の1つは以下のようになります。
 
 ```js
 export function clickOutside(node) {
@@ -45,4 +45,4 @@ export function clickOutside(node) {
 }
 ```
 
-Update the `clickOutside` function, click the button to show the modal and then click outside it to close it.
+`clickOutside` 関数を更新し、ボタンをクリックしてモーダルを表示し、モーダルの外側をクリックしてモーダルを閉じてみてください。

content/tutorial/03-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.
+トランジションやアニメーションのように、アクションは引数を取ることができ、アクション関数はそれが属する要素と一緒に呼び出されます。
 
-Here, we're using a `longpress` action that fires an event with the same name whenever the user presses and holds the button for a given duration. Right now, if you switch over to the `longpress.js` file, you'll see it's hardcoded to 500ms.
+ここでは、ユーザがボタンを長押しするたびに同じ名前のイベントを発生させる `longpress` アクションを使っています。`longpress.js` ファイルに切り替えると、500msにハードコードされていることがわかります。
 
-We can change the action function to accept a `duration` as a second argument, and pass that `duration` to the `setTimeout` call:
+アクション関数を変更して、第2引数に `duration` を指定し、そしてその `duration` を `setTimeout` に渡すことができます。
 
 ```js
 export function longpress(node, duration) {
@@ -22,15 +22,15 @@ export function longpress(node, duration) {
 }
 ```
 
-Back in `App.svelte`, we can pass the `duration` value to the action:
+`App.svelte` に戻り、`duration` の値をアクションに渡すことができます。
 
 ```svelte
 <button use:longpress={duration}
 ```
 
-This _almost_ works — the event now only fires after 2 seconds. But if you slide the duration down, it will still take two seconds.
+これは、*大体* 動作します。イベントは2秒後にのみ発生するようになりました。しかし、デュレーションを下にスライドさせても、まだ2秒かかります。
 
-To change that, we can add an `update` method in `longpress.js`. This will be called whenever the argument changes:
+これを変更するには、`longpress.js` に `update` メソッドを追加します。これは引数が変更されるたびに呼び出されます。
 
 ```js
 return {
@@ -41,4 +41,4 @@ return {
 };
 ```
 
-> If you need to pass multiple arguments to an action, combine them into a single object, as in `use:longpress={{duration, spiciness}}`
+> 複数の引数をアクションに渡す必要がある場合は、`use:longpress={{duration, spiciness}}` のように、それらを1つのオブジェクトに結合します。