Merge pull request #8 from tomoam/translate-05-api-routes

sveltekit のチュートリアルをいくつか翻訳

Author: tomoam

content/tutorial/02-sveltekit/05-api-routes/01-get-handlers/README.md

@@ -2,9 +2,9 @@
 title: GET handlers
 ---
 
-SvelteKit allows you to create more than just pages. We can also create _API routes_ by adding a `+server.js` file that exports functions corresponding to HTTP methods: `GET`, `PUT`, `POST`, `PATCH` and `DELETE`.
+SvelteKit では、ページ以外にも様々なものを作ることができます。`+server.js` ファイルを追加し、そこでHTTP メソッド `GET`、`PUT`、`POST`、`PATCH`、`DELETE` に対応する関数をエクスポートすることで、 _API ルート(API routes)_ を作成することもできます。
 
-This app fetches data from a `/roll` API route when you click the button. Create that route by adding a `src/routes/roll/+server.js` file:
+このアプリは、ボタンwをクリックしたときに `/roll` API ルートからデータを取得します。`src/routes/roll/+server.js` ファイルを追加し、そのルートを作成しましょう。
 
 ```js
 /// file: src/routes/roll/+server.js
@@ -19,9 +19,9 @@ export function GET() {
 }
 ```
 
-Clicking the button now works.
+これでボタンクリックしたときの動作が動くようになりました。
 
-Request handlers must return a [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response) object. Since it's common to return JSON from an API route, SvelteKit provides a convenience function for generating these responses:
+リクエストハンドラーは [Response](https://developer.mozilla.org/ja/docs/Web/API/Response/Response) オブジェクトを返さなければなりません。API ルートから JSON を返すことはよくあることなので、SvelteKit はこのようなレスポンスを生成する便利な関数を提供しています。
 
 ```js
 /// file: src/routes/roll/+server.js

content/tutorial/02-sveltekit/06-errors-and-redirects/01-error-basics/README.md

@@ -2,9 +2,9 @@
 title: Basics
 ---
 
-There are two types of errors in SvelteKit — _expected_ errors and _unexpected_ errors.
+SvelteKit には2種類のエラーがあります — _想定される(expected)_ エラーと _予期せぬ(unexpected)_ エラーです。
 
-An expected error is one that was created with the [`error`](https://kit.svelte.dev/docs/modules#sveltejs-kit-error) helper from `@sveltejs/kit`, as in `src/routes/expected/+page.server.js`:
+想定されるエラーとは、`@sveltejs/kit` からインポートできる [`error`](https://kit.svelte.jp/docs/modules#sveltejs-kit-error) ヘルパーを使用して作成されるエラーのことです。`src/routes/expected/+page.server.js` をご覧ください。
 
 ```js
 /// file: src/routes/expected/+page.server.js
@@ -15,7 +15,7 @@ export function load() {
 }
 ```
 
-Any other error — such as the one in `src/routes/unexpected/+page.server.js` — is treated as unexpected:
+それ以外のエラー — 例えば `src/routes/unexpected/+page.server.js` にあるようなエラー — は、予期せぬエラーとして扱われます。
 
 ```js
 /// file: src/routes/unexpected/+page.server.js
@@ -24,8 +24,8 @@ export function load() {
 }
 ```
 
-When you throw an expected error, you're telling SvelteKit 'don't worry, I know what I'm doing here'. An unexpected error, by contrast, is assumed to be a bug in your app. When an unexpected error is thrown, its message and stack trace will be logged to the console.
+想定されるエラーをスローすることは、あなたが SvelteKit に '大丈夫、ここで何をやってるかちゃんとわかってるから' と伝えているようなものです。対照的に、予期せぬエラーの場合は、アプリのバグであると考えられます。予期せぬエラーがスローされた場合、そのメッセージとスタックトレースがコンソールにログ出力されるでしょう。
 
-> In a later chapter we'll learn about how to add custom error handling using the `handleError` hook.
+> 後の章で、`handleError` hook を使用したカスタムエラーハンドリングの追加方法を学習します。
 
-If you click the links in this app, you'll notice an important difference: the expected error message is shown to the user, whereas the unexpected error message is redacted and replaced with a generic 'Internal Error' message and a 500 status code. That's because error messages can contain sensitive data.
+このアプリのリンクをクリックすると、重要な違いに気付くでしょう。想定されるエラーのメッセージはユーザーに表示されますが、予期せぬエラーのメッセージは編集され、一般的な 'Internal Error' メッセージと 500 ステータスコードに置き換えられます。これは、エラーメッセージには機密情報が含まれている可能性があるからです。

content/tutorial/02-sveltekit/06-errors-and-redirects/02-error-pages/README.md

@@ -2,9 +2,9 @@
 title: Error pages
 ---
 
-When something goes wrong inside a `load` function, SvelteKit renders an error page.
+`load` 関数の内側でなにか問題が発生したとき、SvelteKit はエラーページをレンダリングします。
 
-The default error page is somewhat bland. We can customize it by creating a `src/routes/+error.svelte` component:
+デフォルトのエラーページは当たり障りないものです。`src/routes/+error.svelte` コンポーネントを作成することで、カスタマイズすることができます。
 
 ```svelte
 /// file: src/routes/+error.svelte
@@ -24,13 +24,13 @@ The default error page is somewhat bland. We can customize it by creating a `src
 </span>
 ```
 
-> We're using the `page` store, which we'll learn more about in a later chapter.
+> `page` store を使用していますが、これは後の章で詳細に学習します。
 
-Notice that the `+error.svelte` component is rendered inside the root `+layout.svelte`. We can create more granular `+error.svelte` boundaries:
+`+error.svelte` コンポーネントは最上位(root)の `+layout.svelte` の内側でレンダリングされます。よりきめ細やかな `+error.svelte` 境界を作ることもできます。
 
 ```svelte
 /// file: src/routes/expected/+error.svelte
 <h1>this error was expected</h1>
 ```
 
-This component will be rendered for `/expected`, while the root `src/routes/+error.svelte` page will be rendered for any other errors that occur.
+このコンポーネントは `/expected` でエラーが発生した場合にレンダリングされ、その他の場所でエラーが発生した場合は最上位(root)の `src/routes/+error.svelte` ページがレンダリングされます。

content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/README.md

@@ -2,9 +2,9 @@
 title: Fallback errors
 ---
 
-If things go _really_ wrong — an error occurs while loading the root layout data, or while rendering the error page — SvelteKit will fall back to a static error page.
+もし _深刻な_ 問題が発生した場合 — 例えば最上位(root)のレイアウトでデータをロードしているときや、エラーページのレンダリング中にエラーが発生した場合 — SvelteKit は静的なエラーページにフォールバックします。
 
-Add a new `src/routes/+layout.server.js` file to see this in action:
+`src/routes/+layout.server.js` ファイルを追加して、これを実際に確認してみましょう。
 
 ```js
 /// file: src/routes/+layout.server.js
@@ -13,7 +13,7 @@ export function load() {
 }
 ```
 
-You can customise the fallback error page. Create a `src/error.html` file:
+フォールバックエラーページをカスタマイズすることができます。`src/error.html` ファイルを作成しましょう。
 
 ```html
 /// file: src/error.html
@@ -35,7 +35,7 @@ You can customise the fallback error page. Create a `src/error.html` file:
 </html>
 ```
 
-This file can include the following:
+このファイルは以下の項目を含めることができます。
 
-- `%sveltekit.status%` — the HTTP status code
-- `%sveltekit.error.message%` — the error message
+- `%sveltekit.status%` — HTTP ステータスコード
+- `%sveltekit.error.message%` — エラーメッセージ

content/tutorial/02-sveltekit/06-errors-and-redirects/04-redirects/README.md

@@ -2,9 +2,9 @@
 title: Redirects
 ---
 
-We can also use the `throw` mechanism to redirect from one page to another.
+`throw` のメカニズムを、あるページから別のページにリダイレクトするのにも使えます。
 
-Create a new `load` function in `src/routes/a/+page.server.js`:
+`load` 関数を `src/routes/a/+page.server.js` に作成してください。
 
 ```js
 /// file: src/routes/a/+page.server.js
@@ -15,12 +15,12 @@ export function load() {
 }
 ```
 
-Navigating to `/a` will now take us straight to `/b`.
+`/a` に移動しようとすると、`/b` に直行するようになります。
 
-You can `throw redirect(...)` inside `load` functions, form actions, API routes and the `handle` hook, which we'll discuss in a later chapter.
+`throw redirect(...)` は、`load` 関数、form actions、API ルート、そして後の章で説明する `handle` hook の内側で使うことができます。
 
-The most common status codes you'll use:
+よく使用されるステータスコードはこちらです。
 
-- `303` — for form actions, following a successful submission
-- `307` — for temporary redirects
-- `308` — for permanent redirects
+- `303` — form actions で、送信に成功したあと続いて使用されます
+- `307` — 一時的なリダイレクトに使用されます
+- `308` — 恒久的なリダイレクトに使用されます

content/tutorial/02-sveltekit/07-page-options/01-page-options/README.md

@@ -2,15 +2,15 @@
 title: Basics
 ---
 
-In the chapter on [loading data](/tutorial/page-data), we saw how you can export `load` functions from `+page.js`, `+page.server.js`, `+layout.js` and `+layout.server.js` files. We can also export various **page options** from these modules:
+[loading data](/tutorial/page-data) の章では、`+page.js`、`+page.server.js`、`+layout.js`、`+layout.server.js` ファイルから `load` 関数をエクスポートする方法について見てきました。これらのモジュールからは他にも様々な **ページオプション(page options)** をエクスポートできます。
 
-- `ssr` — whether or not pages should be server-rendered
-- `csr` — whether to load the SvelteKit client
-- `prerender` — whether to prerender pages at build time, instead of per-request
-- `trailingSlash` — whether to strip, add, or ignore trailing slashes in URLs
+- `ssr` — ページをサーバーレンダリングするかどうか
+- `csr` — SvelteKit client をロードするかどうか
+- `prerender` — リクエストの度にレンダリングする代わりに、ビルド時にページをプリレンダリングするかどうか
+- `trailingSlash` — URL の末尾のスラッシュ(trailing slashes)を、削除するか、追加するか、無視するか
 
-In the following exercises, we'll learn about each of these in turn.
+この後の練習問題では、これらをそれぞれ順番に学んでいきます。
 
-Page options can apply to individual pages (if exported from `+page.js` or `+page.server.js`), or groups of pages (if exported from `+layout.js` or `+layout.server.js`). To define an option for the whole app, export it from the root layout. Child layouts and pages override values set in parent layouts, so — for example — you can enable prerendering for your entire app then disable it for pages that need to be dynamically rendered.
+ページオプションは (`+page.js` や `+page.server.js` からエクスポートすることで) ページ個別に適用することができますし、(`+layout.js` や `+layout.server.js` からエクスポートすることで) ページのグループに適用することもできます。アプリ全体のオプションを定義するには、最上位のレイアウト(root layout) からエクスポートします。子レイアウトやページは親レイアウトで設定された値をオーバーライドするので、例えば、アプリ全体ではプリレンダリングを有効にして、動的なレンダリングが必要なページではそれを無効にすることができます。
 
-You can mix and match these options in different areas of your app — you could prerender your marketing pages, dynamically server-render your data-driven pages, and treat your admin pages as a client-rendered SPA. This makes SvelteKit very versatile.
+アプリの様々な領域でこれらのオプションをうまく組み合わせることができます。マーケティング用のページはプリレンダリングし、データドリブンなページは動的にサーバーでレンダリングし、管理者用ページはクライアントレンダリングされる SPA として扱うことができます。このように、SvelteKit はとても万能で多くの用途にお使いいただけます。

content/tutorial/02-sveltekit/07-page-options/02-ssr/README.md

@@ -2,13 +2,13 @@
 title: ssr
 ---
 
-Server-side rendering (SSR) is the process of generating HTML on the server, and is what SvelteKit does by default. It's important for performance and [resilience](https://kryogenix.org/code/browser/everyonehasjs.html), and is very beneficial for search engine optimization (SEO) — while some search engines can index content that is rendered in the browser with JavaScript, it happens less frequently and reliably.
+サーバーサイドレンダリング (Server-side rendering, SSR) とはサーバーで HTML を生成するプロセスのことで、SvelteKit はデフォルトでこれを行っています。パフォーマンスと[レジリエンス](https://kryogenix.org/code/browser/everyonehasjs.html)のために重要であり、検索エンジン最適化 (SEO) にも非常に有益です。なぜなら、一部の検索エンジンではブラウザ上で JavaScript によってレンダリングされたコンテンツをインデックスできますが、その頻度は少なく、信頼性は低いためです。
 
-That said, some components _can't_ be rendered on the server, perhaps because they expect to be able to access browser globals like `window` immediately. If you can, you should change those components so that they _can_ render on the server, but if you can't then you can disable SSR:
+一方で、サーバーでレンダリング _できない_ コンポーネントもあります。例えば、`window` のようなブラウザのグローバルにアクセスできることを想定している場合などです。もし可能なら、コンポーネントを変更してサーバーでもレンダリングできるようにしたほうが良いですが、それができない場合は、SSR を無効にすることができます。
 
 ```js
 /// file: src/routes/+page.server.js
 export const ssr = false;
 ```
 
-> Setting `ssr` to `false` inside your root `+layout.server.js` effectively turns your entire app into an SPA.
+> 最上位(root)の `+layout.server.js` で `ssr` を `false` に設定すると、アプリ全体を SPA に変えることができます。

content/tutorial/02-sveltekit/07-page-options/03-csr/README.md

@@ -2,13 +2,13 @@
 title: csr
 ---
 
-Client-side rendering is what makes the page interactive — such as incrementing the counter when you click the button in this app — and enables SvelteKit to update the page upon navigation without a full-page reload.
+クライアントサイドレンダリングとは、ページをインタラクティブ (例えばこのアプリでは、ボタンクリックでカウンターがインクリメントするようになる) にし、SvelteKit がナビゲーション時にフルページリロードなしでページを更新できるようにすることです。
 
-As with `ssr`, you can disable client-side rendering altogether:
+`ssr` と同じように、クライアントサイドレンダリングも完全に無効にすることができます。
 
 ```js
 /// file: src/routes/+page.server.js
 export const csr = false;
 ```
 
-This means that no JavaScript is served to the client, but it also means that your components are no longer interactive. It can be a useful way to check whether or not your application is usable for people who — for whatever reason — cannot use JavaScript.
+これは、JavaScript がクライアントに全く提供されなくなることを意味しますが、それだけでなく、コンポーネントがインタラクティブでなくなることも意味します。これは、なんらかの理由で JavaScript が使用できない方々にとって、あなたのアプリケーションが使いやすいかどうかを確認するのに便利です。

content/tutorial/02-sveltekit/07-page-options/04-prerender/README.md

@@ -2,20 +2,20 @@
 title: prerender
 ---
 
-Prerendering means generating HTML for a page once, at build time, rather than dynamically for each request.
+プリレンダリングとは、リクエストのたびに動的にレンダリングするのではなく、ビルド時に1度だけ HTML を生成することを意味します。
 
-The advantage is that serving static data is extremely cheap and performant, allowing you to easily serve large numbers of users without worrying about cache-control headers (which are easy to get wrong).
+利点は、静的データの配信が圧倒的にチープでハイパフォーマンスなことにあります。cache-control ヘッダ (これは間違いやすいことです) のことを気にすることなく、大人数のユーザーに配信することができるようになります。
 
-The tradeoff is that the build process takes longer, and prerendered content can only be updated by building and deploying a new version of the application.
+トレードオフは、ビルドプロセスの時間が長くなることと、プリレンダリングされたコンテンツを更新するのにアプリケーションの新バージョンをビルドしてデプロイする他ないことです。
 
-To prerender a page, set `prerender` to `true`:
+ページをプリレンダリングするには、`prerender` を `true` に設定します。
 
 ```js
 export const prerender = true;
 ```
 
-Here in the tutorial, this won't have any observable effect, since the application is running in `dev` mode.
+このチュートリアルでは、アプリケーションが `dev` モードで実行されているため、目で見てわかるような効果はありません。
 
-Not all pages can be prerendered. The basic rule is this: for content to be prerenderable, any two users hitting it directly must get the same content from the server, and the page must not contain form actions. Pages with dynamic route parameters can be prerendered as long as they are specified in the [`prerender.entries`](https://kit.svelte.dev/docs/configuration#prerender) configuration or can be reached by following links from pages that _are_ in `prerender.entries`.
+全てのページをプリレンダリングできるわけではありません。基本的なルールはこうです: コンテンツがプリレンダリング可能であると言うためには、それを直接表示する2人のユーザーが、サーバーから同じコンテンツを取得できなけれならず、ページには form actions が含まれていないこと。動的なルートパラメータ(route parameters)を持つページは、[`prerender.entries`](https://kit.svelte.jp/docs/configuration#prerender) 設定で指定されているか、`prerender.entries` で指定されているページからリンクを辿って到達できるのであれば、プリレンダリングすることができます。
 
-> Setting `prerender` to `true` inside your root `+layout.server.js` effectively turns SvelteKit into a static site generator (SSG).
+> 最上位(root)の `+layout.server.js` で `prerender` を `true` に設定した場合、本質的には SvelteKit は静的サイトジェネレーター (static site generator, SSG) になります。