Merge remote-tracking branch 'sveltejs/main' into update-up-to-20230322

Author: tomoam

content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md

@@ -11,7 +11,7 @@ title: Dynamic attributes
 <img +++src={src}+++ />
 ```
 
-これでよくなりました。ただし、まだ警告が表示され続けています。
+これでよくなりました。しかし、エディタの `<img>` をホバーすると、警告が表示されているのがわかります。
 
 > A11y: &lt;img&gt; element should have an alt attribute
 

content/tutorial/01-svelte/01-introduction/05-nested-components/README.md

@@ -4,7 +4,7 @@ title: Nested components
 
 アプリ全体を単一のコンポーネントにまとめるのは現実的ではありません。代わりに、他のファイルからコンポーネントをインポートし、マークアップでそれを使用することができます。
 
-`<script>` タグを追加して `Nested.svelte` をインポートしましょう…
+`<script>` タグを `App.svelte` の上部に追加して `Nested.svelte` をインポートしましょう…
 
 ```svelte
 /// file: App.svelte

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

@@ -9,6 +9,9 @@ Svelteの中心には、DOMを（例えば、イベントに応じて）アプ
 ```svelte
 /// file: App.svelte
 <button +++on:click={increment}+++>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>
 ```
 
 `increment` 関数の内側で必要なのは `count` の値を変更することだけです。

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

@@ -17,7 +17,7 @@ let count = 0;
 /// file: App.svelte
 $: +++{+++
 	console.log(`the count is ${count}`);
-	alert(`I SAID THE COUNT IS ${count}`);
+	console.log(`this will also be logged whenever count changes`);
 +++}+++
 ```
 

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

@@ -2,7 +2,7 @@
 title: Updating arrays and objects
 ---
 
-Svelte のリアクティビティは代入によってトリガーされるため、`push` や `splice` のような配列のメソッドを使用しても更新が自動的に行われません。例えば、'Add a number' ボタンをクリックしても今のところ何も起こりません。
+Svelte のリアクティビティは代入によってトリガーされるため、`push` や `splice` のような配列のメソッドを使用しても更新が自動的に行われません。例えば、`addNumber` の内側で `numbers.push(...)` を呼び出していますが、'Add a number' ボタンをクリックしても今のところ何も起こりません。
 
 これを修正する方法の1つとして、冗長に見えるかもしれませんが、代入を追加することです。
 

content/tutorial/01-svelte/03-props/03-spread-props/README.md

@@ -2,11 +2,25 @@
 title: Spread props
 ---
 
-オブジェクトがプロパティを持っている場合、それぞれ個別に指定する代わりに、コンポーネントに '展開'することができます。
+この練習問題では、`PackageInfo.svelte` が期待する `version` プロパティを指定し忘れているため、'version undefined' が表示されています。
+
+`version` プロパティを追加することで、これを修正できます…
+
+```svelte
+/// file: App.svelte
+<PackageInfo
+    name={pkg.name}
+	speed={pkg.speed}
+    +++version={pkg.version}+++
+	website={pkg.website}
+/>
+```
+
+…しかし、`pkg` のプロパティはこのコンポーネントが期待するプロパティに対応しているので、代わりに 'spread' 構文を使用することができます:
 
 ```svelte
 /// file: App.svelte
-<PackageInfo +++{...pkg}+++/>
+<PackageInfo +++{...pkg}+++ />
 ```
 
 > 逆に、`export`で宣言されていないものも含め、もしコンポーネントに渡されたすべてのプロパティ(props)を参照する必要がある場合は、`$$props`で直接参照することができます。これは、Svelteの最適化が難しいため、一般的には推奨されませんが、ごくまれなケースでは便利です。

content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/App.svelte

@@ -3,15 +3,14 @@
 
 	const pkg = {
 		name: 'svelte',
+		speed: 'blazing',
 		version: 3,
-		speed: 'blazingly',
 		website: 'https://svelte.dev'
 	};
 </script>
 
 <PackageInfo
 	name={pkg.name}
-	version={pkg.version}
 	speed={pkg.speed}
 	website={pkg.website}
 />

content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/PackageInfo.svelte

@@ -8,8 +8,6 @@
 </script>
 
 <p>
-	The <code>{name}</code> package is {speed} fast. Download version {version}
-	from
-	<a {href}>npm</a>
-	and <a href={website}>learn more here</a>
+	The <code>{name}</code> package is {speed} fast. Download version {version} from
+	<a {href}>npm</a> and <a href={website}>learn more here</a>
 </p>

content/tutorial/01-svelte/03-props/03-spread-props/app-b/src/lib/App.svelte

@@ -3,8 +3,8 @@
 
 	const pkg = {
 		name: 'svelte',
+		speed: 'blazing',
 		version: 3,
-		speed: 'blazingly',
 		website: 'https://svelte.dev'
 	};
 </script>

content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md

@@ -8,7 +8,7 @@ title: Else-if blocks
 /// file: App.svelte
 {#if x > 10}
 	<p>{x} is greater than 10</p>
-{:+++else if+++ 5 > x}
+{:+++else if+++ x < 5}
 	<p>{x} is less than 5</p>
 {:else}
 	<p>{x} is between 5 and 10</p>