Merge pull request #10 from tomoam/translate-04-advanced-loading

Svelte のチュートリアルを svelte-site-jp から追加

Author: tomoam

content/tutorial/01-svelte/06-bindings/01-text-inputs/README.md

@@ -2,14 +2,14 @@
 title: Text inputs
 ---
 
-As a general rule, data flow in Svelte is _top down_ — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
+原則、Svelteのデータフローはトップダウンです。親コンポーネントは子コンポーネントにプロパティをセットできますし、コンポーネントは要素に属性をセットできますが、その逆はできません。
 
-Sometimes it's useful to break that rule. Take the case of the `<input>` element in this component — we _could_ add an `on:input` event handler that sets the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see.
+時々、そのルールを破ると便利なことがあります。このコンポーネントの`<input>`要素の例で考えてみましょう。`on:input`イベントハンドラを追加して、`name`の値を`event.target.value`に設定できますが、それは少し…面倒(boilerplatey)です。想像がつくと思いますが、他のフォーム要素ではそれがさらに悪化します。
 
-Instead, we can use the `bind:value` directive:
+代わりに、`bind:value`を使用することができます。
 
 ```svelte
 <input bind:value={name}>
 ```
 
-This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
+これは`name`の値が変更されるとinputの値が更新されるだけでなく、inputの値が変更されると`name`の値が更新されることを意味します。

content/tutorial/01-svelte/06-bindings/02-numeric-inputs/README.md

@@ -2,9 +2,9 @@
 title: Numeric inputs
 ---
 
-In the DOM, everything is a string. That's unhelpful when you're dealing with numeric inputs — `type="number"` and `type="range"` — as it means you have to remember to coerce `input.value` before using it.
+DOMの中では、全てが文字列(string)です。これは、数値のinput（`type="number"` と `type="range"`）を扱う際、その値を取り出す時に`input.value`を使わなければならないため、不便です。
 
-With `bind:value`, Svelte takes care of it for you:
+`bind:value`を使用すれば、Svelteがそれを代行してくれます。
 
 ```svelte
 <input type=number bind:value={a} min=0 max=10>

content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md

@@ -2,7 +2,7 @@
 title: Checkbox inputs
 ---
 
-Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
+チェックボックスは状態を切り替えるのに使用されます。`input.value`にバインドする代わりに、`input.checked`にバインドします。
 
 ```svelte
 <input type=checkbox bind:checked={yes}>

content/tutorial/01-svelte/06-bindings/04-group-inputs/README.md

@@ -2,21 +2,21 @@
 title: Group inputs
 ---
 
-If you have multiple inputs relating to the same value, you can use `bind:group` along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
+同じ値に関係する複数のinputがあるなら、`value`属性に加えて`bind:group`を使用できます。同じグループ内のラジオinputは相互に排他的で、同じグループ内のチェックボックスinputは選択された値の配列を形成します。 
 
-Add `bind:group` to each input:
+各inputに`bind:group`を追加しましょう。
 
 ```svelte
 <input type=radio bind:group={scoops} name="scoops" value={1}>
 ```
 
-In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
+この場合、チェックボックスinputを`each`ブロックに移動させることでコードをよりシンプルにすることができます。まず、`<script>`ブロックに`menu`変数を追加します。
 
 ```js
 let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
 ```
 
-...then replace the second section:
+…それから2つ目のセクションを置き換えます。
 
 ```svelte
 <h2>Flavours</h2>
@@ -29,4 +29,4 @@ let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
 {/each}
 ```
 
-It's now easy to expand our ice cream menu in new and exciting directions.
+アイスクリームのメニューを新しいエキサイティングな方向に簡単に拡張できるようになりました。

content/tutorial/01-svelte/06-bindings/05-textarea-inputs/README.md

@@ -2,18 +2,18 @@
 title: Textarea inputs
 ---
 
-> This exercise doesn't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/textarea-inputs
+> この練習問題は現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.jp/tutorial/textarea-inputs
 
-The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value`:
+Svelteでは、`<textarea>`要素はtext inputと同じように振る舞います。`bind:value`を使ってみましょう。
 
 ```svelte
 <textarea bind:value={value}></textarea>
 ```
 
-In cases like these, where the names match, we can also use a shorthand form:
+このように名前が一致する場合は、省略形を使用することもできます。
 
 ```svelte
 <textarea bind:value></textarea>
 ```
 
-This applies to all bindings, not just textareas.
+これはtextareaに限らず全てのバインディングに適用されます。

content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md

@@ -2,12 +2,12 @@
 title: Select bindings
 ---
 
-We can also use `bind:value` with `<select>` elements. Update line 32:
+`<select>`要素にも`bind:value`を使用できます。32行目を更新してください。
 
 ```svelte
 <select bind:value={selected} on:change="{() => answer = ''}">
 ```
 
-Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
+`<option>`の値は文字列ではなくオブジェクトであることにご注意ください。Svelteは気にしません。
 
-> Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.
+> `selected`の初期値を設定していないので、バインディングは自動的にデフォルト値(配列の先頭)に設定されます。しかし、注意してください。バインディングが初期化されるまで、`selected`はundefinedのままなので、よく考えもせずにテンプレート内の`selected.id`などを参照することはできません。

content/tutorial/01-svelte/06-bindings/07-multiple-select-bindings/README.md

@@ -2,9 +2,9 @@
 title: Select multiple
 ---
 
-A select can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value.
+select は `multiple` 属性を持つことができ、その場合は単一の値を選択するのではなく配列を追加します。
 
-Returning to our [earlier ice cream example](/tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
+[先ほどのアイスクリームの例](/tutorial/group-inputs)に戻り、チェックボックスを `<select multiple>` で置き換えることができます。
 
 ```svelte
 <h2>Flavours</h2>
@@ -18,4 +18,4 @@ Returning to our [earlier ice cream example](/tutorial/group-inputs), we can rep
 </select>
 ```
 
-> Press and hold the `control` key (or the `command` key on MacOS) for selecting multiple options.
+> 複数のオプションを選択するには `control` キー (MacOSの場合は `command` キー) を押したままにしてください。

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.jp/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` が存在するかどうかをチェックする必要があるということに注意してください。