色々翻訳

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." />

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>`要素のスタイルに影響を与えてしまうようなことはありません。

content/tutorial/01-svelte/01-introduction/05-nested-components/README.md

@@ -2,23 +2,23 @@
 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>
 	import Nested from './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 要素と区別するため、コンポーネントの名前は常に大文字で始まっています 

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攻撃にさらす危険性があります。

content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md

@@ -2,20 +2,20 @@
 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() {
 	+++count += 1;+++
 }
 ```
 
-Svelte 'instruments' this assignment with some code that tells it the DOM will need to be updated.
+Svelteは、DOMが更新される必要があることを伝えるコードをこの代入に'取り付け'ます。

content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md

@@ -2,23 +2,23 @@
 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>
 
 +++<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}` とマークアップに書くだけでもよいでしょう。リアクティブな値を使用する必要はありません。リアクティブな値は、複数回参照する必要がある場合や、*他の* リアクティブな値に依存する値がある場合に特に価値があります。

content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md

@@ -2,15 +2,15 @@
 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;
 
 +++$: 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)+++ {

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,29 +13,29 @@ function addNumber() {
 }
 ```
 
-But there's a more idiomatic solution:
+もう少し慣用的な解決策もあります。
 
 ```js
 function addNumber() {
 	numbers = +++[...numbers, numbers.length + 1];+++
 }
 ```
 
-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() {
 	numbers[numbers.length] = numbers.length + 1;
 }
 ```
 
-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` を続けて書く必要があります。

content/tutorial/01-svelte/03-props/01-declaring-props/README.md

@@ -2,14 +2,14 @@
 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>
 	+++export+++ let answer;
 </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`とは動作が異なりますので！とりあえず今は使っていってください。すぐに慣れるでしょう。

content/tutorial/01-svelte/03-props/02-default-values/README.md

@@ -2,15 +2,15 @@
 title: Default values
 ---
 
-We can easily specify default values for props in `Nested.svelte`:
+`Nested.svelte`のプロパティのデフォルト値を簡単に指定することができます。
 
 ```svelte
 <script>
 	export let answer +++= 'a mystery'+++;
 </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}/>

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の最適化が難しいため、一般的には推奨されませんが、ごくまれなケースでは便利です。

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.
+試してみてください。コンポーネントを更新し、ボタンをクリックしてみてください。

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に追加する構文のほとんどを学んでいます。

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}