Skip to content

Commit 70d59fa

Browse files
tomoamtomoam
authored
Merge pull request #36 from tomoam/update-up-to-20230405
2023/04/05 迄の更新に追従
2 parents 2d840c2 + 886b1dc commit 70d59fa

File tree

184 files changed

+2881
-2013
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

184 files changed

+2881
-2013
lines changed

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,18 @@ title: If blocks
44

55
HTML には条件式やループのような *ロジック* を表現する方法がありません。Svelteにはあります。
66

7-
条件付きでマークアップをレンダリングするために、私たちはそれを `if` ブロックで囲みます。
7+
条件付きでマークアップをレンダリングする場合は、そのマークアップを `if` ブロックで囲みます。`count` が 10 より大きいときに表示されるテキストを追加してみましょう:
88

99
```svelte
1010
/// file: App.svelte
11-
+++{#if user.loggedIn}+++
12-
<button on:click={toggle}>
13-
Log out
14-
</button>
15-
+++{/if}+++
11+
<button on:click={increment}>
12+
Clicked {count}
13+
{count === 1 ? 'time' : 'times'}
14+
</button>
1615
17-
+++{#if !user.loggedIn}+++
18-
<button on:click={toggle}>
19-
Log in
20-
</button>
21-
+++{/if}+++
16+
+++{#if count > 10}
17+
<p>{count} is greater than 10</p>
18+
{/if}+++
2219
```
2320

2421
試してみてください。コンポーネントを更新し、ボタンをクリックしてみてください。

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
<script>
2-
let user = { loggedIn: false };
2+
let count = 0;
33
4-
function toggle() {
5-
user.loggedIn = !user.loggedIn;
4+
function increment() {
5+
count += 1;
66
}
77
</script>
88

9-
<button on:click={toggle}>
10-
Log out
11-
</button>
12-
13-
<button on:click={toggle}>
14-
Log in
9+
<button on:click={increment}>
10+
Clicked {count}
11+
{count === 1 ? 'time' : 'times'}
1512
</button>

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

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
<script>
2-
let user = { loggedIn: false };
2+
let count = 0;
33
4-
function toggle() {
5-
user.loggedIn = !user.loggedIn;
4+
function increment() {
5+
count += 1;
66
}
77
</script>
88

9-
{#if user.loggedIn}
10-
<button on:click={toggle}>
11-
Log out
12-
</button>
13-
{/if}
9+
<button on:click={increment}>
10+
Clicked {count}
11+
{count === 1 ? 'time' : 'times'}
12+
</button>
1413

15-
{#if !user.loggedIn}
16-
<button on:click={toggle}>
17-
Log in
18-
</button>
19-
{/if}
14+
{#if count > 10}
15+
<p>{count} is greater than 10</p>
16+
{/if}

‎content/tutorial/01-svelte/04-logic/02-else-blocks/README.md‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,15 @@
22
title: Else blocks
33
---
44

5-
2つの条件（`if user.loggedIn` と `if !user.loggedIn`）は相互に排他的なので、`else` ブロックを使用することでこのコンポーネントを少しシンプルにすることができます。
5+
JavaScript と同じように、`if` ブロックには `else` ブロックを置くことができます:
66

77
```svelte
88
/// file: App.svelte
9-
{#if user.loggedIn}
10-
<button on:click={toggle}>
11-
Log out
12-
</button>
13-
+++{:else}+++
14-
<button on:click={toggle}>
15-
Log in
16-
</button>
9+
{#if count > 10}
10+
<p>{count} is greater than 10</p>
11+
+++{:else}
12+
<p>{count} is between 0 and 10</p>+++
1713
{/if}
1814
```
1915

20-
> `#` の文字は常に *ブロックの開始* タグを示します。 `/` の文字は常に *ブロックの終了* タグを示します。 `:` の文字は `{:else}` のように *ブロックの継続* タグを示します。心配しないでください。あなたは既にSvelteがHTMLに追加する構文のほとんどを学んでいます。
16+
> `#` の文字は常に _ブロックの開始_ タグを示します。 `/` の文字は常に *ブロックの終了* タグを示します。 `:` の文字は `{:else}` のように _ブロックの継続_ タグを示します。心配しないでください。あなたは既にSvelteがHTMLに追加する構文のほとんどを学んでいます。

‎content/tutorial/01-svelte/04-logic/02-else-blocks/app-a/src/lib/App.svelte‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎content/tutorial/01-svelte/04-logic/02-else-blocks/app-b/src/lib/App.svelte‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
<script>
2-
let user = { loggedIn: false };
2+
let count = 0;
33
4-
function toggle() {
5-
user.loggedIn = !user.loggedIn;
4+
function increment() {
5+
count += 1;
66
}
77
</script>
88

9-
{#if user.loggedIn}
10-
<button on:click={toggle}>
11-
Log out
12-
</button>
9+
<button on:click={increment}>
10+
Clicked {count}
11+
{count === 1 ? 'time' : 'times'}
12+
</button>
13+
14+
{#if count > 10}
15+
<p>{count} is greater than 10</p>
1316
{:else}
14-
<button on:click={toggle}>
15-
Log in
16-
</button>
17-
{/if}
17+
<p>{count} is between 0 and 10</p>
18+
{/if}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ title: Else-if blocks
66

77
```svelte
88
/// file: App.svelte
9-
{#if x > 10}
10-
<p>{x} is greater than 10</p>
11-
{:+++else if+++ x < 5}
12-
<p>{x} is less than 5</p>
9+
{#if count > 10}
10+
<p>{count} is greater than 10</p>
11+
+++{:else if count < 5}
12+
<p>{count} is less than 5</p>+++
1313
{:else}
14-
<p>{x} is between 5 and 10</p>
14+
<p>{count} is between +++5+++ and 10</p>
1515
{/if}
1616
```

0 commit comments

Comments
 (0)