Skip to content

Commit 681b8b1

Browse files
committed
translate 02-sveltekit/04-forms/04-progressive-enhancement into Japanese
1 parent b3e64ac commit 681b8b1

File tree

1 file changed

+10
-10
lines changed
  • content/tutorial/02-sveltekit/04-forms/04-progressive-enhancement

1 file changed

+10
-10
lines changed

content/tutorial/02-sveltekit/04-forms/04-progressive-enhancement/README.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
title: Progressive enhancement
33
---
44

5-
Because we're using `<form>`, our app works even if the user doesn't have JavaScript ([which happens more often than you probably think](https://kryogenix.org/code/browser/everyonehasjs.html)). That's great, because it means our app is resilient.
5+
私たちは `<form>` を使用しているため、たとえユーザーが JavaScript を使えなくても ([これはあなたが思うより頻繁に発生しています](https://kryogenix.org/code/browser/everyonehasjs.html)) アプリが動作します。これは素晴らしいことです、なぜなら私たちのアプリがレジリエントであることを意味するからです。
66

7-
Most of the time, users _do_ have JavaScript. In those cases, we can _progressively enhance_ the experience, the same way SvelteKit progressively enhances `<a>` elements by using client-side routing.
7+
ほとんどの場合、ユーザーは JavaScript を有効にしています。そのような場合は、SvelteKit がクライアントサイドルーティングで `<a>` 要素を _漸進的に強化(progressively enhance)_ しているのと同じように、form の体験を漸進的に強化することができます。
88

9-
Import the `enhance` function from `$app/forms`...
9+
`$app/forms` から `enhance` 関数をインポートし…
1010

1111
```svelte
1212
/// file: src/routes/+page.svelte
@@ -18,7 +18,7 @@ Import the `enhance` function from `$app/forms`...
1818
</script>
1919
```
2020

21-
...and add the `use:enhance` directive to the `<form>` elements:
21+
…そして `use:enhance` ディレクティブを `<form>` 要素に追加します。
2222

2323
```svelte
2424
<form method="POST" action="?/create" +++use:enhance+++>
@@ -28,14 +28,14 @@ Import the `enhance` function from `$app/forms`...
2828
<form method="POST" action="?/delete" +++use:enhance+++>
2929
```
3030

31-
And that's all it takes! Now, when JavaScript is enabled, `use:enhance` will emulate the browser-native behaviour except for the full-page reloads. It will:
31+
これだけです! JavaScript が有効な場合、`use:enhance` は、ブラウザネイティブな動作(フルページリロードを除く)をエミュレートします。こうすると、
3232

33-
- update the `form` prop
34-
- invalidate all data on a successful response, causing `load` functions to re-run
35-
- navigate to the new page on a redirect response
36-
- render the nearest error page if an error occurs
33+
- `form` プロパティを更新します
34+
- 成功レスポンスの場合は全てのデータを無効化・最新化(invalidate)するようマークし、`load` 関数を再実行させます
35+
- リダイレクトレスポンスの場合は新しいページに移動します
36+
- エラーが発生した場合は最も近くにあるエラーページをレンダリングします
3737

38-
Now that we're updating the page rather than reloading it, we can get fancy with things like transitions:
38+
こうして、ページをリロードするのではなく更新するようになったので、トランジションなどで装飾することができます。
3939

4040
```svelte
4141
/// file: src/routes/+page.svelte

0 commit comments

Comments
 (0)