Merge pull request #48 from tomoam/update-up-to-20240216

2024/02/16 迄の更新に追従

Author: tomoam

.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

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

@@ -38,8 +38,9 @@ function addNumber() {
 
 ```js
 /// no-file
+const obj = { foo: { bar: 1 } };
 const foo = obj.foo;
-foo.bar = 'baz';
+foo.bar = 2;
 ```
 
 …`obj.foo.bar` に対するリアクティビティはトリガーされません。もしトリガーしたければ、`obj = obj` を続けて書く必要があります。

content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md

@@ -2,13 +2,18 @@
 title: Keyed each blocks
 ---
 
-デフォルトでは、`each` ブロックの値を変更すると、ブロックの *末尾* にアイテムを追加・削除し、変更された値を更新します。これはあなたが望むものではないかもしれません。
+デフォルトでは、`each` ブロックの値を変更すると、ブロックの *末尾* で DOM ノードが追加・削除され、変更された値が更新されます。これはあなたが期待した動作ではないかもしれません。
 
-説明するより見ていただいたほうがおわかり頂けるでしょう。'Remove first thing' ボタンを何度かクリックして、何が起きるか確認してください。先頭の `<Thing>` コンポーネントは削除されず、 _末尾の_ DOM ノードが削除されます。そして残りの DOM ノードの `name` の値は更新されますが、絵文字は更新されません。この絵文字は、それぞれの `<Thing>` が作成されるときに固定されているのです。
+説明するより見ていただいたほうがおわかり頂けるでしょう。この `<Thing>` コンポーネントでは初期化時に絵文字を定数としてセットしていますが、name は prop として渡されています。
+
+'Remove first thing' ボタンを何回かクリックすると、以下のことが発生します:
+
+1. 一番最後のコンポーネントが削除される
+2. 残りの DOM ノードの `name` の値が更新されるが、絵文字は更新されず、それぞれの `<Thing>` が作成されたときのまま固定されている
 
 代わりに、先頭の `<Thing>` コンポーネントとその DOM ノードだけを削除して、残りには影響を与えないようにしたいと思います。
 
-そのためには、`each` ブロックに一意な識別子 (または"key") を指定します。
+そのためには、`each` ブロックの each イテレーションに一意な識別子 (または"key") を指定します。
 
 ```svelte
 /// file: App.svelte
@@ -17,6 +22,6 @@ title: Keyed each blocks
 {/each}
 ```
 
-ここで、`(thing.id)` は *key* であり、コンポーネントが更新されたときに変更するDOMノードを特定する方法を Svelte に伝えます。
+ここで、`(thing.id)` は _key_ であり、値 (この例では `name`) が更新されたときに何を更新するのか Svelte に指示しています。
 
 > Svelte は内部的に `Map` を使用しているので、どんなオブジェクトでもキーとして使用できます。つまり `(thing.id)` の代わりに `(thing)` を使うことができます。しかし、文字列または数値を使用する方が一般的に安全です。なぜなら、例えばAPIサーバーからの新しいデータで更新する場合に、参照が等しくなくても同一性が持続することを意味するからです。

content/tutorial/01-svelte/05-events/02-inline-handlers/README.md

@@ -20,7 +20,7 @@ title: Inline handlers
 		m = { x: e.clientX, y: e.clientY };
 	}+++}
 >
-	The mouse position is {m.x} x {m.y}
+	The pointer is at {m.x} x {m.y}
 </div>
 ```
 

content/tutorial/01-svelte/05-events/06-dom-event-forwarding/app-a/src/lib/App.svelte

@@ -6,6 +6,7 @@
 	audio.src = horn;
 
 	function handleClick() {
+		audio.load();
 		audio.play();
 	}
 </script>

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

@@ -14,7 +14,7 @@ title: onMount
 </script>
 ```
 
-そして、コンポーネントがマウントされるときに実行する関数を追加しましょう:
+そして、コンポーネントがマウントされるときに実行されるコールバックを追加しましょう:
 
 ```svelte
 /// file: App.svelte

content/tutorial/01-svelte/common/src/routes/+error.svelte

@@ -11,7 +11,7 @@
 		code
 		<a
 			target="_blank"
-			href="https://httpstatusdogs.com/{$page.status}"
+			href="https://http.dog/{$page.status}"
 			>{$page.status}</a
 		>
 	</p>

content/tutorial/02-advanced-svelte/01-motion/01-tweens/README.md

@@ -6,7 +6,7 @@ title: Tweens
 
 値を設定して DOM が自動的に更新されるのを見るのは最高です。もっと最高なのは？それらの値を *トゥイーン(Tween)* することです。Svelte には、変化を表すアニメーションを用いたスムーズなユーザーインターフェースを構築するためのツールがあります。
 
-まず `progress` store を `tweened` 値に変更してみましょう。
+まず `progress` store を `tweened` store に変更してみましょう。
 
 ```svelte
 /// file: App.svelte

content/tutorial/02-advanced-svelte/01-motion/02-springs/app-a/src/lib/App.svelte

@@ -11,6 +11,7 @@
 	}}
 	on:mousedown={() => size.set(30)}
 	on:mouseup={() => size.set(10)}
+	role="presentation"
 >
 	<circle
 		cx={$coords.x}

content/tutorial/02-advanced-svelte/01-motion/02-springs/app-b/src/lib/App.svelte

@@ -15,6 +15,7 @@
 	}}
 	on:mousedown={() => size.set(30)}
 	on:mouseup={() => size.set(10)}
+	role="presentation"
 >
 	<circle
 		cx={$coords.x}