Merge pull request #36 from tomoam/update-up-to-20230405

2023/04/05 迄の更新に追従

Author: tomoam

content/tutorial/03-advanced-svelte/11-special-tags/02-html-tags/README.md renamed to content/tutorial/01-svelte/01-introduction/06-html-tags/README.md

@@ -4,21 +4,18 @@ title: If blocks
 
 HTML には条件式やループのような *ロジック* を表現する方法がありません。Svelteにはあります。
 
-条件付きでマークアップをレンダリングするために、私たちはそれを `if` ブロックで囲みます。
+条件付きでマークアップをレンダリングする場合は、そのマークアップを `if` ブロックで囲みます。`count` が 10 より大きいときに表示されるテキストを追加してみましょう:
 
 ```svelte
 /// file: App.svelte
-+++{#if user.loggedIn}+++
-	<button on:click={toggle}>
-		Log out
-	</button>
-+++{/if}+++
+<button on:click={increment}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>
 
-+++{#if !user.loggedIn}+++
-	<button on:click={toggle}>
-		Log in
-	</button>
-+++{/if}+++
++++{#if count > 10}
+	<p>{count} is greater than 10</p>
+{/if}+++
 ```
 
 試してみてください。コンポーネントを更新し、ボタンをクリックしてみてください。

content/tutorial/03-advanced-svelte/11-special-tags/02-html-tags/app-a/src/lib/App.svelte renamed to content/tutorial/01-svelte/01-introduction/06-html-tags/app-a/src/lib/App.svelte

@@ -1,15 +1,12 @@
 <script>
-	let user = { loggedIn: false };
+	let count = 0;
 
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
+	function increment() {
+		count += 1;
 	}
 </script>
 
-<button on:click={toggle}>
-	Log out
-</button>
-
-<button on:click={toggle}>
-	Log in
+<button on:click={increment}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
 </button>

content/tutorial/03-advanced-svelte/11-special-tags/02-html-tags/app-b/src/lib/App.svelte renamed to content/tutorial/01-svelte/01-introduction/06-html-tags/app-b/src/lib/App.svelte

@@ -1,19 +1,16 @@
 <script>
-	let user = { loggedIn: false };
+	let count = 0;
 
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
+	function increment() {
+		count += 1;
 	}
 </script>
 
-{#if user.loggedIn}
-	<button on:click={toggle}>
-		Log out
-	</button>
-{/if}
+<button on:click={increment}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>
 
-{#if !user.loggedIn}
-	<button on:click={toggle}>
-		Log in
-	</button>
-{/if}
+{#if count > 10}
+	<p>{count} is greater than 10</p>
+{/if}

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

@@ -2,19 +2,15 @@
 title: Else blocks
 ---
 
-2つの条件（`if user.loggedIn` と `if !user.loggedIn`）は相互に排他的なので、`else` ブロックを使用することでこのコンポーネントを少しシンプルにすることができます。
+JavaScript と同じように、`if` ブロックには `else` ブロックを置くことができます:
 
 ```svelte
 /// file: App.svelte
-{#if user.loggedIn}
-	<button on:click={toggle}>
-		Log out
-	</button>
-+++{:else}+++
-	<button on:click={toggle}>
-		Log in
-	</button>
+{#if count > 10}
+	<p>{count} is greater than 10</p>
++++{:else}
+	<p>{count} is between 0 and 10</p>+++
 {/if}
 ```
 
-> `#` の文字は常に *ブロックの開始* タグを示します。 `/` の文字は常に *ブロックの終了* タグを示します。  `:` の文字は `{:else}` のように *ブロックの継続* タグを示します。心配しないでください。あなたは既にSvelteがHTMLに追加する構文のほとんどを学んでいます。
+> `#` の文字は常に _ブロックの開始_ タグを示します。 `/` の文字は常に *ブロックの終了* タグを示します。  `:` の文字は `{:else}` のように _ブロックの継続_ タグを示します。心配しないでください。あなたは既にSvelteがHTMLに追加する構文のほとんどを学んでいます。

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

@@ -1,17 +1,18 @@
 <script>
-	let user = { loggedIn: false };
+	let count = 0;
 
-	function toggle() {
-		user.loggedIn = !user.loggedIn;
+	function increment() {
+		count += 1;
 	}
 </script>
 
-{#if user.loggedIn}
-	<button on:click={toggle}>
-		Log out
-	</button>
+<button on:click={increment}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>
+
+{#if count > 10}
+	<p>{count} is greater than 10</p>
 {:else}
-	<button on:click={toggle}>
-		Log in
-	</button>
-{/if}
+	<p>{count} is between 0 and 10</p>
+{/if}

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

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