diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md index 06613cb7c..829dad867 100644 --- a/src/content/reference/rsc/server-actions.md +++ b/src/content/reference/rsc/server-actions.md @@ -1,11 +1,11 @@ --- -title: Server Actions +title: サーバアクション canary: true --- -Server Actions allow Client Components to call async functions executed on the server. +サーバアクション (Server Action) を使用することで、サーバで実行される非同期関数をクライアントコンポーネントから呼び出すことができます。 @@ -13,21 +13,21 @@ Server Actions allow Client Components to call async functions executed on the s -#### How do I build support for Server Actions? {/*how-do-i-build-support-for-server-actions*/} +#### サーバアクションのサポートを追加する方法 {/*how-do-i-build-support-for-server-actions*/} -While Server Actions in React 19 are stable and will not break between major versions, the underlying APIs used to implement Server Actions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. +React 19 のサーバアクションは安定しており、マイナーバージョン間での破壊的変更はありませんが、サーバコンポーネントのバンドラやフレームワーク内でサーバアクションを実装するために使用される、基盤となる API は semver に従いません。React 19.x のマイナーバージョン間で変更が生じる可能性があります。 -To support Server Actions as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement Server Actions in the future. +サーバアクションをバンドラやフレームワークでサポートする場合は、特定の React バージョンに固定するか、Canary リリースを使用することをお勧めします。サーバアクションを実装するために使用される API を安定化させるため、今後もバンドラやフレームワークと連携を続けていきます。 -When a Server Action is defined with the `"use server"` directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result. +サーバアクションが `"use server"` ディレクティブを付けて定義されると、フレームワークは自動的にそのサーバ関数への参照を作成し、その参照をクライアントコンポーネントに渡します。クライアントでこの関数が呼び出されると、React はサーバにリクエストを送信して元の関数を実行し、その結果を返します。 -Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components. +サーバアクションはサーバコンポーネント内で作成し、クライアントコンポーネントに props として渡すことができます。また、クライアントコンポーネントで直接インポートして使用することも可能です。 -### Creating a Server Action from a Server Component {/*creating-a-server-action-from-a-server-component*/} +### サーバコンポーネントからサーバアクションを作成する {/*creating-a-server-action-from-a-server-component*/} -Server Components can define Server Actions with the `"use server"` directive: +サーバコンポーネントは `"use server"` ディレクティブを使用してサーバアクションを定義できます。 ```js [[2, 7, "'use server'"], [1, 5, "createNoteAction"], [1, 12, "createNoteAction"]] // Server Component @@ -45,7 +45,7 @@ function EmptyNote () { } ``` -When React renders the `EmptyNote` Server Component, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided: +React がサーバコンポーネントである `EmptyNote` をレンダーすると、`createNoteAction` 関数への参照を作成し、この参照をクライアントコンポーネントである `Button` に渡します。ボタンがクリックされると、React は渡された参照を使用してサーバにリクエストを送信し、`createNoteAction` 関数を実行します。 ```js {5} "use client"; @@ -57,12 +57,12 @@ export default function Button({onClick}) { } ``` -For more, see the docs for [`"use server"`](/reference/rsc/use-server). +詳細については、[`"use server"`](/reference/rsc/use-server) のドキュメントを参照してください。 -### Importing Server Actions from Client Components {/*importing-server-actions-from-client-components*/} +### クライアントコンポーネントからサーバアクションをインポートする {/*importing-server-actions-from-client-components*/} -Client Components can import Server Actions from files that use the `"use server"` directive: +クライアントコンポーネントは `"use server"` ディレクティブを使用するファイルから、サーバアクションをインポートできます。 ```js [[1, 3, "createNoteAction"]] "use server"; @@ -73,7 +73,7 @@ export async function createNoteAction() { ``` -When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNoteAction` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNoteAction` function using the reference provided: +バンドラがクライアントコンポーネントである `EmptyNote` をビルドする際に、バンドル内で `createNoteAction` 関数への参照を作成します。`button` がクリックされると、React は渡された参照を使用してサーバにリクエストを送信し、`createNoteAction` 関数を実行します。 ```js [[1, 2, "createNoteAction"], [1, 5, "createNoteAction"], [1, 7, "createNoteAction"]] "use client"; @@ -86,11 +86,11 @@ function EmptyNote() { } ``` -For more, see the docs for [`"use server"`](/reference/rsc/use-server). +詳細については、[`"use server"`](/reference/rsc/use-server) のドキュメントを参照してください。 -### Composing Server Actions with Actions {/*composing-server-actions-with-actions*/} +### アクションとサーバアクションを組み合わせる {/*composing-server-actions-with-actions*/} -Server Actions can be composed with Actions on the client: +サーバアクションはクライアントのアクションと組み合わせることができます。 ```js [[1, 3, "updateName"]] "use server"; @@ -134,15 +134,15 @@ function UpdateName() { } ``` -This allows you to access the `isPending` state of the Server Action by wrapping it in an Action on the client. +このようにクライアント側のアクションでラップすることで、サーバアクションによる `isPending` state にアクセスできます。 -For more, see the docs for [Calling a Server Action outside of `
`](/reference/rsc/use-server#calling-a-server-action-outside-of-form) +詳細については、[フォーム外でサーバアクションを呼び出す](/reference/rsc/use-server#calling-a-server-action-outside-of-form)を参照してください。 -### Form Actions with Server Actions {/*form-actions-with-server-actions*/} +### フォームアクションとサーバアクション {/*form-actions-with-server-actions*/} -Server Actions work with the new Form features in React 19. +サーバアクションは React 19 の新しいフォーム関連機能と連携します。 -You can pass a Server Action to a Form to automatically submit the form to the server: +フォームにサーバアクションを渡すことで、自動的にフォームをサーバに送信できます。 ```js [[1, 3, "updateName"], [1, 7, "updateName"]] @@ -159,13 +159,13 @@ function UpdateName() { } ``` -When the Form submission succeeds, React will automatically reset the form. You can add `useActionState` to access the pending state, last response, or to support progressive enhancement. +フォームの送信が成功すると、React は自動的にフォームをリセットします。`useActionState` を追加して、進行中 (pending) state や最終的なレスポンスにアクセスしたり、プログレッシブエンハンスメント (progressive enhancement) をサポートしたりすることが可能です。 -For more, see the docs for [Server Actions in Forms](/reference/rsc/use-server#server-actions-in-forms). +詳細については、[フォーム内でのサーバアクション](/reference/rsc/use-server#server-actions-in-forms)を参照してください。 -### Server Actions with `useActionState` {/*server-actions-with-use-action-state*/} +### `useActionState` とサーバアクション {/*server-actions-with-use-action-state*/} -You can compose Server Actions with `useActionState` for the common case where you just need access to the action pending state and last returned response: +`useActionState` とサーバアクションを組み合わせることで、アクションの進行中 state と最後に返されたレスポンスにアクセスする、という一般的なユースケースに対応できます。 ```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]] "use client"; @@ -184,13 +184,13 @@ function UpdateName() { } ``` -When using `useActionState` with Server Actions, React will also automatically replay form submissions entered before hydration finishes. This means users can interact with your app even before the app has hydrated. +サーバアクションと `useActionState` を使用する場合、React はハイドレーションの完了前に実行されたフォーム送信を自動的に再現します。これにより、ユーザはアプリのハイドレーションが起きる前からアプリを操作できるようになります。 -For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState). +詳細については、[`useActionState`](/reference/react-dom/hooks/useFormState) のドキュメントを参照してください。 -### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/} +### `useActionState` を使用したプログレッシブエンハンスメント {/*progressive-enhancement-with-useactionstate*/} -Server Actions also support progressive enhancement with the third argument of `useActionState`. +サーバアクションは `useActionState` の第 3 引数を使用してプログレッシブエンハンスメントもサポートします。 ```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]] "use client"; @@ -208,6 +208,6 @@ function UpdateName() { } ``` -When the permalink is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads. +パーマリンクが `useActionState` に渡された場合、JavaScript バンドルが読み込まれる前にフォームが送信されると、React はこの渡された URL にリダイレクトします。 -For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState). +詳しくは、[`useActionState`](/reference/react-dom/hooks/useFormState) のドキュメントを参照してください。 diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 563f17fce..ac067da0b 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -365,7 +365,7 @@ "canary": true }, { - "title": "Server Actions", + "title": "サーバアクション", "path": "/reference/rsc/server-actions", "canary": true },