translate 01-svelte/02-reactivity into Japanese

Author: tomoam

content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md

@@ -2,20 +2,20 @@
 title: Assignments
 ---
 
-At the heart of Svelte is a powerful system of _reactivity_ for keeping the DOM in sync with your application state — for example, in response to an event.
+Svelteの中心には、DOMを（例えば、イベントに応じて）アプリケーションの状態に同期し続けさせるための強力な *reactivity* システムがあります。
 
-To demonstrate it, we first need to wire up an event handler (we'll learn more about these [later](/tutorial/dom-events)):
+これを実演するには、まずイベントハンドラ (これは[後ほど](/tutorial/dom-events)学習します) を定義する必要があります。
 
 ```svelte
 <button +++on:click={increment}+++>
 ```
 
-Inside the `increment` function, all we need to do is change the value of `count`:
+`increment` 関数の内側で必要なのは `count` の値を変更することだけです。
 
 ```js
 function increment() {
 	+++count += 1;+++
 }
 ```
 
-Svelte 'instruments' this assignment with some code that tells it the DOM will need to be updated.
+Svelteは、DOMが更新される必要があることを伝えるコードをこの代入に'取り付け'ます。

content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md

@@ -2,23 +2,23 @@
 title: Declarations
 ---
 
-Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from _other_ parts (such as a `fullname` derived from a `firstname` and a `lastname`), and recomputed whenever they change.
+Svelte は、コンポーネントの状態が変更されると自動的に DOM を更新します。しばしば、コンポーネントの状態には、 _他の_ 状態から計算しなければならない部分があり (例えば、`firstname` と `lastname` から派生する `fullname`)、それらが変更されるたびに再計算しなければなりません。
 
-For these, we have _reactive declarations_. They look like this:
+これに対応するために、 _リアクティブ宣言(reactive declarations)_ があります。次のように記述します。
 
 ```js
 let count = 0;
 +++$: doubled = count * 2;+++
 ```
 
-> Don't worry if this looks a little alien. It's [valid](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) (if unconventional) JavaScript, which Svelte interprets to mean 're-run this code whenever any of the referenced values change'. Once you get used to it, there's no going back.
+> これが少し異質に見えても心配しないでください。これは（見慣れないかもしれませんが） [正しい](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/label) JavaScript で、Svelte は「参照される値が変わるたびにこのコードを再実行する」という意味だと解釈します。一度慣れてしまえば、もう戻れません。
 
-Let's use `doubled` in our markup:
+マークアップで `doubled` を使ってみましょう。
 
 ```svelte
 <button>...</button>
 
 +++<p>{count} doubled is {doubled}</p>+++
 ```
 
-Of course, you could just write `{count * 2}` in the markup instead — you don't have to use reactive values. Reactive values become particularly valuable (no pun intended) when you need to reference them multiple times, or you have values that depend on _other_ reactive values.
+もちろん、代わりに `{count * 2}` とマークアップに書くだけでもよいでしょう。リアクティブな値を使用する必要はありません。リアクティブな値は、複数回参照する必要がある場合や、*他の* リアクティブな値に依存する値がある場合に特に価値があります。

content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md

@@ -2,15 +2,15 @@
 title: Statements
 ---
 
-We're not limited to declaring reactive _values_ — we can also run arbitrary _statements_ reactively. For example, we can log the value of `count` whenever it changes:
+リアクティブな *値* を宣言するだけでなく、任意の *ステートメント* をリアクティブに実行することもできます。例えば、`count` の値が変化するたびにログを取ることができます。
 
 ```js
 let count = 0;
 
 +++$: console.log(`the count is ${count}`);+++
 ```
 
-You can easily group statements together with a block:
+ブロックで簡単にステートメントをグループ化することができます。
 
 ```js
 $: +++{+++
@@ -19,7 +19,7 @@ $: +++{+++
 +++}+++
 ```
 
-You can even put the `$:` in front of things like `if` blocks:
+`if` ブロックなどの前に `$:` を置くこともできます。
 
 ```js
 $: +++if (count >= 10)+++ {

content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md

@@ -2,9 +2,9 @@
 title: Updating arrays and objects
 ---
 
-Because Svelte's reactivity is triggered by assignments, using array methods like `push` and `splice` won't automatically cause updates. For example, clicking the 'Add a number' button doesn't currently do anything.
+Svelte のりアクティビティは代入によってトリガーされるため、`push` や `splice` のような配列のメソッドを使用しても更新が自動的に行われません。例えば、'Add a number' ボタンをクリックしても今のところ何も起こりません。
 
-One way to fix that is to add an assignment that would otherwise be redundant:
+これを修正する方法の1つとして、冗長に見えるかもしれませんが、代入を追加することです。
 
 ```js
 function addNumber() {
@@ -13,29 +13,29 @@ function addNumber() {
 }
 ```
 
-But there's a more idiomatic solution:
+もう少し慣用的な解決策もあります。
 
 ```js
 function addNumber() {
 	numbers = +++[...numbers, numbers.length + 1];+++
 }
 ```
 
-You can use similar patterns to replace `pop`, `shift`, `unshift` and `splice`.
+同様のパターンで、`pop`、`shift`、`unshift`、`splice` を置き換えることができます。
 
-Assignments to _properties_ of arrays and objects — e.g. `obj.foo += 1` or `array[i] = x` — work the same way as assignments to the values themselves.
+配列やオブジェクトの *プロパティ* への代入（例：`obj.foo += 1` や `array[i] = x`）は値自体への代入と同じように動作します。
 
 ```js
 function addNumber() {
 	numbers[numbers.length] = numbers.length + 1;
 }
 ```
 
-A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment. For example this...
+大まかなまとめ: 更新される変数の名前は、代入の左側に置かなければならない。例えばこれは…
 
 ```js
 const foo = obj.foo;
 foo.bar = 'baz';
 ```
 
-...won't trigger reactivity on `obj.foo.bar`, unless you follow it up with `obj = obj`.
+…`obj.foo.bar` に対するリアクティビティはトリガーされません。もしトリガーしたければ、`obj = obj` を続けて書く必要があります。