微修正

Author: smikitky

src/content/reference/react/use-client.md

@@ -11,7 +11,7 @@ title: "'use client'"
 
 <Intro>
 
-`'use client'` により、ソースファイルがクライアント上で実行されるコンポーネントが書かれたものである、とマークします。
+`'use client'` でソースファイルをマークすることにより、ファイル内のコンポーネントがクライアント上で実行されることを示します。
 
 </Intro>
 
@@ -23,7 +23,7 @@ title: "'use client'"
 
 ### `'use client'` {/*use-client*/}
 
-ファイルの最上部に `'use client';` を追加すると、どこからインポートされたファイルであるかに関わらず、そのファイル（それが使用する任意の子コンポーネントを含む）がクライアント上で実行されるものであるとマークします。
+ファイルの最上部に `'use client';` を追加すると、どこでインポートされているかに関わらず、当該ファイル（それが使用する任意の子コンポーネントを含む）はクライアント上で実行されるものである、とマークします。
 
 ```js
 'use client';
@@ -34,19 +34,19 @@ export default function RichTextEditor(props) {
   // ...
 ```
 
-`'use client'` がマークされたファイルがサーバコンポーネントからインポートされると、[互換性のあるバンドラ](/learn/start-a-new-react-project#bleeding-edge-react-frameworks)は、そのインポートをサーバ専用のコードとクライアントコードとの間の「切り離し点 (cut-off point)」として扱います。モジュールグラフでこの点およびこの点より下側にあるコンポーネントは、[`useState`](/reference/react/useState) のようなクライアント専用の React 機能を使用できます。
+`'use client'` とマークされたファイルがサーバコンポーネントからインポートされると、[互換性のあるバンドラ](/learn/start-a-new-react-project#bleeding-edge-react-frameworks)は、当該インポートをサーバ専用コードとクライアントコードとの間の「切り離しポイント」として扱います。モジュールグラフでこのポイントおよび下側にあるコンポーネントは、[`useState`](/reference/react/useState) のようなクライアント専用の React 機能を使用できます。
 
 #### 注意点 {/*caveats*/}
 
 * クライアント専用の React 機能を使用するあらゆるファイルに `'use client'` を追加していく必要はありません。サーバコンポーネントファイルからインポートされるファイルにのみ追加します。`'use client'` はサーバ専用コードとクライアントコードとの間の*境界*を示すものです。ここよりツリーの下側にあるあらゆるコンポーネントは自動的にクライアント上で実行されます。`'use client'` の書かれたファイルからエクスポートされるコンポーネントはサーバコンポーネントからレンダーされるため、シリアライズ可能な props を持つ必要があります。
-* `'use client'` ファイルがサーバファイルからインポートされる場合、インポートされた値は React コンポーネントとしてレンダーされるか、もしくはクライアントコンポーネントに props 経由で渡されます。それ以外の使い方をすると例外をスローします。
-* `'use client'` ファイルが他のクライアントファイルからインポートされる場合、ディレクティブは効果を持ちません。これにより、サーバコンポーネントとクライアントコンポーネントの両方から使用できるクライアント専用のコンポーネントを作成できます。
-* `'use client'` ファイルのすべてのコード、およびそれが（直接的にまたは間接的に）インポートするすべてのモジュールはクライアントモジュールグラフの一部となるため、ブラウザが表示するためにはクライアントに送信され、クライアントで実行される必要があります。クライアントでのバンドルサイズを減らし、サーバ機能を最大限に活用するためには、可能な限りツリーの下部に state（および `'use client'` ディレクティブ）を移動し、レンダーされたサーバコンポーネントを [children として](/learn/passing-props-to-a-component#passing-jsx-as-children)クライアントコンポーネントに渡します。
-* props はサーバとクライアントの境界を越えてシリアライズされるため、これらのディレクティブの配置の仕方がクライアントに送信されるデータ量に影響を与える可能性があります。必要以上に大きなデータ構造を避けてください。
+* `'use client'` ファイルがサーバファイルからインポートされる場合、インポートされる値は React コンポーネントとしてレンダーされるか、もしくはクライアントコンポーネントに props 経由で渡されます。それ以外の使い方をすると例外をスローします。
+* `'use client'` ファイルが他のクライアントファイルからインポートされる場合、ディレクティブは効果を有しません。これにより、サーバコンポーネントからもクライアントコンポーネントからも使えるクライアント専用コンポーネントを書くことができます。
+* `'use client'` ファイル内のすべてのコード、およびそれが（直接的にまたは間接的に）インポートするすべてのモジュールはクライアントモジュールグラフの一部となるため、ブラウザが表示するためにはクライアントに送信され、実行される必要があります。クライアントでのバンドルサイズを減らし、サーバ機能を最大限に活用するためには、可能な限りツリーの下部に state（および `'use client'` ディレクティブ）を移動し、レンダーされたサーバコンポーネントを [children として](/learn/passing-props-to-a-component#passing-jsx-as-children)クライアントコンポーネントに渡すようにします。
+* props はサーバとクライアントの境界を越えてシリアライズされるため、ディレクティブの配置の仕方がクライアントに送信されるデータ量に影響を与える可能性があります。必要以上に大きなデータ構造を避けてください。
 * サーバ専用機能もクライアント専用機能も使用しないコンポーネント（例：`<MarkdownRenderer>`）は、一般的に `'use client'` でマークすべきではありません。マークしないことにより、サーバコンポーネントから使用されるときにはサーバ上でのみレンダーされ、クライアントコンポーネントから使用されるときにはクライアントバンドルに含まれるようになります。
-* npm に公開されるライブラリは、クライアント専用の React 機能を使用しており、シリアライズ可能な props でレンダーできる React コンポーネントに、`'use client'` を含めるべきです。これにより、それらのコンポーネントをサーバコンポーネントからインポートしてレンダーすることが可能になります。さもないと、ユーザはライブラリコンポーネントを自分で `'use client'` ファイルにラップしなければなりません。これは面倒ですし、ライブラリが後でロジックをサーバに移動できなくなってしまいます。事前バンドル済のファイルを npm に公開する際は、`'use client'` となっているソースファイルは `'use client'` でマークされたバンドルに含まれるようにし、サーバ上で直接使用できるエクスポートを含むバンドルとは別になるようにしてください。
-* クライアントコンポーネントは、今後もサーバサイドレンダリング (server-side rendering, SSR) やビルド時の静的サイト生成 (static site generation, SSG) の一部としては実行されます。これらは、コンポーネントの初期レンダー出力を HTML に変換し、JavaScript バンドルがダウンロードされる前に表示を行えるようにするために使えます。しかし、データベースから直接読み取るといったサーバ専用機能は使用できません。
-* `'use client'` のようなディレクティブは、ファイルの冒頭部分、あらゆるインポート文や他のコードの上になければなりません（ただしディレクティブの上にコメントは記載できます）。シングルクォートまたはダブルクォートで書かれていなければならず、バックティックは使えません。（`'use xyz'` というディレクティブ形式は `useXyz()` というフックの命名規則に多少似ていますが、これは偶然です。）
+* npm に公開されるライブラリは、エクスポートしているコンポーネントがシリアライズ可能な props でレンダーでき、クライアント専用の React 機能を使用している場合、`'use client'` を含めるようにすべきです。これにより、それらのコンポーネントをサーバコンポーネントからインポートしてレンダーすることが可能になります。さもないと、ユーザはライブラリコンポーネントを自分で `'use client'` ファイルにラップしなければなりません。これは面倒ですし、ライブラリが後でロジックをサーバに移動できなくなってしまいます。事前バンドル済のファイルを npm で公開する際は、`'use client'` となっているソースファイルは `'use client'` でマークされたバンドルに含まれるようにし、サーバ上で直接使用できるエクスポートを含んだバンドルとは別になるようにしてください。
+* クライアントコンポーネントは、今後もサーバサイドレンダリング (server-side rendering, SSR) やビルド時の静的サイト生成 (static site generation, SSG) の過程としては実行されます。これらは、コンポーネントの初期レンダー出力を HTML に変換し、JavaScript バンドルのダウンロード前に表示を行えるようにするために使われます。しかし、データベースから直接読み取るといったサーバ専用機能は使用できません。
+* `'use client'` のようなディレクティブは、ファイルの冒頭部分で、あらゆるインポート文や他のコードより上になければなりません（ただしコメントはディレクティブの上に記載できます）。シングルクォートまたはダブルクォートで書く必要があり、バックティックは使えません。（`'use xyz'` というディレクティブの形式は `useXyz()` というフックの命名規則に多少似ていますが、これは偶然です。）
 
 ## 使用法 {/*usage*/}
 

src/content/reference/react/use-server.md

@@ -25,7 +25,7 @@ title: "'use server'"
 
 ### `'use server'` {/*use-server*/}
 
-非同期関数の一番最初の部分に `'use server';` を追加することで、その関数がクライアントによって実行できることをマークします。
+非同期 (async) 関数の冒頭に `'use server';` を追加することで、その関数がクライアントから実行できることをマークします。
 
 ```js
 async function addToCart(data) {
@@ -36,13 +36,13 @@ async function addToCart(data) {
 // <ProductDetailPage addToCart={addToCart} />
 ```
 
-このような関数は、クライアントに渡すことができます。この関数がクライアント側で呼び出されると、渡された引数のシリアライズされたコピーを含んだネットワークリクエストをサーバに送信します。サーバ関数が値を返す場合、その値はシリアライズされてクライアントに返されます。
+このような関数は、クライアントに渡すことができます。この関数がクライアント側で呼び出されると、渡された引数がシリアライズされ、それを含んだネットワークリクエストをサーバに送信します。このサーバ関数が値を返す場合、シリアライズされてクライアントに返されます。
 
-または、ファイルの最上部に `'use server';` を追加して、そのファイル内のすべてのエクスポートが、クライアントコンポーネントファイルを含む任意の場所で使用できる非同期サーバ関数であるとマークします。
+または、ファイルの最上部に `'use server';` を追加すると、そのファイル内のすべてのエクスポートが、クライアントコンポーネントファイルを含むあらゆる場所で使用できる非同期サーバ関数である、とマークします。
 
 #### 注意点 {/*caveats*/}
 
-* `'use server'` でマークされた関数に渡されるパラメータはクライアントが完全に制御できます。セキュリティのため、それらを常に信頼できない入力として扱い、適切に引数のバリデーションやエスケープを行うことを忘れないでください。
+* `'use server'` でマークされた関数に渡される引数はクライアントで完全に制御可能です。セキュリティのため、引数を常に信頼できない入力として扱い、適切にバリデーションやエスケープを行うことを忘れないでください。
 * クライアント側とサーバ側のコードを同じファイルに混在させることによる混乱を避けるため、`'use server'` はサーバ側のファイルでのみ使用できます。結果として得られる関数は、props を通じてクライアントコンポーネントに渡すことができます。
 * 内部で用いられるネットワーク呼び出しは常に非同期であるため、`'use server'` は非同期関数でのみ使用できます。
-* `'use server'` のようなディレクティブは、関数やファイルの冒頭、他のコード（インポートを含む）よりも上になければなりません（ただしディレクティブの上にコメントは記載できます）。シングルクォートまたはダブルクォートで書かれていなければならず、バックティックは使えません。（`'use xyz'` というディレクティブ形式は `useXyz()` というフックの命名規則に多少似ていますが、これは偶然です。）
+* `'use server'` のようなディレクティブは、関数やファイルの冒頭部分で、他のコード（インポートを含む）より上になければなりません（ただしコメントはディレクティブの上に記載できます）。シングルクォートまたはダブルクォートで書く必要があり、バックティックは使えません。（`'use xyz'` というディレクティブの形式は `useXyz()` というフックの命名規則に多少似ていますが、これは偶然です。）