Merge pull request #6 from tomoam/translate-03-loading-data-into-japanese

02-sveltekit 配下の 03-loading-data と 04-forms を翻訳

Author: tomoam

content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md

@@ -2,7 +2,7 @@
 title: Select bindings
 ---
 
-We can also use `bind:value` with `<select>` elements. Update line 20:
+We can also use `bind:value` with `<select>` elements. Update line 32:
 
 ```svelte
 <select bind:value={selected} on:change="{() => answer = ''}">

content/tutorial/02-sveltekit/02-routing/01-pages/README.md

@@ -2,7 +2,7 @@
 title: Pages
 ---
 
-SvelteKit はファイルシステムベースのルーティングを採用しており、アプリの _ルート(routes)_ (言い換えると、ユーザーが特定の URL に移動したときにアプリがすべきこと) については、コードベースのディレクトリで定義します。
+SvelteKit はファイルシステムベースのルーティング(Routing)を採用しており、アプリの _ルート(routes)_ (言い換えると、ユーザーが特定の URL に移動したときにアプリがすべきこと) については、コードベースのディレクトリで定義します。
 
 ルート(routes)は `src/routes` の中に置きます。`+page.svelte` ファイルを含む全てのディレクトリが、アプリのルート(routes)となります。
 

content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md

@@ -3,15 +3,15 @@ title: Page data
 path: /blog
 ---
 
-At its core, SvelteKit's job boils down to three things:
+本質的には、SvelteKit が行う仕事は次の3つに集約されます。
 
-1. **Routing** — figure out which route matches an incoming request
-2. **Loading** — get the data needed by the route
-3. **Rendering** - generate some HTML (on the server) or update the DOM (in the browser)
+1. **ルーティング(Routing)** — 受け取ったリクエストにどのルートがマッチするかを判断する
+2. **ローディング(Loading)** — ルートが必要とするデータを取得する
+3. **レンダリング(Rendering)** - (サーバー上で) HTML を生成する、または (ブラウザで) DOMを更新する
 
-We've seen how routing and rendering work. Let's talk about the middle part — loading.
+これまで、ルーティングとレンダリングがどのように動作するか見てきました。ここではその中間のローディングについて説明します。
 
-Every page of your app can declare a `load` function in a `+page.server.js` file alongside the `+page.svelte` file. As the file name suggests, this module only ever runs on the server, including for client-side navigations. Let's add a `src/routes/blog/+page.server.js` file so that we can replace the hard-coded links in `src/routes/blog/+page.svelte` with actual blog post data:
+アプリの全てのページで、`+page.svelte` ファイルと同じ並びに `+page.server.js` ファイルを置き、そこで `load` 関数を宣言することができます。ファイル名が示す通り、このモジュールはサーバーでのみ実行されます (クライアントサイドナビゲーション中であっても)。`src/routes/blog/+page.server.js` ファイルを追加しましょう。そうすることで、`src/routes/blog/+page.svelte` にあるハードコードされたリンクを、実際のブログ記事データで置き換えることができるようになります。
 
 ```js
 /// file: src/routes/blog/+page.server.js
@@ -27,9 +27,9 @@ export function load() {
 }
 ```
 
-> For the sake of the tutorial, we're importing data from `src/routes/blog/data.js`. In a real app, you'd be more likely to load the data from a database or a CMS, but for now we'll do it like this.
+> このチュートリアルのために、`src/routes/blog/data.js` からデータをインポートしています。現実のアプリでは、データベースや CMS からデータをロードすることが多いかと思いますが、今このチュートリアルではこのようにしています。
 
-We can access this data in `src/routes/blog/+page.svelte` via the `data` prop:
+このデータは `src/routes/blog/+page.svelte` で `data` プロパティを介してアクセスすることができます。
 
 ```svelte
 +++<script>
@@ -48,7 +48,7 @@ We can access this data in `src/routes/blog/+page.svelte` via the `data` prop:
 </ul>
 ```
 
-Now, let's do the same for the post page:
+では、記事のページでも同じようにやってみましょう。
 
 ```js
 /// file: src/routes/blog/[slug]/+page.server.js
@@ -74,7 +74,7 @@ export function load({ params }) {
 <div>{@html data.post.content}</div>+++
 ```
 
-There's one last detail we need to take care of — the user might visit an invalid pathname like `/blog/nope`, in which case we'd like to respond with a 404 page:
+最後にもう1つやらなければならないことがあります — ユーザーが `/blog/nope` のような無効なパス名でアクセスするかもしれないため、その場合には 404 ページで応答するようにしたいです。
 
 ```js
 /// file: src/routes/blog/[slug]/+page.server.js
@@ -92,4 +92,4 @@ export function load({ params }) {
 }
 ```
 
-We'll learn more about error handling in later chapters.
+エラーハンドリングの詳細については、後の章で学習します。

content/tutorial/02-sveltekit/03-loading-data/02-layout-data/README.md

@@ -3,13 +3,13 @@ title: Layout data
 path: /blog
 ---
 
-Just as `+layout.svelte` files create UI for every child route, `+layout.server.js` files load data for every child route.
+`+layout.svelte` ファイルが全ての子ルート(route)共通の UI を作るのと同じように、`+layout.server.js` ファイルは全ての子ルート(route)共通で使えるデータをロードします。
 
-Suppose we'd like to add a 'more posts' sidebar to our blog post page. We _could_ return `summaries` from the `load` function in `src/blog/[slug]/+page.server.js`, like we do in `src/blog/+page.server.js`, but that would be repetitive.
+'more posts'(他の記事) サイドバーを、ブログ記事ページに追加したいと思います。`src/blog/+page.server.js` で行っているのと同じように、`src/blog/[slug]/+page.server.js` の `load` 関数から `summaries` を返すこともできますが、これでは同じことを繰り返すことになってしまいます。
 
-Instead, let's rename `src/blog/+page.server.js` to `src/blog/+layout.server.js`. Notice that the `/blog` route continues to work — `data.summaries` is still available to the page.
+代わりに、`src/blog/+page.server.js` を `src/blog/+layout.server.js` にリネームしましょう。`/blog` ルート(route)が動作し続けていることにご注目ください — `data.summaries` がまだページで利用できているのです。
 
-Now, create a layout for the post page:
+では、記事ページ向けのレイアウトを作りましょう。
 
 ```svelte
 /// file: src/routes/blog/[slug]/+layout.svelte
@@ -45,6 +45,6 @@ Now, create a layout for the post page:
 </style>
 ```
 
-The layout (and the page below it) inherits `data.summaries` from the parent `+layout.server.js`.
+レイアウト (とその下のページ) は、親の `+layout.server.js` から `data.summaries` を継承します。
 
-When we navigate from one post to another, we only need to load the data for the post itself — the layout data is still valid. See the documentation on [invalidation](https://kit.svelte.dev/docs/load#invalidation) to learn more.
+ある記事から別の記事に移動したとき、記事自体のデータだけをロードするだけでよくなります — レイアウトのデータは有効なままです。もっと学習したければ、[invalidation](https://kit.svelte.jp/docs/load#invalidation) のドキュメントをご覧ください。

content/tutorial/02-sveltekit/04-forms/01-the-form-element/README.md

@@ -2,9 +2,9 @@
 title: The <form> element
 ---
 
-In the previous chapter, we saw how to get data from the server to the browser. Sometimes you need to send data in the opposite direction, and that's where `<form>` — the web platform's way of submitting data — comes in.
+前の章では、データをサーバーからブラウザに取得してくる方法を見てきました。時には、その逆方向にデータを送信する必要があります。そこで、web プラットフォームにおけるデータ送信方法である `<form>` の登場です。
 
-Let's build a todo app. We've already got an in-memory database set up in `src/lib/server/database.js`, and our `load` function in `src/routes/+page.server.js` uses the [`cookies`](https://kit.svelte.dev/docs/load#cookies-and-headers) API so that we can have a per-user todo list, but we need to add a `<form>` to create new todos:
+todo アプリを作ってみましょう。すでに `src/lib/server/database.js` にセットアップ済みのインメモリデータベースがあり、`src/routes/+page.server.js` の `load` 関数で [`cookies`](https://kit.svelte.jp/docs/load#cookies-and-headers) API を使用しているためユーザーごとの todo リストを持つことができるようになっています。ここでは新しい todo を作成するための `<form>` を追加する必要があります。
 
 ```svelte
 /// file: src/routes/+page.svelte
@@ -20,7 +20,7 @@ Let's build a todo app. We've already got an in-memory database set up in `src/l
 {#each data.todos as todo}
 ```
 
-If we type something into the `<input>` and hit Enter, the browser makes a POST request (because of the `method="POST"` attribute) to the current page. But that results in an error, because we haven't created a server-side _action_ to handle the POST request. Let's do that now:
+追加した `<input>` になにか入力して Enter を押すと、ブラウザは現在のページに対する POST リクエストを作成します (`method="POST"` 属性があるため)。リクエストの結果がエラーになっているのは、その POST リクエストを処理するためのサーバーサイドの _action_ が作成されていないからです。では、それをやってみましょう。
 
 ```js
 /// file: src/routes/+page.server.js
@@ -38,6 +38,6 @@ export function load({ cookies }) {
 };+++
 ```
 
-When we hit Enter, the database is updated and the page reloads with the new data.
+Enter を押すと、データベースが更新され、新しいデータでページがリロードします。
 
-Notice that we haven't had to write any `fetch` code or anything like that — data updates automatically. And because we're using a `<form>` element, this app would work even if JavaScript was disabled or unavailable.
+`fetch` コードなどを書く必要がなかったこと、データが自動的に更新されることにご注目ください。そして、`<form>` 要素を使用しているため、このアプリはたとえ JavaScript が無効または利用できない場合でも動作します。

content/tutorial/02-sveltekit/04-forms/02-named-form-actions/README.md

@@ -2,9 +2,9 @@
 title: Named form actions
 ---
 
-A page that only has a single action is, in practice, quite rare. Most of the time you'll need to have multiple actions on a page. In this app, creating a todo isn't enough — we'd like to delete them once they're complete.
+単一の action しかないページというものは、実際にはかなりまれです。多くの場合、1つのページに複数の action を持たせる必要があるかと思います。このアプリでは、todo を作成するだけでは不十分で、一度完了した todo を削除したいと思います。
 
-Begin by replacing our `default` action with named `create` and `delete` actions:
+`default` action を、`create` と `delete` という名前を付けた action に置き換えるところから始めましょう。
 
 ```js
 /// file: src/routes/+page.server.js
@@ -21,9 +21,9 @@ export const actions = {
 };
 ```
 
-> Default actions cannot coexist with named actions.
+> default action と名前付きの action を共存させることはできません。
 
-The `<form>` element has an optional `action` attribute, which is similar to an `<a>` element's `href` attribute. Update the existing form so that it points to the new `create` action:
+`<form>` 要素にはオプションの `action` 属性があり、これは `<a>` 要素にとっての `href` 属性と同じようなものです。新たに追加した `create` action を呼び出すようにするため、form を書き換えましょう。
 
 ```svelte
 /// file: src/routes/+page.svelte
@@ -35,9 +35,9 @@ The `<form>` element has an optional `action` attribute, which is similar to an
 </form>
 ```
 
-> The `action` attribute can be any URL — if the action was defined on another page, you might have something like `/todos?/create`. Since the action is on _this_ page, we can omit the pathname altogether, hence the leading `?` character.
+> `action` 属性には任意の URL を指定することができます。別のページで定義されている action を呼び出したければ、`/todos?/create` のように指定することになるでしょう。ここでは action が _この_ ページにあるため、パス名を完全に省略することができるので、先頭が `?` 文字から始まっているのです。
 
-Next, we want to create a form for each todo, complete with a hidden `<input>` that uniquely identifies it:
+次に、各 todo ごとに、一意な識別子を持つ hidden の `<input>` を含めた form を作りたいと思います。
 
 ```svelte
 /// file: src/routes/+page.svelte

content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md

@@ -2,9 +2,9 @@
 title: Validation
 ---
 
-Users are a mischievous bunch, who will submit all kinds of nonsensical data if given the chance. To prevent them from causing chaos, it's important to validate form data.
+ユーザーはいたずら好きな集団であり、隙あらばあらゆる種類の無意味なデータを送信しようとします。彼らが混乱を引き起こすのを防ぐには、フォームデータを検証することが重要です。
 
-The first line of defense is the browser's [built-in form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation), which makes it easy to, for example, mark an `<input>` as required:
+第一防衛ラインは、ブラウザに[組み込まれたフォームバリデーション(built-in form validation)](https://developer.mozilla.org/ja/docs/Learn/Forms/Form_validation#%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E6%A4%9C%E8%A8%BC%E3%81%AE%E5%88%A9%E7%94%A8)で、これによって、例えば `<input>` を必須項目としてマークすることが簡単に行えます。
 
 ```svelte
 <form method="POST" action="?/create">
@@ -18,11 +18,11 @@ The first line of defense is the browser's [built-in form validation](https://de
 </form>
 ```
 
-Try hitting Enter while the `<input>` is empty.
+`<input>` を空にしたまま Enter を押してみてください。
 
-This kind of validation is helpful, but insufficient. Some validation rules (e.g. uniqueness) can't be expressed using `<input>` attributes, and in any case, if the user is an elite hacker they might simply delete the attributes using the browser's devtools. To guard against these sorts of shenanigans, you should always use server-side validation.
+この種類のバリデーションは役に立ちますが、十分ではありません。`<input>` の属性では表現できないバリデーションルール (例えば一意性) もありますし、いずれの場合においても、ユーザーがエリートハッカーなら、ブラウザのデベロッパーツールを使用して属性を削除してしまうかもしれません。このようないたずらから防御するには、常にサーバーサイドのバリデーションを使用する必要があります。
 
-In `src/lib/server/database.js`, validate that the description exists and is unique:
+`src/lib/server/database.js` で、description が存在すること、そして一意であることをバリデートします。
 
 ```js
 /// file: src/lib/server/database.js
@@ -49,9 +49,9 @@ export function createTodo(userid, description) {
 }
 ```
 
-Try submitting a duplicate todo. Yikes! SvelteKit takes us to an unfriendly-looking error page. On the server, we see a 'todos must be unique' error, but SvelteKit hides unexpected error messages from users because they often contain sensitive data.
+重複した todo を送信してみてください。おっと！ SvelteKit は不親切なエラーページを表示していますね。サーバーでは 'todos must be unique' エラーを見ることができますが、予期せぬエラーメッセージには機密情報が含まれる可能性があるため、SvelteKit ではそれをユーザーには隠しています。
 
-It would be much better to stay on the same page and provide an indication of what went wrong so that the user can fix it. To do this, we can use the `fail` function to return data from the action along with an appropriate HTTP status code:
+同じページを表示させたまま何が問題だったのかを示し、ユーザーがそれを修正できるようにするほうが良いでしょう。これを行うために、`fail` 関数を使用して、action からデータと適切な HTTP ステータスコードを返すことができます。
 
 ```js
 /// file: src/routes/+page.server.js
@@ -74,7 +74,7 @@ export const actions = {
 	}
 ```
 
-In `src/routes/+page.svelte`, we can access the returned value via the `form` prop, which is only ever populated after a form submission:
+`src/routes/+page.svelte` では、`form` プロパティを介してその戻り値にアクセスすることができます。このプロパティはフォーム送信の後にのみ、値が入っています。
 
 ```svelte
 /// file: src/routes/+page.svelte
@@ -101,4 +101,4 @@ In `src/routes/+page.svelte`, we can access the returned value via the `form` pr
 </form>
 ```
 
-> You can also return data from an action _without_ wrapping it in `fail` — for example to show a 'success!' message when data was saved — and it will be available via the `form` prop.
+> `fail` でラップしなくても、action から値を返すことができます。例えば、データが保存されたときに 'success!' というメッセージを返すこともできます。それも `form` プロパティを介してアクセスすることができます。