Skip to content

Update translations #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 6, 2025
Merged

Update translations #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
94 changes: 47 additions & 47 deletions apps/docs/content/ja/docs/01-app/01-getting-started/10-updating-data.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
source-updated-at: 2025-06-01T01:32:20.000Z
translation-updated-at: 2025-06-02T20:01:14.188Z
title: データの更新方法
source-updated-at: 2025-06-03T15:30:49.000Z
translation-updated-at: 2025-06-06T16:36:21.895Z
title: データ更新方法
nav_title: データ更新
description: Next.jsアプリケーションでデータを更新する方法について学びましょう。
description: Next.jsアプリケーションでデータを更新する方法について学びます。
related:
title: APIリファレンス
description: このページで紹介されている機能について詳しく知るには、APIリファレンスをお読みください。
description: このページで言及されている機能について詳しく知るにはAPIリファレンスを参照してください。
links:
- app/api-reference/functions/revalidatePath
- app/api-reference/functions/revalidateTag
Expand All @@ -15,36 +15,36 @@ related:

Next.jsではReactの[サーバー関数 (Server Functions)](https://react.dev/reference/rsc/server-functions)を使用してデータを更新できます。このページでは[サーバー関数の作成](#creating-server-functions)と[呼び出し](#invoking-server-functions)方法について説明します。

## サーバー関数
## サーバー関数 (Server Functions)

サーバー関数とは、サーバー上で実行される非同期関数です。サーバー関数はクライアントからネットワークリクエスト経由で呼び出されるため、本質的に非同期です。`action`の一部として呼び出される場合、**サーバーアクション (Server Actions)** とも呼ばれます。
サーバー関数はサーバー上で実行される非同期関数です。クライアントからネットワークリクエスト経由で呼び出されるため、サーバー関数は本質的に非同期です。`action`の一部として呼び出される場合、**サーバーアクション (Server Actions)** とも呼ばれます。

慣例として、`action`は`startTransition`に渡される非同期関数です。サーバー関数は以下の場合に自動的に`startTransition`でラップされます：
慣例として、`action`は`startTransition`に渡される非同期関数です。サーバー関数は以下の場合に自動的に`startTransition`でラップされます:

- `<form>`の`action`プロパティに渡された場合
- `<button>`の`formAction`プロパティに渡された場合
- `useActionState`に渡された場合

## サーバー関数の作成

サーバー関数は[`use server`](https://react.dev/reference/rsc/use-server)ディレクティブを使用して定義できます。このディレクティブを**非同期**関数の先頭に配置して関数をサーバー関数としてマークするか、別ファイルの先頭に配置してそのファイルのすべてのエクスポートをマークできます。
サーバー関数は[`use server`](https://react.dev/reference/rsc/use-server)ディレクティブを使用して定義できます。ディレクティブを**非同期**関数の先頭に配置して関数をサーバー関数としてマークするか、ファイルの先頭に配置してそのファイルのすべてのエクスポートをマークできます。

```ts filename="app/lib/actions.ts" switcher
export async function createPost(formData: FormData) {
'use server'
const title = formData.get('title')
const content = formData.get('content')

// データを更新
// キャッシュを再検証
// データ更新
// キャッシュ再検証
}

export async function deletePost(formData: FormData) {
'use server'
const id = formData.get('id')

// データを更新
// キャッシュを再検証
// データ更新
// キャッシュ再検証
}
```

Expand All @@ -54,22 +54,22 @@ export async function createPost(formData) {
const title = formData.get('title')
const content = formData.get('content')

// データを更新
// キャッシュを再検証
// データ更新
// キャッシュ再検証
}

export async function deletePost(formData) {
'use server'
const id = formData.get('id')

// データを更新
// キャッシュを再検証
// データ更新
// キャッシュ再検証
}
```

### サーバーコンポーネント
### サーバーコンポーネント (Server Components)

サーバー関数はサーバーコンポーネント内にインラインで定義できます。関数本体の先頭に`"use server"`ディレクティブを追加します：
サーバーコンポーネント内では、関数本体の先頭に`"use server"`ディレクティブを追加することでサーバー関数をインラインで定義できます:

```tsx filename="app/page.tsx" switcher
export default function Page() {
Expand All @@ -95,9 +95,9 @@ export default function Page() {
}
```

### クライアントコンポーネント
### クライアントコンポーネント (Client Components)

クライアントコンポーネント内でサーバー関数を定義することはできません。ただし、`"use server"`ディレクティブがファイル先頭にあるファイルからインポートすることで、クライアントコンポーネント内で呼び出すことができます：
クライアントコンポーネントでサーバー関数を定義することはできません。ただし、`"use server"`ディレクティブが先頭にあるファイルからインポートすることで、クライアントコンポーネントで呼び出すことができます:

```ts filename="app/actions.ts" switcher
'use server'
Expand Down Expand Up @@ -133,16 +133,16 @@ export function Button() {

## サーバー関数の呼び出し

サーバー関数を呼び出す主な方法は2つあります：
サーバー関数を呼び出す主な方法は2つあります:

1. サーバー/クライアントコンポーネント内の[フォーム](#forms)
2. クライアントコンポーネント内の[イベントハンドラー](#event-handlers)
1. サーバー/クライアントコンポーネントでの[フォーム](#forms)使用
2. クライアントコンポーネントでの[イベントハンドラ](#event-handlers)使用

### フォーム

ReactはHTMLの[`<form>`](https://react.dev/reference/react-dom/components/form)要素を拡張し、HTMLの`action`プロパティでサーバー関数を呼び出せるようにしています。

フォーム内で呼び出された場合、関数は自動的に[`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData)オブジェクトを受け取ります。ネイティブの[`FormData`メソッド](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods)を使用してデータを抽出できます：
フォームで呼び出された場合、関数は自動的に[`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData)オブジェクトを受け取ります。ネイティブの[`FormData`メソッド](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods)を使用してデータを抽出できます:

```tsx filename="app/ui/form.tsx" switcher
import { createPost } from '@/app/actions'
Expand Down Expand Up @@ -179,8 +179,8 @@ export async function createPost(formData: FormData) {
const title = formData.get('title')
const content = formData.get('content')

// データを更新
// キャッシュを再検証
// データ更新
// キャッシュ再検証
}
```

Expand All @@ -191,16 +191,16 @@ export async function createPost(formData) {
const title = formData.get('title')
const content = formData.get('content')

// データを更新
// キャッシュを再検証
// データ更新
// キャッシュ再検証
}
```

> **豆知識**：`action`プロパティに渡された場合、サーバー関数は_サーバーアクション_とも呼ばれます。
> **補足:** `action`プロパティに渡された場合、サーバー関数は_サーバーアクション (Server Actions)_ とも呼ばれます。

### イベントハンドラー
### イベントハンドラ

`onClick`などのイベントハンドラーを使用して、クライアントコンポーネント内でサーバー関数を呼び出すことができます。
クライアントコンポーネントでは`onClick`などのイベントハンドラを使用してサーバー関数を呼び出せます。

```tsx filename="app/like-button.tsx" switcher
'use client'
Expand Down Expand Up @@ -252,25 +252,25 @@ export default function LikeButton({ initialLikes }) {
}
```

## 例
## 使用例

### 保留状態の表示
### 処理中状態の表示

サーバー関数の実行中、Reactの[`useActionState`](https://react.dev/reference/react/useActionState)フックを使用してローディングインジケーターを表示できます。このフックは`pending`ブール値を返します：
サーバー関数の実行中は、Reactの[`useActionState`](https://react.dev/reference/react/useActionState)フックを使用してローディングインジケータを表示できます。このフックは`pending`ブール値を返します:

```tsx filename="app/ui/button.tsx" switcher
'use client'

import { useActionState } from 'react'
import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
const [state, action, pending] = useActionState(createPost, false)

return (
<button onClick={async () => action()}>
{pending ? <LoadingSpinner /> : '投稿を作成'}
<button onClick={() => startTransition(action)}>
{pending ? <LoadingSpinner /> : '投稿作成'}
</button>
)
}
Expand All @@ -279,31 +279,31 @@ export function Button() {
```jsx filename="app/ui/button.js" switcher
'use client'

import { useActionState } from 'react'
import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
const [state, action, pending] = useActionState(createPost, false)

return (
<button onClick={async () => action()}>
{pending ? <LoadingSpinner /> : '投稿を作成'}
<button onClick={() => startTransition(action)}>
{pending ? <LoadingSpinner /> : '投稿作成'}
</button>
)
}
```

### キャッシュの再検証

更新を実行した後、サーバー関数内で[`revalidatePath`](/docs/app/api-reference/functions/revalidatePath)または[`revalidateTag`](/docs/app/api-reference/functions/revalidateTag)を呼び出すことでNext.jsのキャッシュを再検証し、更新されたデータを表示できます：
更新を実行した後、サーバー関数内で[`revalidatePath`](/docs/app/api-reference/functions/revalidatePath)または[`revalidateTag`](/docs/app/api-reference/functions/revalidateTag)を呼び出すことでNext.jsのキャッシュを再検証し、更新されたデータを表示できます:

```ts filename="app/lib/actions.ts" switcher
import { revalidatePath } from 'next/cache'

export async function createPost(formData: FormData) {
'use server'
// データを更新
// データ更新
// ...

revalidatePath('/posts')
Expand All @@ -315,23 +315,23 @@ import { revalidatePath } from 'next/cache'

export async function createPost(formData) {
'use server'
// データを更新
// データ更新
// ...
revalidatePath('/posts')
}
```

### リダイレクト

更新後にユーザーを別のページにリダイレクトしたい場合があります。サーバー関数内で[`redirect`](/docs/app/api-reference/functions/redirect)を呼び出すことでこれを行えます：
更新後にユーザーを別のページにリダイレクトしたい場合があります。サーバー関数内で[`redirect`](/docs/app/api-reference/functions/redirect)を呼び出すことで実現できます:

```ts filename="app/lib/actions.ts" switcher
'use server'

import { redirect } from 'next/navigation'

export async function createPost(formData: FormData) {
// データを更新
// データ更新
// ...

redirect('/posts')
Expand All @@ -344,7 +344,7 @@ export async function createPost(formData: FormData) {
import { redirect } from 'next/navigation'

export async function createPost(formData) {
// データを更新
// データ更新
// ...

redirect('/posts')
Expand Down
Loading