Merge pull request #45 from tomoam/update-up-to-20230711

2023/07/11 迄の更新に追従

Author: tomoam

README.md

@@ -8,7 +8,7 @@ This repo uses [pnpm](https://pnpm.io/).
 
 ## Developing the app
 
-First, run `node scripts/create-common-bundle`. This packages up everything that's needed to run a SvelteKit app (Vite, Esbuild, SvelteKit, Svelte compiler etc) which can subsequently be unpacked on a server to create and run and instance of a SvelteKit application (which powers the output window of the tutorial). Then, run `dev`:
+First, run `node scripts/create-common-bundle`. This packages up everything that's needed to run a SvelteKit app (Vite, esbuild, SvelteKit, Svelte compiler, etc.) which can subsequently be unpacked on a server to create and run an instance of a SvelteKit application (which powers the output window of the tutorial). Then, run `dev`:
 
 ```bash
 node scripts/create-common-bundle

content/tutorial/01-svelte/01-introduction/06-html-tags/README.md

@@ -13,4 +13,4 @@ Svelteでは、`{@html ...}` という特別なタグを使ってこれを行い
 <p>{+++@html+++ string}</p>
 ```
 
-> **Warning!** Svelte は DOM に挿入される前に `{@html ...}` 内の式のサニタイズを行いません。言い換えると、この機能を使用する場合は信頼できないソースから来た HTML を手動でエスケープすることが重要です、そうしないとユーザーを<a href="https://owasp.org/www-community/attacks/xss/" target="_blank">Cross-Site Scripting</a> (XSS) 攻撃にさらす危険性があります。
+> **Warning!** Svelte は DOM に挿入される前に `{@html ...}` 内の式のサニタイズを行いません。あなたがご自身で書いた記事など、信頼できるコンテンツの場合は問題ありませんが、信頼できないユーザーコンテンツ (例えば記事に対するコメントなど) の場合は、手動でエスケープする必要があります。そうしないとユーザーを <a href="https://owasp.org/www-community/attacks/xss/" target="_blank">Cross-Site Scripting</a> (XSS) 攻撃にさらす危険性があります。

content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/app-a/src/lib/App.svelte

@@ -5,7 +5,7 @@
 		numbers.push(numbers.length + 1);
 	}
 
-	$: sum = numbers.reduce((t, n) => t + n, 0);
+	$: sum = numbers.reduce((total, currentNumber) => total + currentNumber, 0);
 </script>
 
 <p>{numbers.join(' + ')} = {sum}</p>

content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/app-b/src/lib/App.svelte

@@ -5,7 +5,7 @@
 		numbers = [...numbers, numbers.length + 1];
 	}
 
-	$: sum = numbers.reduce((t, n) => t + n, 0);
+	$: sum = numbers.reduce((total, currentNumber) => total + currentNumber, 0);
 </script>
 
 <p>{numbers.join(' + ')} = {sum}</p>

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

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

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

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

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

@@ -4,7 +4,7 @@ title: Keyed each blocks
 
 デフォルトでは、`each` ブロックの値を変更すると、ブロックの *末尾* にアイテムを追加・削除し、変更された値を更新します。これはあなたが望むものではないかもしれません。
 
-説明するより見ていただいたほうがわかりやすいしょう。'Remove first thing' ボタンを何度かクリックして、何が起きるか確認してください。先頭の `<Thing>` コンポーネントは削除されず、*末尾の* DOM ノードが削除されます。そして残りの DOM ノードの `name` の値は更新されますが、絵文字は更新されません。この絵文字は、`Thing.svelte` が初期化されるときに固定されているのです。
+説明するより見ていただいたほうがおわかり頂けるでしょう。'Remove first thing' ボタンを何度かクリックして、何が起きるか確認してください。先頭の `<Thing>` コンポーネントは削除されず、 _末尾の_ DOM ノードが削除されます。そして残りの DOM ノードの `name` の値は更新されますが、絵文字は更新されません。この絵文字は、それぞれの `<Thing>` が作成されるときに固定されているのです。
 
 代わりに、先頭の `<Thing>` コンポーネントとその DOM ノードだけを削除して、残りには影響を与えないようにしたいと思います。
 

content/tutorial/01-svelte/05-events/03-event-modifiers/README.md

@@ -17,7 +17,7 @@ DOM イベントハンドラには、それらの動作を変更する修飾子
 * `stopPropagation` — 次の要素にイベントが伝播しないように `event.stopPropagation()` を呼び出します。
 * `passive` — タッチ/ホイールイベントでスクロールのパフォーマンスを向上させます（Svelte が安全な場所に自動的に追加します）。
 * `nonpassive` — `passive: false` を明示的に設定します。
-* `capture` — *バブリング* フェーズではなく、*キャプチャ* フェーズ中にハンドラを起動します。([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_capture))
+* `capture` — [_バブリング(bubbling)_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling) フェーズではなく、[_キャプチャ(capture)_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_capture) フェーズ中にハンドラを起動します。
 * `once` — ハンドラを最初に実行した後に削除します。
 * `self` — 設定した要素が event.target の場合にのみ、ハンドラをトリガします。
 * `trusted` — `event.isTrusted` が `true` の場合にのみハンドラをトリガします。つまり、JavaScript が `element.dispatchEvent(...)` を呼び出した場合は `true` にならず、ユーザーのアクションによってイベントがトリガされた場合は `true` になります。

content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/README.md

@@ -0,0 +1,18 @@
+---
+title: Global transitions
+---
+
+通常、要素でトランジションが再生されるのは、その要素を直接含むブロックが追加もしくは破棄されるときだけです。この例では、リスト全体の表示を切り替えても、個々のリスト要素でトランジションは再生されません。
+
+そのかわりに、スライダーで個々のアイテムが追加もしくは削除されたときだけでなく、チェックボックスを切り替えたときにもトランジションが再生されるようにしたいと思います。
+
+これを実現するには、_global_ トランジションを使用します。これにより、トランジションを持つブロックが追加されたり削除されたりしたときに再生されます。
+
+```svelte
+/// file: App.svelte
+<div transition:slide+++|global+++>
+	{item}
+</div>
+```
+
+> Svelte 3 では、トランジションはデフォルトで global で、トランジションの動作をローカルにするために `|local` 修飾子を使用する必要がありました。