From 817b6fa18416a200d6e25502779ae68f92ed35e3 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Fri, 16 Dec 2022 22:37:49 +0900
Subject: [PATCH 01/60] translate site into Japanese

---
 src/routes/+layout.svelte                 |  4 ++--
 src/routes/tutorial/[slug]/+page.svelte   | 14 +++++++-------
 src/routes/tutorial/[slug]/Sidebar.svelte | 12 ++++++------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 22f5c25e5..79161229a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -20,7 +20,7 @@
 
 <Nav {page} logo="/svelte-logo.svg">
 	<svelte:fragment slot="nav-center">
-		<strong class="large">Work in progress. Here be dragons!</strong>
+		<strong class="large">開発中です。バグがある可能性があります！</strong>
 		<!-- <NavItem href="http://github.com/tutorial">Tutorial</NavItem>
 		<NavItem href="http://github.com/docs">Docs</NavItem>
 		<NavItem href="http://github.com/examples">Examples</NavItem>
@@ -30,7 +30,7 @@
 	</svelte:fragment>
 
 	<svelte:fragment slot="nav-right">
-		<NavItem external="https://kit.svelte.dev/">SvelteKit</NavItem>
+		<NavItem external="https://kit.svelte.jp/">SvelteKit</NavItem>
 
 		<NavItem external="https://svelte.dev/chat" title="Discord Chat">
 			<span class="small">Discord</span>
diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index e34a1f7ac..4befb1686 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -312,14 +312,14 @@
 	<meta name="twitter:card" content="summary" />
 	<meta name="twitter:site" content="@sveltejs" />
 	<meta name="twitter:creator" content="@sveltejs" />
-	<meta name="twitter:image" content="https://svelte.dev/images/twitter-thumbnail.jpg" />
-	<meta property="twitter:domain" content="learn.svelte.dev" />
-	<meta property="twitter:url" content="https://learn.svelte.dev/" />
+	<meta name="twitter:image" content="https://svelte.jp/images/twitter-thumbnail.jpg" />
+	<meta property="twitter:domain" content="learn.svelte.jp" />
+	<meta property="twitter:url" content="https://learn.svelte.jp/" />
 
 	<meta property="og:title" content="{data.exercise.title} • Svelte Tutorial" />
-	<meta property="og:url" content="https://learn.svelte.dev/" />
+	<meta property="og:url" content="https://learn.svelte.jp/" />
 	<meta property="og:type" content="website" />
-	<meta property="og:image" content="https://svelte.dev/images/twitter-thumbnail.jpg" />
+	<meta property="og:image" content="https://svelte.jp/images/twitter-thumbnail.jpg" />
 </svelte:head>
 
 <ContextMenu />
@@ -379,9 +379,9 @@
 								}}
 							>
 								{#if completed && Object.keys(data.exercise.b).length > 0}
-									reset
+									リセット	
 								{:else}
-									solve <Icon name="arrow-right" />
+									正解を見る <Icon name="arrow-right" />
 								{/if}
 							</button>
 						</section>
diff --git a/src/routes/tutorial/[slug]/Sidebar.svelte b/src/routes/tutorial/[slug]/Sidebar.svelte
index c68ee05a4..2a6bd1e19 100644
--- a/src/routes/tutorial/[slug]/Sidebar.svelte
+++ b/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -12,7 +12,7 @@
 
 	const dispatch = createEventDispatcher();
 
-	const namespace = 'learn.svelte.dev';
+	const namespace = 'learn.svelte.jp';
 	const copy_enabled = `${namespace}:copy_enabled`;
 
 	/** @type {HTMLElement} */
@@ -77,7 +77,7 @@
 		target="_blank"
 		rel="noreferrer"
 		class="edit"
-		href="https://github.com/sveltejs/learn.svelte.dev/tree/main/%7Bexercise.dir%7D"
+		href="https://github.com/svelte-jp/learn.svelte.dev/tree/main/%7Bexercise.dir%7D"
 	>
 		Edit this page
 	</a>
@@ -86,11 +86,11 @@
 {#if show_modal}
 	<Modal on:close={() => (show_modal = false)}>
 		<div class="modal-contents">
-			<h2>Copy and paste is currently disabled!</h2>
+			<h2>コピー&ペーストは現在無効です！</h2>
 
 			<p>
-				We recommend typing the code into the editor to complete the exercise, as this results in
-				better retention and understanding.
+				練習問題を完了する上で、コードをエディタに手入力することをおすすめします。
+				これによって理解が深まり記憶に定着します。
 			</p>
 			<label>
 				<input
@@ -99,7 +99,7 @@
 						sessionStorage[copy_enabled] = e.currentTarget.checked ? 'true' : '';
 					}}
 				/>
-				enable copy-and-paste for the duration of this session
+				このセッションの間、コピー&ペーストを有効にする
 			</label>
 
 			<button on:click={() => (show_modal = false)}>OK</button>

From 70b1926033250b62a541d871b6ccb79cd3760dea Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Fri, 16 Dec 2022 22:39:13 +0900
Subject: [PATCH 02/60] translate 01-welcome-to-svelte into Japanese

---
 .../01-welcome-to-svelte/README.md            | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md b/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md
index b2447d72f..0b3353410 100644
--- a/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md
+++ b/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md
@@ -1,30 +1,30 @@
 ---
-title: Welcome to Svelte
+title: Svelte にようこそ
 ---
 
-Welcome to the Svelte tutorial! This will teach you everything you need to know to easily build fast, small web applications.
+Svelte チュートリアルにようこそ！ ここでは、高速で小さい Web アプリケーションを簡単に構築するために必要なこと全てを学ぶことができます。(訳注: 「小さい」はバンドルサイズを指しており、作成する Web アプリケーションの規模のことではありません。)
 
-You can also consult the [API docs](https://svelte.dev/docs) and the [examples](https://svelte.dev/examples), or — if you're impatient to start hacking on your machine locally — create a project with `npm init svelte`.
+[API ドキュメント](https://svelte.jp/docs) や [examples](https://svelte.dev/examples) を参照することもできます。また、すぐにローカルで動かしたい場合は、`npm init svelte` を実行してプロジェクトを作成してください。
 
-## What is Svelte?
+## Svelte とは？
 
-Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app _declaratively_ out of components that combine markup, styles and behaviours.
+Svelte は、web アプリケーションを構築するためのツールです。他のユーザーインターフェースフレームワークと同様、マークアップ(markup)、スタイル(styles)、振る舞い(behaviours) を組み合わせたコンポーネントでアプリを _宣言的(declaratively)_ に構築することができます。
 
-These components are _compiled_ into small, efficient JavaScript modules that eliminate overhead traditionally associated with UI frameworks.
+これらのコンポーネントは小さくて効率的な JavaScript モジュールに _コンパイル_ されるため、従来の UI フレームワークには付き物だったオーバーヘッドがありません。
 
-You can build your entire app with Svelte (for example, using an application framework like [SvelteKit](https://kit.svelte.dev)), or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere.
+アプリ全体を Svelte で作ることもできますし (例えば [SvelteKit](https://kit.svelte.jp) のようなアプリケーションフレームワークを使用)、既存のコードベースに部分的/段階的に追加することもできます。また、どんな場所でも機能するスタンドアロンパッケージとしてコンポーネントを配布することもできます。
 
-## How to use this tutorial
+## このチュートリアルの使い方
 
-> You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.
+> Svelte を理解するには、HTML、CSS、JavaScript の基本的な知識が必要です。
 
-This tutorial is split into four main parts:
+このチュートリアルは大きく4つのパートに分かれています:
 
-- [Welcome to Svelte](/tutorial/welcome-to-svelte) (you are here)
+- [Svelte にようこそ](/tutorial/welcome-to-svelte) (現在はこちらです)
 - [Introduction to SvelteKit](/tutorial/introducing-sveltekit)
 - [Advanced Svelte](/tutorial/tweens)
 - [Advanced SvelteKit](/tutorial/optional-params)
 
-Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
+各セクションには、機能を解説するために作られた練習問題があります。後のセクションの練習問題は、それより前のセクションの練習問題で得た知識を土台として作られているので、最初から最後まで通しで学習することをおすすめします。必要に応じて、上部のメニューから移動することができます。
 
-If you get stuck, you can click the `solve` button to the left of the editor. (It's disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.
+行き詰まったら、エディタの左にある `正解を見る` ボタンをクリックすることもできます。(ここのように練習問題がないセクションでは無効化されています。) ただし、これに頼りすぎないようにしてください。提示されたコードブロックをどこに配置するか自分で考え、エディタに手入力することで、より早く学習することができます。

From 48bef32755de974210cf910f6b6c0d2cb6c648b3 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Fri, 16 Dec 2022 22:39:52 +0900
Subject: [PATCH 03/60] translate
 02-sveltekit/01-concepts/01-introducing-sveltekit into Japanese

---
 .../01-introducing-sveltekit/README.md        | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/content/tutorial/02-sveltekit/01-concepts/01-introducing-sveltekit/README.md b/content/tutorial/02-sveltekit/01-concepts/01-introducing-sveltekit/README.md
index 90592b276..8696620db 100644
--- a/content/tutorial/02-sveltekit/01-concepts/01-introducing-sveltekit/README.md
+++ b/content/tutorial/02-sveltekit/01-concepts/01-introducing-sveltekit/README.md
@@ -1,21 +1,21 @@
 ---
-title: What is SvelteKit?
+title: SvelteKit とは？
 ---
 
-SvelteKit is a framework for building extremely high-performance web apps. Whereas Svelte is a _component framework_, SvelteKit is an _app framework_ (or 'metaframework', depending on who you ask) that solves the tricky problems of building something production-ready:
+SvelteKit は非常にハイパフォーマンスな web アプリを開発するためのフレームワークです。Svelte が _コンポーネントフレームワーク_ であるのに対し、SvelteKit は _アプリケーションフレームワーク_ であり (または、'metaframework' と呼ぶ人もいます)、プロダクションレディ(production-ready)なものを開発する際のややこしい問題を解決します:
 
-- Routing
-- Server-side rendering
-- Data fetching
+- ルーティング
+- サーバーサイドレンダリング
+- データ取得
 - Service workers
-- TypeScript integration
-- Prerendering
-- Single-page apps
-- Library packaging
-- Optimised production builds
-- Deploying to different hosting providers
-- ...and so on
+- TypeScript インテグレーション
+- プリレンダリング
+- シングルページアプリ
+- ライブラリのパッケージング
+- プロダクション向けビルドの最適化
+- 様々なホスティングプロバイダーへのデプロイ
+- ...などなど
 
-SvelteKit apps are server-rendered by default (like traditional 'multi-page apps' or MPAs) for excellent first load performance and SEO characteristics, but can then transition to client-side navigation (like modern 'single-page apps' or SPAs) to avoid jankily reloading everything (including things like third-party analytics code) when the user navigates. They can run anywhere JavaScript runs, though — as we'll see — your users may not need to run any JavaScript at all.
+SvelteKit アプリはデフォルトでは (従来の 'マルチページアプリ'、MPA のように) サーバーでレンダリングを行うため、優れた初期ロードパフォーマンスと SEO 特性を備えており、初回のロードのあとは (モダンな 'シングルページアプリ'、SPA のような) クライアントサイドナビゲーションに移行するため、ユーザーが移動する際の不愉快なフルリロードを回避することができます (サードパーティーの analytics コードを含む)。JavaScript が動作する場所ならどこでも実行できます。ただ、後ほど説明しますが、あなたのユーザーは JavaScript を実行する必要が無いかもしれません。
 
-If that sounds complicated, worry not: SvelteKit is the framework that grows with you! Start simple and add new features as they come. This tutorial will go over the core concepts, while the [Advanced SvelteKit](/tutorial/handle) tutorial teaches you how to tackle more complex use cases.
+複雑そうに聞こえるかもしれませんが、ご心配なく。SvelteKit はあなたとともに成長するフレームワークです！ シンプルに始めてみて、必要に応じて新しい機能を使っていきましょう。このチュートリアルではコアコンセプトを解説し、[Advanced SvelteKit](/tutorial/handle) チュートリアルではより複雑なユースケースに取り組む方法を教えます。

From 0d08ae438153a8011c08cff485b124f028cbb94e Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Sun, 18 Dec 2022 00:49:43 +0900
Subject: [PATCH 04/60] translate 01-svelte/01-introduction/04-styling into
 Japanese

---
 .../tutorial/01-svelte/01-introduction/04-styling/README.md   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/tutorial/01-svelte/01-introduction/04-styling/README.md b/content/tutorial/01-svelte/01-introduction/04-styling/README.md
index dc67bd67b..ce87e1afe 100644
--- a/content/tutorial/01-svelte/01-introduction/04-styling/README.md
+++ b/content/tutorial/01-svelte/01-introduction/04-styling/README.md
@@ -2,7 +2,7 @@
 title: Styling
 ---
 
-Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
+HTMLと同じように、コンポーネントには `<style>` タグを置くことができます。`<p>` 要素にいくつかスタイルを追加してみましょう。
 
 ```svelte
 <p>This is a paragraph.</p>
@@ -16,4 +16,4 @@ Just like in HTML, you can add a `<style>` tag to your component. Let's add some
 </style>
 ```
 
-Importantly, these rules are _scoped to the component_. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.
+重要なのは、これらのスタイルが _このコンポーネントにのみ適用されるということです_ 。次のステップで説明しますが、別の箇所の `<p>` 要素のスタイルに影響を与えてしまうようなことはありません。

From 5d1395c785e3ed5eaa41b41b8fb468f1a5eda124 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Sun, 18 Dec 2022 01:13:22 +0900
Subject: [PATCH 05/60] translate 01-svelte/01-introduction/04-styling into
 Japanese (#3)

---
 .../tutorial/01-svelte/01-introduction/04-styling/README.md   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/tutorial/01-svelte/01-introduction/04-styling/README.md b/content/tutorial/01-svelte/01-introduction/04-styling/README.md
index dc67bd67b..ce87e1afe 100644
--- a/content/tutorial/01-svelte/01-introduction/04-styling/README.md
+++ b/content/tutorial/01-svelte/01-introduction/04-styling/README.md
@@ -2,7 +2,7 @@
 title: Styling
 ---
 
-Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
+HTMLと同じように、コンポーネントには `<style>` タグを置くことができます。`<p>` 要素にいくつかスタイルを追加してみましょう。
 
 ```svelte
 <p>This is a paragraph.</p>
@@ -16,4 +16,4 @@ Just like in HTML, you can add a `<style>` tag to your component. Let's add some
 </style>
 ```
 
-Importantly, these rules are _scoped to the component_. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.
+重要なのは、これらのスタイルが _このコンポーネントにのみ適用されるということです_ 。次のステップで説明しますが、別の箇所の `<p>` 要素のスタイルに影響を与えてしまうようなことはありません。

From 9bdf1a81f316f495db5b834d75dabe397b4ccf4c Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Sun, 18 Dec 2022 23:49:32 +0900
Subject: [PATCH 06/60] translate 02-sveltekit/01-concepts/02-project-structure
 into Japanese

---
 .../01-concepts/02-project-structure/README.md       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/tutorial/02-sveltekit/01-concepts/02-project-structure/README.md b/content/tutorial/02-sveltekit/01-concepts/02-project-structure/README.md
index 46a7c971a..d169047d8 100644
--- a/content/tutorial/02-sveltekit/01-concepts/02-project-structure/README.md
+++ b/content/tutorial/02-sveltekit/01-concepts/02-project-structure/README.md
@@ -2,14 +2,14 @@
 title: Project structure
 ---
 
-On the right, in the file tree viewer, you'll see a handful of files that SvelteKit expects to find in a project.
+右にあるファイルツリービューアには、SvelteKit のプロジェクトに含まれているであろうファイルのうち一部が表示されています。
 
-`package.json` will be familiar if you've worked with Node.js before. It lists the project's dependencies — including `svelte` and `@sveltejs/kit` — and a variety of `scripts` for interacting with the SvelteKit CLI. (We're currently running `npm run dev` in the bottom window.)
+Node.js を使用したことがあるなら、`package.json` はおなじみでしょう。プロジェクトの依存関係 (`svelte` と `@sveltejs/kit` を含む) と、SvelteKit CLI を操作するための様々な `scripts` がリストアップされています。(現在バックグラウンドで `npm run dev` が実行されています)
 
-> Note that it also specifies `"type": "module"`, which means that `.js` files are treated as native JavaScript modules by default, rather than the legacy CommonJS format.
+> `"type": "module"` が指定されていることにもご注意ください。つまり、`.js` ファイルはデフォルトで、レガシーな CommonJS フォーマットではなくネイティブの JavaScript モジュールとして扱われます。
 
-`svelte.config.js` contains your project configuration. We don't need to worry about this file for now, but if you're curious, [visit the documentation](https://kit.svelte.dev/docs/configuration).
+`svelte.config.js` にはプロジェクトの設定が記述されています。今はこのファイルについて気にする必要はありませんが、もし興味があれば、[ドキュメントを参照してください](https://kit.svelte.jp/docs/configuration)。
 
-`src` is where your app's source code goes. `src/app.html` is your page template (SvelteKit replaces the `%sveltekit.head%` and `%sveltekit.body%` as appropriate), and `src/routes` defines the [routes](/tutorial/pages) of your app.
+`src` はアプリのソースコードを置く場所です。`src/app.html` はページのテンプレート (SvelteKit が `%sveltekit.head%` と `%sveltekit.body%` を適切に置き換えます) で、`src/routes` はアプリの [ルート(routes)](/tutorial/pages) を定義します。
 
-Finally, `static` contains any assets (like a `favicon.png` or a `robots.txt`) that should be included when your app is deployed.
+最後に、`static` にはアプリをデプロイするときに含めるべきアセット (`favicon.png` や `robots.txt` など) を置きます。

From fd1703453dea44eb0d97cb81cadf44ec1d910bfc Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Mon, 19 Dec 2022 01:21:25 +0900
Subject: [PATCH 07/60] translate 02-sveltekit/01-concepts/03-server-and-client
 into Japanese

---
 .../01-concepts/03-server-and-client/README.md         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md b/content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md
index e9b409b79..04b0392d5 100644
--- a/content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md
+++ b/content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md
@@ -2,12 +2,12 @@
 title: Server and client
 ---
 
-A SvelteKit app can be thought of as two distinct entities working in tandem — the _server_ and the _client_.
+SvelteKit アプリは、2つの異なる存在が連携して動作していると考えることができます。つまりそれは _サーバー_ と _クライアント_ です。
 
-'Server' is, perhaps, a confusing word since your app will often be running in a _serverless_ environment (cloud/edge functions) or might even be deployed as a set of completely static files. But it's the best we've got. The server's basic job is to turn a request into a response.
+'サーバー' は、もしかしたら混乱を招く言葉かもしれません。なぜなら、アプリが _サーバーレス(serverless)_ 環境 (cloud/edge functions) で実行されたり、完全に静的なファイルのセットとしてデプロイされたりするからです。しかし、これがベストな言葉です。サーバーの基本的な仕事は、リクエストをレスポンスに変換することです。
 
-'Client' refers to the JavaScript that loads in the browser.
+'クライアント' は、ブラウザに読み込まれる JavaScript を指します。
 
-SvelteKit makes the two communicate with each other seamlessly. On the initial page load, the server renders the HTML, meaning content is visible as quickly as possible. The client then takes over in a process called 'hydration', so that subsequent navigations happen without full page reloads. It will request additional code and data from the server as needed.
+SvelteKit はこの2つをお互いにシームレスに通信させるようにします。最初のページロードでは、サーバーが HTML をレンダリングし、コンテンツを可能な限り早く表示させます。その後、'ハイドレーション(hydration)' と呼ばれるプロセスでクライアントが引き継ぐため、以降のナビゲーションではページをフルで再読み込みすることはありません。クライアントは、必要に応じて追加のコードやデータをサーバーにリクエストします。
 
-> You can [adjust this behavior](https://kit.svelte.dev/docs/page-options) as needed. SvelteKit is very versatile!
+> 必要に応じて [この動作を調整](https://kit.svelte.jp/docs/page-options) することができます。SvelteKit は非常に多機能です！

From 33a9091b63b2b552c4593da0cfb757fa70c801c4 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Mon, 19 Dec 2022 20:36:43 +0900
Subject: [PATCH 08/60] =?UTF-8?q?=E8=A8=80=E3=81=84=E5=9B=9E=E3=81=97?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02-sveltekit/01-concepts/03-server-and-client/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md b/content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md
index 04b0392d5..c8a460356 100644
--- a/content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md
+++ b/content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md
@@ -2,12 +2,12 @@
 title: Server and client
 ---
 
-SvelteKit アプリは、2つの異なる存在が連携して動作していると考えることができます。つまりそれは _サーバー_ と _クライアント_ です。
+SvelteKit アプリは、_サーバー_ と _クライアント_ の2つが連携して動作していると考えることができます。
 
-'サーバー' は、もしかしたら混乱を招く言葉かもしれません。なぜなら、アプリが _サーバーレス(serverless)_ 環境 (cloud/edge functions) で実行されたり、完全に静的なファイルのセットとしてデプロイされたりするからです。しかし、これがベストな言葉です。サーバーの基本的な仕事は、リクエストをレスポンスに変換することです。
+'サーバー' という言葉は、もしかしたら混乱を招くかもしれません。なぜなら、アプリが _サーバーレス(serverless)_ 環境 (cloud/edge functions) で実行されたり、完全に静的なファイルのセットとしてデプロイされたりするからです。しかし、これがベストな言葉です。サーバーの基本的な仕事は、リクエストをレスポンスに変換することです。
 
 'クライアント' は、ブラウザに読み込まれる JavaScript を指します。
 
 SvelteKit はこの2つをお互いにシームレスに通信させるようにします。最初のページロードでは、サーバーが HTML をレンダリングし、コンテンツを可能な限り早く表示させます。その後、'ハイドレーション(hydration)' と呼ばれるプロセスでクライアントが引き継ぐため、以降のナビゲーションではページをフルで再読み込みすることはありません。クライアントは、必要に応じて追加のコードやデータをサーバーにリクエストします。
 
-> 必要に応じて [この動作を調整](https://kit.svelte.jp/docs/page-options) することができます。SvelteKit は非常に多機能です！
+> 必要に応じて[この動作を調整](https://kit.svelte.jp/docs/page-options)することができます。SvelteKit は非常に多機能です！

From ddb7f4c2c8eed55ab8da1fb5adfd1ab37278610a Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Mon, 19 Dec 2022 20:38:29 +0900
Subject: [PATCH 09/60] translate 02-sveltekit/02-routing/01-pages into
 Japanese

---
 .../02-sveltekit/02-routing/01-pages/README.md       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/tutorial/02-sveltekit/02-routing/01-pages/README.md b/content/tutorial/02-sveltekit/02-routing/01-pages/README.md
index beb6cb2c9..5f725580c 100644
--- a/content/tutorial/02-sveltekit/02-routing/01-pages/README.md
+++ b/content/tutorial/02-sveltekit/02-routing/01-pages/README.md
@@ -2,13 +2,13 @@
 title: Pages
 ---
 
-SvelteKit uses filesystem-based routing, which means that the _routes_ of your app — in other words, what the app should do when a user navigates to a particular URL — are defined by the directories in your codebase.
+SvelteKit はファイルシステムベースのルーティングを採用しており、アプリの _ルート(routes)_ (言い換えると、ユーザーが特定の URL に移動したときにアプリがすべきこと) については、コードベースのディレクトリで定義します。
 
-The routes are located within `src/routes`. Every directory within which contains a `+page.svelte` file creates a route in your app.
+ルート(routes)は `src/routes` の中に置きます。`+page.svelte` ファイルを含む全てのディレクトリが、アプリのルート(routes)となります。
 
-In this app we currently have one route — `src/routes/+page.svelte`, which maps to `/`.
+このアプリには、現在はルート(route)が1つだけあります。それは `src/routes/+page.svelte` で、`/` にマップされています。
 
-Let's add a second route, `src/routes/about/+page.svelte`, which maps to `/about`:
+2つ目のルート(route)として、`src/routes/about/+page.svelte` を追加してみましょう。これは `/about` にマップされます。
 
 ```svelte
 /// file: src/routes/about/+page.svelte
@@ -21,6 +21,6 @@ Let's add a second route, `src/routes/about/+page.svelte`, which maps to `/about
 <p>this is the about page.</p>
 ```
 
-We can now navigate between `/` and `/about`.
+これによって `/` と `/about` の間を移動できるようになりました。
 
-> Unlike traditional multi-page apps, navigating to `/about` and back updates the contents of the current page, like a single-page app. This gives us the best of both worlds — fast server-rendered startup, then instant navigation. (This behaviour can be [configured](https://kit.svelte.dev/docs/page-options).)
+> 従来のマルチページアプリとは違い、`/about` に移動してから戻ると、シングルページアプリのように現在のページのコンテンツが更新されます。これにより、サーバーレンダリングによるスタートアップと、瞬時のナビゲーションという、両方の長所を得ることができます。(この動作は[設定で変更できます](https://kit.svelte.jp/docs/page-options)。)

From 739a9658de7940fc03d00a4e706729e5b5999ff0 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Mon, 19 Dec 2022 21:24:16 +0900
Subject: [PATCH 10/60] translate 02-sveltekit/02-routing/02-layouts into
 Japanese

---
 .../tutorial/02-sveltekit/02-routing/02-layouts/README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/tutorial/02-sveltekit/02-routing/02-layouts/README.md b/content/tutorial/02-sveltekit/02-routing/02-layouts/README.md
index 97cb90f5e..1541c59e5 100644
--- a/content/tutorial/02-sveltekit/02-routing/02-layouts/README.md
+++ b/content/tutorial/02-sveltekit/02-routing/02-layouts/README.md
@@ -2,9 +2,9 @@
 title: Layouts
 ---
 
-Different routes of your app will often share common UI. Instead of repeating it in each `+page.svelte` component, we can use a `+layout.svelte` component that applies to all routes in the same directory.
+アプリの別々のルート(routes)が共通の UI を共有することがあると思います。その共通の UI を `+page.svelte` コンポーネントに繰り返し書く代わりに、同じディレクトリ内の全てのルート(routes)に適用される `+layout.svelte` コンポーネント を使用することができます。
 
-In this app we have two routes, `src/routes/+page.svelte` and `src/routes/about/+page.svelte`, that contain the same navigation UI. Let's create a new file, `src/routes/+layout.svelte`...
+このアプリには2つのルート(routes) `src/routes/+page.svelte` と `src/routes/about/+page.svelte` があり、どちらにも同じナビゲーション UI があります。新たに `src/routes/+layout.svelte` ファイルを作成してみましょう…
 
 ```diff
 src/routes/
@@ -14,7 +14,7 @@ src/routes/
 └ +page.svelte
 ```
 
-...and move the duplicated content from the `+page.svelte` files into the new `+layout.svelte` file. The `<slot />` element is where the page content will be rendered:
+…そして2つの `+page.svelte` ファイルで重複しているコンテンツを新たに作成した `+layout.svelte` ファイルに移動しましょう。`<slot />` 要素は、ページコンテンツがレンダリングされる場所です。
 
 ```svelte
 /// file: src/routes/+layout.svelte
@@ -26,4 +26,4 @@ src/routes/
 <slot />
 ```
 
-A `+layout.svelte` file applies to every child route, including the sibling `+page.svelte` (if it exists). You can nest layouts to arbitrary depth.
+`+layout.svelte` ファイルは全ての子ルート(route)に適用されます。同じ階層にある `+page.svelte` にも適用されます(もし存在していれば)。レイアウトは任意の深さまでネストすることができます。

From 50c1646e909537f9a3e24e5139ff457063e38d66 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Mon, 19 Dec 2022 21:24:40 +0900
Subject: [PATCH 11/60] translate 02-sveltekit/02-routing/03-params into
 Japanese

---
 .../tutorial/02-sveltekit/02-routing/03-params/README.md  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/tutorial/02-sveltekit/02-routing/03-params/README.md b/content/tutorial/02-sveltekit/02-routing/03-params/README.md
index 2c99e5459..773873e35 100644
--- a/content/tutorial/02-sveltekit/02-routing/03-params/README.md
+++ b/content/tutorial/02-sveltekit/02-routing/03-params/README.md
@@ -3,15 +3,15 @@ title: Route parameters
 path: /blog
 ---
 
-To create routes with dynamic parameters, use square brackets around a valid variable name. For example, a file like `src/routes/blog/[slug]/+page.svelte` will create a route that matches `/blog/one`, `/blog/two`, `/blog/three` and so on.
+動的なパラメータ付きのルート(routes)を作成するには、角括弧を使用して有効な変数名を囲みます。例えば、`src/routes/blog/[slug]/+page.svelte` というファイルは、`/blog/one`、`/blog/two`、`/blog/three` などにマッチするルート(route)を作成します。
 
-Let's create that file:
+そのファイルを作成してみましょう。
 
 ```svelte
 /// file: src/routes/blog/[slug]/+page.svelte
 <h1>blog post</h1>
 ```
 
-We can now navigate from the `/blog` page to individual blog posts. In the next chapter, we'll see how to load their content.
+これで、`/blog` ページから個々のブログ記事に移動できるようになりました。次の章では、そのコンテンツをロードする方法を見ていきます。
 
-> Multiple route parameters can appear _within_ one URL segment, as long as they are separated by at least one static character: `foo/[bar]x[baz]` is a valid route where `[bar]` and `[baz]` are dynamic parameters.
+> 少なくとも1つの静的な文字で区切られていれば、1つの URL セグメント内に複数のルートパラメータを使用することができます。`foo/[bar]x[baz]` は有効なルートで、`[bar]` と `[baz]` は動的なパラメータです。

From 300b0d4024a79c3bb34568e1827ea90877ca857e Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 21 Dec 2022 19:38:24 +0900
Subject: [PATCH 12/60] =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=83=86=E3=82=A3?=
 =?UTF-8?q?=E3=83=B3=E3=82=B0=E3=81=AB=E8=8B=B1=E5=8D=98=E8=AA=9E=E3=81=AE?=
 =?UTF-8?q?Routing=E3=82=92=E4=BD=B5=E8=A8=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/tutorial/02-sveltekit/02-routing/01-pages/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/tutorial/02-sveltekit/02-routing/01-pages/README.md b/content/tutorial/02-sveltekit/02-routing/01-pages/README.md
index 5f725580c..7e1567733 100644
--- a/content/tutorial/02-sveltekit/02-routing/01-pages/README.md
+++ b/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)となります。
 

From b6b9c64eb7c858518e6af9198cfd3a1eefb79b33 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 21 Dec 2022 19:39:05 +0900
Subject: [PATCH 13/60] translate 02-sveltekit/03-loading-data/01-page-data
 into Japanese

---
 .../03-loading-data/01-page-data/README.md    | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md b/content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md
index 9ab42c065..7d637697a 100644
--- a/content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md
+++ b/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.
+エラーハンドリングの詳細については、後の章で学習します。

From 4462e40ecb5242917f7f8c1311b7b440f7df86a0 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 21 Dec 2022 19:39:39 +0900
Subject: [PATCH 14/60] translate 02-sveltekit/03-loading-data/02-layout-data
 into Japanese

---
 .../03-loading-data/02-layout-data/README.md         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/tutorial/02-sveltekit/03-loading-data/02-layout-data/README.md b/content/tutorial/02-sveltekit/03-loading-data/02-layout-data/README.md
index 15335b82c..9f013478c 100644
--- a/content/tutorial/02-sveltekit/03-loading-data/02-layout-data/README.md
+++ b/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) のドキュメントをご覧ください。

From c36e6822e4a36bd58d712de116c5fae2ad7f3df2 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 21 Dec 2022 19:40:24 +0900
Subject: [PATCH 15/60] translate 02-sveltekit/04-forms/01-the-form-element
 into Japanese

---
 .../04-forms/01-the-form-element/README.md             | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/tutorial/02-sveltekit/04-forms/01-the-form-element/README.md b/content/tutorial/02-sveltekit/04-forms/01-the-form-element/README.md
index 76fdbc6f9..a39ef0547 100644
--- a/content/tutorial/02-sveltekit/04-forms/01-the-form-element/README.md
+++ b/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 が無効または利用できない場合でも動作します。

From bca50af52e3756c3deade36614b3733320074aa0 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 21 Dec 2022 19:40:59 +0900
Subject: [PATCH 16/60] translate 02-sveltekit/04-forms/02-named-form-actions
 into Japanese

---
 .../04-forms/02-named-form-actions/README.md         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/tutorial/02-sveltekit/04-forms/02-named-form-actions/README.md b/content/tutorial/02-sveltekit/04-forms/02-named-form-actions/README.md
index cba70bb56..2e0c21516 100644
--- a/content/tutorial/02-sveltekit/04-forms/02-named-form-actions/README.md
+++ b/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

From b3e64ac1a3b06f223e63a8a1a84acede26b22131 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 21 Dec 2022 19:41:42 +0900
Subject: [PATCH 17/60] translate 02-sveltekit/04-forms/03-form-validation into
 Japanese

---
 .../04-forms/03-form-validation/README.md      | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md b/content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md
index 432168eca..d8fccd299 100644
--- a/content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md
+++ b/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="http://github.com/?/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` プロパティを介してアクセスすることができます。

From 681b8b19b173e18b991d378469797e077c0ec48e Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 21 Dec 2022 19:42:05 +0900
Subject: [PATCH 18/60] translate
 02-sveltekit/04-forms/04-progressive-enhancement into Japanese

---
 .../04-progressive-enhancement/README.md      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/tutorial/02-sveltekit/04-forms/04-progressive-enhancement/README.md b/content/tutorial/02-sveltekit/04-forms/04-progressive-enhancement/README.md
index 9cbe818ea..31d43d702 100644
--- a/content/tutorial/02-sveltekit/04-forms/04-progressive-enhancement/README.md
+++ b/content/tutorial/02-sveltekit/04-forms/04-progressive-enhancement/README.md
@@ -2,11 +2,11 @@
 title: Progressive enhancement
 ---
 
-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.
+私たちは `<form>` を使用しているため、たとえユーザーが JavaScript を使えなくても ([これはあなたが思うより頻繁に発生しています](https://kryogenix.org/code/browser/everyonehasjs.html)) アプリが動作します。これは素晴らしいことです、なぜなら私たちのアプリがレジリエントであることを意味するからです。
 
-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.
+ほとんどの場合、ユーザーは JavaScript を有効にしています。そのような場合は、SvelteKit がクライアントサイドルーティングで `<a>` 要素を _漸進的に強化(progressively enhance)_ しているのと同じように、form の体験を漸進的に強化することができます。
 
-Import the `enhance` function from `$app/forms`...
+`$app/forms` から `enhance` 関数をインポートし…
 
 ```svelte
 /// file: src/routes/+page.svelte
@@ -18,7 +18,7 @@ Import the `enhance` function from `$app/forms`...
 </script>
 ```
 
-...and add the `use:enhance` directive to the `<form>` elements:
+…そして `use:enhance` ディレクティブを `<form>` 要素に追加します。
 
 ```svelte
 <form method="POST" action="http://github.com/?/create" +++use:enhance+++>
@@ -28,14 +28,14 @@ Import the `enhance` function from `$app/forms`...
 <form method="POST" action="http://github.com/?/delete" +++use:enhance+++>
 ```
 
-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:
+これだけです！ JavaScript が有効な場合、`use:enhance` は、ブラウザネイティブな動作(フルページリロードを除く)をエミュレートします。こうすると、
 
-- update the `form` prop
-- invalidate all data on a successful response, causing `load` functions to re-run
-- navigate to the new page on a redirect response
-- render the nearest error page if an error occurs
+- `form` プロパティを更新します
+- 成功レスポンスの場合は全てのデータを無効化・最新化(invalidate)するようマークし、`load` 関数を再実行させます
+- リダイレクトレスポンスの場合は新しいページに移動します
+- エラーが発生した場合は最も近くにあるエラーページをレンダリングします
 
-Now that we're updating the page rather than reloading it, we can get fancy with things like transitions:
+こうして、ページをリロードするのではなく更新するようになったので、トランジションなどで装飾することができます。
 
 ```svelte
 /// file: src/routes/+page.svelte

From 61d5f6d9db07ff79015e9214dca71314719ce295 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 21 Dec 2022 19:42:33 +0900
Subject: [PATCH 19/60] translate
 02-sveltekit/04-forms/05-customizing-use-enhance into Japanese

---
 .../04-forms/05-customizing-use-enhance/README.md      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/tutorial/02-sveltekit/04-forms/05-customizing-use-enhance/README.md b/content/tutorial/02-sveltekit/04-forms/05-customizing-use-enhance/README.md
index 525e6d044..7f7f1214a 100644
--- a/content/tutorial/02-sveltekit/04-forms/05-customizing-use-enhance/README.md
+++ b/content/tutorial/02-sveltekit/04-forms/05-customizing-use-enhance/README.md
@@ -2,7 +2,7 @@
 title: Customizing use:enhance
 ---
 
-With `use:enhance`, we can go further than just emulating the browser's native behaviour. By providing a callback, we can add things like **pending states** and **optimistic UI**. Let's simulate a slow network by adding an artificial delay to our two actions:
+`use:enhance` を使えば、ブラウザネイティブな動作をエミュレートするだけでなく、さらに踏み込んだことができます。コールバックを提供することで、**待機状態(pending states)** や **楽観的なUI(optimistic UI)** を追加することができます。私たちの2つの action にわざと遅延を追加し、遅いネットワークをシミュレートしましょう。
 
 ```js
 /// file: src/routes/+page.server.js
@@ -19,7 +19,7 @@ export const actions = {
 };
 ```
 
-When we create or delete items, it now takes a full second before the UI updates, leaving the user wondering if they messed up somehow. To solve that, add some local state...
+アイテムを作成または削除するとき、UI の更新まで丸1秒かかるようになっており、ユーザーはなにか失敗したのかと思うようになります。これを解決するには、ローカルの状態(local state)をいくつか追加します…
 
 ```svelte
 /// file: src/routes/+page.svelte
@@ -35,7 +35,7 @@ When we create or delete items, it now takes a full second before the UI updates
 </script>
 ```
 
-...and toggle `creating` inside the first `use:enhance`:
+…そして1つ目の `use:enhance` の内側で、`creating` を切り替えます。
 
 ```svelte
 <form
@@ -62,7 +62,7 @@ When we create or delete items, it now takes a full second before the UI updates
 </form>
 ```
 
-In the case of deletions, we don't really need to wait for the server to validate anything — we can just update the UI immediately:
+削除の場合、サーバーがなにか検証するのを待つ必要はありません — すぐに UI を更新することができます。
 
 ```svelte
 <ul>
@@ -89,4 +89,4 @@ In the case of deletions, we don't really need to wait for the server to validat
 </ul>
 ```
 
-> `use:enhance` is very customizable — you can `cancel()` submissions, handle redirects, control whether the form is reset, and so on. [See the docs](https://kit.svelte.dev/docs/modules#$app-forms-enhance) for full details.
+> `use:enhance` はとてもカスタマイズしやすく、フォーム送信の `cancel()`、リダイレクト処理、form をリセットするかどうかの制御、などを行うことができます。詳細については [ドキュメントをご覧ください](https://kit.svelte.jp/docs/modules#$app-forms-enhance)。

From 77e4f6132daf62db5cdfc4b594209c880a2fe5d8 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Tue, 27 Dec 2022 22:29:48 +0900
Subject: [PATCH 20/60] translate 02-sveltekit/05-api-routes/01-get-handlers
 into Japanese

---
 .../02-sveltekit/05-api-routes/01-get-handlers/README.md  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/tutorial/02-sveltekit/05-api-routes/01-get-handlers/README.md b/content/tutorial/02-sveltekit/05-api-routes/01-get-handlers/README.md
index 7f79b3da4..fec6a9356 100644
--- a/content/tutorial/02-sveltekit/05-api-routes/01-get-handlers/README.md
+++ b/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

From 0fd8ec4eda178c3c9aad1dd2d73edd248d0a531b Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Tue, 27 Dec 2022 22:30:21 +0900
Subject: [PATCH 21/60] translate
 02-sveltekit/06-errors-and-redirects/01-error-basics into Japanese

---
 .../01-error-basics/README.md                        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/tutorial/02-sveltekit/06-errors-and-redirects/01-error-basics/README.md b/content/tutorial/02-sveltekit/06-errors-and-redirects/01-error-basics/README.md
index dd4ac1e64..626071b68 100644
--- a/content/tutorial/02-sveltekit/06-errors-and-redirects/01-error-basics/README.md
+++ b/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 ステータスコードに置き換えられます。これは、エラーメッセージには機密情報が含まれている可能性があるからです。

From c6aef789bd3f216e3ea559b9949c79d9c41623c5 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Tue, 27 Dec 2022 22:30:51 +0900
Subject: [PATCH 22/60] translate
 02-sveltekit/06-errors-and-redirects/02-error-pages into Japanese

---
 .../06-errors-and-redirects/02-error-pages/README.md   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/tutorial/02-sveltekit/06-errors-and-redirects/02-error-pages/README.md b/content/tutorial/02-sveltekit/06-errors-and-redirects/02-error-pages/README.md
index 83f5bdfcb..96c2888ff 100644
--- a/content/tutorial/02-sveltekit/06-errors-and-redirects/02-error-pages/README.md
+++ b/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` ページがレンダリングされます。

From 273b1202fbed7f10a4f93dc31200375b754c7b60 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Tue, 27 Dec 2022 22:31:28 +0900
Subject: [PATCH 23/60] translate
 02-sveltekit/06-errors-and-redirects/03-fallback-errors into Japanese

---
 .../03-fallback-errors/README.md                     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/README.md b/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/README.md
index 3f959d1bb..d8e1e1b4c 100644
--- a/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/README.md
+++ b/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%` — エラーメッセージ

From a52cc8582940c960e4f2ab4e2a89e22c92942984 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Tue, 27 Dec 2022 22:31:52 +0900
Subject: [PATCH 24/60] translate
 02-sveltekit/06-errors-and-redirects/04-redirects into Japanese

---
 .../04-redirects/README.md                       | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/tutorial/02-sveltekit/06-errors-and-redirects/04-redirects/README.md b/content/tutorial/02-sveltekit/06-errors-and-redirects/04-redirects/README.md
index 3fd3a5313..797bf607d 100644
--- a/content/tutorial/02-sveltekit/06-errors-and-redirects/04-redirects/README.md
+++ b/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` — 恒久的なリダイレクトに使用されます

From 07d6799e04524d82f60dcfeb65fcf14627b91f75 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Tue, 27 Dec 2022 22:32:24 +0900
Subject: [PATCH 25/60] translate 02-sveltekit/07-page-options into Japanese

---
 .../07-page-options/01-page-options/README.md    | 16 ++++++++--------
 .../07-page-options/02-ssr/README.md             |  6 +++---
 .../07-page-options/03-csr/README.md             |  6 +++---
 .../07-page-options/04-prerender/README.md       | 14 +++++++-------
 .../07-page-options/05-trailingslash/README.md   | 12 ++++++------
 5 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/content/tutorial/02-sveltekit/07-page-options/01-page-options/README.md b/content/tutorial/02-sveltekit/07-page-options/01-page-options/README.md
index 0c8e182c7..194cbd384 100644
--- a/content/tutorial/02-sveltekit/07-page-options/01-page-options/README.md
+++ b/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 はとても万能で多くの用途にお使いいただけます。
diff --git a/content/tutorial/02-sveltekit/07-page-options/02-ssr/README.md b/content/tutorial/02-sveltekit/07-page-options/02-ssr/README.md
index 3e451bca4..48457491c 100644
--- a/content/tutorial/02-sveltekit/07-page-options/02-ssr/README.md
+++ b/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 に変えることができます。
diff --git a/content/tutorial/02-sveltekit/07-page-options/03-csr/README.md b/content/tutorial/02-sveltekit/07-page-options/03-csr/README.md
index 239835930..e8cd18ec1 100644
--- a/content/tutorial/02-sveltekit/07-page-options/03-csr/README.md
+++ b/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 が使用できない方々にとって、あなたのアプリケーションが使いやすいかどうかを確認するのに便利です。
diff --git a/content/tutorial/02-sveltekit/07-page-options/04-prerender/README.md b/content/tutorial/02-sveltekit/07-page-options/04-prerender/README.md
index d9fa996fc..405944fc1 100644
--- a/content/tutorial/02-sveltekit/07-page-options/04-prerender/README.md
+++ b/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) になります。
diff --git a/content/tutorial/02-sveltekit/07-page-options/05-trailingslash/README.md b/content/tutorial/02-sveltekit/07-page-options/05-trailingslash/README.md
index e5375f823..ee7a1cda4 100644
--- a/content/tutorial/02-sveltekit/07-page-options/05-trailingslash/README.md
+++ b/content/tutorial/02-sveltekit/07-page-options/05-trailingslash/README.md
@@ -2,24 +2,24 @@
 title: trailingSlash
 ---
 
-Two URLs like `/foo` and `/foo/` might look the same, but they're actually different. A relative URL like `bar` will resolve to `/bar` in the first case and `/foo/bar` in the second, and search engines will treat them as separate entries, harming your SEO.
+2つの URL `/foo` と `/foo/` は同じように見えるかもしれませんが、実際は異なります。`bar` のような相対 URL は、1つめのケースでは `/bar` に解決し、2つ目のケースでは `/foo/bar` に解決します。検索エンジンはこれらを別々のエントリとして扱うため、SEO に悪影響を与えます。
 
-In short, being loosey-goosey about trailing slashes is a bad idea. By default, SvelteKit strips trailing slashes, meaning that a request for `/foo/` will result in a redirect to `/foo`.
+要するに、末尾のスラッシュを雑に扱うのは悪い考えだということです。デフォルトで、SvelteKit は末尾のスラッシュを削除します。つまり、`/foo/` に対するリクエストは `/foo` にリダイレクトされます。
 
-If you instead want to ensure that a trailing slash is always present, you can specify the `trailingSlash` option accordingly:
+代わりに、末尾のスラッシュが常に存在するようにしたい場合は、`trailingSlash` オプションをそれに応じて指定することができます。
 
 ```js
 /// file: src/routes/always/+page.server.js
 export const trailingSlash = 'always';
 ```
 
-To accommodate both cases (this is not recommended!), use `'ignore`':
+両方とも許容するには (これは推奨されません！)、`'ignore'` を使用します。
 
 ```js
 /// file: src/routes/ignore/+page.server.js
 export const trailingSlash = 'ignore';
 ```
 
-The default value is `'never'`.
+デフォルトの値は `'never'` です。
 
-Whether or not trailing slashes are applied affects prerendering. A URL like `/always/` will be saved to disk as `always/index.html` whereas a URL like `/never` will be saved as `never.html`.
+末尾のスラッシュが適用されるかどうかは、プリレンダリングに影響します。`/always/` のような URL は、`always/index.html` としてディスクに保存され、一方で `/never` のような URL は `never.html` のように保存されます。

From 84b34cf279edb193acf05014cbfd63e56a067ed3 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Tue, 27 Dec 2022 22:32:49 +0900
Subject: [PATCH 26/60] translate 04-advanced-sveltekit/01-hooks/01-handle into
 Japanese

---
 .../tutorial/04-advanced-sveltekit/01-hooks/01-handle/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/README.md b/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/README.md
index 78f7e449c..278d28c25 100644
--- a/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/README.md
+++ b/content/tutorial/04-advanced-sveltekit/01-hooks/01-handle/README.md
@@ -2,6 +2,6 @@
 title: handle
 ---
 
-SvelteKit provides several _hooks_ — ways to intercept and override the framework's default behaviour.
+SvelteKit では、フレームワークのデフォルトの振る舞いをインターセプトしてオーバーライドするための方法である _hooks_ をいくつか提供しています。
 
 > Coming soon

From 46460bd528dd9951ae10acb9aac4146d01e25c23 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Tue, 27 Dec 2022 22:33:17 +0900
Subject: [PATCH 27/60] translate 04-advanced-sveltekit/03-advanced-routing
 into Japanese

---
 .../03-advanced-routing/01-optional-params/README.md | 10 +++++-----
 .../03-advanced-routing/02-rest-params/README.md     |  8 ++++----
 .../03-advanced-routing/03-param-matchers/README.md  | 10 +++++-----
 .../03-advanced-routing/04-route-groups/README.md    | 12 ++++++------
 .../05-breaking-out-of-layouts/README.md             |  8 ++++----
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/01-optional-params/README.md b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/01-optional-params/README.md
index e822b7f4f..720892cbe 100644
--- a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/01-optional-params/README.md
+++ b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/01-optional-params/README.md
@@ -2,15 +2,15 @@
 title: Optional parameters
 ---
 
-In the first chapter on [routing](/tutorial/pages), we learned how to create routes with [dynamic parameters](/tutorial/params).
+[ルーティング(Routing)](/tutorial/pages) の最初の章で、[動的なパラメータ](/tutorial/params)付きのルート(routes)を作成する方法について学習しました。
 
-Sometimes it's helpful to make a parameter optional. A classic example is when you use the pathname to determine the locale — `/fr/...`, `/de/...` and so on — but you also want to have a default locale.
+パラメータをオプショナルにできたら便利なときがあるでしょう。その代表的な例は、ロケールを決めるのにパス名を使用する場合です — `/fr/...`、`/de/...` などなど — このとき、デフォルトのロケールも持ちたいはずです。
 
-To do that, we use double brackets. Rename the `[lang]` directory to `[[lang]]`.
+そうするには、二重括弧を使用します。`[lang]` ディレクトリを `[[lang]]` にリネームしましょう。
 
-The app now fails to build, because `src/routes/+page.svelte` and `src/routes/[[lang]]/+page.svelte` would both match `/`. Delete `src/routes/+page.svelte`. (You may need to reload the app to recover from the error page).
+今は `src/routes/+page.svelte` と `src/routes/[[lang]]/+page.svelte` がどちらも `/` にマッチするため、アプリがビルドに失敗します。`src/routes/+page.svelte` を削除してください (エラーページから復帰するには、アプリをリロードする必要があるかもしれません)。
 
-Lastly, edit `src/routes/[[lang]]/+page.server.js` to specify the default locale:
+最後に、`src/routes/[[lang]]/+page.server.js` を編集してデフォルトロケールを指定してください。
 
 ```js
 /// file: src/routes/[[lang]]/+page.server.js
diff --git a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/02-rest-params/README.md b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/02-rest-params/README.md
index d003c037a..6be004910 100644
--- a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/02-rest-params/README.md
+++ b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/02-rest-params/README.md
@@ -2,11 +2,11 @@
 title: Rest parameters
 ---
 
-To match an unknown number of path segments, use a `[...rest]` parameter, so named for its resemblance to [rest parameters in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters).
+未知の数のパスセグメントにマッチさせるには、`[...rest]` パラメータを使用します。これは、 [JavaScript の残余引数(rest parameters)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters) に似ているため、この名前が付けられました。
 
-Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any path.
+`src/routes/[path]` を `src/routes/[...path]` にリネームしましょう。このルート(route)はどんなパスにもマッチします。
 
-> Other, more specific routes will be tested first, making rest parameters useful as 'catch-all' routes. For example, if you needed a custom 404 page for pages inside `/categories/...`, you could add these files:
+> 他の、より詳細・明確(specific)なルート(routes)が最初にテストされるため、rest パラメータは 'catch-all' ルート(routes)として便利です。例えば、`/categories/...` の中のページ用にカスタムの 404 ページを必要とする場合は、以下のファイルを追加することができます。
 >
 > ```diff
 > src/routes/
@@ -19,4 +19,4 @@ Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any
 > +│ │ └ +page.server.js
 > ```
 >
-> Inside the `+page.server.js` file, `throw error(404)` inside `load`.
+> `+page.server.js` ファイルにて、`load` の内側で `throw error(404)` のようにエラーをスローします。
diff --git a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/03-param-matchers/README.md b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/03-param-matchers/README.md
index 9a9313d52..ae39a4dc6 100644
--- a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/03-param-matchers/README.md
+++ b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/03-param-matchers/README.md
@@ -3,9 +3,9 @@ title: Param matchers
 path: /colors/ff3e00
 ---
 
-To prevent the router from matching on invalid input, you can specify a _matcher_. For example, you might want a route like `/colors/[value]` to match hex values like `/colors/ff3e00` but not named colors like `/colors/octarine` or any other arbitrary input.
+ルーターが無効な入力にマッチするのを防ぐために、 _matcher_ を指定することができます。例えば、`/colors/[value]` のようなルート(route)を、`/colors/ff3e00` のような16進数の値(hex value)にマッチさせたいけれど、`/colors/octarine` のような色の名前やその他の任意の入力にはマッチさせたくないことがあるでしょう。
 
-First, create a new file called `src/params/hex.js` and export a `match` function from it:
+まず、`src/params/hex.js` という新しいファイルを作成し、そこから `match` 関数をエクスポートしてください。
 
 ```js
 /// file: src/params/hex.js
@@ -14,8 +14,8 @@ export function match(value) {
 }
 ```
 
-Then, to use the new matcher, rename `src/routes/colors/[color]` to `src/routes/colors/[color=hex]`.
+それから、その新しい matcher を使うために、`src/routes/colors/[color]` を `src/routes/colors/[color=hex]` にリネームしてください。
 
-Now, whenever someone navigates to that route, SvelteKit will verify that `color` is a valid `hex` value. If not, SvelteKit will try to match other routes, before eventually returning a 404.
+これで、誰かがこのルート(route)に移動してきたときはいつでも、SvelteKit が `color` が有効な `hex` value か検証します。違った場合、SvelteKit は、他のルート(routes)にマッチするか試行し、どれにもマッチしない場合は最終的に 404 を返します。
 
-> Matchers run both on the server and in the browser.
+> Matcher はサーバーとブラウザの両方で動作します。
diff --git a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/04-route-groups/README.md b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/04-route-groups/README.md
index 9b28d4d5e..65465591b 100644
--- a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/04-route-groups/README.md
+++ b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/04-route-groups/README.md
@@ -2,13 +2,13 @@
 title: Route groups
 ---
 
-As we saw in the [routing introduction](/tutorial/layouts), layouts are a way to share UI and data loading logic between different routes.
+[ルーティング(Routing)のイントロダクション](/tutorial/layouts)で見たように、レイアウトによって UI とデータをロードするロジックを異なるルート(routes)間で共有することができます。
 
-Sometimes it's useful to use layouts without affecting the route — for example, you might need your `/app` and `/account` routes to be behind authentication, while your `/about` page is open to the world. We can do this with a _route group_, which is a directory in parentheses.
+ルート(route)に影響することなく、レイアウトを使うことができたら便利なときがあるでしょう — 例えば、`/app` ルートと `/account` ルートは認証の背後に置く必要があり、`/about` ページは世界に公開する、ということがあるかもしれません。これを行うには、 _ルートグループ(route group)_ を使います。これは、丸括弧でくくられたディレクトリです。
 
-Create an `(authed)` group by renaming `account` to `(authed)/account` then renaming `app` to `(authed)/app`.
+`account` を `(authed)/account` にリネームして `(authed)` グループを作成し、それから `app` を `(authed)/app` にリネームします。
 
-Now we can control access to these routes by creating `src/routes/(authed)/+layout.server.js`:
+`src/routes/(authed)/+layout.server.js` を作成することで、これらのルート(routes)のアクセスをコントロールすることができます。
 
 ```js
 /// file: src/routes/(authed)/+layout.server.js
@@ -21,9 +21,9 @@ export function load({ cookies, url }) {
 }
 ```
 
-If you try to visit these pages, you'll be redirected to the `/login` route, which has a form action in `src/routes/login/+page.server.js` that sets the `logged_in` cookie.
+これらのページにアクセスしようとすると、`/login` ルート(route)にリダイレクトされます。このルートには、`src/routes/login/+page.server.js` に、`logged_in` cookie をセットする form action があります。
 
-We can also add some UI to these two routes by adding a `src/routes/(authed)/+layout.svelte` file:
+また、`src/routes/(authed)/+layout.svelte` ファイルを追加することで、これら2つのルートに UI を追加することができます。
 
 ```svelte
 /// file: src/routes/(authed)/+layout.svelte
diff --git a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/05-breaking-out-of-layouts/README.md b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/05-breaking-out-of-layouts/README.md
index a3484df9d..33690173c 100644
--- a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/05-breaking-out-of-layouts/README.md
+++ b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/05-breaking-out-of-layouts/README.md
@@ -2,15 +2,15 @@
 title: Breaking out of layouts
 ---
 
-Ordinarily, a page inherits every layout above it, meaning that `src/routes/a/b/c/+page.svelte` inherits four layouts:
+通常、ページはその上にある全てのレイアウトを継承しています。つまり、`src/routes/a/b/c/+page.svelte` は4つのレイアウトを継承しています。
 
 - `src/routes/+layout.svelte`
 - `src/routes/a/+layout.svelte`
 - `src/routes/a/b/+layout.svelte`
 - `src/routes/a/b/c/+layout.svelte`
 
-Occasionally, it's useful to break out of the current layout hierarchy. We can do that by adding the `@` sign followed by the name of the parent segment to 'reset' to — for example `+page@b.svelte` would put `/a/b/c` inside `src/routes/a/b/+layout.svelte`, while `+page@a.svelte` would put it inside `src/routes/a/+layout.svelte`.
+たまに、現在のレイアウト階層から抜け出せると便利なときもあります。`@` 記号の後に'リセット'する親セグメントの名前を追加することで、これを実現することができます — 例えば、`/a/b/c` で `+page@b.svelte` にすると `src/routes/a/b/+layout.svelte` が適用され、`+page@a.svelte` の場合は `src/routes/a/+layout.svelte` が適用されます。
 
-Let's reset it all the way to the root layout, by renaming it to `+page@.svelte`.
+`+page@.svelte` にリネームして、一気に最上位(root)のレイアウトまでリセットしてみましょう。
 
-> The root layout applies to every page of your app, you cannot break out of it.
+> 最上位(root)のレイアウトはアプリの全てのページに適用され、そこから抜け出すことはできません。

From 294ed6ad412b7051b36ed8bced22d6fb283d1161 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Tue, 27 Dec 2022 22:43:57 +0900
Subject: [PATCH 28/60] fix typo

---
 .../02-sveltekit/05-api-routes/01-get-handlers/README.md        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/tutorial/02-sveltekit/05-api-routes/01-get-handlers/README.md b/content/tutorial/02-sveltekit/05-api-routes/01-get-handlers/README.md
index fec6a9356..c674de7fc 100644
--- a/content/tutorial/02-sveltekit/05-api-routes/01-get-handlers/README.md
+++ b/content/tutorial/02-sveltekit/05-api-routes/01-get-handlers/README.md
@@ -4,7 +4,7 @@ title: GET handlers
 
 SvelteKit では、ページ以外にも様々なものを作ることができます。`+server.js` ファイルを追加し、そこでHTTP メソッド `GET`、`PUT`、`POST`、`PATCH`、`DELETE` に対応する関数をエクスポートすることで、 _API ルート(API routes)_ を作成することもできます。
 
-このアプリは、ボタンwをクリックしたときに `/roll` API ルートからデータを取得します。`src/routes/roll/+server.js` ファイルを追加し、そのルートを作成しましょう。
+このアプリは、ボタンをクリックしたときに `/roll` API ルートからデータを取得します。`src/routes/roll/+server.js` ファイルを追加し、そのルートを作成しましょう。
 
 ```js
 /// file: src/routes/roll/+server.js

From d4bf917f4a86b746346c11197f61c658abbc2b88 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 28 Dec 2022 21:20:56 +0900
Subject: [PATCH 29/60] translate
 04-advanced-sveltekit/05-environment-variables into Japanese

---
 .../04-advanced-loading/01-await-parent/README.md  | 14 +++++++-------
 .../02-using-both-load-functions/README.md         |  8 ++++----
 .../04-advanced-loading/03-invalidation/README.md  | 10 +++++-----
 .../04-custom-dependencies/README.md               |  8 ++++----
 .../05-invalidate-all/README.md                    |  8 ++++----
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-await-parent/README.md b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-await-parent/README.md
index f622d5a1e..b5234fc86 100644
--- a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-await-parent/README.md
+++ b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-await-parent/README.md
@@ -2,11 +2,11 @@
 title: Using parent data
 ---
 
-As we saw in the introduction to [layout data](/tutorial/layout-data), `+page.svelte` and `+layout.svelte` components have access to everything returned from their parent `load` functions.
+[layout data](/tutorial/layout-data) のイントロダクションで見たように、`+page.svelte` コンポーネントと `+layout.svelte` コンポーネント は、親の `load` 関数から返された全てにアクセスすることができます。
 
-Occasionally it's useful for the `load` functions themselves to access data from their parents. This can be done with `await parent()`.
+時には、`load` 関数の中で親のデータにアクセスできると便利なことがあります。`await parent()` でこれを実現することができます。
 
-To show how it works, we'll sum two numbers that come from different `load` functions. First, return some data from `src/routes/+layout.server.js`:
+どのように動作するかを示すため、異なる `load` 関数で取得した2つの数値を足してみましょう。まず、`src/routes/+layout.server.js` からデータを返します。
 
 ```js
 /// file: src/routes/+layout.server.js
@@ -15,7 +15,7 @@ export function load() {
 }
 ```
 
-Then, get that data in `src/routes/sum/+layout.js`:
+次に、`src/routes/sum/+layout.js` でそのデータを取得します。
 
 ```js
 /// file: src/routes/sum/+layout.js
@@ -25,9 +25,9 @@ export async function load(+++{ parent }+++) {
 }
 ```
 
-> Notice that a [universal](/tutorial/universal-load-functions) `load` function can get data from a parent _server_ `load` function. The reverse is not true — a server load function can only get parent data from another server load function.
+> [ユニバーサル](/tutorial/universal-load-functions) `load` 関数は親の _サーバー_ `load` 関数からデータを取得することができます。その逆は真ではありません。サーバー load 関数は、別のサーバーロード関数からのみ親のデータを取得することができます。
 
-Finally, in `src/routes/sum/+page.js`, get parent data from both `load` functions:
+最後に、`src/routes/sum/+page.js` で、両方の `load` 関数から返される親のデータを取得しましょう。
 
 ```js
 /// file: src/sum/+page.js
@@ -37,4 +37,4 @@ export async function load(+++{ parent }+++) {
 }
 ```
 
-> Take care not to introduce waterfalls when using `await parent()`. If you can `fetch` other data that is not dependent on parent data, do that first.
+> `await parent()` を使用する際はウォーターフォールを発生させないよう注意してください。親のデータに依存しない他のデータを取得(`fetch`)できるのであれば、そちらを先に行ってください。
diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/02-using-both-load-functions/README.md b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/02-using-both-load-functions/README.md
index 6b7cf8443..55c11960a 100644
--- a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/02-using-both-load-functions/README.md
+++ b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/02-using-both-load-functions/README.md
@@ -2,11 +2,11 @@
 title: Using both load functions
 ---
 
-Occasionally, you might need to use a server load function and a universal load function together. For example, you might need to return data from the server, but also return a value that can't be serialized as server data.
+サーバー load 関数とユニバーサル load 関数を一緒に使うことが必要なときもあるでしょう。例えば、サーバーからデータを返す必要がある一方で、サーバーのデータとしてシリアライズできない値も返す必要があるケースです。
 
-In this example we want to return a different component from `load` depending on whether the data we got from `src/routes/+page.server.js` is `cool` or not.
+この例では、`src/routes/+page.server.js` から返されるデータが `cool` かそうでないかに応じて、`load` から異なるコンポーネントを返したいと思います。
 
-We can access server data in `src/routes/+page.js` via the `data` property:
+`src/routes/+page.js` で、`data` プロパティを使ってサーバーのデータにアクセスすることができます。
 
 ```js
 /// file: src/routes/+page.js
@@ -22,4 +22,4 @@ export async function load(+++{ data }+++) {
 }
 ```
 
-> Note that the data isn't merged — we must explicitly return `message` from the universal `load` function.
+> データがマージされていないことにご注意ください — 明示的にユニバーサル `load` 関数から `message` を返さなければなりません。
diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/README.md b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/README.md
index d3078f9d8..7aba127d2 100644
--- a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/README.md
+++ b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/README.md
@@ -3,13 +3,13 @@ title: Invalidation
 path: /Europe/London
 ---
 
-When the user navigates from one page to another, SvelteKit calls your `load` functions, but only if it thinks something has changed.
+ユーザーがあるページから別のページに移動するとき、SvelteKit はなにか変更があったと判断した場合にのみ `load` 関数を呼び出します。
 
-In this example, navigating between timezones causes the `load` function in `src/routes/[...timezone]/+page.js` to re-run because `params.timezone` is invalid. But the `load` function in `src/routes/+layout.js` does _not_ re-run, because as far as SvelteKit is concerned it wasn't invalidated by the navigation.
+この例では、タイムゾーン間の移動によって `src/routes/[...timezone]/+page.js` にある `load` 関数が再実行されます。`load` 関数の `params.timezone` が無効(invalid)になるからです。しかし、`src/routes/+layout.js` にある `load` 関数は再実行されません。なぜなら、SvelteKit から見れば、ナビゲーションでは何も変わらなかったからです。
 
-We can fix that by manually invalidating it using the [`invalidate(...)`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) function, which takes a URL and re-runs any `load` functions that depend on it. Because the `load` function in `src/routes/+layout.js` calls `fetch('http://github.com/api/now')`, it depends on `/api/now`.
+[`invalidate(...)`](https://kit.svelte.jp/docs/modules#$app-navigation-invalidate) 関数を使って、手動で無効化・最新化(invalidate)することでこれを修正できます。この関数は、URL を 引数に取り、それに依存している `load` 関数を再実行させます。`src/routes/+layout.js` にある `load` 関数は `fetch('http://github.com/api/now')` を呼び出しているため、`/api/now` に依存しています。
 
-In `src/routes/[...timezone]/+page.svelte`, add an `onMount` callback that calls `invalidate('/api/now')` once a second:
+`src/routes/[...timezone]/+page.svelte` に、1秒に1回 `invalidate('/api/now')` を呼び出す `onMount` コールバックを追加します。
 
 ```svelte
 /// file: src/routes/[...timezone]/+page.svelte
@@ -38,4 +38,4 @@ In `src/routes/[...timezone]/+page.svelte`, add an `onMount` callback that calls
 </h1>
 ```
 
-> You can also pass a function to `invalidate`, in case you want to invalidate based on a pattern and not specific URLs
+> 特定の URL ではなくパターンに基づいて `invalidate` を実行したい場合、`invalidate` に関数を渡すこともできます。
diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-custom-dependencies/README.md b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-custom-dependencies/README.md
index bb0503d66..3572d3d58 100644
--- a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-custom-dependencies/README.md
+++ b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-custom-dependencies/README.md
@@ -2,11 +2,11 @@
 title: Custom dependencies
 ---
 
-Calling `fetch(url)` inside a `load` function registers `url` as a dependency. Sometimes it's not appropriate to use `fetch`, in which case you can specify a dependency manually with the [`depends(url)`](https://kit.svelte.dev/docs/load#invalidation-manual-invalidation) function.
+`load` 関数の中で `fetch(url)` を呼ぶと、`url` を依存関係(dependency)として登録します。`fetch` を使用するのが適切でない場合もありますが、その場合は [`depends(url)`](https://kit.svelte.jp/docs/load#invalidation-manual-invalidation) 関数を使って手動で依存関係を指定することができます。
 
-Since any string that begins with an `[a-z]+:` pattern is a valid URL, we can create custom invalidation keys like `data:now`.
+`[a-z]+:` パターンで始まる文字列であれば有効な URL であるため、`data:now` のようなカスタムの invalidation key を作ることができます。
 
-Update `src/routes/+layout.js` to return a value directly rather than making a `fetch` call, and add the `depends`:
+`src/routes/+layout.js` を更新します。`fetch` を呼び出すのではなく値を直接返すようにし、そして `depends` を追加します。
 
 ```js
 /// file: src/routes/+layout.js
@@ -19,7 +19,7 @@ export async function load({ +++depends+++ }) {
 }
 ```
 
-Now, update the `invalidate` call in `src/routes/[...timezone]/+page.svelte`:
+そして、`src/routes/[...timezone]/+page.svelte` にある `invalidate` 呼び出しも更新します。
 
 ```svelte
 /// file: src/routes/[...timezone]/+page.svelte
diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/05-invalidate-all/README.md b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/05-invalidate-all/README.md
index afd34b194..cca59a7e3 100644
--- a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/05-invalidate-all/README.md
+++ b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/05-invalidate-all/README.md
@@ -2,9 +2,9 @@
 title: invalidateAll
 ---
 
-Finally, there's the nuclear option — `invalidateAll()`. This will indiscriminately re-run all `load` functions for the current page, regardless of what they depend on.
+そして、最後の手段があります — `invalidateAll()` です。これは現在のページに関係する全ての `load` 関数を、何に依存しているかに関係なく全て再実行させます。
 
-Update `src/routes/[...timezone]/+page.svelte` from the previous exercise:
+前回の練習問題から `src/routes/[...timezone]/+page.svelte` を更新します
 
 ```svelte
 /// file: src/routes/[...timezone]/+page.svelte
@@ -26,7 +26,7 @@ Update `src/routes/[...timezone]/+page.svelte` from the previous exercise:
 </script>
 ```
 
-The `depends` call in `src/routes/+layout.js` is no longer necessary:
+`src/routes/+layout.js` にある `depends` 呼び出しはもう必要ありません。
 
 ```js
 /// file: src/routes/+layout.js
@@ -39,4 +39,4 @@ export async function load(---{ depends }---) {
 }
 ```
 
-> `invalidate(() => true)` and `invalidateAll` are _not_ the same. `invalidateAll` also re-runs `load` functions without any `url` dependencies, which `invalidate(() => true)` does not.
+> `invalidate(() => true)` と `invalidateAll` は同じではありません。`invalidateAll` は `url` の依存関係を持たない `load` 関数も再実行させますが、`invalidate(() => true)` はそうではありません。

From 202f2284222ea525c28dad0eeae61f4d821a7d12 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 28 Dec 2022 21:21:27 +0900
Subject: [PATCH 30/60] translate
 04-advanced-sveltekit/05-environment-variables into Japanese

---
 .../01-env-static-private/README.md           | 34 +++++++++----------
 .../02-env-dynamic-private/README.md          |  2 +-
 .../03-env-static-public/README.md            |  6 ++--
 .../04-env-dynamic-public/README.md           |  2 +-
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/content/tutorial/04-advanced-sveltekit/05-environment-variables/01-env-static-private/README.md b/content/tutorial/04-advanced-sveltekit/05-environment-variables/01-env-static-private/README.md
index be3a2abd7..f36d686a3 100644
--- a/content/tutorial/04-advanced-sveltekit/05-environment-variables/01-env-static-private/README.md
+++ b/content/tutorial/04-advanced-sveltekit/05-environment-variables/01-env-static-private/README.md
@@ -2,20 +2,20 @@
 title: $env/static/private
 ---
 
-Environment variables — like API keys and database credentials — can be added to a `.env` file, and they will be made available to your application.
+API キーやデータベースの認証情報などの環境変数は `.env` ファイルに追加することでき、アプリケーションから使えるようになります。
 
-> You can also use `.env.local` or `.env.[mode]` files — see the [Vite documentation](https://vitejs.dev/guide/env-and-mode.html#env-files) for more information). Make sure you add any files containing sensitive information to your `.gitignore` file!
+> また、`.env.local` ファイルや `.env.[mode]` ファイルも使えます — 詳細は [Vite のドキュメント](https://vitejs.dev/guide/env-and-mode.html#env-files) をご覧ください。機密情報を含むファイルは必ず `.gitignore` ファイルに追加してください！
 
-In this exercise, we want to allow the user to enter the website if they know the correct passphrase, using an environment variable.
+この練習問題では、環境変数を使って、正しいパスフレーズを知っているユーザーのみ web サイトを見ることができるようにしたいと思います。
 
-First, in `.env`, add a new environment variable:
+まず、`.env` に新しい環境変数を追加します。
 
 ```env
 /// file: .env
 PASSPHRASE=+++"open sesame"+++
 ```
 
-Open `src/routes/+page.server.js`. Import `PASSPHRASE` from `$env/static/private` and use it inside the [form action](/tutorial/the-form-element):
+`src/routes/+page.server.js` を開いてください。`$env/static/private` から `PASSPHRASE` をインポートし、[form action](/tutorial/the-form-element) の中でそれを使用してください。
 
 ```js
 /// file: src/routes/+page.server.js
@@ -47,15 +47,15 @@ export const actions = {
 };
 ```
 
-The website is now accessible to anyone who knows the correct passphrase.
+正しいパスフレーズを知っている人が、web サイトにアクセスできるようになりました。
 
-> Environment variables in `process.env` are also available via `$env/static/private`.
+> `process.env` にある環境変数も `$env/static/private` 経由で使うことができます。
 
 ## Keeping secrets
 
-It's important that sensitive data doesn't accidentally end up being sent to the browser, where it could easily be stolen by hackers and scoundrels.
+機密データが誤ってブラウザに送信されるとハッカーや悪者に簡単に盗まれてしまうので、そうならないようにすることが重要です。
 
-SvelteKit makes it easy to prevent this from happening. Notice what happens if we try to import `PASSPHRASE` into `src/routes/+page.svelte`:
+SvelteKit では、これを簡単に防ぐことができます。もし `PASSPHRASE` を `src/routes/+page.svelte` にインポートしようとしたらどうなるか確認してみましょう。
 
 ```svelte
 /// file: src/routes/+page.svelte
@@ -65,27 +65,27 @@ SvelteKit makes it easy to prevent this from happening. Notice what happens if w
 </script>
 ```
 
-An error overlay pops up, telling us that `$env/static/private` cannot be imported into client-side code. It can only be imported into server modules:
+エラーオーバーレイが表示され、`$env/static/private` はクライアントサイドコードにインポートできないことを教えてくれます。これはサーバーモジュールにのみインポートすることができます。
 
 - `+page.server.js`
 - `+layout.server.js`
 - `+server.js`
-- any modules ending with `.server.js`
-- any modules inside `src/lib/server`
+- `.server.js` で終わるモジュール
+- `src/lib/server` に置いてあるモジュール
 
-In turn, these modules can only be imported by _other_ server modules.
+同様に、これらのモジュールは他のサーバーモジュールにのみインポートすることができます。
 
 ## Static vs dynamic
 
-The `static` in `$env/static/private` indicates that these values are known at build time, and can be _statically replaced_. This enables useful optimisations:
+`$env/static/private` にある `static` とは、これらの値がビルド時に解決され、 _静的に置き換えられる_ ということを示しています。これによって最適化が可能になります。
 
 ```js
 import { FEATURE_FLAG_X } from '$env/static/private';
 
 if (FEATURE_FLAG_X === 'enabled') {
-	// code in here will be removed from the build output
-	// if FEATURE_FLAG_X is not enabled
+	// FEATURE_FLAG_X が enabled でない場合、
+	// ここにあるコードはビルド出力から削除されます
 }
 ```
 
-In some cases you might need to refer to environment variables that are _dynamic_ — in other words, not known until we run the app. We'll cover this case in the next exercise.
+場合によっては、 _動的_ な環境変数 — 言い換えると、アプリの実行時までわからない環境変数を参照する必要があるかもしれません。これについては、次の練習問題で説明します。
diff --git a/content/tutorial/04-advanced-sveltekit/05-environment-variables/02-env-dynamic-private/README.md b/content/tutorial/04-advanced-sveltekit/05-environment-variables/02-env-dynamic-private/README.md
index 4f7051798..7562e64f5 100644
--- a/content/tutorial/04-advanced-sveltekit/05-environment-variables/02-env-dynamic-private/README.md
+++ b/content/tutorial/04-advanced-sveltekit/05-environment-variables/02-env-dynamic-private/README.md
@@ -2,7 +2,7 @@
 title: $env/dynamic/private
 ---
 
-If you need to read the values of environment variables when the app runs, as opposed to when the app is built, you can use `$env/dynamic/private` instead of `$env/static/private`:
+アプリのビルド時ではなく、アプリの実行時に環境変数の値を読む必要がある場合、`$env/static/private` の代わりに `$env/dynamic/private` を使用することができます。
 
 ```js
 /// file: src/routes/+page.server.js
diff --git a/content/tutorial/04-advanced-sveltekit/05-environment-variables/03-env-static-public/README.md b/content/tutorial/04-advanced-sveltekit/05-environment-variables/03-env-static-public/README.md
index 2f4e10d22..5c41a8d9a 100644
--- a/content/tutorial/04-advanced-sveltekit/05-environment-variables/03-env-static-public/README.md
+++ b/content/tutorial/04-advanced-sveltekit/05-environment-variables/03-env-static-public/README.md
@@ -2,16 +2,16 @@
 title: $env/static/public
 ---
 
-Some environment variables _can_ be safely exposed to the browser. These are distinguished from private environment variables with a `PUBLIC_` prefix.
+ブラウザに公開しても安全な環境変数もあります。これらは `PUBLIC_` プリフィクスを付けることで、プライベートな環境変数と区別します。
 
-Add values to the two public environment variables in `.env`:
+`.env` にある2つのパブリックな環境変数に値を追加します。
 
 ```env
 PUBLIC_THEME_BACKGROUND=+++"steelblue"+++
 PUBLIC_THEME_FOREGROUND=+++"bisque"+++
 ```
 
-Then, import them into `src/routes/+page.svelte`:
+そして、これらを `src/routes/+page.svelte` にインポートします。
 
 ```svelte
 /// file: src/routes/+page.svelte
diff --git a/content/tutorial/04-advanced-sveltekit/05-environment-variables/04-env-dynamic-public/README.md b/content/tutorial/04-advanced-sveltekit/05-environment-variables/04-env-dynamic-public/README.md
index 5a70d628b..71abc80c5 100644
--- a/content/tutorial/04-advanced-sveltekit/05-environment-variables/04-env-dynamic-public/README.md
+++ b/content/tutorial/04-advanced-sveltekit/05-environment-variables/04-env-dynamic-public/README.md
@@ -2,7 +2,7 @@
 title: $env/dynamic/public
 ---
 
-As with [private environment variables](/tutorial/env-static-private), it's preferable to use static values if possible, but if necessary we can use dynamic values instead:
+[プライベートな環境変数](/tutorial/env-static-private) と同様、可能なら静的な値を使用することが望ましいですが、必要であれば代わりに動的な値を使用することができます。
 
 ```svelte
 <script>

From 2846d29884f39da82072ee2f0dce1ce13c95504f Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 28 Dec 2022 23:16:47 +0900
Subject: [PATCH 31/60] translate 01-svelte/01-introduction into Japanese

---
 .../03-dynamic-attributes/README.md                | 14 +++++++-------
 .../01-svelte/01-introduction/04-styling/README.md |  4 ++--
 .../01-introduction/05-nested-components/README.md | 10 +++++-----
 .../01-introduction/06-html-tags/README.md         |  8 ++++----
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md b/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md
index b17bb93be..a656e3e46 100644
--- a/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md
+++ b/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md
@@ -2,31 +2,31 @@
 title: Dynamic attributes
 ---
 
-Just like you can use curly braces to control text, you can use them to control element attributes.
+テキストをコントロールするのに中括弧を使えるのと同じように、要素の属性をコントロールするのに中括弧を使うことができます。
 
-Our image is missing a `src` — let's add one:
+画像 (image) に `src` がありません。これを追加してみましょう。
 
 ```svelte
 <img +++src={src}+++ />
 ```
 
-That's better. But Svelte is giving us a warning:
+これでよくなりました。ただし、まだ警告が表示され続けています。
 
 > A11y: &lt;img&gt; element should have an alt attribute
 
-When building web apps, it's important to make sure that they're _accessible_ to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup.
+Webアプリケーションは、例えば視覚や動作に障害のある方や、高スペックな端末や高速なインターネット回線を持っていない方など、可能な限り幅広いユーザーにとって*使いやすいものである*ことが重要です。アクセシビリティ(Accessibility、略:a11y)を正しく行うことは簡単ではありませんが、Svelteは警告を表示してa11yを正しく行う手助けをしてくれます。
 
-In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
+この場合、スクリーンリーダー(画面読み上げソフト)を使用するユーザーやインターネット回線が低速・不安定で画像をダウンロードできないユーザーに必要な`alt`という画像を説明する属性が足りていません。追加しましょう。
 
 ```svelte
 <img src={src} +++alt="A man dances."+++ />
 ```
 
-We can use curly braces _inside_ attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `<script>` block.
+要素の*中*でも中括弧を使用することができます。`<script>`ブロックの中に`name`変数を宣言し、`A man dances.`を`"{name} dances."`に変更してみましょう。
 
 ## Shorthand attributes
 
-It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
+`src={src}`のように、属性の名前と値の変数が一致することは珍しくありません。このような場合、Svelteでは省略して書くことができます。
 
 ```svelte
 <img +++{src}+++ alt="A man dances." />
diff --git a/content/tutorial/01-svelte/01-introduction/04-styling/README.md b/content/tutorial/01-svelte/01-introduction/04-styling/README.md
index ce87e1afe..6cc5accd9 100644
--- a/content/tutorial/01-svelte/01-introduction/04-styling/README.md
+++ b/content/tutorial/01-svelte/01-introduction/04-styling/README.md
@@ -2,7 +2,7 @@
 title: Styling
 ---
 
-HTMLと同じように、コンポーネントには `<style>` タグを置くことができます。`<p>` 要素にいくつかスタイルを追加してみましょう。
+HTMLと同じように、コンポーネントには`<style>`タグを置くことができます。`<p>`要素にいくつかスタイルを追加してみましょう。
 
 ```svelte
 <p>This is a paragraph.</p>
@@ -16,4 +16,4 @@ HTMLと同じように、コンポーネントには `<style>` タグを置く
 </style>
 ```
 
-重要なのは、これらのスタイルが _このコンポーネントにのみ適用されるということです_ 。次のステップで説明しますが、別の箇所の `<p>` 要素のスタイルに影響を与えてしまうようなことはありません。
+重要なのは、これらのスタイルが*このコンポーネントにのみ適用されるということです*。次のステップで説明しますが、別の箇所の`<p>`要素のスタイルに影響を与えてしまうようなことはありません。
diff --git a/content/tutorial/01-svelte/01-introduction/05-nested-components/README.md b/content/tutorial/01-svelte/01-introduction/05-nested-components/README.md
index 2c56dac0d..0b6cca74b 100644
--- a/content/tutorial/01-svelte/01-introduction/05-nested-components/README.md
+++ b/content/tutorial/01-svelte/01-introduction/05-nested-components/README.md
@@ -2,9 +2,9 @@
 title: Nested components
 ---
 
-It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them in our markup.
+アプリ全体を単一のコンポーネントにまとめるのは現実的ではありません。代わりに、他のファイルからコンポーネントをインポートし、マークアップでそれを使用することができます。
 
-Add a `<script>` tag that imports `Nested.svelte`...
+`<script>` タグを追加して `Nested.svelte` をインポートしましょう…
 
 ```svelte
 +++<script>
@@ -12,13 +12,13 @@ Add a `<script>` tag that imports `Nested.svelte`...
 </script>+++
 ```
 
-...and include a `<Nested />` component:
+…そして `<Nested />` コンポーネントを使用します。
 
 ```svelte
 <p>This is a paragraph.</p>
 +++<Nested />+++
 ```
 
-Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.
+`Nested.svelte` には `<p>` 要素がありますが、`App.svelte` のスタイルが適用されていないことに注目してください。
 
-> Component names are always capitalised, to distinguish them from HTML elements.
+> HTML 要素と区別するため、コンポーネントの名前は常に大文字で始まっています 
diff --git a/content/tutorial/01-svelte/01-introduction/06-html-tags/README.md b/content/tutorial/01-svelte/01-introduction/06-html-tags/README.md
index f4fa766ca..d81aa0de3 100644
--- a/content/tutorial/01-svelte/01-introduction/06-html-tags/README.md
+++ b/content/tutorial/01-svelte/01-introduction/06-html-tags/README.md
@@ -2,14 +2,14 @@
 title: HTML tags
 ---
 
-Ordinarily, strings are inserted as plain text, meaning that characters like `<` and `>` have no special meaning.
+通常、文字列はプレーンテキストとして挿入され、`<`や`>`のような文字は特別な意味を持ちません。
 
-But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML.
+しかし、HTMLをコンポーネントに直接レンダリングする必要がある場合もあります。例えば、あなたが今読んでいる文章はマークダウンファイルに存在し、HTMLのblobとしてこのページに含まれています。
 
-In Svelte, you do this with the special `{@html ...}` tag:
+Svelteでは、`{@html ...}` という特別なタグを使ってこれを行います。
 
 ```svelte
 <p>{+++@html+++ string}</p>
 ```
 
-> Svelte doesn't perform any sanitization of the expression inside `{@html ...}` before it gets inserted into the DOM. In other words, if you use this feature it's critical that you manually escape HTML that comes from sources you don't trust, otherwise you risk exposing your users to XSS attacks.
+> Svelte は DOM に挿入される前に `{@html ...}` 内の式のサニタイズを行いません。違う言い方をすれば、この機能を使用する場合は信頼できないソースから来た HTML を手動でエスケープすることが重要です、そうしなければユーザーをXSS攻撃にさらす危険性があります。

From 1430829e147f9ba09496b5c3cd0a559077cca470 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 00:19:24 +0900
Subject: [PATCH 32/60] translate 01-svelte/02-reactivity into Japanese

---
 .../01-reactive-assignments/README.md              |  8 ++++----
 .../02-reactive-declarations/README.md             | 10 +++++-----
 .../02-reactivity/03-reactive-statements/README.md |  6 +++---
 .../04-updating-arrays-and-objects/README.md       | 14 +++++++-------
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md b/content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md
index 32ef14170..c59ab4b58 100644
--- a/content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md
+++ b/content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md
@@ -2,15 +2,15 @@
 title: Assignments
 ---
 
-At the heart of Svelte is a powerful system of _reactivity_ for keeping the DOM in sync with your application state — for example, in response to an event.
+Svelteの中心には、DOMを（例えば、イベントに応じて）アプリケーションの状態に同期し続けさせるための強力な *reactivity* システムがあります。
 
-To demonstrate it, we first need to wire up an event handler (we'll learn more about these [later](/tutorial/dom-events)):
+これを実演するには、まずイベントハンドラ (これは[後ほど](/tutorial/dom-events)学習します) を定義する必要があります。
 
 ```svelte
 <button +++on:click={increment}+++>
 ```
 
-Inside the `increment` function, all we need to do is change the value of `count`:
+`increment` 関数の内側で必要なのは `count` の値を変更することだけです。
 
 ```js
 function increment() {
@@ -18,4 +18,4 @@ function increment() {
 }
 ```
 
-Svelte 'instruments' this assignment with some code that tells it the DOM will need to be updated.
+Svelteは、DOMが更新される必要があることを伝えるコードをこの代入に'取り付け'ます。
diff --git a/content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md b/content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md
index bb8d1a8ae..9ba0b857a 100644
--- a/content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md
+++ b/content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md
@@ -2,18 +2,18 @@
 title: Declarations
 ---
 
-Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from _other_ parts (such as a `fullname` derived from a `firstname` and a `lastname`), and recomputed whenever they change.
+Svelte は、コンポーネントの状態が変更されると自動的に DOM を更新します。しばしば、コンポーネントの状態には、 _他の_ 状態から計算しなければならない部分があり (例えば、`firstname` と `lastname` から派生する `fullname`)、それらが変更されるたびに再計算しなければなりません。
 
-For these, we have _reactive declarations_. They look like this:
+これに対応するために、 _リアクティブ宣言(reactive declarations)_ があります。次のように記述します。
 
 ```js
 let count = 0;
 +++$: doubled = count * 2;+++
 ```
 
-> Don't worry if this looks a little alien. It's [valid](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) (if unconventional) JavaScript, which Svelte interprets to mean 're-run this code whenever any of the referenced values change'. Once you get used to it, there's no going back.
+> これが少し異質に見えても心配しないでください。これは（見慣れないかもしれませんが） [正しい](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/label) JavaScript で、Svelte は「参照される値が変わるたびにこのコードを再実行する」という意味だと解釈します。一度慣れてしまえば、もう戻れません。
 
-Let's use `doubled` in our markup:
+マークアップで `doubled` を使ってみましょう。
 
 ```svelte
 <button>...</button>
@@ -21,4 +21,4 @@ Let's use `doubled` in our markup:
 +++<p>{count} doubled is {doubled}</p>+++
 ```
 
-Of course, you could just write `{count * 2}` in the markup instead — you don't have to use reactive values. Reactive values become particularly valuable (no pun intended) when you need to reference them multiple times, or you have values that depend on _other_ reactive values.
+もちろん、代わりに `{count * 2}` とマークアップに書くだけでもよいでしょう。リアクティブな値を使用する必要はありません。リアクティブな値は、複数回参照する必要がある場合や、*他の* リアクティブな値に依存する値がある場合に特に価値があります。
diff --git a/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md b/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md
index 294cea314..e376be754 100644
--- a/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md
+++ b/content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md
@@ -2,7 +2,7 @@
 title: Statements
 ---
 
-We're not limited to declaring reactive _values_ — we can also run arbitrary _statements_ reactively. For example, we can log the value of `count` whenever it changes:
+リアクティブな *値* を宣言するだけでなく、任意の *ステートメント* をリアクティブに実行することもできます。例えば、`count` の値が変化するたびにログを取ることができます。
 
 ```js
 let count = 0;
@@ -10,7 +10,7 @@ let count = 0;
 +++$: console.log(`the count is ${count}`);+++
 ```
 
-You can easily group statements together with a block:
+ブロックで簡単にステートメントをグループ化することができます。
 
 ```js
 $: +++{+++
@@ -19,7 +19,7 @@ $: +++{+++
 +++}+++
 ```
 
-You can even put the `$:` in front of things like `if` blocks:
+`if` ブロックなどの前に `$:` を置くこともできます。
 
 ```js
 $: +++if (count >= 10)+++ {
diff --git a/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md b/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md
index 19bfa74b3..bb9f943f0 100644
--- a/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md
+++ b/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md
@@ -2,9 +2,9 @@
 title: Updating arrays and objects
 ---
 
-Because Svelte's reactivity is triggered by assignments, using array methods like `push` and `splice` won't automatically cause updates. For example, clicking the 'Add a number' button doesn't currently do anything.
+Svelte のりアクティビティは代入によってトリガーされるため、`push` や `splice` のような配列のメソッドを使用しても更新が自動的に行われません。例えば、'Add a number' ボタンをクリックしても今のところ何も起こりません。
 
-One way to fix that is to add an assignment that would otherwise be redundant:
+これを修正する方法の1つとして、冗長に見えるかもしれませんが、代入を追加することです。
 
 ```js
 function addNumber() {
@@ -13,7 +13,7 @@ function addNumber() {
 }
 ```
 
-But there's a more idiomatic solution:
+もう少し慣用的な解決策もあります。
 
 ```js
 function addNumber() {
@@ -21,9 +21,9 @@ function addNumber() {
 }
 ```
 
-You can use similar patterns to replace `pop`, `shift`, `unshift` and `splice`.
+同様のパターンで、`pop`、`shift`、`unshift`、`splice` を置き換えることができます。
 
-Assignments to _properties_ of arrays and objects — e.g. `obj.foo += 1` or `array[i] = x` — work the same way as assignments to the values themselves.
+配列やオブジェクトの *プロパティ* への代入（例：`obj.foo += 1` や `array[i] = x`）は値自体への代入と同じように動作します。
 
 ```js
 function addNumber() {
@@ -31,11 +31,11 @@ function addNumber() {
 }
 ```
 
-A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment. For example this...
+大まかなまとめ: 更新される変数の名前は、代入の左側に置かなければならない。例えばこれは…
 
 ```js
 const foo = obj.foo;
 foo.bar = 'baz';
 ```
 
-...won't trigger reactivity on `obj.foo.bar`, unless you follow it up with `obj = obj`.
+…`obj.foo.bar` に対するリアクティビティはトリガーされません。もしトリガーしたければ、`obj = obj` を続けて書く必要があります。

From 519f8e6fb6ddfbcd0782cb0f0fd1e3e4bac4a2e4 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 00:24:01 +0900
Subject: [PATCH 33/60] translate 01-svelte/03-props into Japanese

---
 .../01-svelte/03-props/01-declaring-props/README.md         | 6 +++---
 .../tutorial/01-svelte/03-props/02-default-values/README.md | 4 ++--
 .../tutorial/01-svelte/03-props/03-spread-props/README.md   | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/tutorial/01-svelte/03-props/01-declaring-props/README.md b/content/tutorial/01-svelte/03-props/01-declaring-props/README.md
index 54f95e4b8..606293a38 100644
--- a/content/tutorial/01-svelte/03-props/01-declaring-props/README.md
+++ b/content/tutorial/01-svelte/03-props/01-declaring-props/README.md
@@ -2,9 +2,9 @@
 title: Declaring props
 ---
 
-So far, we've dealt exclusively with internal state — that is to say, the values are only accessible within a given component.
+これまで、内部状態についてのみ扱ってきました。- つまり、値はそのコンポーネント内からしかアクセスできないということです。
 
-In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare _properties_, generally shortened to 'props'. In Svelte, we do that with the `export` keyword. Edit the `Nested.svelte` component:
+実際のアプリケーションでは、あるコンポーネントから、その子コンポーネントにデータを渡す必要があります。そのためには、*プロパティ(properties)*を宣言する必要があります。通常は 'props'と省略されます。Svelteでは、`export`というキーワードを使用してこれを行います。`Nested.svelte`コンポーネントを編集してみましょう。
 
 ```svelte
 <script>
@@ -12,4 +12,4 @@ In any real application, you'll need to pass data from one component down to its
 </script>
 ```
 
-> Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature.
+> `$:`と同じように、最初は少し奇妙に感じるかもしれません。これはJavaScriptモジュールの通常の`export`とは動作が異なりますので！とりあえず今は使っていってください。すぐに慣れるでしょう。
diff --git a/content/tutorial/01-svelte/03-props/02-default-values/README.md b/content/tutorial/01-svelte/03-props/02-default-values/README.md
index d6b44849d..fb87aa941 100644
--- a/content/tutorial/01-svelte/03-props/02-default-values/README.md
+++ b/content/tutorial/01-svelte/03-props/02-default-values/README.md
@@ -2,7 +2,7 @@
 title: Default values
 ---
 
-We can easily specify default values for props in `Nested.svelte`:
+`Nested.svelte`のプロパティのデフォルト値を簡単に指定することができます。
 
 ```svelte
 <script>
@@ -10,7 +10,7 @@ We can easily specify default values for props in `Nested.svelte`:
 </script>
 ```
 
-If we now add a second component _without_ an `answer` prop, it will fall back to the default:
+`answer`プロパティなしで2つ目のコンポーネントを追加すると、デフォルト値にフォールバックします。
 
 ```svelte
 <Nested answer={42}/>
diff --git a/content/tutorial/01-svelte/03-props/03-spread-props/README.md b/content/tutorial/01-svelte/03-props/03-spread-props/README.md
index 60ac0b11a..69bb2dc10 100644
--- a/content/tutorial/01-svelte/03-props/03-spread-props/README.md
+++ b/content/tutorial/01-svelte/03-props/03-spread-props/README.md
@@ -2,10 +2,10 @@
 title: Spread props
 ---
 
-If you have an object of properties, you can 'spread' them onto a component instead of specifying each one:
+オブジェクトがプロパティを持っている場合、それぞれ個別に指定する代わりに、コンポーネントに '展開'することができます。
 
 ```svelte
 <PackageInfo +++{...pkg}+++/>
 ```
 
-> Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases.
+> 逆に、`export`で宣言されていないものも含め、もしコンポーネントに渡されたすべてのプロパティ(props)を参照する必要がある場合は、`$$props`で直接参照することができます。これは、Svelteの最適化が難しいため、一般的には推奨されませんが、ごくまれなケースでは便利です。

From 5eee71e7501de6f7461942040ca876621cfe39eb Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 00:50:52 +0900
Subject: [PATCH 34/60] translate 01-svelte/04-logic into Japanese

---
 .../01-svelte/04-logic/01-if-blocks/README.md        |  6 +++---
 .../01-svelte/04-logic/02-else-blocks/README.md      |  4 ++--
 .../01-svelte/04-logic/03-else-if-blocks/README.md   |  2 +-
 .../01-svelte/04-logic/04-each-blocks/README.md      |  8 ++++----
 .../04-logic/05-keyed-each-blocks/README.md          | 12 ++++++------
 .../01-svelte/04-logic/06-await-blocks/README.md     |  6 +++---
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md b/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md
index 5fe864050..f4535d7e1 100644
--- a/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md
+++ b/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md
@@ -2,9 +2,9 @@
 title: If blocks
 ---
 
-HTML doesn't have a way of expressing _logic_, like conditionals and loops. Svelte does.
+HTML には条件式やループのような *ロジック* を表現する方法がありません。Svelteにはあります。
 
-To conditionally render some markup, we wrap it in an `if` block:
+条件付きでマークアップをレンダリングするために、私たちはそれを `if` ブロックで囲みます。
 
 ```svelte
 +++{#if user.loggedIn}+++
@@ -20,4 +20,4 @@ To conditionally render some markup, we wrap it in an `if` block:
 +++{/if}+++
 ```
 
-Try it — update the component, and click on the buttons.
+試してみてください。コンポーネントを更新し、ボタンをクリックしてみてください。
diff --git a/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md b/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md
index a10eb4806..0b7ecd6a4 100644
--- a/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md
+++ b/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md
@@ -2,7 +2,7 @@
 title: Else blocks
 ---
 
-Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block:
+2つの条件（`if user.loggedIn` と `if !user.loggedIn`）は相互に排他的なので、`else` ブロックを使用することでこのコンポーネントを少しシンプルにすることができます。
 
 ```svelte
 {#if user.loggedIn}
@@ -16,4 +16,4 @@ Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are
 {/if}
 ```
 
-> A `#` character always indicates a _block opening_ tag. A `/` character always indicates a _block closing_ tag. A `:` character, as in `{:else}`, indicates a _block continuation_ tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
+> `#` の文字は常に *ブロックの開始* タグを示します。 `/` の文字は常に *ブロックの終了* タグを示します。  `:` の文字は `{:else}` のように *ブロックの継続* タグを示します。心配しないでください。あなたは既にSvelteがHTMLに追加する構文のほとんどを学んでいます。
diff --git a/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md b/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md
index cd482d603..07087c3cd 100644
--- a/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md
+++ b/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md
@@ -2,7 +2,7 @@
 title: Else-if blocks
 ---
 
-Multiple conditions can be 'chained' together with `else if`:
+複数の条件を `else if` と一緒に '連結' することができます。
 
 ```svelte
 {#if x > 10}
diff --git a/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md b/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md
index f277503ce..e8455c1fb 100644
--- a/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md
+++ b/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md
@@ -2,7 +2,7 @@
 title: Each blocks
 ---
 
-If you need to loop over lists of data, use an `each` block:
+データのリストをループさせる必要がある場合は、`each` ブロックを使ってください。
 
 ```svelte
 <ul>
@@ -14,9 +14,9 @@ If you need to loop over lists of data, use an `each` block:
 </ul>
 ```
 
-> The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`.
+> 式(この場合は `cats`)は、任意の配列や配列に似たオブジェクトにすることができます(つまり、`length`プロパティを持っています)。一般的な反復可能なデータ構造は `each [...iterable]` を用いてループさせることができます。
 
-You can get the current _index_ as a second argument, like so:
+第2引数として現在の *index* をこのように取得することができます。
 
 ```svelte
 {#each cats as cat, i}
@@ -26,4 +26,4 @@ You can get the current _index_ as a second argument, like so:
 {/each}
 ```
 
-If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`.
+お好みであれば、分割代入（`each cats as { id, name }`）を使い、`cat.id` と `cat.name` を `id` と `name` に置き換えることができます。
diff --git a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md
index d6c0aa3c2..4eef5b461 100644
--- a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md
+++ b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md
@@ -2,13 +2,13 @@
 title: Keyed each blocks
 ---
 
-By default, when you modify the value of an `each` block, it will add and remove items at the _end_ of the block, and update any values that have changed. That might not be what you want.
+デフォルトでは、`each` ブロックの値を変更すると、ブロックの *末尾* にアイテムを追加・削除し、変更された値を更新します。これはあなたが望むものではないかもしれません。
 
-It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice what happens: It removes the first `<Thing>` component, but the _last_ DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji.
+説明するより見ていただいたほうがわかりやすいしょう。'Remove first thing' ボタンを何度かクリックして、何が起きるか確認してください。先頭の `<Thing>` コンポーネントは削除されず、*末尾の* DOM ノードが削除されます。そして残りの DOM ノードの `name` の値は更新されますが、絵文字は更新されません。
 
-Instead, we'd like to remove only the first `<Thing>` component and its DOM node, and leave the others unaffected.
+代わりに、先頭の `<Thing>` コンポーネントとその DOM ノードだけを削除して、残りには影響を与えないようにしたいと思います。
 
-To do that, we specify a unique identifier (or "key") for the `each` block:
+そのためには、`each` ブロックに一意な識別子 (または"key") を指定します。
 
 ```svelte
 {#each things as thing (thing.id)}
@@ -16,6 +16,6 @@ To do that, we specify a unique identifier (or "key") for the `each` block:
 {/each}
 ```
 
-Here, `(thing.id)` is the _key_, which tells Svelte how to figure out which DOM node to change when the component updates.
+ここで、`(thing.id)` は *key* であり、コンポーネントが更新されたときに変更するDOMノードを特定する方法を Svelte に伝えます。
 
-> You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.
+> Svelte は内部的に `Map` を使用しているので、どんなオブジェクトでもキーとして使用できます。つまり `(thing.id)` の代わりに `(thing)` を使うことができます。しかし、文字列または数値を使用する方が一般的に安全です。なぜなら、例えばAPIサーバーからの新しいデータで更新する場合に、参照が等しくなくても同一性が持続することを意味するからです。
diff --git a/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md b/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md
index f045882f4..04d3e9c96 100644
--- a/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md
+++ b/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md
@@ -2,7 +2,7 @@
 title: Await blocks
 ---
 
-Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to _await_ the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup:
+ほとんどの webアプリケーションでは、どこかの時点で非同期のデータを扱わなければなりません。Svelte ではマークアップの中で直接 [promises](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises) の値を簡単に *await* することができます。
 
 ```svelte
 {#await promise}
@@ -14,9 +14,9 @@ Most web applications have to deal with asynchronous data at some point. Svelte
 {/await}
 ```
 
-> Only the most recent `promise` is considered, meaning you don't need to worry about race conditions.
+> 直近の `promise` だけが処理されるので、他の非同期処理の状態を気にする必要はありません。
 
-If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves:
+promise が reject できないことがわかっている場合は、`catch` ブロックを省略することができます。また promise が resolve するまで何も表示したくない場合は、最初のブロックを省略することもできます。
 
 ```svelte
 {#await promise then number}

From cc1b439e20a39041b9a54dca917533f3ef956e32 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 01:06:43 +0900
Subject: [PATCH 35/60] translate 01-svelte/05-events into Japanese

---
 .../05-events/01-dom-events/README.md         |  2 +-
 .../05-events/02-inline-handlers/README.md    |  6 ++---
 .../05-events/03-event-modifiers/README.md    | 22 +++++++++----------
 .../05-events/04-component-events/README.md   | 10 ++++-----
 .../05-events/05-event-forwarding/README.md   |  8 +++----
 .../06-dom-event-forwarding/README.md         |  4 ++--
 6 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/content/tutorial/01-svelte/05-events/01-dom-events/README.md b/content/tutorial/01-svelte/05-events/01-dom-events/README.md
index 64cfa3217..5dadc07f7 100644
--- a/content/tutorial/01-svelte/05-events/01-dom-events/README.md
+++ b/content/tutorial/01-svelte/05-events/01-dom-events/README.md
@@ -2,7 +2,7 @@
 title: DOM events
 ---
 
-As we've briefly seen already, you can listen to any event on an element with the `on:` directive:
+今までざっと見てきたように、`on:` ディレクティブを使用して要素の任意のイベントをリスニングできます。
 
 ```svelte
 <div on:mousemove={handleMousemove}>
diff --git a/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md b/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md
index 40585909f..77bfc43ca 100644
--- a/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md
+++ b/content/tutorial/01-svelte/05-events/02-inline-handlers/README.md
@@ -2,7 +2,7 @@
 title: Inline handlers
 ---
 
-You can also declare event handlers inline:
+イベントハンドラをインラインで宣言することもできます。
 
 ```svelte
 <div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
@@ -10,6 +10,6 @@ You can also declare event handlers inline:
 </div>
 ```
 
-The quote marks are optional, but they're helpful for syntax highlighting in some environments.
+`""` 引用符はオプションですが、一部の環境で構文を強調表示する場合に役立ちます。
 
-> In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose.
+> 一部のフレームワークでは、パフォーマンス上の理由から、特にループ処理内で、イベントハンドラをインラインで宣言しないように推奨されています。しかし、この推奨事項はSvelteには当てはまりません。あなたがどのように書いたとしても、常に適切にコンパイルします。
diff --git a/content/tutorial/01-svelte/05-events/03-event-modifiers/README.md b/content/tutorial/01-svelte/05-events/03-event-modifiers/README.md
index 71954b2fc..82ae563f2 100644
--- a/content/tutorial/01-svelte/05-events/03-event-modifiers/README.md
+++ b/content/tutorial/01-svelte/05-events/03-event-modifiers/README.md
@@ -2,7 +2,7 @@
 title: Event modifiers
 ---
 
-DOM event handlers can have _modifiers_ that alter their behaviour. For example, a handler with a `once` modifier will only run a single time:
+DOM イベントハンドラには、それらの動作を変更する修飾子（*modifiers*）を設定することができます。たとえば、`once` 修飾子をハンドラに設定すると、1回だけ実行します。
 
 ```svelte
 <script>
@@ -16,15 +16,15 @@ DOM event handlers can have _modifiers_ that alter their behaviour. For example,
 </button>
 ```
 
-The full list of modifiers:
+イベント修飾子の一覧:
 
-- `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example.
-- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
-- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
-- `nonpassive` — explicitly set `passive: false`
-- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
-- `once` — remove the handler after the first time it runs
-- `self` — only trigger handler if event.target is the element itself
-- `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.
+* `preventDefault` — ハンドラを実行する前に `event.preventDefault()` を呼び出します。たとえば、クライアントのフォーム処理に役立ちます。
+* `stopPropagation` — 次の要素にイベントが伝播しないように `event.stopPropagation()` を呼び出します。
+* `passive` — タッチ/ホイールイベントでスクロールのパフォーマンスを向上させます（Svelte が安全な場所に自動的に追加します）。
+* `nonpassive` — `passive: false` を明示的に設定します。
+* `capture` — *バブリング* フェーズではなく、*キャプチャ* フェーズ中にハンドラを起動します。([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
+* `once` — ハンドラを最初に実行した後に削除します。
+* `self` — 設定した要素が event.target の場合にのみ、ハンドラをトリガします。
+* `trusted` — `event.isTrusted` が `true` の場合にのみハンドラをトリガします。つまり、ユーザーのアクションによってイベントがトリガされた場合です。
 
-You can chain modifiers together, e.g. `on:click|once|capture={...}`.
+イベント修飾子を連結することができます。（例）`on:click|once|capture={...}`
diff --git a/content/tutorial/01-svelte/05-events/04-component-events/README.md b/content/tutorial/01-svelte/05-events/04-component-events/README.md
index 0df2bc68f..b92712e29 100644
--- a/content/tutorial/01-svelte/05-events/04-component-events/README.md
+++ b/content/tutorial/01-svelte/05-events/04-component-events/README.md
@@ -2,7 +2,7 @@
 title: Component events
 ---
 
-Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`:
+コンポーネントはイベントを発信することもできます。そのためには、イベントディスパッチャを作成する必要があります。`Inner.svelte` を更新してください。
 
 ```svelte
 <script>
@@ -18,10 +18,10 @@ Components can also dispatch events. To do so, they must create an event dispatc
 </script>
 ```
 
-> `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance.
+> `createEventDispatcher` はコンポーネントを最初にインスタンス化するときに呼び出す必要があります。（後から `setTimeout` のコールバックなどの内側で呼び出すことはできません。）これにより `dispatch` をコンポーネントインスタンスに関連づけます。
 
-Notice that the `App` component is listening to the messages dispatched by `Inner` component thanks to the `on:message` directive. This directive is an attribute prefixed with `on:` followed by the event name that we are dispatching (in this case, `message`).
+`App` コンポーネントは `Inner` コンポーネントによってディスパッチされたメッセージを `on:message` ディレクティブによって受信していることに注目してください。このディレクティブは、`on:` の前にディスパッチするイベント名(この場合は `message`)を付加した属性です。
 
-Without this attribute, messages would still be dispatched, but the App would not react to it. You can try removing the `on:message` attribute and pressing the button again.
+この属性がない場合、メッセージはディスパッチされますが、アプリはそれに反応しません。`on:message`属性を削除して、もう一度ボタンを押してみてください。
 
-> You can also try changing the event name to something else. For instance, change `dispatch('message')` to `dispatch('myevent')` in `Inner.svelte` and change the attribute name from `on:message` to `on:myevent` in the `App.svelte` component.
+> イベント名を他のものに変更してみることもできます。例えば、`Inner.svelte` の `dispatch('message')` を `dispatch('myevent')` に変更し、`App.svelte` コンポーネントの属性名を `on:message` から `on:myevent` に変更します。
diff --git a/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md b/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md
index 3daff332a..747eef3a8 100644
--- a/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md
+++ b/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md
@@ -2,11 +2,11 @@
 title: Event forwarding
 ---
 
-Unlike DOM events, component events don't _bubble_. If you want to listen to an event on some deeply nested component, the intermediate components must _forward_ the event.
+DOM イベントとは異なり、コンポーネントのイベントは *バブル* しません。もし深くネストされたコンポーネントでイベントをリッスンする場合、中間コンポーネントはイベントを *フォワード* する必要があります。
 
-In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
+今回のケースでは、[前のチャプタ](/tutorial/component-events)と同じように `App.svelte` と `Inner.svelte` がありますが、`<Inner/>` を含む `Outer.svelte` コンポーネントがあります。
 
-One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
+この問題を解決する1つの方法は、`Outer.svelte` に `createEventDispatcher` を追加して、`message` イベントをリッスンして、そのハンドラを作成することです。
 
 ```svelte
 <script>
@@ -23,7 +23,7 @@ One way we could solve the problem is adding `createEventDispatcher` to `Outer.s
 <Inner on:message={forward}/>
 ```
 
-But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'.
+しかし、これでは書くコードが多いので、Svelte は同等のショートハンドを提供します。値のない `on:message` イベントディレクティブは「全ての `message` イベントをフォワードする」ことを意味します。
 
 ```svelte
 <script>
diff --git a/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md b/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md
index 6932c2994..56b45fdd8 100644
--- a/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md
+++ b/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md
@@ -2,9 +2,9 @@
 title: DOM event forwarding
 ---
 
-Event forwarding works for DOM events too.
+イベントフォワーディングは DOM イベントでも機能します。
 
-We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
+`<CustomButton>` でのクリックの通知を受け取るためには、`CustomButton.svelte` にある `<button>` 要素の `click` イベントをフォワードする必要があります。
 
 ```svelte
 <button on:click>

From 32b4ba7bc5e596234b39f31c3761a2fd748d38e6 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 12:16:01 +0900
Subject: [PATCH 36/60] translate 01-svelte/06-bindings into Japanese

---
 .../01-svelte/06-bindings/01-text-inputs/README.md     |  8 ++++----
 .../01-svelte/06-bindings/02-numeric-inputs/README.md  |  4 ++--
 .../01-svelte/06-bindings/03-checkbox-inputs/README.md |  2 +-
 .../01-svelte/06-bindings/04-group-inputs/README.md    | 10 +++++-----
 .../01-svelte/06-bindings/05-textarea-inputs/README.md |  8 ++++----
 .../01-svelte/06-bindings/06-select-bindings/README.md |  6 +++---
 .../06-bindings/07-multiple-select-bindings/README.md  |  6 +++---
 7 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/content/tutorial/01-svelte/06-bindings/01-text-inputs/README.md b/content/tutorial/01-svelte/06-bindings/01-text-inputs/README.md
index ea806586c..a2d976259 100644
--- a/content/tutorial/01-svelte/06-bindings/01-text-inputs/README.md
+++ b/content/tutorial/01-svelte/06-bindings/01-text-inputs/README.md
@@ -2,14 +2,14 @@
 title: Text inputs
 ---
 
-As a general rule, data flow in Svelte is _top down_ — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
+原則、Svelteのデータフローはトップダウンです。親コンポーネントは子コンポーネントにプロパティをセットできますし、コンポーネントは要素に属性をセットできますが、その逆はできません。
 
-Sometimes it's useful to break that rule. Take the case of the `<input>` element in this component — we _could_ add an `on:input` event handler that sets the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see.
+時々、そのルールを破ると便利なことがあります。このコンポーネントの`<input>`要素の例で考えてみましょう。`on:input`イベントハンドラを追加して、`name`の値を`event.target.value`に設定できますが、それは少し…面倒(boilerplatey)です。想像がつくと思いますが、他のフォーム要素ではそれがさらに悪化します。
 
-Instead, we can use the `bind:value` directive:
+代わりに、`bind:value`を使用することができます。
 
 ```svelte
 <input bind:value={name}>
 ```
 
-This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
+これは`name`の値が変更されるとinputの値が更新されるだけでなく、inputの値が変更されると`name`の値が更新されることを意味します。
diff --git a/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/README.md b/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/README.md
index 9e4ed04b8..d9541c575 100644
--- a/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/README.md
+++ b/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/README.md
@@ -2,9 +2,9 @@
 title: Numeric inputs
 ---
 
-In the DOM, everything is a string. That's unhelpful when you're dealing with numeric inputs — `type="number"` and `type="range"` — as it means you have to remember to coerce `input.value` before using it.
+DOMの中では、全てが文字列(string)です。これは、数値のinput（`type="number"` と `type="range"`）を扱う際、その値を取り出す時に`input.value`を使わなければならないため、不便です。
 
-With `bind:value`, Svelte takes care of it for you:
+`bind:value`を使用すれば、Svelteがそれを代行してくれます。
 
 ```svelte
 <input type=number bind:value={a} min=0 max=10>
diff --git a/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md b/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md
index 1feac27f9..9b5ddcc72 100644
--- a/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md
+++ b/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md
@@ -2,7 +2,7 @@
 title: Checkbox inputs
 ---
 
-Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
+チェックボックスは状態を切り替えるのに使用されます。`input.value`にバインドする代わりに、`input.checked`にバインドします。
 
 ```svelte
 <input type=checkbox bind:checked={yes}>
diff --git a/content/tutorial/01-svelte/06-bindings/04-group-inputs/README.md b/content/tutorial/01-svelte/06-bindings/04-group-inputs/README.md
index e721080df..6e3d140e5 100644
--- a/content/tutorial/01-svelte/06-bindings/04-group-inputs/README.md
+++ b/content/tutorial/01-svelte/06-bindings/04-group-inputs/README.md
@@ -2,21 +2,21 @@
 title: Group inputs
 ---
 
-If you have multiple inputs relating to the same value, you can use `bind:group` along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
+同じ値に関係する複数のinputがあるなら、`value`属性に加えて`bind:group`を使用できます。同じグループ内のラジオinputは相互に排他的で、同じグループ内のチェックボックスinputは選択された値の配列を形成します。 
 
-Add `bind:group` to each input:
+各inputに`bind:group`を追加しましょう。
 
 ```svelte
 <input type=radio bind:group={scoops} name="scoops" value={1}>
 ```
 
-In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
+この場合、チェックボックスinputを`each`ブロックに移動させることでコードをよりシンプルにすることができます。まず、`<script>`ブロックに`menu`変数を追加します。
 
 ```js
 let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
 ```
 
-...then replace the second section:
+…それから2つ目のセクションを置き換えます。
 
 ```svelte
 <h2>Flavours</h2>
@@ -29,4 +29,4 @@ let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
 {/each}
 ```
 
-It's now easy to expand our ice cream menu in new and exciting directions.
+アイスクリームのメニューを新しいエキサイティングな方向に簡単に拡張できるようになりました。
diff --git a/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/README.md b/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/README.md
index 047669e7d..e659141c0 100644
--- a/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/README.md
+++ b/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/README.md
@@ -2,18 +2,18 @@
 title: Textarea inputs
 ---
 
-> This exercise doesn't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/textarea-inputs
+> この練習問題は現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.jp/tutorial/textarea-inputs
 
-The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value`:
+Svelteでは、`<textarea>`要素はtext inputと同じように振る舞います。`bind:value`を使ってみましょう。
 
 ```svelte
 <textarea bind:value={value}></textarea>
 ```
 
-In cases like these, where the names match, we can also use a shorthand form:
+このように名前が一致する場合は、省略形を使用することもできます。
 
 ```svelte
 <textarea bind:value></textarea>
 ```
 
-This applies to all bindings, not just textareas.
+これはtextareaに限らず全てのバインディングに適用されます。
diff --git a/content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md b/content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md
index bc4b35f54..2847b5346 100644
--- a/content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md
+++ b/content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md
@@ -2,12 +2,12 @@
 title: Select bindings
 ---
 
-We can also use `bind:value` with `<select>` elements. Update line 32:
+`<select>`要素にも`bind:value`を使用できます。32行目を更新してください。
 
 ```svelte
 <select bind:value={selected} on:change="{() => answer = ''}">
 ```
 
-Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
+`<option>`の値は文字列ではなくオブジェクトであることにご注意ください。Svelteは気にしません。
 
-> Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.
+> `selected`の初期値を設定していないので、バインディングは自動的にデフォルト値(配列の先頭)に設定されます。しかし、注意してください。バインディングが初期化されるまで、`selected`はundefinedのままなので、よく考えもせずにテンプレート内の`selected.id`などを参照することはできません。
diff --git a/content/tutorial/01-svelte/06-bindings/07-multiple-select-bindings/README.md b/content/tutorial/01-svelte/06-bindings/07-multiple-select-bindings/README.md
index 1107d74b5..e28728936 100644
--- a/content/tutorial/01-svelte/06-bindings/07-multiple-select-bindings/README.md
+++ b/content/tutorial/01-svelte/06-bindings/07-multiple-select-bindings/README.md
@@ -2,9 +2,9 @@
 title: Select multiple
 ---
 
-A select can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value.
+select は `multiple` 属性を持つことができ、その場合は単一の値を選択するのではなく配列を追加します。
 
-Returning to our [earlier ice cream example](/tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
+[先ほどのアイスクリームの例](/tutorial/group-inputs)に戻り、チェックボックスを `<select multiple>` で置き換えることができます。
 
 ```svelte
 <h2>Flavours</h2>
@@ -18,4 +18,4 @@ Returning to our [earlier ice cream example](/tutorial/group-inputs), we can rep
 </select>
 ```
 
-> Press and hold the `control` key (or the `command` key on MacOS) for selecting multiple options.
+> 複数のオプションを選択するには `control` キー (MacOSの場合は `command` キー) を押したままにしてください。

From 331c0a937ce9e6d6bd1067f4f6f312448c575652 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 12:16:50 +0900
Subject: [PATCH 37/60] translate 01-svelte/07-lifecycle into Japanese

---
 .../01-svelte/07-lifecycle/01-onmount/README.md    | 14 +++++++-------
 .../01-svelte/07-lifecycle/02-ondestroy/README.md  | 10 +++++-----
 .../01-svelte/07-lifecycle/03-update/README.md     |  8 ++++----
 .../01-svelte/07-lifecycle/04-tick/README.md       |  8 ++++----
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md
index 3fcdab956..4708996ca 100644
--- a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md
+++ b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md
@@ -2,13 +2,13 @@
 title: onMount
 ---
 
-> The images in this exercise don't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/onmount
+> この練習問題の画像は現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.dev/tutorial/onmount
 
-Every component has a _lifecycle_ that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
+すべてのコンポーネントには、作成される時を開始とし、破棄される時に終了とする *ライフサイクル* があります。その重要なタイミングにコードを実行できるようにする関数がいくつかあります。
 
-The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM.
+最も頻繁に使用するのは `onMount` で、これはコンポーネントが最初に DOM にレンダリングされた後に実行されます。
 
-We'll add an `onMount` handler that loads some data over the network:
+`onMount` ハンドラにネットワークからデータを読み込む処理を追加します。
 
 ```svelte
 <script>
@@ -23,8 +23,8 @@ We'll add an `onMount` handler that loads some data over the network:
 </script>
 ```
 
-> It's recommended to put the `fetch` in `onMount` rather than at the top level of the `<script>` because of server-side rendering (SSR). With the exception of `onDestroy`, lifecycle functions don't run during SSR, which means we can avoid fetching data that should be loaded lazily once the component has been mounted in the DOM.
+> このコンポーネントがDOMにレンダリングされた上で遅延して読み込まれるべきデータを、サーバーサイドレンダリング（SSR）中には取得せずに済むように、この`fetch`を、`<script>` の最上位ではなく、 `onMount` の中に入れることが推奨されます。なぜなら、`onDestroy`以外のライフサイクル関数がSSR中に動作することはないからです。
 
-Lifecycle functions must be called while the component is initialising so that the callback is bound to the component instance — not (say) in a `setTimeout`.
+ライフサイクル関数は、コールバックがコンポーネントのインスタンスにバインドされるように、コンポーネントの初期化中に呼び出されなければなりません。例えば、`setTimeout` の中で呼び出されてはいけません。
 
-If the `onMount` callback returns a function, that function will be called when the component is destroyed.
+もし `onMount` コールバックが関数を返す場合、その関数はコンポーネントが破棄されたときに呼び出されます。
diff --git a/content/tutorial/01-svelte/07-lifecycle/02-ondestroy/README.md b/content/tutorial/01-svelte/07-lifecycle/02-ondestroy/README.md
index 91bfcd821..b75d5de67 100644
--- a/content/tutorial/01-svelte/07-lifecycle/02-ondestroy/README.md
+++ b/content/tutorial/01-svelte/07-lifecycle/02-ondestroy/README.md
@@ -2,9 +2,9 @@
 title: onDestroy
 ---
 
-To run code when your component is destroyed, use `onDestroy`.
+コンポーネントが破棄されたときにコードを実行するには、`onDestroy` を使いましょう。
 
-For example, we can add a `setInterval` function when our component initialises, and clean it up when it's no longer relevant. Doing so prevents memory leaks.
+例えば、コンポーネントの初期化時に `setInterval` 関数を追加し、それが不要になったらそれをクリーンアップすることができます。そうすることでメモリリークを防ぐことができます。
 
 ```svelte
 <script>
@@ -17,7 +17,7 @@ For example, we can add a `setInterval` function when our component initialises,
 </script>
 ```
 
-While it's important to call lifecycle functions during the component's initialisation, it doesn't matter _where_ you call them from. So if we wanted, we could abstract the interval logic into a helper function in `utils.js`...
+コンポーネントの初期化中にライフサイクル関数を呼び出すことは重要ですが、それらを *どこ* から呼び出すかは重要ではありません。そのため、インターバルロジックを抽象化して `utils.js` のヘルパー関数にすることができます…
 
 ```js
 import { onDestroy } from 'svelte';
@@ -31,7 +31,7 @@ export function onInterval(callback, milliseconds) {
 }
 ```
 
-...and import it into our component:
+…そして、それをコンポーネントにインポートします。
 
 ```svelte
 <script>
@@ -42,4 +42,4 @@ export function onInterval(callback, milliseconds) {
 </script>
 ```
 
-Open and close the timer a few times and make sure the counter keeps ticking and the CPU load increases. This is due to a memory leak as the previous timers are not deleted. Don't forget to refresh the page before solving the example.
+何度かタイマーを開いたり閉じたりして、カウンターが動き続けCPU負荷が上昇することを確認してみてください。これは古いタイマーが削除されていないため、メモリリークが発生しているからです。例題を解く前にこのページを更新するのを忘れないでくださいね。
diff --git a/content/tutorial/01-svelte/07-lifecycle/03-update/README.md b/content/tutorial/01-svelte/07-lifecycle/03-update/README.md
index 3c791245b..916e066a8 100644
--- a/content/tutorial/01-svelte/07-lifecycle/03-update/README.md
+++ b/content/tutorial/01-svelte/07-lifecycle/03-update/README.md
@@ -2,11 +2,11 @@
 title: beforeUpdate and afterUpdate
 ---
 
-The `beforeUpdate` function schedules work to happen immediately before the DOM is updated. `afterUpdate` is its counterpart, used for running code once the DOM is in sync with your data.
+`beforeUpdate` 関数は DOM が更新される直前に作業をスケジュールします。`afterUpdate` はそれと対になるもので、DOM がデータと同期した後にコードを実行するために使用されます。
 
-Together, they're useful for doing things imperatively that are difficult to achieve in a purely state-driven way, like updating the scroll position of an element.
+これらは、要素のスクロール位置を更新するなど、純粋な状態駆動では実現が困難なことを、命令的に行うのに便利です。
 
-This [Eliza](https://en.wikipedia.org/wiki/ELIZA) chatbot is annoying to use, because you have to keep scrolling the chat window. Let's fix that.
+この[Eliza](https://en.wikipedia.org/wiki/ELIZA)のチャットボットは、チャットウィンドウをスクロールし続けなければならないので、使うのが面倒です。そこを直しましょう。
 
 ```js
 let div;
@@ -21,4 +21,4 @@ afterUpdate(() => {
 });
 ```
 
-Note that `beforeUpdate` will first run before the component has mounted, so we need to check for the existence of `div` before reading its properties.
+`beforeUpdate` はコンポーネントが最初にマウントされる前に実行されるので、プロパティを読み込む前に `div` が存在するかどうかをチェックする必要があるということに注意してください。
diff --git a/content/tutorial/01-svelte/07-lifecycle/04-tick/README.md b/content/tutorial/01-svelte/07-lifecycle/04-tick/README.md
index a45724734..356eca791 100644
--- a/content/tutorial/01-svelte/07-lifecycle/04-tick/README.md
+++ b/content/tutorial/01-svelte/07-lifecycle/04-tick/README.md
@@ -2,17 +2,17 @@
 title: tick
 ---
 
-The `tick` function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises. It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).
+`tick` 関数は他のライフサイクル関数とは異なり、コンポーネントが最初に初期化されたときだけでなく、いつでも呼び出すことができます。この関数は、保留中の状態変更が DOM に適用されるとすぐに (保留中の状態変更がない場合はすぐに) resolve する promise を返します。
 
-When you update component state in Svelte, it doesn't update the DOM immediately. Instead, it waits until the next _microtask_ to see if there are any other changes that need to be applied, including in other components. Doing so avoids unnecessary work and allows the browser to batch things more effectively.
+Svelte でコンポーネントの状態を更新しても、すぐに DOM を更新するわけではありません。その代わりに、次の *マイクロタスク* まで待って、他のコンポーネントも含めて適用する必要のある変更があるかどうかを確認します。そうすることで不要な作業を回避し、ブラウザはより効果的にバッチ処理を行うことができます。
 
-You can see that behaviour in this example. Select a range of text and hit the tab key. Because the `<textarea>` value changes, the current selection is cleared and the cursor jumps, annoyingly, to the end. We can fix this by importing `tick`...
+この例では、その動作を見ることができます。テキストの範囲を選択してタブキーを押します。`<textarea>` の値が変更されるため、現在の選択範囲がクリアされ、カーソルが最後までジャンプしてしまいます。これは `tick` をインポートすることで修正できます…
 
 ```js
 import { tick } from 'svelte';
 ```
 
-...and running it immediately before we set `this.selectionStart` and `this.selectionEnd` at the end of `handleKeydown`:
+…そして `handleKeydown` の最後に `this.selectationStart` と `this.selectationEnd` を設定する直前に実行します。
 
 ```js
 await tick();

From c3b9695732bfca7e03339e3adca43faaf2a8864e Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 12:17:33 +0900
Subject: [PATCH 38/60] translate 01-svelte/08-stores into Japanese

---
 .../08-stores/01-writable-stores/README.md       | 12 ++++++------
 .../08-stores/02-auto-subscriptions/README.md    | 16 ++++++++--------
 .../08-stores/03-readable-stores/README.md       |  4 ++--
 .../08-stores/04-derived-stores/README.md        |  4 ++--
 .../08-stores/05-custom-stores/README.md         |  4 ++--
 .../08-stores/06-store-bindings/README.md        | 10 +++++-----
 6 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/content/tutorial/01-svelte/08-stores/01-writable-stores/README.md b/content/tutorial/01-svelte/08-stores/01-writable-stores/README.md
index 474fa5c87..8d1825907 100644
--- a/content/tutorial/01-svelte/08-stores/01-writable-stores/README.md
+++ b/content/tutorial/01-svelte/08-stores/01-writable-stores/README.md
@@ -2,13 +2,13 @@
 title: Writable stores
 ---
 
-Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.
+すべてのアプリケーションの状態がアプリケーションのコンポーネント階層の内部にあるわけではありません。場合によっては、関連のない複数のコンポーネントや、通常の JavaScript モジュールからアクセスする必要のある値があります。
 
-In Svelte, we do this with _stores_. A store is simply an object with a `subscribe` method that allows interested parties to be notified whenever the store value changes. In `App.svelte`, `count` is a store, and we're setting `count_value` in the `count.subscribe` callback.
+Svelte では、これを *ストア* で行います。ストアとは、単に、値が変化するたびに関係者に通知する`subscribe` メソッドを備えたオブジェクトです。`App.svelte` の `count` はストアであり、`count.subscribe` のコールバックの中で `count_value` を設定しています。
 
-Click the `stores.js` tab to see the definition of `count`. It's a _writable_ store, which means it has `set` and `update` methods in addition to `subscribe`.
+`stores.js` タブをクリックして `count` の定義を見てください。これは書き込み可能なストアです。つまり、 `subscribe` メソッドに加えて、`set` と `update` メソッドも兼ね備えています。
 
-Now go to the `Incrementer.svelte` tab so that we can wire up the `+` button:
+次に、`Incrementer.svelte` タブに移動して、`+` ボタンと連動するようにします。
 
 ```js
 function increment() {
@@ -16,9 +16,9 @@ function increment() {
 }
 ```
 
-Clicking the `+` button should now update the count. Do the inverse for `Decrementer.svelte`.
+`+` ボタンをクリックすると、カウントが更新されます。`Decrementer.svelte` に戻す機能を実装してみてください。
 
-Finally, in `Resetter.svelte`, implement `reset`:
+最後に、`Resetter.svelte` で `reset` を実装します。
 
 ```js
 function reset() {
diff --git a/content/tutorial/01-svelte/08-stores/02-auto-subscriptions/README.md b/content/tutorial/01-svelte/08-stores/02-auto-subscriptions/README.md
index 6b2ccb7a5..f7b007069 100644
--- a/content/tutorial/01-svelte/08-stores/02-auto-subscriptions/README.md
+++ b/content/tutorial/01-svelte/08-stores/02-auto-subscriptions/README.md
@@ -2,9 +2,9 @@
 title: Auto-subscriptions
 ---
 
-The app in the previous example works, but there's a subtle bug — the store is subscribed to, but never unsubscribed. If the component was instantiated and destroyed many times, this would result in a _memory leak_.
+前の例でアプリは動きましたが、微妙なバグがあります。ストアはサブスクライブされますが、決してアンサブスクライブされません。仮に、コンポーネントが何度もインスタンス化および破棄されるなら、*メモリリーク* が発生することになるでしょう。
 
-Start by declaring `unsubscribe` in `App.svelte`:
+まず、`App.svelte` で `unsubscribe` を宣言します。
 
 ```js
 const unsubscribe = count.subscribe((value) => {
@@ -12,9 +12,9 @@ const unsubscribe = count.subscribe((value) => {
 });
 ```
 
-> Calling a `subscribe` method returns an `unsubscribe` function.
+> `subscribe` メソッドを呼ぶと `unsubscribe` 関数が返ります.
 
-You now declared `unsubscribe`, but it still needs to be called, for example through the `onDestroy` [lifecycle hook](/tutorial/ondestroy):
+`unsubscribe` が宣言されましたが、さらに、例えば `onDestroy` [lifecycle hook](/tutorial/ondestroy) などで呼び出される必要があります。
 
 ```svelte
 <script>
@@ -36,7 +36,7 @@ You now declared `unsubscribe`, but it still needs to be called, for example thr
 <h1>The count is {count_value}</h1>
 ```
 
-It starts to get a bit boilerplatey though, especially if your component subscribes to multiple stores. Instead, Svelte has a trick up its sleeve — you can reference a store value by prefixing the store name with `$`:
+ただし、このやり方は、特にコンポーネントが複数のストアにサブスクライブしている場合に、少し定型的になり始めます。代わりに、Svelte には巧妙な工夫が施されています。ストア名の前に `$` を付けることで、ストアの値を参照できます。
 
 ```svelte
 <script>
@@ -49,8 +49,8 @@ It starts to get a bit boilerplatey though, especially if your component subscri
 <h1>The count is {$count}</h1>
 ```
 
-> Auto-subscription only works with store variables that are declared (or imported) at the top-level scope of a component.
+> 自動サブスクリプションは、コンポーネントの最上位スコープで宣言（またはインポート）されたストア変数でのみ機能します。
 
-You're not limited to using `$count` inside the markup, either — you can use it anywhere in the `<script>` as well, such as in event handlers or reactive declarations.
+`$count` の使用はマークアップ内に限定されません。イベントハンドラやリアクティブ宣言など、`<script>` のどこでも使用できます。
 
-> Any name beginning with `$` is assumed to refer to a store value. It's effectively a reserved character — Svelte will prevent you from declaring your own variables with a `$` prefix.
+> `$` で始まる名前はストア値を参照していると見なされます。これは事実上の予約文字です。Svelte では `$` プレフィックスを使った独自変数を宣言できません。
diff --git a/content/tutorial/01-svelte/08-stores/03-readable-stores/README.md b/content/tutorial/01-svelte/08-stores/03-readable-stores/README.md
index 5e5385270..57c278a0b 100644
--- a/content/tutorial/01-svelte/08-stores/03-readable-stores/README.md
+++ b/content/tutorial/01-svelte/08-stores/03-readable-stores/README.md
@@ -2,9 +2,9 @@
 title: Readable stores
 ---
 
-Not all stores should be writable by whoever has a reference to them. For example, you might have a store representing the mouse position or the user's geolocation, and it doesn't make sense to be able to set those values from 'outside'. For those cases, we have _readable_ stores.
+すべてのストアが、それらを参照しているものによって書き込み可能であるべきではありません。たとえば、マウスの位置やユーザーの地理的位置を表すストアがあり、それらの値を「外部」から設定できるのは意味がありません。そのような場合のために、読み取り可能なストアがあります。
 
-Click over to the `stores.js` tab. The first argument to `readable` is an initial value, which can be `null` or `undefined` if you don't have one yet. The second argument is a `start` function that takes a `set` callback and returns a `stop` function. The `start` function is called when the store gets its first subscriber; `stop` is called when the last subscriber unsubscribes.
+`stores.js` タブをクリックしてください。`readable` の第1引数は初期値です。初期値がない場合は `null` や `undefined` をセットできます。第2引数は `set` コールバックを受け取り `stop` 関数を返す `start` 関数です。この `start` 関数は、ストアが最初のサブスクライバーを取得したときに呼び出されます。`stop` 関数は、最後のサブスクライバーがサブスクライブを解除したときに呼び出されます。
 
 ```js
 export const time = readable(new Date(), function start(set) {
diff --git a/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md b/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md
index ca71e5d0d..1b4fc84fe 100644
--- a/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md
+++ b/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md
@@ -2,10 +2,10 @@
 title: Derived stores
 ---
 
-You can create a store whose value is based on the value of one or more _other_ stores with `derived`. Building on our previous example, we can create a store that derives the time the page has been open:
+`derived` を使用して、1つまたはそれ以上の*他の*ストアに基づいた値のストアを作成することができます。前の例を利用して、ページが開かれている時間を取得するストアを作成することができます。
 
 ```js
 export const elapsed = derived(time, ($time) => Math.round(($time - start) / 1000));
 ```
 
-> It's possible to derive a store from multiple inputs, and to explicitly `set` a value instead of returning it (which is useful for deriving values asynchronously). Consult the [API reference](https://svelte.dev/docs#run-time-svelte-store-derived) for more information.
+> 複数の入力からストアを作成したり、値を返す代わりに `set` を使用して明示的に値をセットすることができます。（これは非同期で値を取得する場合に役立ちます。）詳細については [API reference](/docs#run-time-svelte-store-derived) を参照してください。
diff --git a/content/tutorial/01-svelte/08-stores/05-custom-stores/README.md b/content/tutorial/01-svelte/08-stores/05-custom-stores/README.md
index ebc427678..53e215e7a 100644
--- a/content/tutorial/01-svelte/08-stores/05-custom-stores/README.md
+++ b/content/tutorial/01-svelte/08-stores/05-custom-stores/README.md
@@ -2,9 +2,9 @@
 title: Custom stores
 ---
 
-As long as an object correctly implements the `subscribe` method, it's a store. Beyond that, anything goes. It's very easy, therefore, to create custom stores with domain-specific logic.
+オブジェクトが `subscribe` メソッドを正しく実装していれば、それはストアです。それ以外は何でもありです。したがって、ドメイン固有のロジックを使ってカスタムストアを作成するのはとても簡単です。
 
-For example, the `count` store from our earlier example could include `increment`, `decrement` and `reset` methods and avoid exposing `set` and `update`:
+たとえば、先ほどの例の `count` ストアに `increment`, `decrement`, `reset` メソッドを含めて、`set` と `update` は公開しないようにできます:
 
 ```js
 function createCount() {
diff --git a/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md b/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md
index ddd23f215..5d1660464 100644
--- a/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md
+++ b/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md
@@ -2,17 +2,17 @@
 title: Store bindings
 ---
 
-If a store is writable — i.e. it has a `set` method — you can bind to its value, just as you can bind to local component state.
+ストアが書き込み可能、つまり `set` メソッドを持っている場合は、ローカルコンポーネントの状態にバインドするのと同じように、ストアの値にバインドできます。
 
-In this example we have a writable store `name` and a derived store `greeting`. Update the `<input>` element:
+この例では、書き込み可能なストア `name` と派生ストア（derived store）の `greeting` があります。`<input>` 要素を以下のように更新してください:
 
 ```svelte
 <input bind:value={$name}>
 ```
 
-Changing the input value will now update `name` and all its dependents.
+入力値を変更すると `name` とそれに依存しているもの全てが更新されます。
 
-We can also assign directly to store values inside a component. Add a `<button>` element:
+また、コンポーネント内でストアの値に直接代入することもできます。以下の通り `<button>` 要素を追加してください:
 
 ```svelte
 <button on:click="{() => $name += '!'}">
@@ -20,4 +20,4 @@ We can also assign directly to store values inside a component. Add a `<button>`
 </button>
 ```
 
-The `$name += '!'` assignment is equivalent to `name.set($name + '!')`.
+`$name += '!'` の代入は `name.set($name + '!')` と同等です。

From 360aee2a5da065e5e6ed91a96f3a14eb7135934a Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 12:18:34 +0900
Subject: [PATCH 39/60] translate 03-advanced-svelte/01-motion into Japanese

---
 .../01-motion/01-tweens/README.md             | 22 +++++++++----------
 .../01-motion/02-springs/README.md            | 10 ++++-----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/01-motion/01-tweens/README.md b/content/tutorial/03-advanced-svelte/01-motion/01-tweens/README.md
index afa496805..bf9516d84 100644
--- a/content/tutorial/03-advanced-svelte/01-motion/01-tweens/README.md
+++ b/content/tutorial/03-advanced-svelte/01-motion/01-tweens/README.md
@@ -2,11 +2,11 @@
 title: Tweens
 ---
 
-Now that we've covered the basics of SvelteKit, it's time to learn some advanced Svelte techniques, starting with _motion_.
+SvelteKit の基本を学習したので、次は Svelte の高度なテクニックを学ぶ時間です。まずは  _motion_ から始めましょう。
 
-Setting values and watching the DOM update automatically is cool. Know what's even cooler? Tweening those values. Svelte includes tools to help you build slick user interfaces that use animation to communicate changes.
+値を設定して DOM が自動的に更新されるのを見るのは最高です。もっと最高なのは？それらの値を *トゥイーン* することです。Svelte には、変化を伝えるためにアニメーションを使用するスムーズなユーザーインターフェースを構築するためのツールが含まれています。
 
-Let's start by changing the `progress` store to a `tweened` value:
+まず `progress` ストアを `tweened` 値に変更してみましょう。
 
 ```svelte
 <script>
@@ -16,7 +16,7 @@ Let's start by changing the `progress` store to a `tweened` value:
 </script>
 ```
 
-Clicking the buttons causes the progress bar to animate to its new value. It's a bit robotic and unsatisfying though. We need to add an easing function:
+ボタンをクリックすると、プログレスバーが新しい値にアニメーションします。しかし、これは少し機械的で満足感がありません。イージング機能を追加する必要があります。
 
 ```svelte
 <script>
@@ -30,13 +30,13 @@ Clicking the buttons causes the progress bar to animate to its new value. It's a
 </script>
 ```
 
-> The `svelte/easing` module contains the [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1.
+> `svelte/easing` モジュールには [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/) が含まれています、あるいは `p` と `t` の両方が 0 から 1 の間の値を取る独自の `p => t` 関数を指定することもできます。
 
-The full set of options available to `tweened`:
+`tweened` で利用可能なオプションの一覧です。
 
-- `delay` — milliseconds before the tween starts
-- `duration` — either the duration of the tween in milliseconds, or a `(from, to) => milliseconds` function allowing you to (e.g.) specify longer tweens for larger changes in value
-- `easing` — a `p => t` function
-- `interpolate` — a custom `(from, to) => t => value` function for interpolating between arbitrary values. By default, Svelte will interpolate between numbers, dates, and identically-shaped arrays and objects (as long as they only contain numbers and dates or other valid arrays and objects). If you want to interpolate (for example) colour strings or transformation matrices, supply a custom interpolator
+* `delay` — トゥイーン開始までのミリ秒
+* `duration` — ミリ秒単位のトゥイーンの持続時間、または(例えば値の変化が大きい場合に、より長いトゥイーンを指定出来るようにするための）`(from, to) => milliseconds` 関数
+* `easing` — `p => t` 関数
+* `interpolate` — 任意の値の間を補間するための自前の `(from, to) => t => value` 関数。デフォルトでは、Svelte は数値や日付、同じ形の配列やオブジェクトの間を補間します (数値や日付、その他の有効な配列やオブジェクトのみを含む場合に限ります)。(例えば) 色文字列や変換行列を補間したい場合は、自前の関数を指定してください。
 
-You can also pass these options to `progress.set` and `progress.update` as a second argument, in which case they will override the defaults. The `set` and `update` methods both return a promise that resolves when the tween completes.
+これらのオプションを `progress.set` や `progress.update` に第2引数として渡すこともでき、どちらの場合もデフォルトを上書きします。`set` と `update`メソッドは、いずれもトゥイーンが完了した時点で resolve する promise を返します。
diff --git a/content/tutorial/03-advanced-svelte/01-motion/02-springs/README.md b/content/tutorial/03-advanced-svelte/01-motion/02-springs/README.md
index 05a507ebf..018f6a811 100644
--- a/content/tutorial/03-advanced-svelte/01-motion/02-springs/README.md
+++ b/content/tutorial/03-advanced-svelte/01-motion/02-springs/README.md
@@ -1,10 +1,10 @@
 ---
-title: Springs
+title: Spring
 ---
 
-The `spring` function is an alternative to `tweened` that often works better for values that are frequently changing.
+関数 `spring` は `tweened` の代替であり、頻繁に変化する値に対してよりよく機能することが多いです。
 
-In this example we have two stores — one representing the circle's coordinates, and one representing its size. Let's convert them to springs:
+この例では、2つのストアがあります。1つは円の座標を表し、もう1つはサイズを表します。それらをスプリングに変換してみましょう。
 
 ```svelte
 <script>
@@ -15,7 +15,7 @@ In this example we have two stores — one representing the circle's coordinates
 </script>
 ```
 
-Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values:
+両方のスプリングは、デフォルトの `stiffness` と `damping` の値を持っています。これはスプリングの、まあ…スプリング性を制御するものです。私達は、自分の初期値を指定することができます。
 
 ```js
 let coords = spring({ x: 50, y: 50 }, +++{
@@ -24,4 +24,4 @@ let coords = spring({ x: 50, y: 50 }, +++{
 }+++);
 ```
 
-Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion.
+マウスを振り回して、スライダーをドラッグしてみて、スプリングの動作にどのように影響するかを感じてみてください。スプリングがまだ動いている間に値を調整することができることに注目してください。

From 620fafab1b499a36921d8fe4d600a87e64949a96 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 12:19:22 +0900
Subject: [PATCH 40/60] translate 03-advanced-svelte/02-transitions into
 Japanese

---
 .../02-transitions/01-transition/README.md    |  6 ++---
 .../README.md                                 |  6 ++---
 .../02-transitions/03-in-and-out/README.md    |  6 ++---
 .../04-custom-css-transitions/README.md       | 24 +++++++++----------
 .../05-custom-js-transitions/README.md        |  2 +-
 .../06-transition-events/README.md            |  2 +-
 .../07-local-transitions/README.md            |  6 ++---
 .../02-transitions/08-key-blocks/README.md    |  4 ++--
 .../09-deferred-transitions/README.md         | 12 +++++-----
 9 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/02-transitions/01-transition/README.md b/content/tutorial/03-advanced-svelte/02-transitions/01-transition/README.md
index 63ef67317..630cce28a 100644
--- a/content/tutorial/03-advanced-svelte/02-transitions/01-transition/README.md
+++ b/content/tutorial/03-advanced-svelte/02-transitions/01-transition/README.md
@@ -2,9 +2,9 @@
 title: The transition directive
 ---
 
-We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the `transition` directive.
+要素を DOM に優美に追加したり削除したりすることで、より魅力的なユーザーインターフェイスを作成できます。Svelte は `transition` ディレクティブを使用してこれを非常に簡単にします。
 
-First, import the `fade` function from `svelte/transition`...
+まず、`svelte/transition` から `fade` 関数をインポートします。
 
 ```svelte
 <script>
@@ -13,7 +13,7 @@ First, import the `fade` function from `svelte/transition`...
 </script>
 ```
 
-...then add it to the `<p>` element:
+次に、それを `<p>` 要素に追加します。
 
 ```svelte
 <p +++transition:fade+++>Fades in and out</p>
diff --git a/content/tutorial/03-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/README.md b/content/tutorial/03-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/README.md
index 86b34cefd..ea8fd36b4 100644
--- a/content/tutorial/03-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/README.md
+++ b/content/tutorial/03-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/README.md
@@ -2,7 +2,7 @@
 title: Adding parameters
 ---
 
-Transition functions can accept parameters. Replace the `fade` transition with `fly`...
+トランジション関数はパラメータを受け取ることができます。`fade` トランジションを `fly` に置き換えてください。
 
 ```svelte
 <script>
@@ -11,7 +11,7 @@ Transition functions can accept parameters. Replace the `fade` transition with `
 </script>
 ```
 
-...and apply it to the `<p>` along with some options:
+そして、`<p>` にいくつかのオプションと一緒にパラメータを設定してください。
 
 ```svelte
 <p transition:+++fly={{ y: 200, duration: 2000 }}+++>
@@ -19,4 +19,4 @@ Transition functions can accept parameters. Replace the `fade` transition with `
 </p>
 ```
 
-Note that the transition is _reversible_ — if you toggle the checkbox while the transition is ongoing, it transitions from the current point, rather than the beginning or the end.
+トランジションは可逆的であることに注意してください。つまり、トランジションの最中にチェックボックスを切り替えると、開始位置や終了位置からではなく、現在の位置からトランジションをします。
diff --git a/content/tutorial/03-advanced-svelte/02-transitions/03-in-and-out/README.md b/content/tutorial/03-advanced-svelte/02-transitions/03-in-and-out/README.md
index a8ce6ba3f..2efbe6641 100644
--- a/content/tutorial/03-advanced-svelte/02-transitions/03-in-and-out/README.md
+++ b/content/tutorial/03-advanced-svelte/02-transitions/03-in-and-out/README.md
@@ -2,13 +2,13 @@
 title: In and out
 ---
 
-Instead of the `transition` directive, an element can have an `in` or an `out` directive, or both together. Import `fade` alongside `fly`...
+`transition` ディレクティブの代わりに、要素に `in` や `out`、または両方のディレクティブを設定することができます。`fly` と一緒に `fade` をインポートしてください。
 
 ```js
 import { +++fade+++, fly } from 'svelte/transition';
 ```
 
-...then replace the `transition` directive with separate `in` and `out` directives:
+その後、`transition` ディレクティブを `in` と `out` ディレクティブにそれぞれ置き換えてください。
 
 ```svelte
 <p +++in+++:fly={{ y: 200, duration: 2000 }} +++out:fade+++>
@@ -16,4 +16,4 @@ import { +++fade+++, fly } from 'svelte/transition';
 </p>
 ```
 
-In this case, the transitions are _not_ reversed.
+この場合、トランジションは可逆的にはなりません。
diff --git a/content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/README.md b/content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/README.md
index 7c1cd1b8e..98205dd8a 100644
--- a/content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/README.md
+++ b/content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/README.md
@@ -2,7 +2,7 @@
 title: Custom CSS transitions
 ---
 
-The `svelte/transition` module has a handful of built-in transitions, but it's very easy to create your own. By way of example, this is the source of the `fade` transition:
+`svelte/transition` モジュールにはいくつかのトランジションが組み込まれていますが、独自のトランジションを簡単に作成することができます。例として、これは `fade` トランジションのソースです。
 
 ```js
 function fade(node, { delay = 0, duration = 400 }) {
@@ -16,19 +16,19 @@ function fade(node, { delay = 0, duration = 400 }) {
 }
 ```
 
-The function takes two arguments — the node to which the transition is applied, and any parameters that were passed in — and returns a transition object which can have the following properties:
+この関数は、トランジションが適用されるノードと渡されたパラメータの2つの引数を取り、下記のプロパティをもつトランジションオブジェクトを返します。
 
-- `delay` — milliseconds before the transition begins
-- `duration` — length of the transition in milliseconds
-- `easing` — a `p => t` easing function (see the chapter on [tweening](/tutorial/tweens))
-- `css` — a `(t, u) => css` function, where `u === 1 - t`
-- `tick` — a `(t, u) => {...}` function that has some effect on the node
+* `delay` — トランジション開始までのミリ秒
+* `duration` — ミリ秒単位でのトランジションの長さ
+* `easing` — `p => t` イージング関数 ( [tweening](/tutorial/tweened) の章を参照)
+* `css` — `u === 1 - t` である `(t, u) => css` 関数
+* `tick` — ノードに何らかの影響を与える `(t, u) => {...}` 関数
 
-The `t` value is `0` at the beginning of an intro or the end of an outro, and `1` at the end of an intro or beginning of an outro.
+`t` 値は、イントロの開始やアウトロの終了時点では `0` であり、イントロの終了やアウトロの開始時点では `1` となります。
 
-Most of the time you should return the `css` property and _not_ the `tick` property, as CSS animations run off the main thread to prevent jank where possible. Svelte 'simulates' the transition and constructs a CSS animation, then lets it run.
+ほとんどの場合、`css` プロパティを返すべきであり、`tick` プロパティを返すべき*ではない*です。なぜなら、CSSアニメーションは、UIが遅くなるのを防ぐために、可能であれば、メインスレッドとは別に動作するからです。Svelte は、トランジションを「シミュレート」し、 CSS アニメーションを作成してから実行させます。
 
-For example, the `fade` transition generates a CSS animation somewhat like this:
+たとえば、`fade` トランジションは次のような CSS アニメーションを生成します。
 
 ```css
 0% {
@@ -46,7 +46,7 @@ For example, the `fade` transition generates a CSS animation somewhat like this:
 }
 ```
 
-We can get a lot more creative though. Let's make something truly gratuitous:
+しかし、もっと独創的なものを作れます。本当に余計なトランジションを作ってみましょう。
 
 ```svelte
 <script>
@@ -74,4 +74,4 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 </script>
 ```
 
-Remember: with great power comes great responsibility.
+忘れないで、大いなる力には大きな責任が伴います。
diff --git a/content/tutorial/03-advanced-svelte/02-transitions/05-custom-js-transitions/README.md b/content/tutorial/03-advanced-svelte/02-transitions/05-custom-js-transitions/README.md
index 9cc8275ce..42c90b200 100644
--- a/content/tutorial/03-advanced-svelte/02-transitions/05-custom-js-transitions/README.md
+++ b/content/tutorial/03-advanced-svelte/02-transitions/05-custom-js-transitions/README.md
@@ -2,7 +2,7 @@
 title: Custom JS transitions
 ---
 
-While you should generally use CSS for transitions as much as possible, there are some effects that can't be achieved without JavaScript, such as a typewriter effect:
+一般に、トランジションには可能な限りCSSを用いるべきですが、いくつかのトランジション効果に関してはJavaScriptを用いないと実現できません。その一例がタイプライター効果です。
 
 ```js
 function typewriter(node, { speed = 1 }) {
diff --git a/content/tutorial/03-advanced-svelte/02-transitions/06-transition-events/README.md b/content/tutorial/03-advanced-svelte/02-transitions/06-transition-events/README.md
index f78509b0a..a1a5cc587 100644
--- a/content/tutorial/03-advanced-svelte/02-transitions/06-transition-events/README.md
+++ b/content/tutorial/03-advanced-svelte/02-transitions/06-transition-events/README.md
@@ -2,7 +2,7 @@
 title: Transition events
 ---
 
-It can be useful to know when transitions are beginning and ending. Svelte dispatches events that you can listen to like any other DOM event:
+トランジションの開始と終了のタイミングを知ることができれば便利です。Svelteは他のDOMイベントと同様にリッスンすることができるイベントをディスパッチします。
 
 ```svelte
 <p
diff --git a/content/tutorial/03-advanced-svelte/02-transitions/07-local-transitions/README.md b/content/tutorial/03-advanced-svelte/02-transitions/07-local-transitions/README.md
index 7b2cad357..18fe25288 100644
--- a/content/tutorial/03-advanced-svelte/02-transitions/07-local-transitions/README.md
+++ b/content/tutorial/03-advanced-svelte/02-transitions/07-local-transitions/README.md
@@ -2,11 +2,11 @@
 title: Local transitions
 ---
 
-Ordinarily, transitions will play on elements when any container block is added or destroyed. In the example here, toggling the visibility of the entire list also applies transitions to individual list elements.
+通常、コンテナブロックが追加もしくは破棄されると、要素にトランジションが適用されます。この例では、リスト全体の表示を切り替えると、個々のリスト要素にもトランジションが適用されます。
 
-Instead, we'd like transitions to play only when individual items are added and removed — in other words, when the user drags the slider.
+かわりに、個々のアイテムが追加もしくは削除された時にのみトランジションが再生されるようにしたいと思います。-- 言い換えれば、ユーザーがスライダーをドラッグしたときです。
 
-We can achieve this with a _local_ transition, which only plays when the block with the transition itself is added or removed:
+これを実現するには、*ローカル* トランジションを使用します。これは、自身にトランジションを持つブロックが追加されたり削除されたりしたときにのみ再生されます。
 
 ```svelte
 <div transition:slide+++|local+++>
diff --git a/content/tutorial/03-advanced-svelte/02-transitions/08-key-blocks/README.md b/content/tutorial/03-advanced-svelte/02-transitions/08-key-blocks/README.md
index 2821841aa..8d8122f37 100644
--- a/content/tutorial/03-advanced-svelte/02-transitions/08-key-blocks/README.md
+++ b/content/tutorial/03-advanced-svelte/02-transitions/08-key-blocks/README.md
@@ -2,9 +2,9 @@
 title: Key blocks
 ---
 
-Key blocks destroy and recreate their contents when the value of an expression changes. This is useful if you want an element to play its transition whenever a value changes instead of only when the element enters or leaves the DOM.
+Key ブロックは、式の値が変更されたときにその中身を破棄して再作成します。これは、要素がDOMに出入りしたときだけでなく、値が変化したときにトランジションしたい場合に便利です。
 
-Here, for example, we'd like to play the `typewriter` transition from `transition.js` whenever the loading message changes. Wrap the `<p>` element in a key block:
+ここでは例えば、`transition.js` の `typewriter` トランジションを、ローディングメッセージが変わる度に再生させたいと思います。`<p>` 要素を key ブロックで囲みます。
 
 ```svelte
 +++{#key i}+++
diff --git a/content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/README.md b/content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/README.md
index 8a960bc21..1b616b2a4 100644
--- a/content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/README.md
+++ b/content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/README.md
@@ -2,13 +2,13 @@
 title: Deferred transitions
 ---
 
-A particularly powerful feature of Svelte's transition engine is the ability to _defer_ transitions, so that they can be coordinated between multiple elements.
+Svelte のトランジションエンジンで特に強力な特徴は、トランジションを*遅延*させて複数の要素間でトランジションが調整されるように出来ることです。
 
-Take this pair of todo lists, in which toggling a todo sends it to the opposite list. In the real world, objects don't behave like that — instead of disappearing and reappearing in another place, they move through a series of intermediate positions. Using motion can go a long way towards helping users understand what's happening in your app.
+このペアのToDoリストを見てみましょう。ToDoを切り替えると反対側のリストに送られます。現実の世界ではオブジェクトはこのような振る舞いをしません。消えたり別の場所に現れたりするのではなく、一連の中間的な位置を移動します。モーションを使用することでアプリで何が起こっているのかをユーザーに理解してもらうことができます。
 
-We can achieve this effect using the `crossfade` function, as seen in transition.js, which creates a pair of transitions called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+この効果は、transition.js にあるように、`send` と `receive` というトランジションのペアを作成する`crossfade` 関数を使用することで実現できます。要素は、「send」されると、対応する「receive」される要素を探し、その要素を相手の位置に変換してフェードアウトするトランジションを生成します。要素が「receive」されると、逆のことが起こります。対応する要素がない場合は、`fallback` トランジションが使われます。
 
-Open TodoList.svelte. First, import the `send` and `receive` transitions from transition.js:
+TodoList.svelte を開いてください。まず、transition.js から `send` と `receive` をインポートしてください。
 
 ```svelte
 <script>
@@ -19,7 +19,7 @@ Open TodoList.svelte. First, import the `send` and `receive` transitions from tr
 </script>
 ```
 
-Then, add them to the `<label>` element, using the `todo.id` property as a key to match the elements:
+それから、次の `<label>` 要素にもそれらを追加し、`todo.id` プロパティを、要素にマッチするキーとして使用します。
 
 ```svelte
 <label
@@ -28,4 +28,4 @@ Then, add them to the `<label>` element, using the `todo.id` property as a key t
 >
 ```
 
-Now, when you toggle items, they move smoothly to their new location. The non-transitioning items still jump around awkwardly — we can fix that in the next chapter.
+これでアイテムを切り替えると、アイテムはスムーズに新しい場所に移動します。遷移していない項目は、まだ不器用に跳ね回っています。これは次の章で解決できます。

From aa62e6c3f8226099b81c05ea6de242cf2cf7b48a Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 12:24:27 +0900
Subject: [PATCH 41/60] translate 03-advanced-svelte/03-animations into
 Japanese

---
 .../03-animations/01-animate/README.md             | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/03-animations/01-animate/README.md b/content/tutorial/03-advanced-svelte/03-animations/01-animate/README.md
index 70c1cbe74..72b0011d5 100644
--- a/content/tutorial/03-advanced-svelte/03-animations/01-animate/README.md
+++ b/content/tutorial/03-advanced-svelte/03-animations/01-animate/README.md
@@ -2,11 +2,11 @@
 title: The animate directive
 ---
 
-In the [previous chapter](/tutorial/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.
+[前の章](/tutorial/deferred-transitions)では、要素が1つのToDoリストから別のリストに移動するときに、遷移の遅延を使用して動きの錯覚を作成しました。
 
-To complete the illusion, we also need to apply motion to the elements that _aren't_ transitioning. For this, we use the `animate` directive.
+この錯覚を完成させるには、遷移して *いない* 要素にもモーションを適用する必要があります。このために、`animate` ディレクティブを使用します。
 
-First, import the `flip` function — flip stands for ['First, Last, Invert, Play'](https://aerotwist.com/blog/flip-your-animations/) — from `svelte/animate` into `TodoList.svelte`:
+最初に、`TodoList.svelte` に `flip` 関数（flip は ['First, Last, Invert, Play'](https://aerotwist.com/blog/flip-your-animations/) の略です）を `svelte/animate` からインポートします
 
 ```svelte
 <script>
@@ -18,7 +18,7 @@ First, import the `flip` function — flip stands for ['First, Last, Invert, Pla
 </script>
 ```
 
-Then add it to the `<label>` elements:
+次に、それを `<label>` 要素に追加します。 
 
 ```svelte
 <label
@@ -28,7 +28,7 @@ Then add it to the `<label>` elements:
 >
 ```
 
-The movement is a little slow in this case, so we can add a `duration` parameter:
+この場合、動きが少し遅いので、`duration` パラメータを追加することができます。
 
 ```svelte
 <label
@@ -38,6 +38,6 @@ The movement is a little slow in this case, so we can add a `duration` parameter
 >
 ```
 
-> `duration` can also be a `d => milliseconds` function, where `d` is the number of pixels the element has to travel
+> `duration` は `d => ミリ秒` 関数でもよいです。`d` は，要素が移動する必要があるピクセル数です。
 
-Note that all the transitions and animations are being applied with CSS, rather than JavaScript, meaning they won't block (or be blocked by) the main thread.
+すべてのトランジションとアニメーションが JavaScript ではなく CSS で適用されていて、メインスレッドをブロックすることはない（ブロックされることもない）という点に注意してください。

From 7f64f0e8199d31c190142462ee44a7ab6da997bb Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 12:28:07 +0900
Subject: [PATCH 42/60] translate 03-advanced-svelte/04-actions into Japanese

---
 .../04-actions/01-actions/README.md           | 20 +++++++++----------
 .../02-adding-parameters-to-actions/README.md | 14 ++++++-------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/04-actions/01-actions/README.md b/content/tutorial/03-advanced-svelte/04-actions/01-actions/README.md
index 8c25f6db3..6e93f8c8e 100644
--- a/content/tutorial/03-advanced-svelte/04-actions/01-actions/README.md
+++ b/content/tutorial/03-advanced-svelte/04-actions/01-actions/README.md
@@ -2,20 +2,20 @@
 title: The use directive
 ---
 
-Actions are essentially element-level lifecycle functions. They're useful for things like:
+アクションは基本的に要素レベルのライフサイクル関数です。これらは以下のような場合に便利です。
 
-- interfacing with third-party libraries
-- lazy-loaded images
-- tooltips
-- adding custom event handlers
+- サードパーティライブラリとの連携
+- 画像の遅延読み込み
+- ツールチップ
+- カスタムイベントハンドラの追加
 
-In this app, we want to make the orange modal close when the user clicks outside it. It has an event handler for the `outclick` event, but it isn't a native DOM event. We have to dispatch it ourselves. First, import the `clickOutside` function...
+このアプリでは、オレンジ色のモーダルを、その外側をクリックしたときに閉じるようにしたいと思います。このアプリには `outclick` イベント用のイベントハンドラがありますが、これはネイティブの DOM イベントではありません。このイベントを自分でディスパッチする必要があります。まず、`clickOutside` 関数をインポートします…
 
 ```js
 import { clickOutside } from './click_outside.js';
 ```
 
-...then use it with the element:
+…そして、それを要素と一緒に使用します。
 
 ```svelte
 <div class="box" use:clickOutside on:outclick="{() => (showModal = false)}">
@@ -23,9 +23,9 @@ import { clickOutside } from './click_outside.js';
 </div>
 ```
 
-Open the `click_outside.js` file. Like transition functions, an action function receives a `node` (which is the element that the action is applied to) and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
+`click_outside.js` ファイルを開きます。トランジション関数と同様に、アクション関数は `node` (アクションが適用される要素) といくつかのオプションのパラメータを受け取り、アクションオブジェクトを返します。このオブジェクトは `destroy` 関数を持つことができ、要素がマウントされていないときに呼び出されます。
 
-We want to fire the `outclick` event when the user clicks outside the orange box. One possible implementation looks like this:
+ユーザがオレンジ色のボックスの外側をクリックしたときに、`outclick` イベントを発生させたいと考えています。考えられる実装の1つは以下のようになります。
 
 ```js
 export function clickOutside(node) {
@@ -45,4 +45,4 @@ export function clickOutside(node) {
 }
 ```
 
-Update the `clickOutside` function, click the button to show the modal and then click outside it to close it.
+`clickOutside` 関数を更新し、ボタンをクリックしてモーダルを表示し、モーダルの外側をクリックしてモーダルを閉じてみてください。
diff --git a/content/tutorial/03-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md b/content/tutorial/03-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md
index b1eb261d4..3086b30ca 100644
--- a/content/tutorial/03-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md
+++ b/content/tutorial/03-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md
@@ -2,11 +2,11 @@
 title: Adding parameters
 ---
 
-Like transitions and animations, an action can take an argument, which the action function will be called with alongside the element it belongs to.
+トランジションやアニメーションのように、アクションは引数を取ることができ、アクション関数はそれが属する要素と一緒に呼び出されます。
 
-Here, we're using a `longpress` action that fires an event with the same name whenever the user presses and holds the button for a given duration. Right now, if you switch over to the `longpress.js` file, you'll see it's hardcoded to 500ms.
+ここでは、ユーザがボタンを長押しするたびに同じ名前のイベントを発生させる `longpress` アクションを使っています。`longpress.js` ファイルに切り替えると、500msにハードコードされていることがわかります。
 
-We can change the action function to accept a `duration` as a second argument, and pass that `duration` to the `setTimeout` call:
+アクション関数を変更して、第2引数に `duration` を指定し、そしてその `duration` を `setTimeout` に渡すことができます。
 
 ```js
 export function longpress(node, duration) {
@@ -22,15 +22,15 @@ export function longpress(node, duration) {
 }
 ```
 
-Back in `App.svelte`, we can pass the `duration` value to the action:
+`App.svelte` に戻り、`duration` の値をアクションに渡すことができます。
 
 ```svelte
 <button use:longpress={duration}
 ```
 
-This _almost_ works — the event now only fires after 2 seconds. But if you slide the duration down, it will still take two seconds.
+これは、*大体* 動作します。イベントは2秒後にのみ発生するようになりました。しかし、デュレーションを下にスライドさせても、まだ2秒かかります。
 
-To change that, we can add an `update` method in `longpress.js`. This will be called whenever the argument changes:
+これを変更するには、`longpress.js` に `update` メソッドを追加します。これは引数が変更されるたびに呼び出されます。
 
 ```js
 return {
@@ -41,4 +41,4 @@ return {
 };
 ```
 
-> If you need to pass multiple arguments to an action, combine them into a single object, as in `use:longpress={{duration, spiciness}}`
+> 複数の引数をアクションに渡す必要がある場合は、`use:longpress={{duration, spiciness}}` のように、それらを1つのオブジェクトに結合します。

From f80b50bdcb75087d6b2efda94b9cd4161d1fda88 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 12:53:13 +0900
Subject: [PATCH 43/60] translate 03-advanced-svelte/05-bindings into Japanese

---
 .../01-contenteditable-bindings/README.md     |  2 +-
 .../02-each-block-bindings/README.md          |  4 +-
 .../05-bindings/03-media-elements/README.md   | 40 +++++++++----------
 .../05-bindings/04-dimensions/README.md       |  8 ++--
 .../05-bindings/05-bind-this/README.md        |  4 +-
 .../06-component-bindings/README.md           |  6 +--
 .../05-bindings/07-component-this/README.md   |  6 +--
 7 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md b/content/tutorial/03-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md
index affbbd0ca..75e37315a 100644
--- a/content/tutorial/03-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md
+++ b/content/tutorial/03-advanced-svelte/05-bindings/01-contenteditable-bindings/README.md
@@ -2,7 +2,7 @@
 title: Contenteditable bindings
 ---
 
-Elements with a `contenteditable="true"` attribute support `textContent` and `innerHTML` bindings:
+`contenteditable="true"` 属性を持つ要素は、`textContent` と `innerHTML` のバインディングをサポートします。
 
 ```svelte
 <div
diff --git a/content/tutorial/03-advanced-svelte/05-bindings/02-each-block-bindings/README.md b/content/tutorial/03-advanced-svelte/05-bindings/02-each-block-bindings/README.md
index d91c7c51d..771476230 100644
--- a/content/tutorial/03-advanced-svelte/05-bindings/02-each-block-bindings/README.md
+++ b/content/tutorial/03-advanced-svelte/05-bindings/02-each-block-bindings/README.md
@@ -2,7 +2,7 @@
 title: Each block bindings
 ---
 
-You can even bind to properties inside an `each` block.
+`each` ブロック内のプロパティにバインドすることもできます。
 
 ```svelte
 {#each todos as todo}
@@ -18,4 +18,4 @@ You can even bind to properties inside an `each` block.
 {/each}
 ```
 
-> Note that interacting with these `<input>` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.
+> これらの `<input>` 要素と互いに作用すると、配列が突然変化することに注意してください。不変のデータを扱いたい場合は、バインディングを避け、代わりにイベントハンドラを使用する必要があります。
diff --git a/content/tutorial/03-advanced-svelte/05-bindings/03-media-elements/README.md b/content/tutorial/03-advanced-svelte/05-bindings/03-media-elements/README.md
index db10ce57f..ac0d6d52c 100644
--- a/content/tutorial/03-advanced-svelte/05-bindings/03-media-elements/README.md
+++ b/content/tutorial/03-advanced-svelte/05-bindings/03-media-elements/README.md
@@ -2,11 +2,11 @@
 title: Media elements
 ---
 
-> This exercise doesn't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/media-elements
+> この練習問題は現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.jp/tutorial/media-elements
 
-The `<audio>` and `<video>` elements have several properties that you can bind to. This example demonstrates a few of them.
+`<audio>` と `<video>` 要素にはいくつかバインドできるプロパティがあります。この例では、その内のいくつかをお見せします。
 
-On line 62, add `currentTime={time}`, `duration` and `paused` bindings:
+62行目に `currentTime={time}`、`duration`、`paused` プロパティを追加しバインドします:
 
 ```svelte
 <video
@@ -23,27 +23,27 @@ On line 62, add `currentTime={time}`, `duration` and `paused` bindings:
 </video>
 ```
 
-> `bind:duration` is equivalent to `bind:duration={duration}`
+> `bind:duration` は `bind:duration={duration}` に相当します
 
-Now, when you click on the video, it will update `time`, `duration` and `paused` as appropriate. This means we can use them to build custom controls.
+このとき動画をクリックすると、`time`、`duration`、`paused` が適宜更新されます。つまり、それらを使ってカスタムコントロールを構築することができるということです。
 
-> Ordinarily on the web, you would track `currentTime` by listening for `timeupdate` events. But these events fire too infrequently, resulting in choppy UI. Svelte does better — it checks `currentTime` using `requestAnimationFrame`.
+> 通常、 web 上では `timeupdate` イベントを検知することで `currentTime` を追跡しますが、これらのイベントはそれほど頻繁に発生しないため、結果的にぎこちない UI になってしまいます。それを Svelte は上手く処理しています。`requestAnimationFrame` を使用して `currentTime` をチェックすることで。
 
-The complete set of bindings for `<audio>` and `<video>` is as follows — six _readonly_ bindings...
+`<audio>` と `<video>` のバインディングの全セットは以下の通りです。6つの _読み込み専用_ バインディング…
 
-- `duration` (readonly) — the total duration of the video, in seconds
-- `buffered` (readonly) — an array of `{start, end}` objects
-- `seekable` (readonly) — ditto
-- `played` (readonly) — ditto
-- `seeking` (readonly) — boolean
-- `ended` (readonly) — boolean
+- `duration` (読み込み専用) — 動画の総再生時間（秒単位）
+- `buffered` (読み込み専用) — `{start, end}` オブジェクトの配列
+- `seekable` (読み込み専用) — 同上
+- `played` (読み込み専用) — 同上
+- `seeking` (読み込み専用) — 真偽値
+- `ended` (読み込み専用) — 真偽値
 
-...and five _two-way_ bindings:
+…と5つの _双方向_ バインディングです:
 
-- `currentTime` — the current point in the video, in seconds
-- `playbackRate` — how fast to play the video, where `1` is 'normal'
-- `paused` — this one should be self-explanatory
-- `volume` — a value between 0 and 1
-- `muted` — a boolean value where true is muted
+- `currentTime` — 動画内の現在のポイント（秒単位）
+- `playbackRate` — 動画の再生速度（`1` が 'normal'）
+- `paused` — これは自明のこと
+- `volume` — 0 から 1 の値
+- `muted` — true はミュートを意味するブーリアン値
 
-Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
+動画には読み取り専用の `videoWidth` と `videoHeight` バインディングも存在します。
diff --git a/content/tutorial/03-advanced-svelte/05-bindings/04-dimensions/README.md b/content/tutorial/03-advanced-svelte/05-bindings/04-dimensions/README.md
index 7b12a0827..714486da1 100644
--- a/content/tutorial/03-advanced-svelte/05-bindings/04-dimensions/README.md
+++ b/content/tutorial/03-advanced-svelte/05-bindings/04-dimensions/README.md
@@ -2,7 +2,7 @@
 title: Dimensions
 ---
 
-Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
+全てのブロックレベル要素は `clientWidth`、 `clientHeight`、`offsetWidth`、`offsetHeight` バインディングを備えています:
 
 ```svelte
 <div bind:clientWidth={w} bind:clientHeight={h}>
@@ -10,8 +10,8 @@ Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `
 </div>
 ```
 
-These bindings are readonly — changing the values of `w` and `h` won't have any effect.
+これらのバインディングは読み取り専用です。`w` と `h` の値を変更しても何の影響もありません。
 
-> Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements.
+> 要素は[この方法](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/)に似た手法を用いて測定されます。オーバーヘッドを内包しているため、要素数が巨大な場合はこの方法を使用することはおすすめしません。
 >
-> `display: inline` elements cannot be measured with this approach; nor can elements that can't contain other elements (such as `<canvas>`). In these cases you will need to measure a wrapper element instead.
+> `display: inline` 要素、または他の要素を内包できない要素（`<canvas>` など）もこの手法では測定できません。この場合は、代わりにラッバー要素を測定する必要があります。
diff --git a/content/tutorial/03-advanced-svelte/05-bindings/05-bind-this/README.md b/content/tutorial/03-advanced-svelte/05-bindings/05-bind-this/README.md
index 679c275b4..996c3fde0 100644
--- a/content/tutorial/03-advanced-svelte/05-bindings/05-bind-this/README.md
+++ b/content/tutorial/03-advanced-svelte/05-bindings/05-bind-this/README.md
@@ -2,7 +2,7 @@
 title: This
 ---
 
-The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
+読み取り専用の `this` バインディングは全要素（および 全コンポーネント）に適用され、レンダリングされた要素を参照することができます。例えば、`<canvas>` 要素への参照を得られます:
 
 ```svelte
 <canvas
@@ -12,4 +12,4 @@ The readonly `this` binding applies to every element (and component) and allows
 ></canvas>
 ```
 
-Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).
+注意 `canvas` の値はコンポーネントがマウントされるまで `undefined` になるので、`onMount` という[ライフサイクル関数](/tutorial/onmount)内にロジックを含めていることに注意してください。
diff --git a/content/tutorial/03-advanced-svelte/05-bindings/06-component-bindings/README.md b/content/tutorial/03-advanced-svelte/05-bindings/06-component-bindings/README.md
index 8422e6207..3b6ed0b87 100644
--- a/content/tutorial/03-advanced-svelte/05-bindings/06-component-bindings/README.md
+++ b/content/tutorial/03-advanced-svelte/05-bindings/06-component-bindings/README.md
@@ -2,7 +2,7 @@
 title: Component bindings
 ---
 
-Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
+DOM 要素のプロパティにバインドできるのと同様に、コンポーネントの props にもバインドできます。例えば、フォーム要素のように `<Keypad>` コンポーネントの `value` prop にバインドすることができます。
 
 ```svelte
 <Keypad
@@ -11,6 +11,6 @@ Just as you can bind to properties of DOM elements, you can bind to component pr
 />
 ```
 
-Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
+これで、ユーザがキーパッドを操作すると、親コンポーネントの `pin` の値が即座に更新されるようになりました。
 
-> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.
+> コンポーネントバインディングは控えめに使用してください。それらが多すぎるとアプリケーションの周りのデータの流れを追跡するのが困難になります。特に「信頼できる唯一の情報源(single source of truth)」が存在しない場合には。
diff --git a/content/tutorial/03-advanced-svelte/05-bindings/07-component-this/README.md b/content/tutorial/03-advanced-svelte/05-bindings/07-component-this/README.md
index 50ecc8b83..eedbf5c79 100644
--- a/content/tutorial/03-advanced-svelte/05-bindings/07-component-this/README.md
+++ b/content/tutorial/03-advanced-svelte/05-bindings/07-component-this/README.md
@@ -2,7 +2,7 @@
 title: Binding to component instances
 ---
 
-Just as you can bind to DOM elements, you can bind to component instances themselves. For example, we can bind the instance of `<InputField>` to a variable named `field` in the same way we did when binding DOM Elements
+DOM要素にバインドできるのと同じように、コンポーネントのインスタンス自体にもバインドできます。たとえば、DOM要素をバインドするときと同じように、`<InputField>` のインスタンスを `field` 変数にバインドすることができます。
 
 ```svelte
 <script>
@@ -12,7 +12,7 @@ Just as you can bind to DOM elements, you can bind to component instances themse
 <InputField bind:this={field} />
 ```
 
-Now we can programmatically interact with this component using `field`.
+これで、`field` を使って、このコンポーネントをプログラムで操作できるようになりました。
 
 ```svelte
 <button on:click="{() => field.focus()}">
@@ -20,4 +20,4 @@ Now we can programmatically interact with this component using `field`.
 </button>
 ```
 
-> Note that we can't do `{field.focus}` since field is undefined when the button is first rendered and throws an error.
+> なお、ボタンが最初にレンダリングされたとき、fieldは未定義であり、エラーが発生するため、`{field.focus}` をすることはできません。

From d612b578df4043854604b63b30cc5e44cbf14870 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 12:59:42 +0900
Subject: [PATCH 44/60] translate 03-advanced-svelte/06-classes into Japanese

---
 .../03-advanced-svelte/06-classes/01-classes/README.md      | 6 +++---
 .../06-classes/02-class-shorthand/README.md                 | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/06-classes/01-classes/README.md b/content/tutorial/03-advanced-svelte/06-classes/01-classes/README.md
index 7253b35ef..dc31efba2 100644
--- a/content/tutorial/03-advanced-svelte/06-classes/01-classes/README.md
+++ b/content/tutorial/03-advanced-svelte/06-classes/01-classes/README.md
@@ -2,7 +2,7 @@
 title: The class directive
 ---
 
-Like any other attribute, you can specify classes with a JavaScript attribute, seen here:
+他の属性と同じように、JavaScriptの属性でクラスを指定することができます。
 
 ```svelte
 <button
@@ -11,7 +11,7 @@ Like any other attribute, you can specify classes with a JavaScript attribute, s
 >foo</button>
 ```
 
-This is such a common pattern in UI development that Svelte includes a special directive to simplify it:
+これはUI開発ではよくあるパターンで、Svelteにはこれを単純化するための特別なディレクティブが含まれています。
 
 ```svelte
 <button
@@ -20,4 +20,4 @@ This is such a common pattern in UI development that Svelte includes a special d
 >foo</button>
 ```
 
-The `selected` class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.
+`selected` クラスは、式の値が truthy の場合は要素に追加され、falsy の場合は削除されます。
diff --git a/content/tutorial/03-advanced-svelte/06-classes/02-class-shorthand/README.md b/content/tutorial/03-advanced-svelte/06-classes/02-class-shorthand/README.md
index 2cf5ac477..6009990f5 100644
--- a/content/tutorial/03-advanced-svelte/06-classes/02-class-shorthand/README.md
+++ b/content/tutorial/03-advanced-svelte/06-classes/02-class-shorthand/README.md
@@ -2,7 +2,7 @@
 title: Shorthand class directive
 ---
 
-Often, the name of the class will be the same as the name of the value it depends on:
+多くの場合、クラスの名前はそれが依存する値の名前と同じになります。
 
 ```svelte
 <div class:big={big}>
@@ -10,7 +10,7 @@ Often, the name of the class will be the same as the name of the value it depend
 </div>
 ```
 
-In those cases we can use a shorthand form:
+そのような場合は、ショートハンドを使うことができます。
 
 ```svelte
 <div class:big>

From 7adf5f1a8abb92dcaa173e43f0c903ff7ccd3ebc Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:09:58 +0900
Subject: [PATCH 45/60] translate 03-advanced-svelte/07-composition into
 Japanese

---
 .../07-composition/01-slots/README.md              |  6 +++---
 .../07-composition/02-slot-fallbacks/README.md     |  4 ++--
 .../07-composition/03-named-slots/README.md        |  6 +++---
 .../07-composition/04-optional-slots/README.md     | 14 +++++++-------
 .../07-composition/05-slot-props/README.md         | 14 +++++++-------
 5 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/07-composition/01-slots/README.md b/content/tutorial/03-advanced-svelte/07-composition/01-slots/README.md
index 5e053a849..d0f5acccc 100644
--- a/content/tutorial/03-advanced-svelte/07-composition/01-slots/README.md
+++ b/content/tutorial/03-advanced-svelte/07-composition/01-slots/README.md
@@ -2,7 +2,7 @@
 title: Slots
 ---
 
-Just like elements can have children...
+HTML要素が子を持つことができるように…
 
 ```svelte
 <div>
@@ -10,7 +10,7 @@ Just like elements can have children...
 </div>
 ```
 
-...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Box.svelte`:
+…コンポーネントもそうすることができます。しかしコンポーネントが子を受け入れる前に、どこに子を置くかを知っておく必要があります。これを `<slot>` 要素で行います。これを `Box.svelte` の中に入れてください。
 
 ```svelte
 <div class="box">
@@ -18,7 +18,7 @@ Just like elements can have children...
 </div>
 ```
 
-You can now put things in the box:
+これで box に物を入れることができるようになりました。
 
 ```svelte
 <Box>
diff --git a/content/tutorial/03-advanced-svelte/07-composition/02-slot-fallbacks/README.md b/content/tutorial/03-advanced-svelte/07-composition/02-slot-fallbacks/README.md
index 9dbe2bad4..2d48666a4 100644
--- a/content/tutorial/03-advanced-svelte/07-composition/02-slot-fallbacks/README.md
+++ b/content/tutorial/03-advanced-svelte/07-composition/02-slot-fallbacks/README.md
@@ -2,7 +2,7 @@
 title: Slot fallbacks
 ---
 
-A component can specify _fallbacks_ for any slots that are left empty, by putting content inside the `<slot>` element:
+コンポーネントは、`<slot>` 要素の中にコンテンツを入れることで、空のままになっているスロットに対して *フォールバック* を指定することができます。
 
 ```svelte
 <div class="box">
@@ -12,7 +12,7 @@ A component can specify _fallbacks_ for any slots that are left empty, by puttin
 </div>
 ```
 
-We can now create instances of `<Box>` without any children:
+これで、子を持たない `<Box>` のインスタンスを作成できるようになりました。
 
 ```svelte
 <Box>
diff --git a/content/tutorial/03-advanced-svelte/07-composition/03-named-slots/README.md b/content/tutorial/03-advanced-svelte/07-composition/03-named-slots/README.md
index eb57c96d5..c4cb09c66 100644
--- a/content/tutorial/03-advanced-svelte/07-composition/03-named-slots/README.md
+++ b/content/tutorial/03-advanced-svelte/07-composition/03-named-slots/README.md
@@ -2,9 +2,9 @@
 title: Named slots
 ---
 
-The previous example contained a _default slot_, which renders the direct children of a component. Sometimes you will need more control over placement, such as with this `<ContactCard>`. In those cases, we can use _named slots_.
+前の例では、コンポーネントの直接の子をレンダリングする *デフォルトスロット* が含まれていました。この `<ContactCard>` のように、配置をより制御したい場合もあるでしょう。そのような場合には、*名前付きスロット* を使うことができます。
 
-In `ContactCard.svelte`, add a `name` attribute to each slot:
+`ContactCard.svelte` の各スロットに `name` 属性を追加します。
 
 ```svelte
 <article class="contact-card">
@@ -28,7 +28,7 @@ In `ContactCard.svelte`, add a `name` attribute to each slot:
 </article>
 ```
 
-Then, add elements with corresponding `slot="..."` attributes inside the `<ContactCard>` component:
+そして、対応する `slot="...."` 属性を持つ要素を `<ContactCard>` コンポーネント内に追加します。
 
 ```svelte
 <ContactCard>
diff --git a/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/README.md b/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/README.md
index 650addb56..e0efe0625 100644
--- a/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/README.md
+++ b/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/README.md
@@ -2,21 +2,21 @@
 title: Checking for slot content
 ---
 
-> The images in this exercise don't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/optional-slots
+> この練習問題の画像の部分が現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.jp/tutorial/optional-slots
 
-In some cases, you may want to control parts of your component based on whether the parent passes in content for a certain slot. Perhaps you have a wrapper around that slot, and you don't want to render it if the slot is empty. Or perhaps you'd like to apply a class only if the slot is present. You can do this by checking the properties of the special `$$slots` variable.
+場合によっては、親が特定のスロットのコンテンツを渡すかどうかに基づいてコンポーネントの一部を制御したいことがあるかもしれません。おそらく、そのスロットの周りにラッパーを持っていて、スロットが空の場合はレンダリングしたくないでしょう。あるいは、スロットが存在する場合にのみクラスを適用したいと考えているかもしれません。これは、特別な変数 `$$slots` のプロパティをチェックすることで実現できます。
 
-`$$slots` is an object whose keys are the names of the slots passed in by the parent component. If the parent leaves a slot empty, then `$$slots` will not have an entry for that slot.
+`$$slots` は親コンポーネントから渡されたスロットの名前がキーとなるオブジェクトです。親コンポーネントがスロットを空にした場合、 `$$slots` はそのスロットのエントリを持ちません。
 
-Notice that both instances of `<Project>` in this example render a container for comments and a notification dot, even though only one has comments. We want to use `$$slots` to make sure we only render these elements when the parent `<App>` passes in content for the `comments` slot.
+この例の `<Project>` のインスタンスは、片方だけにしかコメントがないにも関わらず、両方ともコメント用のコンテナと通知用のドットをレンダリングしていることに注目してください。親の `<App>` が `comments` スロットにコンテンツを渡した場合にのみ、これらの要素をレンダリングするように `$$slots` を使用したいと思います。
 
-In `Project.svelte`, update the `class:has-discussion` directive on the `<article>`:
+`Project.svelte`において、`<article>`の `class:has-discussion` ディレクティブを更新してください。
 
 ```svelte
 <article class:has-discussion={$$slots.comments}>
 ```
 
-Next, wrap the `comments` slot and its wrapping `<div>` in an `if` block that checks `$$slots`:
+次に、`comments` スロットとそれを囲んでいる `<div>` を `$$slots` をチェックする `if` ブロックで囲みます。
 
 ```svelte
 {#if $$slots.comments}
@@ -27,4 +27,4 @@ Next, wrap the `comments` slot and its wrapping `<div>` in an `if` block that ch
 {/if}
 ```
 
-Now the comments container and the notification dot won't render when `<App>` leaves the `comments` slot empty.
+これで、`<App>` の `comments` スロットが空の時は、コメントコンテナと通知ドットがレンダリングされなくなりました。
diff --git a/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/README.md b/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/README.md
index 7f4086184..54d70dec7 100644
--- a/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/README.md
+++ b/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/README.md
@@ -2,9 +2,9 @@
 title: Slot props
 ---
 
-In this app, we have a `<Hoverable>` component that tracks whether the mouse is currently over it. It needs to pass that data _back_ to the parent component, so that we can update the slotted contents.
+このアプリには、現在マウスがその上に乗ったかどうかを追跡する `<Hoverable>` コンポーネントがあります。スロットの中身を更新できるように、そのデータを親コンポーネントに *戻す* 必要があります。
 
-For this, we use _slot props_. In `Hoverable.svelte`, pass the `hovering` value into the slot:
+これには *slotプロパティ(slot props)* を使います。`Hoverable.svelte` の中で `hovering` の値をスロットに渡します。
 
 ```svelte
 <div on:mouseenter={enter} on:mouseleave={leave}>
@@ -12,9 +12,9 @@ For this, we use _slot props_. In `Hoverable.svelte`, pass the `hovering` value
 </div>
 ```
 
-> Remember you can also use the `{hovering}` shorthand, if you prefer.
+> お好みであれば、`{hovering}` というショートハンドを使えるのを覚えておいてください。
 
-Then, to expose `hovering` to the contents of the `<Hoverable>` component, we use the `let` directive:
+そして `<Hoverable>` コンポーネントの内容に `hovering` を公開するには、`let` ディレクティブを使います。
 
 ```svelte
 <Hoverable let:hovering={hovering}>
@@ -28,7 +28,7 @@ Then, to expose `hovering` to the contents of the `<Hoverable>` component, we us
 </Hoverable>
 ```
 
-You can rename the variable, if you want — let's call it `active` in the parent component:
+必要に応じて変数の名前を変更することができます。親コンポーネントでは `active` と呼ぶようにしましょう。
 
 ```svelte
 <Hoverable let:hovering={active}>
@@ -42,6 +42,6 @@ You can rename the variable, if you want — let's call it `active` in the paren
 </Hoverable>
 ```
 
-You can have as many of these components as you like, and the slotted props will remain local to the component where they're declared.
+これらのコンポーネントは好きなだけ持つことができ、slotプロパティは、それらが宣言されているコンポーネントに対してローカルであり続けます。
 
-> Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself.
+> 名前付きスロットはプロパティを持つこともできます。コンポーネント自身ではなく、`slot="...."` 属性を持つ要素に対して `let` ディレクティブを使用してください。

From 240bcfbe6e3adb40ab761866972ab522ead2576f Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:10:26 +0900
Subject: [PATCH 46/60] translate 03-advanced-svelte/08-context into Japanese

---
 .../08-context/01-context-api/README.md       | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/08-context/01-context-api/README.md b/content/tutorial/03-advanced-svelte/08-context/01-context-api/README.md
index 7be5b708c..f884d44bc 100644
--- a/content/tutorial/03-advanced-svelte/08-context/01-context-api/README.md
+++ b/content/tutorial/03-advanced-svelte/08-context/01-context-api/README.md
@@ -2,15 +2,15 @@
 title: setContext and getContext
 ---
 
-> This exercise doesn't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/context-api
+> この練習問題は現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.jp/tutorial/context-api
 
-The context API provides a mechanism for components to 'talk' to each other without passing around data and functions as props, or dispatching lots of events. It's an advanced feature, but a useful one.
+context API は、データや関数をプロパティとして渡したり、たくさんのイベントをディスパッチしたりすることなく、コンポーネント同士で'会話'するための仕組みを提供します。これは高度ですが、便利な機能です。
 
-Take this example app using a [Mapbox GL](https://docs.mapbox.com/mapbox-gl-js/overview/) map. We'd like to display the markers, using the `<MapMarker>` component, but we don't want to have to pass around a reference to the underlying Mapbox instance as a prop on each component.
+[Mapbox GL](https://docs.mapbox.com/mapbox-gl-js/overview/) のマップを使ったこのアプリの例を見てみましょう。`<MapMarker>` を使用してマーカーを表示したいのですが、ベースとなるMapboxインスタンスへの参照を各コンポーネントのプロパティとして渡したくありません。
 
-There are two halves to the context API — `setContext` and `getContext`. If a component calls `setContext(key, context)`, then any _child_ component can retrieve the context with `const context = getContext(key)`.
+context API は `setContext` と `getContext` に分かれます。もしコンポーネントが `setContext(key, context)` を呼ぶと、どの*子*コンポーネントでも `const context = getContext(key)` で context を取得することができます。
 
-Let's set the context first. In `Map.svelte`, import `setContext` from `svelte` and `key` from `mapbox.js` and call `setContext`:
+まずは context を設定してみましょう。`Map.svelte` では、`svelte` から `setContext` をインポートし、`mapbox.js` から `key` をインポートして、`setContext` を呼び出します。
 
 ```js
 import { onMount, setContext } from 'svelte';
@@ -21,9 +21,9 @@ setContext(key, {
 });
 ```
 
-The context object can be anything you like. Like [lifecycle functions](/tutorial/onmount), `setContext` and `getContext` must be called during component initialisation. Calling it afterwards - for example inside `onMount` - will throw an error. In this example, since `map` isn't created until the component has mounted, our context object contains a `getMap` function rather than `map` itself.
+context オブジェクトはなんでも構いません。[ライフサイクル関数](/tutorial/onmount)のように、`setContext` と `getContext` はコンポーネントの初期化時に呼び出されなければいけません。それより後 (例えば `onMount` の中) で呼び出すとエラーをスローします。この例では、コンポーネントがマウントされるまで `map` は作成されないので、この context オブジェクトには `map` 自体ではなく `getMap` 関数が含まれています。
 
-On the other side of the equation, in `MapMarker.svelte`, we can now get a reference to the Mapbox instance:
+一方、`MapMarker.svelte` では、Mapbox インスタンスへの参照を取得できるようになりました。
 
 ```js
 import { getContext } from 'svelte';
@@ -33,25 +33,25 @@ const { getMap } = getContext(key);
 const map = getMap();
 ```
 
-The markers can now add themselves to the map.
+これでマーカーをマップに追加することができるようになりました。
 
-> A more finished version of `<MapMarker>` would also handle removal and prop changes, but we're only demonstrating context here.
+> `<MapMarker>` の、より完成度の高いバージョンでは削除やプロパティの変更も扱えますが、この場では context のデモンストレーションに留めておきます。
 
 ## Context keys
 
-In `mapbox.js` you'll see this line:
+`mapbox.js`にはこの一行が含まれています。
 
 ```js
 const key = {};
 ```
 
-We can use anything as a key — we could do `setContext('mapbox', ...)` for example. The downside of using a string is that different component libraries might accidentally use the same one; using an object literal means the keys are guaranteed not to conflict in any circumstance (since an object only has referential equality to itself, i.e. `{} !== {}` whereas `"x" === "x"`), even when you have multiple different contexts operating across many component layers.
+どんなものでもキーとして使うことができます（例えば `setContext('mapbox', ...)` のように）。文字列を使用することの欠点は、異なるコンポーネントライブラリが誤って同じものを使ってしまう可能性があることです。オブジェクトリテラルを使用すると、どんな状況でもキーが衝突しないことが保証されます (オブジェクトは自身に対する参照の等価性しか持たないため。`{} !== {}` に対して `"x" === "x"` となる)。たとえ複数の異なる context が多くのコンポーネントレイヤーをまたいで動作している場合であっても、です。
 
 ## Contexts vs. stores
 
-Contexts and stores seem similar. They differ in that stores are available to _any_ part of an app, while a context is only available to _a component and its descendants_. This can be helpful if you want to use several instances of a component without the state of one interfering with the state of the others.
+context とストアは似ているように見えます。ストアはアプリの*どの*部分でも使用できるのに対し、context は*コンポーネントとその子孫*のみが利用できるという点で異なります。これは、ある状態が他の状態に干渉することなく、コンポーネントの複数のインスタンスを使用したい場合に便利です。
 
-In fact, you might use the two together. Since context is not reactive, values that change over time should be represented as stores:
+実際には、この2つを一緒に使うこともあるかもしれません。context はリアクティブではないので、時間の経過とともに変化する値はストアとして表現する必要があります。
 
 ```js
 const { these, are, stores } = getContext(...);

From 42c21ce4d2e9622e0f7916debb35df344100dced Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:10:51 +0900
Subject: [PATCH 47/60] translate 03-advanced-svelte/09-special-elements into
 Japanese

---
 .../01-svelte-self/README.md                  |  6 ++--
 .../02-svelte-component/README.md             |  6 ++--
 .../03-svelte-window/README.md                |  6 ++--
 .../04-svelte-window-bindings/README.md       | 20 ++++++-------
 .../05-svelte-body/README.md                  |  6 ++--
 .../06-svelte-head/README.md                  |  4 +--
 .../07-svelte-options/README.md               | 28 +++++++++----------
 .../08-svelte-fragment/README.md              |  8 +++---
 8 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/README.md
index 322c9f2a5..8456a42c0 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/README.md
@@ -2,9 +2,9 @@
 title: <svelte:self>
 ---
 
-Svelte provides a variety of built-in elements. The first, `<svelte:self>`, allows a component to contain itself recursively.
+Svelteは様々な組み込み要素を提供します。最初に `<svelte:self>` はコンポーネントがそれ自身を再帰的に含むことを可能にします。
 
-It's useful for things like this folder tree view, where folders can contain _other_ folders. In `Folder.svelte` we want to be able to do this...
+これはこのフォルダツリービューのように、フォルダの中に *他の* フォルダを含むことができるようにするのに便利です。`Folder.svelte` では、このようなことができるようにしたいのですが…
 
 ```svelte
 {#if file.files}
@@ -14,7 +14,7 @@ It's useful for things like this folder tree view, where folders can contain _ot
 {/if}
 ```
 
-...but that's impossible, because a module can't import itself. Instead, we use `<svelte:self>`:
+…しかし、モジュールは自分自身をインポートすることができないので、それは不可能です。代わりに `<svelte:self>` を使います。
 
 ```svelte
 {#if file.files}
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/02-svelte-component/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/02-svelte-component/README.md
index 37f56d5b1..78319875d 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/02-svelte-component/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/02-svelte-component/README.md
@@ -2,7 +2,7 @@
 title: <svelte:component>
 ---
 
-A component can change its category altogether with `<svelte:component>`. Instead of a sequence of `if` blocks...
+コンポーネントは `<svelte:component>` でカテゴリを完全に変更することができます。一連の `if` ブロックの代わりに…
 
 ```svelte
 {#if selected.color === 'red'}
@@ -14,10 +14,10 @@ A component can change its category altogether with `<svelte:component>`. Instea
 {/if}
 ```
 
-...we can have a single dynamic component:
+…我々は単一の動的なコンポーネントを持つことができます。
 
 ```svelte
 <svelte:component this={selected.component}/>
 ```
 
-The `this` value can be any component constructor, or a falsy value — if it's falsy, no component is rendered.
+`this` 値には任意のコンポーネントコンストラクタ、または falsy な値を指定できます。falsy の値を指定した場合、コンポーネントはレンダリングされません。
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-window/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-window/README.md
index 9a8f3f014..d09e6e052 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-window/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-window/README.md
@@ -2,12 +2,12 @@
 title: <svelte:window>
 ---
 
-Just as you can add event listeners to any DOM element, you can add event listeners to the `window` object with `<svelte:window>`.
+イベントリスナーを任意の DOM 要素に追加できるのと同じように、`window` オブジェクトにも `<svelte:window>` でイベントリスナーを追加できます。
 
-On line 11, add the `keydown` listener:
+11行目に `keydown` リスナーを追加します。
 
 ```svelte
 <svelte:window on:keydown={handleKeydown}/>
 ```
 
-> As with DOM elements, you can add [event modifiers](/tutorial/event-modifiers) like `preventDefault`.
+> DOM要素と同様に `preventDefault` のような[イベント修飾子](/tutorial/event-modifiers)を追加することができます。
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/04-svelte-window-bindings/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/04-svelte-window-bindings/README.md
index bbc849231..ba947bb44 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/04-svelte-window-bindings/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/04-svelte-window-bindings/README.md
@@ -2,20 +2,20 @@
 title: <svelte:window> bindings
 ---
 
-We can also bind to certain properties of `window`, such as `scrollY`. Update line 7:
+また、`window` の特定のプロパティ、例えば `scrollY` のようなプロパティにバインドすることもできます。7行目を更新してください。
 
 ```svelte
 <svelte:window bind:scrollY={y}/>
 ```
 
-The list of properties you can bind to is as follows:
+バインドできるプロパティの一覧は以下の通りです。
 
-- `innerWidth`
-- `innerHeight`
-- `outerWidth`
-- `outerHeight`
-- `scrollX`
-- `scrollY`
-- `online` — an alias for `window.navigator.onLine`
+* `innerWidth`
+* `innerHeight`
+* `outerWidth`
+* `outerHeight`
+* `scrollX`
+* `scrollY`
+* `online` — これは `window.navigator.onLine` の別名です
 
-All except `scrollX` and `scrollY` are readonly.
+`scrollX` と `scrollY` 以外はすべて読み込み専用です。
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-body/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-body/README.md
index f9d965b92..b68037ec9 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-body/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-body/README.md
@@ -2,13 +2,13 @@
 title: <svelte:body>
 ---
 
-Similar to `<svelte:window>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
+`<svelte:window>` と同様に、`<svelte:body>` 要素では `document.body` で発生するイベントをリッスンすることができます。これは `window` では発生しない `mouseenter` と `mouseleave` イベントを利用する際に便利です。
 
-Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
+`<svelte:body>` タグに `mouseenter` と `mouseleave` ハンドラを追加してください。
 
 ```svelte
 <svelte:body
 	on:mouseenter={handleMouseenter}
 	on:mouseleave={handleMouseleave}
 />
-```
+```
\ No newline at end of file
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-head/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-head/README.md
index afedf2148..2fedfd244 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-head/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-head/README.md
@@ -2,7 +2,7 @@
 title: <svelte:head>
 ---
 
-The `<svelte:head>` element allows you to insert elements inside the `<head>` of your document:
+`<svelte:head>` 要素を使うと、ドキュメントの `<head>` 内に要素を挿入することができます。
 
 ```svelte
 <svelte:head>
@@ -10,4 +10,4 @@ The `<svelte:head>` element allows you to insert elements inside the `<head>` of
 </svelte:head>
 ```
 
-> In server-side rendering (SSR) mode, contents of `<svelte:head>` are returned separately from the rest of your HTML.
+> サーバサイドレンダリング (SSR) モードでは、`<svelte:head>` の内容は残りのHTMLとは別に返されます。
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/README.md
index de19c1cf6..8a6adb57a 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/README.md
@@ -2,29 +2,29 @@
 title: <svelte:options>
 ---
 
-The `<svelte:options>` element allows you to specify compiler options.
+`<svelte:options>` 要素はコンパイラのオプションを指定することができます。
 
-We'll use the `immutable` option as an example. In this app, the `<Todo>` component flashes whenever it receives new data. Clicking on one of the items toggles its `done` state by creating an updated `todos` array. This causes the _other_ `<Todo>` items to flash, even though they don't end up making any changes to the DOM.
+例として `immutable` オプションを使用します。このアプリでは、新しいデータを受け取るたびに `<Todo>` コンポーネントが点滅します。アイテムの1つをクリックすると、更新された `todos` 配列が作成され、`done` 状態が切り替わります。これにより、*他の* `<Todo>` アイテムも点滅しますが、DOM は変更されません。
 
-We can optimise this by telling the `<Todo>` component to expect _immutable_ data. This means that we're promising never to _mutate_ the `todo` prop, but will instead create new todo objects whenever things change.
+これを最適化するには、`<Todo>` コンポーネントに *immutable* データを期待するように指示します。これは、`todo` プロパティを *変更* しないことを約束していることを意味します。
 
-Add this to the top of the `Todo.svelte` file:
+これを `Todo.svelte` ファイルの先頭に追加します。
 
 ```svelte
 <svelte:options immutable={true}/>
 ```
 
-> You can shorten this to `<svelte:options immutable/>` if you prefer.
+> お好みであれば、これを `<svelte:options immutable/>` と短くしても構いません。
 
-Now, when you toggle todos by clicking on them, only the updated component flashes.
+これで、Todos をクリックして切り替えると、更新されたコンポーネントだけが点滅するようになりました。
 
-The options that can be set here are:
+ここで設定できるオプションは
 
-- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
-- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
-- `accessors={true}` — adds getters and setters for the component's props
-- `accessors={false}` — the default
-- `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
-- `tag="..."` — the name to use when compiling this component as a custom element
+* `immutable={true}` — 変更可能なデータは使用できません、コンパイラは値が変更されたかどうかを判断するために単純な参照等価性チェックを行うことができます。
+* `immutable={false}` — デフォルトです。Svelteは、変更可能なオブジェクトが変更されたかどうかについて、より保守的になります。
+* `accessors={true}` — コンポーネントのプロパティ(props)のゲッターとセッターを追加します。
+* `accessors={false}` — デフォルトの値です。
+* `namespace="..."` —  このコンポーネントが使用される名前空間。最も一般的なものは `"svg"` です。
+* `tag="..."` — このコンポーネントをカスタム要素としてコンパイルする際に使用する名前。
 
-Consult the [API reference](https://svelte.dev/docs) for more information on these options.
+これらのオプションの詳細については、[API リファレンス](/docs)を参照してください。
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-fragment/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-fragment/README.md
index 2a2e5e5d8..d245e7dc5 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-fragment/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-fragment/README.md
@@ -2,9 +2,9 @@
 title: <svelte:fragment>
 ---
 
-The `<svelte:fragment>` element allows you to place content in a named slot without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
+`<svelte:fragment>` 要素は、コンテナ DOM 要素でラップすることなく、名前のついたスロットにコンテンツを配置する事ができます。これによりドキュメントのフローレイアウトが維持されます。
 
-In the example notice how we applied a flex layout with a gap of `1em` to the box.
+例では box クラスに `1em` の gap を持つ flex レイアウトを適用しています。
 
 ```sv
 <!-- Box.svelte -->
@@ -23,9 +23,9 @@ In the example notice how we applied a flex layout with a gap of `1em` to the bo
 </style>
 ```
 
-However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.
+しかしながら、footer のコンテンツは新たなフローレイアウトを生成した div 要素でラップされているため、このリズムに沿った配置がされていません。
 
-We can solve this by changing `<div slot="footer">` in the `App` component. Replace the `<div>` with `<svelte:fragment>`:
+これは `App` コンポーネントの `<div slot="footer">` を書き換えることで解決できます。この `<div>` を `<svelte:fragment>` に書き換えます。
 
 ```sv
 <svelte:fragment slot="footer">

From d495682559c84bc7ab94fd30d1d5312488b91aaa Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:11:17 +0900
Subject: [PATCH 48/60] translate 03-advanced-svelte/10-module-context into
 Japanese

---
 .../10-module-context/01-sharing-code/README.md           | 8 ++++----
 .../10-module-context/02-module-exports/README.md         | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/10-module-context/01-sharing-code/README.md b/content/tutorial/03-advanced-svelte/10-module-context/01-sharing-code/README.md
index 4ac909a7e..3fe3474a9 100644
--- a/content/tutorial/03-advanced-svelte/10-module-context/01-sharing-code/README.md
+++ b/content/tutorial/03-advanced-svelte/10-module-context/01-sharing-code/README.md
@@ -2,11 +2,11 @@
 title: Sharing code
 ---
 
-In all the examples we've seen so far, the `<script>` block contains code that runs when each component instance is initialised. For the vast majority of components, that's all you'll ever need.
+これまで見てきたすべての例では、`<script>` ブロックには各コンポーネントのインスタンスが初期化されたときに実行されるコードが含まれています。大部分のコンポーネントでは、これだけで十分です。
 
-Very occasionally, you'll need to run some code outside of an individual component instance. For example, you can play all five of these audio players simultaneously; it would be better if playing one stopped all the others.
+ごく稀に、個々のコンポーネントのインスタンスの外でコードを実行する必要があることがあります。例えば、5つのオーディオプレーヤーを同時に再生することができますが、1つを再生すると他のすべてのオーディオプレーヤーが停止した方がより良いでしょう。
 
-We can do that by declaring a `<script context="module">` block. Code contained inside it will run once, when the module first evaluates, rather than when a component is instantiated. Place this at the top of `AudioPlayer.svelte`:
+これを実現するには、`<script context="module">` ブロックを宣言します。ここに含まれるコードは、コンポーネントがインスタンス化されたときではなく、モジュールが最初に評価されたときに一度だけ実行されます。これを `AudioPlayer.svelte` の先頭に配置してください。
 
 ```svelte
 <script context="module">
@@ -14,7 +14,7 @@ We can do that by declaring a `<script context="module">` block. Code contained
 </script>
 ```
 
-It's now possible for the components to 'talk' to each other without any state management:
+これで状態を管理することなく、コンポーネント同士がお互いに「話す」ことが可能になりました。
 
 ```js
 function stopOthers() {
diff --git a/content/tutorial/03-advanced-svelte/10-module-context/02-module-exports/README.md b/content/tutorial/03-advanced-svelte/10-module-context/02-module-exports/README.md
index 9746a44af..b85dd91f6 100644
--- a/content/tutorial/03-advanced-svelte/10-module-context/02-module-exports/README.md
+++ b/content/tutorial/03-advanced-svelte/10-module-context/02-module-exports/README.md
@@ -2,7 +2,7 @@
 title: Exports
 ---
 
-Anything exported from a `context="module"` script block becomes an export from the module itself. If we export a `stopAll` function from `AudioPlayer.svelte`...
+`context="module"` スクリプトブロックからエクスポートされたものはすべてモジュール自体からのエクスポートになります。もし、`AudioPlayer.svelte` から `stopAll` 関数をエクスポートすると…
 
 ```svelte
 <script context="module">
@@ -16,7 +16,7 @@ Anything exported from a `context="module"` script block becomes an export from
 </script>
 ```
 
-...we can then import it from `App.svelte`...
+…そしてそれを `App.svelte` でインポートすることができます…
 
 ```svelte
 <script>
@@ -24,7 +24,7 @@ Anything exported from a `context="module"` script block becomes an export from
 </script>
 ```
 
-...and use it in an event handler:
+…さらにそれをイベントハンドラで使うことができます。
 
 ```svelte
 <button on:click={stopAll}>
@@ -32,4 +32,4 @@ Anything exported from a `context="module"` script block becomes an export from
 </button>
 ```
 
-> You can't have a default export, because the component _is_ the default export.
+> default export は使うことはできません、なぜならコンポーネント *が* default export だからです。

From 70353bedb092bef0dcc0dba08c7d759c3a329bbb Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:11:58 +0900
Subject: [PATCH 49/60] translate 03-advanced-svelte/11-debugging into Japanese

---
 .../03-advanced-svelte/11-debugging/01-debug/README.md      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/11-debugging/01-debug/README.md b/content/tutorial/03-advanced-svelte/11-debugging/01-debug/README.md
index 2da1e3d2b..6578934b7 100644
--- a/content/tutorial/03-advanced-svelte/11-debugging/01-debug/README.md
+++ b/content/tutorial/03-advanced-svelte/11-debugging/01-debug/README.md
@@ -2,9 +2,9 @@
 title: The @debug tag
 ---
 
-Occasionally, it's useful to inspect a piece of data as it flows through your app.
+しばしば、アプリを流れるデータを検査するのに便利です。
 
-One approach is to use `console.log(...)` inside your markup. If you want to pause execution, though, you can use the `{@debug ...}` tag with a comma-separated list of values you want to inspect:
+1つの方法は、マークアップの中で `console.log(....)` を使用することです。しかし、実行を一時停止したい場合は、`{@debug ...}`タグを使用して、検査したい値をカンマで区切ったリストで指定することができます。
 
 ```svelte
 {@debug user}
@@ -12,4 +12,4 @@ One approach is to use `console.log(...)` inside your markup. If you want to pau
 <h1>Hello {user.firstname}!</h1>
 ```
 
-If you now open your devtools and start interacting with the `<input>` elements, you'll trigger the debugger as the value of `user` changes.
+新しく devtools を開いて `<input>` 要素とのやりとりを始めると、`user` の値が変わるとデバッガが動作します。

From ec95210eb493c78a67aadbad297f56afcebc1980 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:13:06 +0900
Subject: [PATCH 50/60] translate 03-advanced-svelte/12-next-steps into
 Japanese

---
 .../12-next-steps/01-congratulations/README.md         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/12-next-steps/01-congratulations/README.md b/content/tutorial/03-advanced-svelte/12-next-steps/01-congratulations/README.md
index cdc4ced72..7a12a404e 100644
--- a/content/tutorial/03-advanced-svelte/12-next-steps/01-congratulations/README.md
+++ b/content/tutorial/03-advanced-svelte/12-next-steps/01-congratulations/README.md
@@ -2,10 +2,12 @@
 title: Congratulations!
 ---
 
-You've now finished the Svelte tutorial and are ready to start building apps. You can refer back to individual chapters at any time (click the title above to reveal a dropdown) or continue your learning via the [API reference](https://svelte.dev/docs), [Examples](https://svelte.dev/examples) and [Blog](https://svelte.dev/blog). If you're a Twitter user, you can get updates via [@sveltejs](https://twitter.com/sveltejs).
+これでSvelteチュートリアルは終了し、アプリの構築を始める準備が整いました。各章はいつでも参照することができます(上のタイトルをクリックするとドロップダウンが表示されます)。または [API リファレンス](/docs)、[例](/examples)、[ブログ](/blog) で学習を続けてください。あなたがTwitterユーザーであれば、[@sveltejs](https://twitter.com/sveltejs)を介して更新情報を得ることができます。
 
-To get set up in your local development environment, check out [the quickstart guide](https://svelte.dev/blog/the-easiest-way-to-get-started).
+ローカルの開発環境で設定するには、[クイックスタートガイド](/docs#getting-started)を確認してみてください。
 
-If you're looking for a more expansive framework that includes routing, server-side rendering and everything else, take a look at [SvelteKit](https://kit.svelte.dev).
+ルーティング、サーバーサイドレンダリング、その他すべてを含む、より拡張性の高いフレームワークをお探しなら、[SvelteKit](https://kit.svelte.jp)をご覧ください。
 
-Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](https://svelte.dev/chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.
+最重要: あなたはSvelteコミュニティのメンバーになったので、[友好的なDiscordチャットルームに参加してください](https://svelte.dev/chat)。そこにはSvelteユーザーの仲間がいて、私たちがフレームワークの将来を計画する場所でもあります。
+
+> 日本語翻訳版 追記：上記のDiscordはSvelte本体のもので、英語でコミュニケーションが行われています。もし日本語で質問したり交流したいのであれば、[Svelte日本のDiscord](https://discord.com/invite/YTXq3ZtBbx)にどうぞ！

From a8062df887f704fcb49fb20b37697e4569b299eb Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:22:03 +0900
Subject: [PATCH 51/60] change URL

---
 content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md  | 2 +-
 .../tutorial/01-svelte/08-stores/04-derived-stores/README.md  | 2 +-
 .../09-special-elements/07-svelte-options/README.md           | 2 +-
 .../12-next-steps/01-congratulations/README.md                | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md
index 4708996ca..41609557f 100644
--- a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md
+++ b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md
@@ -2,7 +2,7 @@
 title: onMount
 ---
 
-> この練習問題の画像は現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.dev/tutorial/onmount
+> この練習問題の画像は現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.jp/tutorial/onmount
 
 すべてのコンポーネントには、作成される時を開始とし、破棄される時に終了とする *ライフサイクル* があります。その重要なタイミングにコードを実行できるようにする関数がいくつかあります。
 
diff --git a/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md b/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md
index 1b4fc84fe..3ec5393a5 100644
--- a/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md
+++ b/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md
@@ -8,4 +8,4 @@ title: Derived stores
 export const elapsed = derived(time, ($time) => Math.round(($time - start) / 1000));
 ```
 
-> 複数の入力からストアを作成したり、値を返す代わりに `set` を使用して明示的に値をセットすることができます。（これは非同期で値を取得する場合に役立ちます。）詳細については [API reference](/docs#run-time-svelte-store-derived) を参照してください。
+> 複数の入力からストアを作成したり、値を返す代わりに `set` を使用して明示的に値をセットすることができます。（これは非同期で値を取得する場合に役立ちます。）詳細については [API リファレンス](https://svelte.jp/docs#run-time-svelte-store-derived) を参照してください。
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/README.md
index 8a6adb57a..350f701dd 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/README.md
@@ -27,4 +27,4 @@ title: <svelte:options>
 * `namespace="..."` —  このコンポーネントが使用される名前空間。最も一般的なものは `"svg"` です。
 * `tag="..."` — このコンポーネントをカスタム要素としてコンパイルする際に使用する名前。
 
-これらのオプションの詳細については、[API リファレンス](/docs)を参照してください。
+これらのオプションの詳細については、[API リファレンス](https://svelte.jp/docs)を参照してください。
diff --git a/content/tutorial/03-advanced-svelte/12-next-steps/01-congratulations/README.md b/content/tutorial/03-advanced-svelte/12-next-steps/01-congratulations/README.md
index 7a12a404e..ee5ebdead 100644
--- a/content/tutorial/03-advanced-svelte/12-next-steps/01-congratulations/README.md
+++ b/content/tutorial/03-advanced-svelte/12-next-steps/01-congratulations/README.md
@@ -2,9 +2,9 @@
 title: Congratulations!
 ---
 
-これでSvelteチュートリアルは終了し、アプリの構築を始める準備が整いました。各章はいつでも参照することができます(上のタイトルをクリックするとドロップダウンが表示されます)。または [API リファレンス](/docs)、[例](/examples)、[ブログ](/blog) で学習を続けてください。あなたがTwitterユーザーであれば、[@sveltejs](https://twitter.com/sveltejs)を介して更新情報を得ることができます。
+これでSvelteチュートリアルは終了し、アプリの構築を始める準備が整いました。各章はいつでも参照することができます(上のタイトルをクリックするとドロップダウンが表示されます)。または [API リファレンス](https://svelte.jp/docs)、[例](https://svelte.jp/examples)、[ブログ](https://svelte.jp/blog) で学習を続けてください。あなたがTwitterユーザーであれば、[@sveltejs](https://twitter.com/sveltejs)を介して更新情報を得ることができます。
 
-ローカルの開発環境で設定するには、[クイックスタートガイド](/docs#getting-started)を確認してみてください。
+ローカルの開発環境で設定するには、[クイックスタートガイド](https://svelte.jp/docs#getting-started)を確認してみてください。
 
 ルーティング、サーバーサイドレンダリング、その他すべてを含む、より拡張性の高いフレームワークをお探しなら、[SvelteKit](https://kit.svelte.jp)をご覧ください。
 

From 201d7ca2d8200a4df705a34fa139adeb59044412 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:28:37 +0900
Subject: [PATCH 52/60] fix URL

---
 .../02-transitions/04-custom-css-transitions/README.md          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/README.md b/content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/README.md
index 98205dd8a..675c68f1f 100644
--- a/content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/README.md
+++ b/content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/README.md
@@ -20,7 +20,7 @@ function fade(node, { delay = 0, duration = 400 }) {
 
 * `delay` — トランジション開始までのミリ秒
 * `duration` — ミリ秒単位でのトランジションの長さ
-* `easing` — `p => t` イージング関数 ( [tweening](/tutorial/tweened) の章を参照)
+* `easing` — `p => t` イージング関数 ( [tweening](/tutorial/tweens) の章を参照)
 * `css` — `u === 1 - t` である `(t, u) => css` 関数
 * `tick` — ノードに何らかの影響を与える `(t, u) => {...}` 関数
 

From f521c477f3f299d5b98581ff1e891e9f21007e90 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:44:11 +0900
Subject: [PATCH 53/60] translate
 01-svelte/01-introduction/02-your-first-component into Japanese

---
 .../01-introduction/02-your-first-component/README.md  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md b/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md
index 0e1f3d6ac..dddc0bc95 100644
--- a/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md
+++ b/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md
@@ -2,13 +2,13 @@
 title: Your first component
 ---
 
-In Svelte, an application is composed from one or more _components_. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The `App.svelte` file, open in the code editor to the right, is a simple component.
+Svelteでは、アプリケーションは1つ以上の*コンポーネント*で構成されます。コンポーネントとは、HTML、CSS、JavaScript をカプセル化した再利用可能な自己完結型のコードブロックのことで、`.svelte` ファイルに記述します。右のコードエディタにある `App.svelte` は単純なコンポーネントの例です。
 
 ## Adding data
 
-A component that just renders some static markup isn't very interesting. Let's add some data.
+静的なマークアップ(HTML)をレンダリングするだけでは面白くありません。いくつかデータを追加してみましょう。
 
-First, add a script tag to your component and declare a `name` variable:
+まず、`script` タグを追加してその中に `name` 変数を宣言します。
 
 ```svelte
 +++<script>
@@ -18,13 +18,13 @@ First, add a script tag to your component and declare a `name` variable:
 <h1>Hello world!</h1>
 ```
 
-Then, we can refer to `name` in the markup:
+次に、マークアップから `name` を参照します。
 
 ```svelte
 <h1>Hello +++{name}+++!</h1>
 ```
 
-Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting.
+中括弧`{}`の中にはJavaScriptのコードを置くことができます。中括弧の中の `name` を `name.toUpperCase()` に置き換えてみましょう。
 
 ```svelte
 <h1>Hello {name+++.toUpperCase()+++}!</h1>

From 98b6ee8e6acea1bcf6ebd64ecae7b7bc697607e2 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:56:38 +0900
Subject: [PATCH 54/60] fix typo

---
 .../02-reactivity/04-updating-arrays-and-objects/README.md      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md b/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md
index bb9f943f0..e9a1c7a6d 100644
--- a/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md
+++ b/content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md
@@ -2,7 +2,7 @@
 title: Updating arrays and objects
 ---
 
-Svelte のりアクティビティは代入によってトリガーされるため、`push` や `splice` のような配列のメソッドを使用しても更新が自動的に行われません。例えば、'Add a number' ボタンをクリックしても今のところ何も起こりません。
+Svelte のリアクティビティは代入によってトリガーされるため、`push` や `splice` のような配列のメソッドを使用しても更新が自動的に行われません。例えば、'Add a number' ボタンをクリックしても今のところ何も起こりません。
 
 これを修正する方法の1つとして、冗長に見えるかもしれませんが、代入を追加することです。
 

From c22b319642648fadd81343020172831fb0dad20d Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 18 Jan 2023 22:42:20 +0900
Subject: [PATCH 55/60] Update app.html (#14)

---
 src/app.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.html b/src/app.html
index 8b1aa7c88..ccae7ffab 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ja">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="http://github.com/%sveltekit.assets%/favicon.png" />

From 93811782086e2f3aa1adf79cca79a0db190aeec2 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Mon, 20 Mar 2023 12:13:43 +0900
Subject: [PATCH 56/60] translate a part of tutorials

---
 .../09-special-elements/03-svelte-element/README.md         | 6 +++---
 .../09-special-elements/06-svelte-document/README.md        | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/README.md
index ace344db4..e4e595583 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/README.md
@@ -2,7 +2,7 @@
 title: <svelte:element>
 ---
 
-Sometimes we don't know in advance what kind of DOM element to render. `<svelte:element>` comes in handy here. Instead of a sequence of `if` blocks...
+どの種類の DOM 要素をレンダリングするのか事前にわからない場合があります。この場合は `<svelte:element>` が便利です。`if` ブロックを何個も並べる代わりに…
 
 ```html
 {#if selected === 'h1'}
@@ -14,10 +14,10 @@ Sometimes we don't know in advance what kind of DOM element to render. `<svelte:
 {/if}
 ```
 
-...we can have a single dynamic component:
+…動的なコンポーネントを1つ置きます:
 
 ```html
 <svelte:element this={selected}>I'm a {selected} tag</svelte:element>
 ```
 
-The `this` value can be any string, or a falsy value — if it's falsy, no element is rendered.
\ No newline at end of file
+`this` の値は任意の文字列、または falsy な値です。falsy である場合、要素がレンダリングされません。
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-document/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-document/README.md
index b40c83a6f..a1a7d6674 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-document/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-document/README.md
@@ -2,12 +2,12 @@
 title: <svelte:document>
 ---
 
-Similar to `<svelte:window>`, the `<svelte:document>` element allows you to listen for events that fire on `document`. This is useful with events like `selectionchange`, which doesn't fire on `window`.
+`<svelte:window>` に似ていますが、`<svelte:document>` 要素では `document` で発生するイベントをリッスンすることができます。これは、`window` では発生しない `selectionchange` などのイベントを利用する際に便利です。
 
-Add the `selectionchange` handler to the `<svelte:document>` tag:
+`<svelte:document>` タグに `selectionchange` ハンドラを追加してください。
 
 ```html
 <svelte:document on:selectionchange={handleSelectionChange} />
 ```
 
-> Avoid `mouseenter` and `mouseleave` handlers on this element, these events are not fired on `document` in all browsers. Use `<svelte:body>` for this instead. 
+> `mouseenter` と `mouseleave` ハンドラは、全てのブラウザで `document` では発生しないため、この要素で使用するのは避けてください。`mouseenter` と `mouseleave` は `<svelte:body>` で使用してください。

From 886b1dc8f5c6bbb35f23217567c89dc526635f47 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Thu, 6 Apr 2023 18:27:59 +0900
Subject: [PATCH 57/60] translate exercises into Japanese

---
 .../07-composition/02-named-slots/README.md               | 8 ++++----
 .../07-composition/03-slot-fallbacks/README.md            | 2 +-
 .../09-special-elements/07-svelte-document/README.md      | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/tutorial/03-advanced-svelte/07-composition/02-named-slots/README.md b/content/tutorial/03-advanced-svelte/07-composition/02-named-slots/README.md
index 3a19f5136..9afeaf8c2 100644
--- a/content/tutorial/03-advanced-svelte/07-composition/02-named-slots/README.md
+++ b/content/tutorial/03-advanced-svelte/07-composition/02-named-slots/README.md
@@ -2,9 +2,9 @@
 title: Named slots
 ---
 
-The previous example contained a _default slot_, which renders the direct children of a component. Sometimes you will need more control over placement. In those cases, we can use _named slots_.
+前回の例には _default slot_ があり、それはコンポーネントの直接の子をレンダリングするものでした。時々、配置場所をもっとコントロールしなければならないときがあると思います。そのような場合は、 _named slots_ を使用することができます。
 
-Inside the `<Card>` component, we've got `<span slot="telephone">` and others for `company` and `address`. Let's add the corresponding named slots in `Card.svelte`:
+`<Card>` コンポーネントの子として、すでに `<span slot="telephone">` や、その他 `company` や `address` が置いてあります。これに対応するように、named slots を `Card.svelte` に追加しましょう:
 
 ```svelte
 /// file: Card.svelte
@@ -22,7 +22,7 @@ Inside the `<Card>` component, we've got `<span slot="telephone">` and others fo
 </div>
 ```
 
-We need to add some styles to the `<small>` element so that it occupies its own line. The contents of `<Card>` inherit styles from `Card.svelte`, such as `font-family` (the lettering is something called ['Silian Rail'](https://www.youtube.com/watch?v=aZVkW9p-cCU)), but normal scoping rules apply — we need to add the styles to `App.svelte` because that's where the element is:
+`<small>` 要素にいくつかスタイルを追加して、自身の行におさまるようにします。`<Card>` のコンテンツは `Card.svelte` から `font-family` (この書体は ['Silian Rail'](https://www.youtube.com/watch?v=aZVkW9p-cCU) と呼ばれます) などのスタイルを継承しますが、通常のスコープのルールが適用されるため、この要素がある場所、つまり `App.svelte` にスタイルを追加します:
 
 ```svelte
 /// file: App.svelte
@@ -42,7 +42,7 @@ We need to add some styles to the `<small>` element so that it occupies its own
 </style>
 ```
 
-Alternatively, we could use the `:global` modifier inside `Card.svelte` to target all `small` elements inside `.card`:
+別の方法として、`Card.svelte` の中で `:global` 修飾子を使用して `.card` の内側にあるすべての `small` 要素をターゲットにすることができます:
 
 ```svelte
 /// file: Card.svelte
diff --git a/content/tutorial/03-advanced-svelte/07-composition/03-slot-fallbacks/README.md b/content/tutorial/03-advanced-svelte/07-composition/03-slot-fallbacks/README.md
index cb6169707..0d4f2d99d 100644
--- a/content/tutorial/03-advanced-svelte/07-composition/03-slot-fallbacks/README.md
+++ b/content/tutorial/03-advanced-svelte/07-composition/03-slot-fallbacks/README.md
@@ -2,7 +2,7 @@
 title: Slot fallbacks
 ---
 
-A component can specify _fallbacks_ for any slots that are left empty, by putting content inside the `<slot>` element:
+コンポーネントは、`<slot>` 要素の内側にコンテンツを置くことで、slot が空になっているときのための _fallback_ を指定することができます:
 
 ```svelte
 /// file: Box.svelte
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-document/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-document/README.md
index 5ff7472a6..b4e0b4df6 100644
--- a/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-document/README.md
+++ b/content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-document/README.md
@@ -2,13 +2,13 @@
 title: <svelte:document>
 ---
 
-The `<svelte:document>` element allows you to listen for events that fire on `document`. This is useful with events like `selectionchange`, which doesn't fire on `window`.
+`<svelte:document>` 要素では `document` で発生するイベントをリスンすることができます。これは、`selectionchange` のような、`window` では発生しないイベントを扱うときに便利です。
 
-Add the `selectionchange` handler to the `<svelte:document>` tag:
+`selectionchange` ハンドラを `<svelte:document>` タグに追加します:
 
 ```svelte
 /// file: App.svelte
 <svelte:document +++on:selectionchange={handleSelectionChange}+++ />
 ```
 
-> Avoid `mouseenter` and `mouseleave` handlers on this element, as these events are not fired on `document` in all browsers. Use `<svelte:body>` instead.
+> `mouseenter` や `mouseleave` はすべてのブラウザで `document` では発生しないため、これらのハンドラをこの要素に追加しないでください。代わりに `<svelte:body>` を使用してください。

From 8201a5c92341136ac749ba4af8fba01dbb977a39 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Fri, 7 Apr 2023 19:50:02 +0900
Subject: [PATCH 58/60] translate exercises into Japanese

---
 .../02-adding-parameters-to-actions/README.md | 10 +++---
 .../05-bindings/03-media-elements/README.md   | 34 +++++++++----------
 .../05-bindings/07-component-this/README.md   | 10 +++---
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md b/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md
index 7c765ef45..50ece0938 100644
--- a/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md
+++ b/content/tutorial/02-advanced-svelte/04-actions/02-adding-parameters-to-actions/README.md
@@ -2,11 +2,11 @@
 title: Adding parameters
 ---
 
-Like transitions and animations, an action can take an argument, which the action function will be called with alongside the element it belongs to.
+トランジションとアニメーションと同じように、アクションは引数を取ることができます。その引数と、アクション関数自身が属する要素を以って、アクション関数は呼び出されます。
 
-In this exercise, we want to add a tooltip to the `<button>` using the [`Tippy.js`](https://atomiks.github.io/tippyjs/) library. The action is already wired up with `use:tooltip`, but if you hover over the button (or focus it with the keyboard) the tooltip contains no content.
+この演習では、[`Tippy.js`](https://atomiks.github.io/tippyjs/) ライブラリを使って `<button>` にツールチップを追加したいと思います。アクションはすでに `use:tooltip` によって紐付けられていますが、ボタンをホバーしても (キーボードでフォーカスしても) ツールチップには何も表示されません。
 
-First, the action needs to accept some options and pass them to Tippy:
+最初に、アクションでオプションを受け取り、それを Tippy に渡さなければなりません:
 
 ```js
 /// file: App.svelte
@@ -21,7 +21,7 @@ function tooltip(node, +++options+++) {
 }
 ```
 
-Then, we need to pass some options into the action:
+それから、オプションをアクションに渡します:
 
 ```svelte
 /// file: App.svelte
@@ -30,7 +30,7 @@ Then, we need to pass some options into the action:
 </button>
 ```
 
-The tooltip now works — almost. If we change the text in the `<input>`, the tooltip will not reflect the new content. We can fix that by adding an `update` method to the returned object.
+これでツールチップが動作します — ほとんどは。`<input>` のテキストを変更しても、ツールチップに新しい内容が反映されません。`update` メソッドを追加し、オブジェクトを返すことでこれを修正します。
 
 ```js
 /// file: App.svelte
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md b/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md
index e8ab3f46f..6a8e1248e 100644
--- a/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md
+++ b/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md
@@ -2,9 +2,9 @@
 title: Media elements
 ---
 
-You can bind to properties of `<audio>` and `<video>` elements, making it easy to (for example) build custom player UI, like `AudioPlayer.svelte`.
+`<audio>` 要素と `<video>` 要素のプロパティをバインドすることができるので、(例えば) `AudioPlayer.svelte` のようなカスタムのプレーヤー UI をとても簡単に作ることができます。
 
-First, add the `<audio>` element along with its bindings (we'll use the shorthand form for `duration` and `paused`):
+最初に、`<audio>` 要素とそのバインディングを追加します (`duration` と `paused` は短縮形を使います):
 
 ```svelte
 /// file: AudioPlayer.svelte
@@ -22,7 +22,7 @@ First, add the `<audio>` element along with its bindings (we'll use the shorthan
 	/>
 ```
 
-Next, add an event handler to the `<button>` that toggles `paused`:
+次に、`paused` を切り替える `<button>` にイベントハンドラを追加します:
 
 ```svelte
 /// file: AudioPlayer.svelte
@@ -33,7 +33,7 @@ Next, add an event handler to the `<button>` that toggles `paused`:
 />
 ```
 
-Our audio player now has basic functionality. Let's add the ability to seek to a specific part of a track by dragging the slider. Inside the slider's `pointerdown` handler there's a `seek` function, where we can update `time`:
+これでオーディオプレーヤーに基本的な機能が付きました。では、スライダーをドラッグして曲の指定した部分にシークできる機能を追加しましょう。スライダー(slider)の `pointerdown` ハンドラの内側にある `seek` 関数で、`time` を更新することができます:
 
 ```js
 /// file: AudioPlayer.svelte
@@ -48,7 +48,7 @@ function seek(e) {
 }
 ```
 
-When the track ends, be kind — rewind:
+曲が終わったら、親切に巻き戻しましょう:
 
 ```svelte
 /// file: AudioPlayer.svelte
@@ -63,21 +63,21 @@ When the track ends, be kind — rewind:
 />
 ```
 
-The complete set of bindings for `<audio>` and `<video>` is as follows — six _readonly_ bindings...
+`<audio>` と `<video>` のバインディングの完全なセットは以下の通りです — 6つの _読み取り専用(readonly)_ のバインディング…
 
-- `duration` (readonly) — the total duration of the video, in seconds
-- `buffered` (readonly) — an array of `{start, end}` objects
-- `seekable` (readonly) — ditto
-- `played` (readonly) — ditto
+- `duration` (readonly) — ビデオの総再生時間 (秒単位)
+- `buffered` (readonly) — `{start, end}` オブジェクトの配列
+- `seekable` (readonly) — 同上
+- `played` (readonly) — 同上
 - `seeking` (readonly) — boolean
 - `ended` (readonly) — boolean
 
-...and five _two-way_ bindings:
+…と5つの _双方向_ バインディングです:
 
-- `currentTime` — the current point in the video, in seconds
-- `playbackRate` — how fast to play the video, where `1` is 'normal'
-- `paused` — this one should be self-explanatory
-- `volume` — a value between 0 and 1
-- `muted` — a boolean value where true is muted
+- `currentTime` — ビデオ内の現在のポイント (秒単位)
+- `playbackRate` — ビデオの再生速度 (`1` が 'normal')
+- `paused` — これは自明ですね
+- `volume` — 0 から 1 の値
+- `muted` — boolean で、true はミュートを意味します
 
-Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
+video には読み取り専用の `videoWidth` と `videoHeight` バインディングがあります。
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/README.md b/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/README.md
index 86dcba848..1f7722e76 100644
--- a/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/README.md
+++ b/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/README.md
@@ -2,11 +2,11 @@
 title: Binding to component instances
 ---
 
-Just as you can bind to DOM elements, you can bind to component instances themselves with `bind:this`.
+DOM 要素にバインドできるのと同じように、`bind:this` でコンポーネントインスタンス自体にバインドすることができます。
 
-This is useful in the rare cases that you need to interact with a component programmatically (rather than by providing it with updated props). Revisiting our canvas app from [a few exercises ago](actions), it would be nice to add a button to clear the screen.
+ごく稀に、(更新されたプロパティを提供するのではなく) プログラム的にコンポーネントと対話しなければならないことがあり、これはそれに有用です。[少し前の演習](actions)の canvas アプリを振り返ると、画面をクリアするボタンを追加するともっとよくなりそうです。
 
-First, let's export a function from `Canvas.svelte`:
+最初に、`Canvas.svelte` から関数をエクスポートしましょう:
 
 ```svelte
 /// file: Canvas.svelte
@@ -18,7 +18,7 @@ export let size;
 }+++
 ```
 
-Then, create a reference to the component instance:
+次に、コンポーネントインスタンスの参照を作成します:
 
 ```svelte
 /// file: App.svelte
@@ -38,7 +38,7 @@ Then, create a reference to the component instance:
 	<Canvas +++bind:this={canvas}+++ color={selected} size={size} />
 ```
 
-Finally, add a button that calls the `clear` function:
+最後に、`clear` 関数を呼び出すボタンを追加します:
 
 ```svelte
 /// file: App.svelte

From a6e6b20e34c860060dc056b36754ebf522176a5d Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Mon, 10 Apr 2023 12:26:17 +0900
Subject: [PATCH 59/60] translate parts of tutorials into Japanese

---
 .../03-media-elements/app-a/src/lib/tracks.js |  8 ++++----
 .../01-sharing-code/app-a/src/lib/tracks.js   |  8 ++++----
 .../01-hooks/02-handlefetch/README.md         |  2 +-
 .../01-universal-load-functions/README.md     | 20 +++++++++----------
 src/routes/tutorial/[slug]/Loading.svelte     |  4 ++--
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-a/src/lib/tracks.js b/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-a/src/lib/tracks.js
index a05933cb3..8c4dc4af4 100644
--- a/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-a/src/lib/tracks.js
+++ b/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-a/src/lib/tracks.js
@@ -1,28 +1,28 @@
 export const tracks = [
 	{
 		// https://musopen.org/music/9862-the-blue-danube-op-314/
-		src: 'https://learn.svelte.dev/assets/media/music/strauss.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/strauss.mp3',
 		title: 'The Blue Danube Waltz',
 		artist: 'Johann Strauss'
 	},
 
 	{
 		// https://musopen.org/music/43775-the-planets-op-32/
-		src: 'https://learn.svelte.dev/assets/media/music/holst.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/holst.mp3',
 		title: 'Mars, the Bringer of War',
 		artist: 'Gustav Holst'
 	},
 
 	{
 		// https://musopen.org/music/8010-3-gymnopedies/
-		src: 'https://learn.svelte.dev/assets/media/music/satie.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/satie.mp3',
 		title: 'Gymnopédie no. 1',
 		artist: 'Erik Satie'
 	},
 
 	{
 		// https://musopen.org/music/43683-requiem-in-d-minor-k-626/
-		src: 'https://learn.svelte.dev/assets/media/music/mozart.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/mozart.mp3',
 		title: 'Requiem in D minor, K. 626 - III. Sequence - Lacrymosa',
 		artist: 'Wolfgang Amadeus Mozart'
 	}
diff --git a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/tracks.js b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/tracks.js
index a05933cb3..8c4dc4af4 100644
--- a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/tracks.js
+++ b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/tracks.js
@@ -1,28 +1,28 @@
 export const tracks = [
 	{
 		// https://musopen.org/music/9862-the-blue-danube-op-314/
-		src: 'https://learn.svelte.dev/assets/media/music/strauss.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/strauss.mp3',
 		title: 'The Blue Danube Waltz',
 		artist: 'Johann Strauss'
 	},
 
 	{
 		// https://musopen.org/music/43775-the-planets-op-32/
-		src: 'https://learn.svelte.dev/assets/media/music/holst.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/holst.mp3',
 		title: 'Mars, the Bringer of War',
 		artist: 'Gustav Holst'
 	},
 
 	{
 		// https://musopen.org/music/8010-3-gymnopedies/
-		src: 'https://learn.svelte.dev/assets/media/music/satie.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/satie.mp3',
 		title: 'Gymnopédie no. 1',
 		artist: 'Erik Satie'
 	},
 
 	{
 		// https://musopen.org/music/43683-requiem-in-d-minor-k-626/
-		src: 'https://learn.svelte.dev/assets/media/music/mozart.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/mozart.mp3',
 		title: 'Requiem in D minor, K. 626 - III. Sequence - Lacrymosa',
 		artist: 'Wolfgang Amadeus Mozart'
 	}
diff --git a/content/tutorial/04-advanced-sveltekit/01-hooks/02-handlefetch/README.md b/content/tutorial/04-advanced-sveltekit/01-hooks/02-handlefetch/README.md
index b1f793d2e..d4bac5444 100644
--- a/content/tutorial/04-advanced-sveltekit/01-hooks/02-handlefetch/README.md
+++ b/content/tutorial/04-advanced-sveltekit/01-hooks/02-handlefetch/README.md
@@ -2,6 +2,6 @@
 title: handleFetch
 ---
 
-SvelteKit provides several _hooks_ — ways to intercept and override the framework's default behaviour.
+SvelteKit は、いくつかの _hooks_ (フレームワークのデフォルトの動作をインターセプトしてオーバーライドする方法) を提供します。
 
 > Coming soon
diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/README.md b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/README.md
index 100d5cec5..258a4f21a 100644
--- a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/README.md
+++ b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/01-universal-load-functions/README.md
@@ -2,20 +2,20 @@
 title: Universal load functions
 ---
 
-In the [previous section on loading](page-data) we loaded data from the server using `+page.server.js` and `+layout.server.js` files. This is very convenient if you need to do things like getting data directly from a database, or reading cookies.
+[以前学習した loading のセクション](page-data)では、`+page.server.js` と `+layout.server.js` ファイルを使ってサーバーからデータを取得しました。データベースから直接データを取得したり、cookie から読み取ったりするのにとても便利です。
 
-Sometimes it doesn't make sense to load data from the server when doing a client-side navigation. For example:
+しかし、クライアントサイドナビゲーションを行うとき、サーバーからデータを取得することが理にかなっていないケースもあります。例えば:
 
-- You're loading data from an external API
-- You want to use in-memory data if it's available
-- You want to delay navigation until an image has been preloaded, to avoid pop-in
-- You need to return something from `load` that can't be serialized (SvelteKit uses [devalue](https://github.com/Rich-Harris/devalue) to turn server data into JSON), such as a component or a store
+- 外部の API からデータを取得する
+- インメモリデータが使えるならそれを使いたい
+- ポップインを避けるため、画像がプリロードされるまでナビゲーションを遅らせたい
+- コンポーネントやストアなど、シリアライズできないもの (SvelteKit は [devalue](https://github.com/Rich-Harris/devalue) でサーバーのデータを JSON に変換しています) を `load` から返す必要がある
 
-In this exercise, we're dealing with the latter case. The server `load` functions in `src/routes/red/+page.server.js`, `src/routes/green/+page.server.js` and `src/routes/blue/+page.server.js` return a `component` constructor, which can't be serialized like data. If you navigate to `/red`, `/green` or `/blue`, you'll see a 'Data returned from `load` ... is not serializable' error in the terminal.
+この演習では、最後のケースを扱います。`src/routes/red/+page.server.js`、`src/routes/green/+page.server.js`、`src/routes/blue/+page.server.js` の server `load` 関数は、シリアライズできない `component` コンストラクタを返します。`/red`、`/green`、`/blue` に移動すると、ターミナルで 'Data returned from `load` ... is not serializable' というエラーが表示されるでしょう。
 
-To turn the server `load` functions into universal `load` functions, rename each `+page.server.js` file to `+page.js`. Now, the functions will run on the server during server-side rendering, but will also run in the browser when the app hydrates or the user performs a client-side navigation.
+server `load` 関数を universal `load` 関数に変えるため、各 `+page.server.js` ファイルを `+page.js` にリネームします。これで、この関数はサーバーサイドレンダリング中にサーバーで実行されるものの、アプリのハイドレーション中またはユーザーがクライアントサイドナビゲーションを実行しているときにも実行されるようになります。
 
-We can now use the `component` returned from these `load` functions like any other value, including in `src/routes/+layout.svelte`:
+これで、他の値と同じように、`load` 関数から返された `component` を `src/routes/+layout.svelte` で使えるようになりました:
 
 ```svelte
 /// file: src/routes/+layout.svelte
@@ -34,4 +34,4 @@ We can now use the `component` returned from these `load` functions like any oth
 </nav>
 ```
 
-Read the [documentation](https://kit.svelte.dev/docs/load#shared-vs-server) to learn more about the distinction between server `load` functions and universal `load` functions, and when to use which.
+server `load` 関数と universal `load` 関数の違いや、その使い分けなど、詳細については[ドキュメント](https://kit.svelte.jp/docs/load#shared-vs-server)をご参照ください。
diff --git a/src/routes/tutorial/[slug]/Loading.svelte b/src/routes/tutorial/[slug]/Loading.svelte
index cddea05a3..d2a3b271a 100644
--- a/src/routes/tutorial/[slug]/Loading.svelte
+++ b/src/routes/tutorial/[slug]/Loading.svelte
@@ -32,7 +32,7 @@
 				</p>
 				<p>
 					If you have 'Delete cookies and site data when Firefox is closed' enabled in
-					<code>about:preferences#privacy</code>, make sure <code>learn.svelte.dev</code> is included
+					<code>about:preferences#privacy</code>, make sure <code>learn.svelte.jp</code> is included
 					as an exception.
 				</p>
 			{:else if /chrome/i.test(navigator.userAgent) && !/edg/i.test(navigator.userAgent)}
@@ -51,7 +51,7 @@
 						/>
 					</svg>
 					icon in the URL bar or go to
-					<code>chrome://settings/cookies</code> and add <code>learn.svelte.dev</code> to 'Sites that
+					<code>chrome://settings/cookies</code> and add <code>learn.svelte.jp</code> to 'Sites that
 					can always use cookies'.
 				</p>
 			{:else}

From 679401407ccdfe8bb75ef38b90b98f10f98e6e12 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 22 Jan 2025 19:35:44 +0900
Subject: [PATCH 60/60] Update README.md

---
 README.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 8866c4475..fd3280854 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,11 @@
+> [!IMPORTANT]
+> **learn.svelte.dev の日本語化プロジェクトは、以下のリポジトリに統合されました！**
+> 
+> https://github.com/svelte-jp/svelte.dev
+> 
+
+---
+
 # learn.svelte.dev
 
 A soup-to-nuts interactive tutorial on how to build apps with Svelte.
@@ -28,4 +36,4 @@ Tutorials live inside `content`. Each tutorial consists of a `README.md`, which
 
 ## Bumping tutorial dependencies
 
-Bump the dependency (for example Svelte) in both the root and the `content/common` `package.json`. In the root do `pnpm i` (to update `pnpm-lock.yaml`), in `content/common` do `npm i` (to update `package-lock.json`).
\ No newline at end of file
+Bump the dependency (for example Svelte) in both the root and the `content/common` `package.json`. In the root do `pnpm i` (to update `pnpm-lock.yaml`), in `content/common` do `npm i` (to update `package-lock.json`).