From f1a9f4204068debb5a5ec3beeffce63a982ba8a8 Mon Sep 17 00:00:00 2001
From: tomoam <29677552+tomoam@users.noreply.github.com>
Date: Wed, 23 Oct 2024 22:53:44 +0900
Subject: [PATCH 01/24] Analysing for translation (#1)
* analysis for translation
* some css
---
.../blog/2024-10-22-svelte-5-is-alive.md | 10 +++----
.../kit/10-getting-started/10-introduction.md | 10 +++----
.../svelte/01-introduction/01-overview.md | 12 ++++----
.../01-welcome-to-svelte/index.md | 4 +--
apps/svelte.dev/src/app.html | 2 +-
apps/svelte.dev/src/routes/+page.svelte | 2 +-
.../src/routes/_home/Community.svelte | 7 ++---
.../src/routes/_home/Companies.svelte | 2 +-
apps/svelte.dev/src/routes/_home/Hero.svelte | 2 +-
.../src/routes/_home/Supporters/index.svelte | 6 ++--
.../src/routes/_home/Testimonials.svelte | 16 +++++-----
apps/svelte.dev/src/routes/docs/+page.svelte | 30 +++++++++----------
.../routes/tutorial/[...slug]/Sidebar.svelte | 2 +-
.../site-kit/src/lib/components/Text.svelte | 14 ++++++++-
packages/site-kit/src/lib/styles/base.css | 3 ++
packages/site-kit/src/lib/styles/tokens.css | 2 ++
16 files changed, 71 insertions(+), 53 deletions(-)
diff --git a/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md b/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md
index e87439096d..41115591f7 100644
--- a/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md
+++ b/apps/svelte.dev/content/blog/2024-10-22-svelte-5-is-alive.md
@@ -1,15 +1,15 @@
---
-title: Svelte 5 is alive
-description: Our biggest release yet
+title: Svelte 5 誕生
+description: 最も大きなリリース
author: The Svelte team
authorURL: https://svelte.dev/
---
-After almost 18 months of development, comprising thousands of commits from dozens of contributors, Svelte 5 is finally stable.
+およそ18ヶ月の開発を経て、そしてたくさんのコントリビューターによる数千ものコミットによって、ついに Svelte 5 は安定版(stable)になりました。
-It’s the most significant release in the project’s history. Svelte 5 is a ground-up rewrite: your apps will be faster, smaller and more reliable. You’ll be able to write more consistent and idiomatic code. For newcomers to the framework, there’s less stuff to learn.
+このプロジェクトの歴史上、最も重要なリリースとなります。Svelte 5 は根本から書き直されました: あなたのアプリはより高速に、よりサイズが小さく、そしてより信頼性が高くなります。あなたはより一貫性があり、よりイディオマティックなコードを書くことができます。Svelte を使用したことがない方からすると、学ぶべきことがより少なくなりました。
-Despite all that, Svelte is almost completely backwards-compatible with Svelte 4 — for the majority of users, the initial upgrade will be completely seamless:
+それにもかかわらず、Svelte はほぼ完全に Svelte 4 と後方互換性があります。ユーザーの多くは、最初のアップグレードを完全にシームレスに行うことができるでしょう:
```json
{
diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md b/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
index 52e2eab278..841bba219b 100644
--- a/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
+++ b/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md
@@ -1,18 +1,18 @@
---
-title: Introduction
+title: イントロダクション
---
## Before we begin
-> [!NOTE] If you're new to Svelte or SvelteKit we recommend checking out the [interactive tutorial](https://learn.svelte.dev).
+> [!NOTE] Svelte や SvelteKit が初めてなら、こちらの[インタラクティブなチュートリアル](/tutorial)をチェックしてみることをおすすめします。
>
-> If you get stuck, reach out for help in the [Discord chatroom](https://svelte.dev/chat).
+> 行き詰まったら、[Discord chatroom](https://svelte.dev/chat) でヘルプを求めてください。
## What is SvelteKit?
-SvelteKit is a framework for rapidly developing robust, performant web applications using [Svelte](https://svelte.dev/). If you're coming from React, SvelteKit is similar to Next. If you're coming from Vue, SvelteKit is similar to Nuxt.
+SvelteKit は、[Svelte](https://svelte.dev/) を使用して堅牢でハイパフォーマンスな web アプリケーションを迅速に開発するためのフレームワークです。もしあなたが React 界隈から来たのであれば、SvelteKit は Next に似ているものです。Vue 界隈から来たのであれば、Nuxt に似ています。
-To learn more about the kinds of applications you can build with SvelteKit, see the [FAQ](faq#What-can-I-make-with-SvelteKit).
+SvelteKit で構築することのできるアプリケーションの種類については、[FAQ](faq#What-can-I-make-with-SvelteKit) をご覧ください。
## What is Svelte?
diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/01-overview.md b/apps/svelte.dev/content/docs/svelte/01-introduction/01-overview.md
index 5acbe4897b..94410e0e84 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/01-overview.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/01-overview.md
@@ -1,8 +1,8 @@
---
-title: Overview
+title: 概要
---
-Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript...
+Svelte は Web 上のユーザーインターフェースを構築するためのフレームワークです。Svelte はコンパイラを使用し、HTML、CSS、JavaScript で記述された宣言的なコンポーネントを...
```svelte
@@ -21,10 +21,10 @@ Svelte is a framework for building user interfaces on the web. It uses a compile
```
-...into lean, tightly optimized JavaScript.
+...無駄のない、タイトで最適化された JavaScript に変換します。
-You can use it to build anything on the web, from standalone components to ambitious full stack apps (using Svelte's companion application framework, [SvelteKit](../kit)) and everything in between.
+これにより、スタンドアローンなコンポーネントからフルスタックアプリ (Svelte のアプリケーションフレームワークである [SvelteKit](../kit) を使用) まで、お望みのものをなんでも構築することができます。
-These pages serve as reference documentation. If you're new to Svelte, we recommend starting with the [interactive tutorial](/tutorial) and coming back here when you have questions.
+こちらのページはリファレンスドキュメントとして提供されています。もしあなたが Svelte の初心者なら、先に[インタラクティブなチュートリアル](/tutorial)から始めて、わからないことがあるときにこちらに戻ってくることをおすすめします。
-You can also try Svelte online in the [playground](/playground) or, if you need a more fully-featured environment, on [StackBlitz](https://sveltekit.new).
+また、[Playground](/playground) を使ってオンラインで Svelte を試すこともできますし、より高機能な環境が必要なら [StackBlitz](https://sveltekit.new) で試すこともできます。
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
index 07d0af3634..db4eb3958a 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
@@ -2,9 +2,9 @@
title: Welcome to Svelte
---
-Welcome to the Svelte tutorial! This will teach you everything you need to know to easily build web applications of all sizes, with high performance and a small footprint.
+Svelte チュートリアルにようこそ！ ここでは、高速でフットプリントが小さい、あらゆるサイズの Web アプリケーションを簡単に構築するために必要なこと全てを学ぶことができます。
-You can also consult the [API docs](https://svelte.dev/docs) and visit the [playground](https://svelte.dev/playground), or — if you're impatient to start hacking on your machine locally — create a project with `npx sv create`.
+[API ドキュメント](/docs) や [Playground](/playground) を参照することもできます。また、すぐにローカルで動かしたい場合は、`npx sv create` を実行してプロジェクトを作成してください。
## What is Svelte?
diff --git a/apps/svelte.dev/src/app.html b/apps/svelte.dev/src/app.html
index ea62d87f86..cbd8f3b602 100644
--- a/apps/svelte.dev/src/app.html
+++ b/apps/svelte.dev/src/app.html
@@ -1,5 +1,5 @@
-
+
diff --git a/apps/svelte.dev/src/routes/+page.svelte b/apps/svelte.dev/src/routes/+page.svelte
index ef2cb2cf01..19314e385b 100644
--- a/apps/svelte.dev/src/routes/+page.svelte
+++ b/apps/svelte.dev/src/routes/+page.svelte
@@ -31,7 +31,7 @@
Watch the full Svelte Origins documentarySvelte Origins ドキュメンタリーをフルで視聴する
diff --git a/apps/svelte.dev/src/routes/_home/Community.svelte b/apps/svelte.dev/src/routes/_home/Community.svelte
index 0ea3bcb0a2..b1e9bae684 100644
--- a/apps/svelte.dev/src/routes/_home/Community.svelte
+++ b/apps/svelte.dev/src/routes/_home/Community.svelte
@@ -3,12 +3,11 @@
-
join our friendly community
+
私たちのフレンドリーなコミュニティに参加しませんか
- Our sister organisation, Svelte Society, organises
- events around the globe.
+ 私たちの姉妹組織である Svelte Society は、世界中でイベントを運営しています。
- Backed by Vercel and countless donors,
- developed by full-time and part-time maintainers, Svelte is here to stay.
+ Vercel と数え切れない貢献者による支援、
+ そしてフルタイムまたはパートタイムのメンテナーによる開発のおかげで、Svelte はここに存在しています。
- Svelte is a UI framework that uses a compiler to let you write breathtakingly concise
- components that do minimal work in the browser, using languages you already know — HTML, CSS
- and JavaScript. It’s a love letter to web development.
+ Svelte はコンパイラを使用する UI フレームワークで、息を呑むほど簡潔にコンポーネントを記述でき、
+ ブラウザで最小限の動作となるようにしてくれます。開発者には既知の言語である HTML、CSS、JavaScript を使うことができます。
+ これは、web 開発へのラブレターです。
- But don’t take our word for it. Developers consistently rank Svelte as the framework they’re
- most excited about using.
+ 私たちだけでなく、常に開発者たちからも、Svelte は使用する上で最もエキサイティングなフレームワークとしてランク付けされています。
```
-Importantly, these rules are _scoped to the component_. You won't accidentally change the style of `
` elements elsewhere in your app, as we'll see in the next step.
+重要なのは、これらのスタイルがこのコンポーネントにのみ適用されるということです。次のステップで説明しますが、アプリの別の箇所の`
`要素のスタイルに影響を与えてしまうようなことはありません。
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/index.md b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/index.md
index f18f8a20da..259902c733 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/index.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 `+++
```
-...and include a `` component:
+…そして `` コンポーネントを使用します。
```svelte
/// file: App.svelte
@@ -21,6 +21,6 @@ Add a `
```
-If we now add a second component _without_ an `answer` prop, it will fall back to the default:
+`answer` prop なしで2つ目のコンポーネントを追加すると、デフォルト値にフォールバックすることがわかります。
```svelte
/// file: App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
index daded48b5e..f34aa2187e 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
@@ -2,9 +2,9 @@
title: Spread props
---
-In this exercise, we've forgotten to pass the `name` prop expected by `PackageInfo.svelte`, meaning the `` element is empty and the npm link is broken.
+この演習では、`PackageInfo.svelte` が期待する `name` prop を指定し忘れているため、`` 要素が空になり、npm link が壊れています。
-We _could_ fix it by adding the prop...
+以下のように prop を追加することで、これを修正できます…
```svelte
/// file: App.svelte
@@ -16,20 +16,20 @@ We _could_ fix it by adding the prop...
/>
```
-...but since the properties of `pkg` correspond to the component's expected props, we can 'spread' them onto the component instead:
+…ただ、`pkg` のプロパティはこのコンポーネントが期待する props と一致しているので、代わりに 'spread' 構文を使用することができます:
```svelte
/// file: App.svelte
```
-> [!NOTE] Conversely, you can get an object containing all the props that were passed into a component using a rest property...
+> [!NOTE] 逆に、rest プロパティを使用して、そのコンポーネントに渡されたオブジェクトの props を全て受け取ることができます...
>
> ```js
> let { name, ...stuff } = $props();
> ```
>
-> ...or by skipping [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) altogether:
+> ...もしくは、[destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) を完全にスキップします:
>
> ```js
> let stuff = $props();
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/01-if-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/01-if-blocks/index.md
index 30a2c2e4e3..b6177e3b70 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/01-if-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/01-if-blocks/index.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. Let's add some text that appears when `count` is greater than `10`:
+条件付きでマークアップをレンダリングする場合は、そのマークアップを `if` ブロックで囲みます。`count` が 10 より大きいときに表示されるテキストを追加してみましょう:
```svelte
/// file: App.svelte
@@ -18,4 +18,4 @@ To conditionally render some markup, we wrap it in an `if` block. Let's add some
{/if}+++
```
-Try it — update the component, and click on the button a few times.
+試してみてください。コンポーネントを更新し、ボタンを何回かクリックしてみてください。
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/02-else-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/02-else-blocks/index.md
index 52cfc5564e..142a390004 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/02-else-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/02-else-blocks/index.md
@@ -2,7 +2,7 @@
title: Else blocks
---
-Just like in JavaScript, an `if` block can have an `else` block:
+JavaScript と同じように、`if` ブロックには `else` ブロックを置くことができます:
```svelte
/// file: App.svelte
@@ -13,4 +13,4 @@ Just like in JavaScript, an `if` block can have an `else` block:
{/if}
```
-`{#...}` opens a block. `{/...}` closes a block. `{:...}` _continues_ a block. Congratulations — you've already learned almost all the syntax Svelte adds to HTML.
+`{#...}` はブロックを開始します。`{/...}` はブロックを終了します。`{:...}` はブロックを継続します。おめでとうございます！あなたは既にSvelteがHTMLに追加した構文のほとんどを学びました。
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/03-else-if-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/03-else-if-blocks/index.md
index 22ea202a96..72718d256d 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/03-else-if-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/03-else-if-blocks/index.md
@@ -2,7 +2,7 @@
title: Else-if blocks
---
-Multiple conditions can be 'chained' together with `else if`:
+複数の条件を `else if` と一緒に '連結' することができます。
```svelte
/// file: App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md
index 3154fb74be..3b85c89d6b 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md
@@ -2,9 +2,9 @@
title: Each blocks
---
-When building user interfaces you'll often find yourself working with lists of data. In this exercise, we've repeated the `
```
-> [!NOTE] The expression (`colors`, in this case) can be any iterable or array-like object — in other words, anything that works with [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from).
+> [!NOTE] 式(この場合は `colors`)には、任意の iterable や配列に似たオブジェクトにすることができます。言い換えると、[`Array.from`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from) が使用できるならなんでも良いということです。
-Now we need to use the `color` variable in place of `"red"`:
+こうする場合、`"red"` の代わりに `color` 変数を使用する必要があります:
```svelte
/// file: App.svelte
@@ -38,7 +38,7 @@ Now we need to use the `color` variable in place of `"red"`:
```
-You can get the current _index_ as a second argument, like so:
+第2引数として現在の _index_ をこのように取得することができます。
```svelte
/// file: App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
index 2df9594247..f5baa5f47a 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
@@ -2,20 +2,20 @@
title: Keyed each blocks
---
-By default, when you modify the value of an `each` block, it will add and remove DOM nodes at the _end_ of the block, and update any values that have changed. That might not be what you want.
+デフォルトでは、`each` ブロックの値を変更すると、ブロックの _末尾_ に DOM ノードが追加・削除され、変更された値が更新されます。これはあなたが期待した動作ではないかもしれません。
-It's easier to show why than to explain. Inside `Thing.svelte`, `name` is a dynamic prop but `emoji` is a constant.
+説明するより見ていただいたほうがおわかり頂けるでしょう。`Thing.svelte` の中を見てみると、`name` は動的な prop ですが `emoji` は定数です。
-Click the 'Remove first thing' button a few times, and notice what happens:
+'Remove first thing' ボタンを何回かクリックすると、以下のことが発生します:
-1. It removes the last component.
-2. It then updates the `name` value in the remaining DOM nodes, but not the emoji.
+1. 一番最後のコンポーネントが削除される
+2. 残りの DOM ノードの `name` の値が更新されるが、絵文字は更新されない
-> [!NOTE] If you're coming from React, this might seem strange, because you're used to the entire component re-rendering when state changes. Svelte works differently: the component 'runs' once, and subsequent updates are 'fine-grained'. This makes things faster and gives you more control.
+> [!NOTE] もしあなたが React を経験しているなら、奇妙に見えるかもしれません。なぜなら、あなたは state が変更されたらコンポーネント全体が再レンダリングされることに慣れているからです。Svelte の動作は異なります: コンポーネントは一度だけ実行され、その後の更新は 'きめ細やかに(fine-grained)' 行われます。これにより、より高速に、よりコントロールしやすくなります。
-One way to fix it would be to make `emoji` a [`$derived`](derived-state) value. But it makes more sense to remove the first `` component altogether than to remove the _last_ one and update all the others.
+これを修正する方法の1つとしては、`emoji` を [`$derived`](derived-state) の値にすることが考えられます。しかし、末尾の `` コンポーネントを削除して全てを更新するより、先頭の `` コンポーネントを完全に削除するほうが、理にかなっています。
-To do that, we specify a unique _key_ for each iteration of the `each` block:
+そのためには、`each` ブロックの each イテレーションに一意な _key_ を指定します。
```svelte
/// file: App.svelte
@@ -24,4 +24,4 @@ To do that, we specify a unique _key_ for each iteration of the `each` block:
{/each}
```
-> [!NOTE] 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.
+> [!NOTE] Svelte は内部的に `Map` を使用しているので、どんなオブジェクトでもキーとして使用できます。つまり `(thing.id)` の代わりに `(thing)` を使うことができます。しかし、文字列または数値を使用する方が一般的に安全です。なぜなら、例えばAPIサーバーからの新しいデータで更新する場合に、参照が等しくなくても同一性が持続することを意味するからです。
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md
index 4eeb51c35a..7b7f2d84dc 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.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
/// file: App.svelte
@@ -15,9 +15,9 @@ Most web applications have to deal with asynchronous data at some point. Svelte
{/await}+++
```
-> [!NOTE] Only the most recent `promise` is considered, meaning you don't need to worry about race conditions.
+> [!NOTE] 直近の `promise` だけが処理されるので、レースコンディション(race conditions)を気にする必要はありません。
-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}
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/index.md b/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/index.md
index 8778f8ce77..29e794e5d9 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/index.md
@@ -2,7 +2,7 @@
title: DOM events
---
-As we've briefly seen already, you can listen to any DOM event on an element (such as click or [pointermove](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event)) with an `on` function:
+今までざっと見てきたように、 要素の任意の DOM イベント (例えば click や [pointermove](https://developer.mozilla.org/ja/docs/Web/API/Element/pointermove_event)) をリスンするには、`on` 関数を使用します:
```svelte
/// file: App.svelte
@@ -11,7 +11,7 @@ As we've briefly seen already, you can listen to any DOM event on an element (su
```
-Like with any other property where the name matches the value, we can use the short form:
+他のプロパティと同様に、名前と値が一致する場合は短縮形を使用することができます:
```svelte
/// file: App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/index.md b/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/index.md
index f263be2466..13de3f2823 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/index.md
@@ -2,7 +2,7 @@
title: Inline handlers
---
-You can also declare event handlers inline:
+イベントハンドラをインラインで宣言することもできます。
```svelte
/// file: App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/index.md b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/index.md
index bc195e1ab8..259be988fc 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/index.md
@@ -2,15 +2,15 @@
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 `` element in this component — we _could_ add an `oninput` 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.
+時々、そのルールを破ると便利なことがあります。このコンポーネントの `` 要素の例で考えてみましょう。`oninput` イベントハンドラを追加して、`name` の値を `event.target.value` に設定できますが、それは少し…面倒(boilerplatey)です。想像がつくと思いますが、他のフォーム要素ではそれがさらに悪化します。
-Instead, we can use the `bind:value` directive:
+代わりに、`bind:value` ディレクティブを使用することができます。
```svelte
/// file: App.svelte
```
-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/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/index.md b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/index.md
index 6291b7a27f..192519ea34 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/index.md
@@ -2,9 +2,9 @@
title: Numeric inputs
---
-In the DOM, every input value 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
/// file: App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/index.md b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/index.md
index dc79573deb..9aef02ae80 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/index.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`:
+チェックボックスは state を切り替えるのに使用されます。`input.value` にバインドする代わりに、`input.checked` にバインドします。
```svelte
/// file: App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md
index e918bd185a..59c9d3abc9 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md
@@ -2,7 +2,7 @@
title: Select bindings
---
-We can also use `bind:value` with `