doc: Svelte/Runtime/Contextを翻訳 (#61)

Author: HitoshiroKyoka

apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md

@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
 title: Context
 ---
 
-Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermediate components, known as 'prop-drilling'). The parent component sets context with `setContext(key, value)`...
+Context を使うと、コンポーネントは親コンポーネントが所有する値に、 props を介さずアクセスできます。(中間コンポーネントを何層も経由する'prop-drilling'という手法を回避できます。) 親コンポーネントは `setContext(key, value)` で context を設定します...
 
 ```svelte
 <!--- file: Parent.svelte --->
@@ -14,7 +14,7 @@ Context allows components to access values owned by parent components without pa
 </script>
 ```
 
-...and the child retrieves it with `getContext`:
+...そして、子コンポーネントは `getContext` で context を取得します:
 
 ```svelte
 <!--- file: Child.svelte --->
@@ -27,21 +27,21 @@ Context allows components to access values owned by parent components without pa
 <h1>{message}, inside Child.svelte</h1>
 ```
 
-This is particularly useful when `Parent.svelte` is not directly aware of `Child.svelte`, but instead renders it as part of a `children` [snippet](snippet) ([demo](/playground/untitled#H4sIAAAAAAAAE42Q3W6DMAyFX8WyJgESK-oto6hTX2D3YxcM3IIUQpR40yqUd58CrCXsp7tL7HNsf2dAWXaEKR56yfTBGOOxFWQwfR6Qz8q1XAHjL-GjUhvzToJd7bU09FO9ctMkG0wxM5VuFeeFLLjtVK8ZnkpNkuGo-w6CTTJ9Z3PwsBAemlbUF934W8iy5DpaZtOUcU02-ZLcaS51jHEkTFm_kY1_wfOO8QnXrb8hBzDEc6pgZ4gFoyz4KgiD7nxfTe8ghqAhIfrJ46cTzVZBbkPlODVJsLCDO6V7ZcJoncyw1yRr0hd1GNn_ZbEM3I9i1bmVxOlWElUvDUNHxpQngt3C4CXzjS1rtvkw22wMrTRtTbC8Lkuabe7jvthPPe3DofYCAAA=)):
+これは、 `Parent.svelte` が `Child.svelte` を直接含んでおらず, `children` [snippet](snippet) の一部としてレンダリングするとき、特に便利です。 ([デモ](/playground/untitled#H4sIAAAAAAAAE42Q3W6DMAyFX8WyJgESK-oto6hTX2D3YxcM3IIUQpR40yqUd58CrCXsp7tL7HNsf2dAWXaEKR56yfTBGOOxFWQwfR6Qz8q1XAHjL-GjUhvzToJd7bU09FO9ctMkG0wxM5VuFeeFLLjtVK8ZnkpNkuGo-w6CTTJ9Z3PwsBAemlbUF934W8iy5DpaZtOUcU02-ZLcaS51jHEkTFm_kY1_wfOO8QnXrb8hBzDEc6pgZ4gFoyz4KgiD7nxfTe8ghqAhIfrJ46cTzVZBbkPlODVJsLCDO6V7ZcJoncyw1yRr0hd1GNn_ZbEM3I9i1bmVxOlWElUvDUNHxpQngt3C4CXzjS1rtvkw22wMrTRtTbC8Lkuabe7jvthPPe3DofYCAAA=)):
 
 ```svelte
 <Parent>
 	<Child />
 </Parent>
 ```
 
-The key (`'my-context'`, in the example above) and the context itself can be any JavaScript value.
+キー (上記の例では `'my-context'`) と context 自体を、任意の JavaScript の値にすることができます。
 
-In addition to [`setContext`](svelte#setContext) and [`getContext`](svelte#getContext), Svelte exposes [`hasContext`](svelte#hasContext) and [`getAllContexts`](svelte#getAllContexts) functions.
+[`setContext`](svelte#setContext) と [`getContext`](svelte#getContext) に加えて、 Svelte は [`hasContext`](svelte#hasContext) と [`getAllContexts`](svelte#getAllContexts) 関数を提供しています。
 
-## Using context with state
+## state と context を使用する <!--Using-context-with-state-->
 
-You can store reactive state in context ([demo](/playground/untitled#H4sIAAAAAAAAE41R0W6DMAz8FSuaBNUQdK8MkKZ-wh7HHihzu6hgosRMm1D-fUpSVNq12x4iEvvOx_kmQU2PIhfP3DCCJGgHYvxkkYid7NCI_GUS_KUcxhVEMjOelErNB3bsatvG4LW6n0ZsRC4K02qpuKqpZtmrQTNMYJA3QRAs7PTQQxS40eMCt3mX3duxnWb-lS5h7nTI0A4jMWoo4c44P_Hku-zrOazdy64chWo-ScfRkRgl8wgHKrLTH1OxHZkHgoHaTraHcopXUFYzPPVfuC_hwQaD1GrskdiNCdQwJljJqlvXfyqVsA5CGg0uRUQifHw56xFtciO75QrP07vo_JXf_tf8yK2ezDKY_ZWt_1y2qqYzv7bI1IW1V_sN19m-07wCAAA=))...
+リアクティブな state を context に保存できます ([デモ](/playground/untitled#H4sIAAAAAAAAE41R0W6DMAz8FSuaBNUQdK8MkKZ-wh7HHihzu6hgosRMm1D-fUpSVNq12x4iEvvOx_kmQU2PIhfP3DCCJGgHYvxkkYid7NCI_GUS_KUcxhVEMjOelErNB3bsatvG4LW6n0ZsRC4K02qpuKqpZtmrQTNMYJA3QRAs7PTQQxS40eMCt3mX3duxnWb-lS5h7nTI0A4jMWoo4c44P_Hku-zrOazdy64chWo-ScfRkRgl8wgHKrLTH1OxHZkHgoHaTraHcopXUFYzPPVfuC_hwQaD1GrskdiNCdQwJljJqlvXfyqVsA5CGg0uRUQifHw56xFtciO75QrP07vo_JXf_tf8yK2ezDKY_ZWt_1y2qqYzv7bI1IW1V_sN19m-07wCAAA=))...
 
 ```svelte
 <script>
@@ -64,27 +64,27 @@ You can store reactive state in context ([demo](/playground/untitled#H4sIAAAAAAA
 <Child />
 ```
 
-...though note that if you _reassign_ `counter` instead of updating it, you will 'break the link' — in other words instead of this...
+...ただし、 `counter` を _再代入する_ (更新ではなく)と「リンクが切れる」点に注意してください。 つまり、次のようにするのではなく...
 
 ```svelte
 <button onclick={() => counter = { count: 0 }}>
 	reset
 </button>
 ```
 
-...you must do this:
+...次のようにします:
 
 ```svelte
 <button onclick={() => +++counter.count = 0+++}>
 	reset
 </button>
 ```
 
-Svelte will warn you if you get it wrong.
+もしあなたが間違えても、 Svelte が警告してくれます。
 
-## Type-safe context
+## 型安全な context <!--Type-safe-context-->
 
-A useful pattern is to wrap the calls to `setContext` and `getContext` inside helper functions that let you preserve type safety:
+便利なパターンとして、型安全性を維持できるヘルパー関数で `setContext` と `getContext` の呼び出しをラップする方法があります:
 
 ```js
 /// file: context.js
@@ -107,9 +107,9 @@ export function getUserContext() {
 }
 ```
 
-## Replacing global state
+## グローバル state の置き換え<!--Replacing-global-state-->
 
-When you have state shared by many different components, you might be tempted to put it in its own module and just import it wherever it's needed:
+多くの異なるコンポーネントで共有される state があるとき、 state を独自のモジュールに配置し、必要に応じてインポートしたくなるかもしれません:
 
 ```js
 /// file: state.svelte.js
@@ -121,7 +121,7 @@ export const myGlobalState = $state({
 });
 ```
 
-In many cases this is perfectly fine, but there is a risk: if you mutate the state during server-side rendering (which is discouraged, but entirely possible!)...
+大部分のケースではまったく問題ありませんが、リスクがあります。サーバーサイドレンダリング中に state を変更すると(これは非推奨ですが、完全に可能です！)...
 
 ```svelte
 <!--- file: App.svelte ---->
@@ -136,4 +136,4 @@ In many cases this is perfectly fine, but there is a risk: if you mutate the sta
 </script>
 ```
 
-...then the data may be accessible by the _next_ user. Context solves this problem because it is not shared between requests.
+...すると、そのデータに _次の_ ユーザーがアクセスできる可能性があります。 context はリクエスト間で共有されないため、この問題を解決します。