translate 01-svelte/06-bindings into Japanese

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` キー) を押したままにしてください。