translate 01-svelte/07-lifecycle into Japanese

Author: tomoam

content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md

@@ -2,13 +2,13 @@
 title: onMount
 ---
 
-> The images in this exercise don't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/onmount
+> この練習問題の画像は現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.dev/tutorial/onmount
 
-Every component has a _lifecycle_ that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
+すべてのコンポーネントには、作成される時を開始とし、破棄される時に終了とする *ライフサイクル* があります。その重要なタイミングにコードを実行できるようにする関数がいくつかあります。
 
-The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM.
+最も頻繁に使用するのは `onMount` で、これはコンポーネントが最初に DOM にレンダリングされた後に実行されます。
 
-We'll add an `onMount` handler that loads some data over the network:
+`onMount` ハンドラにネットワークからデータを読み込む処理を追加します。
 
 ```svelte
 <script>
@@ -23,8 +23,8 @@ We'll add an `onMount` handler that loads some data over the network:
 </script>
 ```
 
-> It's recommended to put the `fetch` in `onMount` rather than at the top level of the `<script>` because of server-side rendering (SSR). With the exception of `onDestroy`, lifecycle functions don't run during SSR, which means we can avoid fetching data that should be loaded lazily once the component has been mounted in the DOM.
+> このコンポーネントがDOMにレンダリングされた上で遅延して読み込まれるべきデータを、サーバーサイドレンダリング（SSR）中には取得せずに済むように、この`fetch`を、`<script>` の最上位ではなく、 `onMount` の中に入れることが推奨されます。なぜなら、`onDestroy`以外のライフサイクル関数がSSR中に動作することはないからです。
 
-Lifecycle functions must be called while the component is initialising so that the callback is bound to the component instance — not (say) in a `setTimeout`.
+ライフサイクル関数は、コールバックがコンポーネントのインスタンスにバインドされるように、コンポーネントの初期化中に呼び出されなければなりません。例えば、`setTimeout` の中で呼び出されてはいけません。
 
-If the `onMount` callback returns a function, that function will be called when the component is destroyed.
+もし `onMount` コールバックが関数を返す場合、その関数はコンポーネントが破棄されたときに呼び出されます。

content/tutorial/01-svelte/07-lifecycle/02-ondestroy/README.md

@@ -2,9 +2,9 @@
 title: onDestroy
 ---
 
-To run code when your component is destroyed, use `onDestroy`.
+コンポーネントが破棄されたときにコードを実行するには、`onDestroy` を使いましょう。
 
-For example, we can add a `setInterval` function when our component initialises, and clean it up when it's no longer relevant. Doing so prevents memory leaks.
+例えば、コンポーネントの初期化時に `setInterval` 関数を追加し、それが不要になったらそれをクリーンアップすることができます。そうすることでメモリリークを防ぐことができます。
 
 ```svelte
 <script>
@@ -17,7 +17,7 @@ For example, we can add a `setInterval` function when our component initialises,
 </script>
 ```
 
-While it's important to call lifecycle functions during the component's initialisation, it doesn't matter _where_ you call them from. So if we wanted, we could abstract the interval logic into a helper function in `utils.js`...
+コンポーネントの初期化中にライフサイクル関数を呼び出すことは重要ですが、それらを *どこ* から呼び出すかは重要ではありません。そのため、インターバルロジックを抽象化して `utils.js` のヘルパー関数にすることができます…
 
 ```js
 import { onDestroy } from 'svelte';
@@ -31,7 +31,7 @@ export function onInterval(callback, milliseconds) {
 }
 ```
 
-...and import it into our component:
+…そして、それをコンポーネントにインポートします。
 
 ```svelte
 <script>
@@ -42,4 +42,4 @@ export function onInterval(callback, milliseconds) {
 </script>
 ```
 
-Open and close the timer a few times and make sure the counter keeps ticking and the CPU load increases. This is due to a memory leak as the previous timers are not deleted. Don't forget to refresh the page before solving the example.
+何度かタイマーを開いたり閉じたりして、カウンターが動き続けCPU負荷が上昇することを確認してみてください。これは古いタイマーが削除されていないため、メモリリークが発生しているからです。例題を解く前にこのページを更新するのを忘れないでくださいね。

content/tutorial/01-svelte/07-lifecycle/03-update/README.md

@@ -2,11 +2,11 @@
 title: beforeUpdate and afterUpdate
 ---
 
-The `beforeUpdate` function schedules work to happen immediately before the DOM is updated. `afterUpdate` is its counterpart, used for running code once the DOM is in sync with your data.
+`beforeUpdate` 関数は DOM が更新される直前に作業をスケジュールします。`afterUpdate` はそれと対になるもので、DOM がデータと同期した後にコードを実行するために使用されます。
 
-Together, they're useful for doing things imperatively that are difficult to achieve in a purely state-driven way, like updating the scroll position of an element.
+これらは、要素のスクロール位置を更新するなど、純粋な状態駆動では実現が困難なことを、命令的に行うのに便利です。
 
-This [Eliza](https://en.wikipedia.org/wiki/ELIZA) chatbot is annoying to use, because you have to keep scrolling the chat window. Let's fix that.
+この[Eliza](https://en.wikipedia.org/wiki/ELIZA)のチャットボットは、チャットウィンドウをスクロールし続けなければならないので、使うのが面倒です。そこを直しましょう。
 
 ```js
 let div;
@@ -21,4 +21,4 @@ afterUpdate(() => {
 });
 ```
 
-Note that `beforeUpdate` will first run before the component has mounted, so we need to check for the existence of `div` before reading its properties.
+`beforeUpdate` はコンポーネントが最初にマウントされる前に実行されるので、プロパティを読み込む前に `div` が存在するかどうかをチェックする必要があるということに注意してください。

content/tutorial/01-svelte/07-lifecycle/04-tick/README.md

@@ -2,17 +2,17 @@
 title: tick
 ---
 
-The `tick` function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises. It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).
+`tick` 関数は他のライフサイクル関数とは異なり、コンポーネントが最初に初期化されたときだけでなく、いつでも呼び出すことができます。この関数は、保留中の状態変更が DOM に適用されるとすぐに (保留中の状態変更がない場合はすぐに) resolve する promise を返します。
 
-When you update component state in Svelte, it doesn't update the DOM immediately. Instead, it waits until the next _microtask_ to see if there are any other changes that need to be applied, including in other components. Doing so avoids unnecessary work and allows the browser to batch things more effectively.
+Svelte でコンポーネントの状態を更新しても、すぐに DOM を更新するわけではありません。その代わりに、次の *マイクロタスク* まで待って、他のコンポーネントも含めて適用する必要のある変更があるかどうかを確認します。そうすることで不要な作業を回避し、ブラウザはより効果的にバッチ処理を行うことができます。
 
-You can see that behaviour in this example. Select a range of text and hit the tab key. Because the `<textarea>` value changes, the current selection is cleared and the cursor jumps, annoyingly, to the end. We can fix this by importing `tick`...
+この例では、その動作を見ることができます。テキストの範囲を選択してタブキーを押します。`<textarea>` の値が変更されるため、現在の選択範囲がクリアされ、カーソルが最後までジャンプしてしまいます。これは `tick` をインポートすることで修正できます…
 
 ```js
 import { tick } from 'svelte';
 ```
 
-...and running it immediately before we set `this.selectionStart` and `this.selectionEnd` at the end of `handleKeydown`:
+…そして `handleKeydown` の最後に `this.selectationStart` と `this.selectationEnd` を設定する直前に実行します。
 
 ```js
 await tick();