Merge pull request #30 from tomoam/update-up-to-20230316

2023/03/15 迄の更新に追従

Author: tomoam

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

@@ -6,11 +6,13 @@ title: Each blocks
 
 ```svelte
 <ul>
-	{#each cats as cat}
-		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
-			{cat.name}
-		</a></li>
-	{/each}
+	+++{#each cats as cat}+++
+		<li>
+			<a href="https://www.youtube.com/watch?v={cat.id}">
+				{cat.name}
+			</a>
+		</li>
+	+++{/each}+++
 </ul>
 ```
 
@@ -19,10 +21,12 @@ title: Each blocks
 第2引数として現在の *index* をこのように取得することができます。
 
 ```svelte
-{#each cats as cat, i}
-	<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
-		{i + 1}: {cat.name}
-	</a></li>
+{#each cats as cat+++, i}+++
+	<li>
+		<a href="https://www.youtube.com/watch?v={cat.id}">
+			+++{i + 1}:+++ {cat.name}
+		</a>
+	</li>
 {/each}
 ```
 

content/tutorial/01-svelte/04-logic/04-each-blocks/app-a/src/lib/App.svelte

@@ -19,13 +19,10 @@
 
 <ul>
 	<!-- open each block -->
-	<li>
-		<a
-			target="_blank"
-			href="https://www.youtube.com/watch?v={cat.id}"
-		>
-			{cat.name}
-		</a>
-	</li>
+		<li>
+			<a href="https://www.youtube.com/watch?v={cat.id}">
+				{cat.name}
+			</a>
+		</li>
 	<!-- close each block -->
 </ul>

content/tutorial/01-svelte/04-logic/04-each-blocks/app-b/src/lib/App.svelte

@@ -20,10 +20,7 @@
 <ul>
 	{#each cats as { id, name }, i}
 		<li>
-			<a
-				target="_blank"
-				href="https://www.youtube.com/watch?v={id}"
-			>
+			<a href="https://www.youtube.com/watch?v={id}">
 				{i + 1}: {name}
 			</a>
 		</li>

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

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

content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-a/src/lib/Thing.svelte

@@ -1,6 +1,4 @@
 <script>
-	import { onDestroy } from 'svelte';
-
 	const emojis = {
 		apple: '🍎',
 		banana: '🍌',
@@ -12,13 +10,9 @@
 	// the name is updated whenever the prop value changes...
 	export let name;
 
-	// ...but the "emoji" variable is fixed upon initialisation of the component
+	// ...but the "emoji" variable is fixed upon initialisation
+	// of the component because it uses `const` instead of `$:`
 	const emoji = emojis[name];
-
-	// observe in the console which entry is removed
-	onDestroy(() => {
-		console.log('thing destroyed: ' + name);
-	});
 </script>
 
 <p>

content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-b/src/lib/Thing.svelte

@@ -1,14 +1,14 @@
 <script>
 	async function getRandomNumber() {
-		const res = await fetch(
-			`https://svelte.dev/tutorial/random-number`
-		);
-		const text = await res.text();
+		// Fetch a random number between 0 and 100
+		// (with a delay, so that we can see it)
+		const res = await fetch('/random-number');
 
 		if (res.ok) {
-			return text;
+			return await res.text();
 		} else {
-			throw new Error(text);
+			// Sometimes the API will fail!
+			throw new Error('Request failed');
 		}
 	}
 
@@ -19,7 +19,9 @@
 	}
 </script>
 
-<button on:click={handleClick}> generate random number </button>
+<button on:click={handleClick}>
+	generate random number
+</button>
 
 <!-- replace this element -->
 <p>{promise}</p>

content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte

@@ -0,0 +1,23 @@
+export async function GET(req) {
+	const query = req.url.searchParams;
+	let min = query.get('min') || '0';
+	let max = query.get('max') || '100';
+	min = +min;
+	max = +max;
+
+	// simulate a long delay
+	await new Promise((res) => setTimeout(res, 1000));
+
+	// fail sometimes
+	if (Math.random() < 0.333) {
+		return new Response(`Failed to generate random number. Please try again`, {
+			status: 400,
+			headers: { 'Access-Control-Allow-Origin': '*' }
+		});
+	}
+
+	const num = min + Math.round(Math.random() * (max - min));
+	return new Response(String(num), {
+		headers: { 'Access-Control-Allow-Origin': '*' }
+	});
+}

content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/routes/random-number/+server.js

@@ -1,14 +1,14 @@
 <script>
 	async function getRandomNumber() {
-		const res = await fetch(
-			`https://svelte.dev/tutorial/random-number`
-		);
-		const text = await res.text();
+		// Fetch a random number between 0 and 100
+		// (with a delay, so that we can see it)
+		const res = await fetch('/random-number');
 
 		if (res.ok) {
-			return text;
+			return await res.text();
 		} else {
-			throw new Error(text);
+			// Sometimes the API will fail!
+			throw new Error('Request failed');
 		}
 	}
 
@@ -19,7 +19,9 @@
 	}
 </script>
 
-<button on:click={handleClick}> generate random number </button>
+<button on:click={handleClick}>
+	generate random number
+</button>
 
 {#await promise}
 	<p>...waiting</p>

content/tutorial/01-svelte/04-logic/06-await-blocks/app-b/src/lib/App.svelte

@@ -5,7 +5,7 @@ title: DOM events
 今までざっと見てきたように、`on:` ディレクティブを使用して要素の任意のイベントをリスニングできます。
 
 ```svelte
-<div on:mousemove={handleMousemove}>
+<div +++on:mousemove={handleMousemove}+++>
 	The mouse position is {m.x} x {m.y}
 </div>
 ```