translate parts of docs into Japanese

sites/svelte-5-preview/package.json

@@ -16,6 +16,7 @@
     "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/adapter-vercel": "^3.0.3",
     "@sveltejs/kit": "^1.22.5",
+    "@tomoam/site-kit": "6.0.0-next.56",
     "@sveltejs/site-kit": "6.0.0-next.51",
     "@types/marked": "^5.0.1",
     "esrap": "^1.2.1",

sites/svelte-5-preview/src/routes/docs/content/01-api/05-functions.md

@@ -25,7 +25,7 @@ rune だけでなく、Svelte 5 では `getContext`、`setContext`、`tick` な
 
 ## `unstate`
 
-To remove reactivity from objects and arrays created with `$state`, use `unstate`:
+`$state` で作成されたオブジェクトや配列からリアクティビティを取り除くには、`unstate` を使用します:
 
 ```svelte
 <script>
@@ -40,6 +40,6 @@ To remove reactivity from objects and arrays created with `$state`, use `unstate
 </script>
 ```
 
-This is handy when you want to pass some state to an external library or API that doesn't expect a reactive object – such as `structuredClone`.
+これは、リアクティブなオブジェクトが渡されることを想定していない外部ライブラリや API (例えば `structuredClone` など) に state を渡したいときに便利です。
 
-> Note that `unstate` will return a new object from the input when removing reactivity. If the object passed isn't reactive, it will be returned as is.
+> `unstate` はリアクティビティを取り除くのに引数から新しいオブジェクトを返すことにご注意ください。もしリアクティブでないオブジェクトが渡された場合は、そのまま返します。

sites/svelte-5-preview/src/routes/docs/content/02-examples/04-old-vs-new.md

@@ -2,11 +2,11 @@
 title: Old vs new
 ---
 
-This page intends to give a broad overview of how code written using the new APIs looks compared to code not using them. You will see that for most simple tasks that only involve a single component it will actually not look much different. For more complex logic, they simplify things.
+このページでは、新しい API で書かれたコードとそうでないコードを比べるとどのように見えるか、おおまかな概要を説明することを意図しています。コンポーネントが1つしかないようなもっともシンプルなタスクの場合、そこまで違いがないことがおわかりいただけると思います。より複雑なロジックの場合は、新しい API が物事をシンプルにすることをご覧いただけると思います。
 
 ## Counter
 
-The `$state`, `$derived` and `$effect` runes replace magic `let` declarations, `$: x = ...` and `$: { ... }`. Event handlers can be written as event attributes now, which in practise means just removing the colon.
+`$state`、`$derived`、`$effect` rune は、魔法の `let` 宣言、`$: x = ...`、`$: { ... }` を置き換えます。イベントハンドラはイベント属性として書くことができるようになりましたが、実質的にはコロンを取り除くだけです。
 
 - [Before](/#H4sIAAAAAAAAE0VP0Q6CMAz8lbqYAGqC-jiBxH_wTXzQUWRxbgQ6E7Ps34VN40vbu8u1V8daqXBk_OyYvj6RcXbse7Zh9O5nML5QEU54NHYQM1OMYpA9VbWuSSGBMFYTlLA9zMySQ2PsTeHERGUF-6B8VRdmki2kUa9gt81-dE1XhQOlyckY6OS9WyRZdJOf21SK_B9AFzdLZDQYzYWS4lG6NIOyiqfXax9SuoA85OBitrAlOqvptadpZCuxYZwGi_7iP__ps0sVAQAA)
 - [After](/#H4sIAAAAAAAAE0VPzW7CMAx-FRMhkQ4k2I6lrbR32I3uUBJnRAtJlThIKMq7jzSgHSzr-_FnOzGlDQbWnhKz0xVZyz7nme0Y3ecCwg0N4QMHF70oTBeE1zMNox3JIIFw0RL0sA40EfJDc3wp0sWzwSJJ9PqGklfvG3xUU6k1KoWCOG-gHyAtNGkFT-8A74fmRY80GfTEN1_OwUX_XFabZxDl0nJB3f7_QNudI5Gz4GwrjBa_fap7lvDtNi9fpAVl2EOqJ-eSUieHx-tXJ7XSKFlLPmL-zn8TVUg5NQEAAA==)
@@ -35,9 +35,9 @@ The `$state`, `$derived` and `$effect` runes replace magic `let` declarations, `
 
 ## Tracking dependencies
 
-In non-runes mode, dependencies of `$:` statements are tracked at _compile time_. `a` and `b` changing will only cause `sum` to be recalculated because the expression — `add(a, b)` — refers to those values.
+非 rune モードでは、`$:` ステートメントの依存関係(dependencies)は _コンパイル時(compile time)_ に追跡されます。`a` と `b` の変更は `sum` の再計算だけを発生させます。なぜなら、その式である `add(a, b)` が `a` と `b` の値を参照しているからです。
 
-In runes mode, dependencies are tracked at _run time_. `sum` will be recalculated whenever `a` or `b` change, whether they are passed in to the `add` function or accessed via closure. This results in more maintainable, refactorable code.
+rune モードでは、依存関係(dependencies)は _実行時(run time)_ に追跡されます。`a` か `b` が変更されるたびに (`add` 関数に渡された場合であろうとクロージャ経由でアクセスされた場合であろうと) `sum` は再計算されます。これにより、よりメンテナンスしやすい、リファクタリングしやすいコードになります。
 
 - [Before](/#H4sIAAAAAAAAE3WPwarDIBBFf2WQLlpSSNfWCP2Opgs1BuQlRnQsFPHfO0lpSxdvMcK5c4YZCxvdZBPj18K8mi3j7BICOzJ8hBXS3U5oidOSo1kTkUx0AWXve5wsgoIOTuc36Q_tOKQ8E6ph2Ksj6MMWrzVmb9At_tuCsvUwWsyRcmhAb3rtvWi_G73QGZEmF8_N5MxfV_YH6CSopqmSHtG-BPm_qldV_6pBFlVpadGVLi50eBVtkPTveRnc6OzAOMZs660-AQKQKZYyAQAA)
 - [After](/#H4sIAAAAAAAAE3WQ3WrDMAyFX8WYXqSkkF5njqHPsfTCPwqYJo6x5cIwfvfKKWMMthuBvnMkHVT44lZIfPws3KsN-MhvIfALx6_QmvSEFYH6tOdoGhHJRBdQzn7GFZApNrFTQoXQXc8f31T_SVPeGrcQ3RNsp6ztzodK-pK9Qbd7dlBWGpsxAuZIjPVMH2vq7MXwE8ELnRFpavejWZ15TIWGJ8lU31dJRQxvg_zfqptV_7YGWVSlo0VXSlwoeBVDkPSIbbducWD5iDFDvdcXqDJidUMBAAA=)
@@ -66,9 +66,10 @@ In runes mode, dependencies are tracked at _run time_. `sum` will be recalculate
 
 ## Untracking dependencies
 
-Conversely, suppose you — for some reason — wanted to recalculate `sum` when `a` changes, but _not_ when `b` changes.
+逆に、なにかしらの理由で、`a` が変更されたときに `sum` を再計算したいが、`b` が変更されたときには再計算したくないとします。
 
 In non-runes mode, we 'hide' the dependency from the compiler by excluding it from the `$:` statement. In runes mode, we have a better and more explicit solution: [`untrack`](/docs/functions#untrack).
+非 rune モードでは、`$:` ステートメントから外すことでコンパイラから依存を '隠し' ます。rune モードでは、より良い、より明示的なソリューションがあります: [`untrack`](/docs/functions#untrack) です。
 
 - [Before](/#H4sIAAAAAAAAE3WPwYrDIBCGX2WQHhJSyJ6tEfocmz2oMSBNjOi4sIjvvpO0u6WHHhz4_vmGGQub3WIT45-FebVaxtk1BHZm-BN2SN92QUucthzNnohkogsoRz_iYhEUDPBx-SP9TycOKa-Eapoa1R7Z_ubsDbrNP3IoRwOjxRwphA704dbRi_65ywudEWls89wsztyG0rQwSFBdVyUV0d8F-V7Vu6pf1SCLqrS06Eq3Fjq5ij5I-vG6TW52dmIcY7b1q_4CeJwNvCwBAAA=)
 - [After](/#H4sIAAAAAAAAE3WQ3WrEIBBGX2WQwiakkF5nE6HP0fTCv4BsoqLjQhHfvWPTpRTaG2GOx49vLGyzu0lseivMicOwib2GwJ4ZfoQ2pLvZ0dCcfI6qkTmpaAPy1a1oj-AjQoHsMAp1gwpb9AdczmeXK0mk7QZBwAJPCQWa7qW_Pqj8k6Z8NK5NtHejO6F11_ffWVt2Cq138EWhNLZiNJgjMRgeVTq6XDjIM7Wubh5_irtZZkQK8W5Su1W3pZy6GIbK6ZjHU-D_q7Kp8rcaeBGVOhRZaYFCe9R5DJy-7_DabtZoNmHMpr7XT7Bzqxt5AQAA)
@@ -126,13 +127,13 @@ In non-runes mode, we 'hide' the dependency from the compiler by excluding it fr
 
 ## Autoscroll
 
-To implement a chat window that autoscrolls to the bottom when new messages appear (but only if you were _already_ scrolled to the bottom), we need to measure the DOM before we update it.
+チャットウィンドウを作るとき、新しいメッセージが来たときに画面の最下部まで自動スクロールする機能 (ただし元々最下部までスクロール済の場合のみ) を実装するには、更新前に DOM を計測する必要があります。
 
-In Svelte 4, we do this with `beforeUpdate`, but this is a flawed approach — it fires before _every_ update, whether it's relevant or not. In the example below, we need to introduce checks like `updatingMessages` to make sure we don't mess with the scroll position when someone toggles dark mode.
+Svelte 4 では、`beforeUpdate` でこれに対応していましたが、これには欠点がありました。関連があろうとなかろうと、すべての更新の前に実行されてしまいます。以下の例では、`updatingMessages` のようなチェックを導入し、ダークモードに切り替えたときなどにスクロール位置が乱れないようにする必要があります。
 
-With runes, we can use `$effect.pre`, which behaves the same as `$effect` but runs before the DOM is updated. As long as we explicitly reference `messages` inside the effect body, it will run whenever `messages` changes, but _not_ when `theme` changes.
+rune の場合、`$effect.pre` (`$effect` と同じように動作するが DOM が更新される前に実行される) を使用することができます。effect の中で `messages` を明示的に参照している限り、`messages` が変更されるたびに実行されますが、`theme` が変更されるときは実行されません。
 
-`beforeUpdate`, and its equally troublesome counterpart `afterUpdate`, will be deprecated in Svelte 5.
+`beforeUpdate` と、その対の `afterUpdate` も同様に問題があるため、Svelte 5 では非推奨です。
 
 - [Before](/#H4sIAAAAAAAAE31WXa_bNgz9K6yL1QmWOLlrC-w6H8MeBgwY9tY9NfdBtmlbiywZkpyPBfnvo2zLcZK28AWuRPGI5OGhkEuQc4EmiL9eAskqDOLg97oOZoE9125jDigs0t6oRqfOsjap5rXd7uTO8qpW2sIFEsyVxn_qjFmcAcstar-xPN3DFXKtKgi768IVgQku0ELj3Lgs_kZjWIEGNpAzYXDlHWyJFZI1zJjeh4O5uvl_DY8oUkVeVoFuJKYls-_CGYS25Aboj0EtWNqel0wWoBoLTGZgmdgDS9zW4Uz4NsrswPHoyutN4xInkylstnBxdmIhh8m7xzqmoNE2Wq46n1RJQzEbq4g-JQSl7e-HDx-GdaTy3KD9E3lRWvj5Zu9QX1QN20dj7zyHz8s-1S6lW7Cpz3RnXTcm04hIlfdFuO8p2mQ5-3a06cqjrn559bF_2NHOnRZ5I1PLlXQNyQT-hedMHeUEDyjtdMxsa4n2eIbNhlTwhyRthaOKOmYtniwF6pwt0wXa6MBEg0OibZec27gz_dk3UrZ6hB2LLYoiv521Yd8Gt-foTrfhiCDP0lC9VUUhcDLU49Xe_9943cNvEArHfAjxeBTovvXiNpFynfEDpIIZs9kFbg52QbeNHWZzebz32s7xHco3nJAJl1nshmhz8dYOQJDyZetnbb2gTWe-vEeWlrfpZMavr56ldb29eNt6UXvgwgFbp_WC0tl2RK25rGk6lYz3nUI2lzvBXGHhPZPGWmKUXFNBKqdaW259wl_aHbiqoVIZdpE60Nax6IOujT0LbFFxIVTCxCRR2XloUcYNvSbnGHKBp763jHoj59xiZWJI0Wm0P_m3MSS985xkasn-cFq20xTDy3J5KFcjgUTD69BHdcHIjz431z28IqlxGcPSfdFnrGDZn6gD6lyo45zyHAD-btczf-98nhQxHEvKfeUtOVkSejD3q-9X7JbzjGtsdUxlKdFU8qGsT78uaw848syWMXz85Waq2Gnem4mAn3prweq4q6Y3JEpnqMmnPoFRgmd3ySW0LLRqSKlwYHriCvJvUs2yjMaaoA-XzTXLeGMe45zmhv_XAno3Mj0xF7USuqNvnE9H343QHlq-eAgxpbTPNR9yzUkgLjwSR0NK4wKoxy-jDg-9vy8sUSToakzW-9fX13Em9Q8T6Z26uZhBN36XUYo5q7ggLXBZoub2Ofv7g6GCZfTxe034NCjiudXj7Omla0eTfo7QBPOcYxbE7qG-vl3_B1G-_i_JCAAA)
 - [After](/#H4sIAAAAAAAAE31WXa-jNhD9K7PsdknUQJLurtRLPqo-VKrU1327uQ8GBnBjbGSb5KZR_nvHgMlXtyIS9njO-MyZGZRzUHCBJkhez4FkNQZJ8HvTBLPAnhq3MQcUFmlvVKszZ1mbTPPGbndyZ3ndKG3hDJZne7hAoVUNYY8JV-RBPgIt2AprhA18MpZZnIQ50_twuvLHNRrDSjRXj9fwiCJTBLIKdCsxq5j9EM4gtBU3QD8GjWBZd14xWYJqLTCZg2ViDyx1W4cz4dv0hsiB49FRHkyfsCgws3GjcTKZwmYLZ2feWc9o1W8zJQ2Fb62i5JUQRNRHgs-fx3WsisKg_RN5WVn4-WrvUd9VA9tH4-AcwbfFQIpkLWByvWzqSe2sk3kyjUlOec_XPU-3TRaz_75tuvKoi19e3OvipSpamVmupJM2F_gXnnJ1lBM8oLQjHceys8R7PMFms4HwD2lRhzeEe-EsvluSrHe2TJdo4wMTLY48XKwPzm0KGm2r5ajFtRYU4TWOY7-ddWHfxhDP0QkQhnf5PWRnVVkKnIx8fZsOb5dR16nwG4TCCRdCMphWQ7z1_DoOcp3zA2SCGbPZBa5jd0G_TRxmc36Me-mG6A7l60XIlMs8ce2-OXtrDyBItdz6qVjPadObzx-RZdV1nJjx64tXad1sz962njceOHfAzmk9JzrbXqg1lw3NkZL7vgE257t-uMDcO6attSSokpmgFqVMO2U93e_dDlzOUKsc-3t6zNZp6K9cG3sS2KGSUqiUiUmq8tNYoJwbmvpTAoXA96GyjCojI26xNglk6DpwOPm7NdRYp4ia0JL94bTqRiGB5WJxqFY37RGPoz3c6i4jP3rcUA7wmhqNywQW7om_YQ2L4UQdUBdCHSPiOQJ8bFcxHzeK0jKBY0XcV95SkCWlD9t-9eOM3TLKucauiyktJdpaPqT19ddF4wFHntsqgS-_XE01e48GMwnw02AtWZP02QyGVOkcNfk072CU4PkduZSWpVYt9SkcmJ64hPwHpWF5ziVls3wIFmmW89Y83vMeGf5PBxjcyPSkXNy10J18t3x6-a6CDtBq6SGklNKeazFyLahB3PVIGo2UbhOgGi9vKjzW_j6xVFFD17difXx5ebll0vwvkcGpn4sZ9MN3vqFYsJoL6gUuK9TcPrO_PxgzWMRfflSEr2NHPJf6lj1957rRpH8CNMG84JgHidUtXt4u_wK21LXERAgAAA==)
@@ -200,7 +201,7 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
 
 ## Forwarding events
 
-Because [event handlers](event-handlers) are just regular attributes now, the "forwarding events" concept is replaced with just passing callback props. Before, you would have to mark every event that you want to forward separately. You can still do this with event attributes...
+[イベントハンドラ](event-handlers) が通常の属性になったため、"イベントをフォワードする(forwarding events)" コンセプトは、ただコールバック props を渡す、ということに置き換えられました。以前までは、フォワードしたイベントをすべて別々にマークする必要がありました。これもイベント属性で行えるようになりました…
 
 ```diff
 <script>
@@ -217,7 +218,7 @@ Because [event handlers](event-handlers) are just regular attributes now, the "f
 >a button</button>
 ```
 
-...but in practise what you probably _really_ want to do in these situations is forward _all_ events. This wasn't possible before, but it is now:
+…しかし、実際にこの状況で本当にやりたかったことは、すべてのイベントをフォワードすることかと思います。以前は不可能でしたが、今は可能です:
 
 ```diff
 <script>
@@ -237,7 +238,7 @@ Because [event handlers](event-handlers) are just regular attributes now, the "f
 
 ## Passing UI content to a component
 
-Previously, you would pass UI content into components using slots. Svelte 5 provides a better mechanism for this, [snippets](snippets). In the simple case of passing something to the default slot, nothing has changed for the consumer:
+以前は、UI コンテンツをコンポーネントに渡すのに slot を使用していました。Svelte 5 ではこのためのより良いメカニズムとして [snippet](snippets) を提供します。デフォルトの slot に何かを渡すというシンプルなケースでは、コンポーネントを使用する側は何も変える必要はありません:
 
 ```svelte
 <!-- same with both slots and snippets -->
@@ -248,7 +249,7 @@ Previously, you would pass UI content into components using slots. Svelte 5 prov
 <Button>click me</Button>
 ```
 
-Inside `Button.svelte`, use `@render` instead of the `<slot>` tag. The default content is passed as the `children` prop:
+`Button.svelte` の中では、`<slot>` タグの代わりに `@render` を使用します。デフォルトのコンテンツは `children` prop として渡されます:
 
 ```diff
 <script>
@@ -261,7 +262,7 @@ Inside `Button.svelte`, use `@render` instead of the `<slot>` tag. The default c
 </button>
 ```
 
-When passing props back up to the consumer, snippets make things easier to reason about, removing the need to deal with the confusing semantics of the `let:`-directive:
+コンポーネントの使用者側 (consumer) に props を渡すとき、snippet では物事を簡単に推論できるようになっており、`let:` ディレクティブの混乱しているセマンティクスを扱う必要がなくなります:
 
 ```diff
 <!-- provider -->
@@ -289,7 +290,7 @@ When passing props back up to the consumer, snippets make things easier to reaso
 + </Button>
 ```
 
-Combined with event attributes, this reduces the number of concepts to learn — everything related to the component boundary can now be expressed through props.
+イベント属性と併せて、学ぶべきコンセプトの数が減りました。コンポーネントの境界に関する全てのものが、props を通じて表現できるようになったのです。
 
 - [Before](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACn2PzYrCQBCEX6XpSxTE3GeTgPoYzh5i0sHB-WOmIywh776ZjCgieOsqqvrrnnBQmiKK84S2NYQCD97jDvnPJxHvpJkWHd0YuuRUsQvKcyOtZGW8CwzHkdlZGIIzUOzLLPe5WvxIW5Wvjq0eaWdFp1V3q6fNFuoGWk2BN8UpedQDXwkua7LYzqCJhQ_Or1TJaxGm5MxpfV7ZLGca16tBUY-Cw0jz7vlVjnx97PJ-2MqqonYMCVTLJWoI7q0eSSKUTSLnzjJ-sn_nfxmfF-FdAQAA)
 - [After](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo2PzW6DMBCEX2XlVgIkBHcKUdo-RumBwqJYNbZlL5Eqy-9e_9DkkEtv3vHMzn6OrVygZd2HY3LakHXsVWtWM_rRcbBXFIRhtmo3c1R6Oxuu6TTKkfimlSF424mUhNWoDYqmzWOTo8XLKPv2npH94VZyFnz-HlxZwXCCSaChsniPGi5AF4SvZCwqn7rck5VcaySYL1wsBmWpjdKVj58jpWXgopQU1x52H_tz5ylwbGrhK8eFdWR29PUNO1v-Sy7CHe52SQ1N08RqCx4GeE7PsnpAz0Tg_twH2TmsWNDcwcZQuiFcJ7HjyKqEkLMh8Ajx6X8BPkQdmscBAAA=)

sites/svelte-5-preview/src/routes/docs/content/02-examples/06-more-examples.md

@@ -2,6 +2,6 @@
 title: More examples
 ---
 
-Check out [component-party.dev](https://component-party.dev/?f=svelte4,svelte5) to see side-by-side comparisons of some common patterns.
+[component-party.dev](https://component-party.dev/?f=svelte4,svelte5) で、よくあるパターンを並べて比較し、確認してみてください。
 
-We'll add more examples over time, but if there's something in particular you'd like to see then hop over to the `#svelte-5-runes` channel of the [Svelte Discord](https://svelte.dev/chat).
+今後徐々に例を追加していきますが、特に見たいものがあれば [Svelte Discord](https://svelte.dev/chat) の `#svelte-5-runes` にお越しください。