# General Translation React SDKs (gt-react, gt-next, gt-react-native): サーバー関数の使用
URL: https://generaltranslation.com/ja/docs/react/tanstack-start/using-server-functions.mdx
---

title: サーバー関数の使用
description: TanStack Start のサーバー関数で、General Translation を使って文字列を翻訳し、リクエストの状態を読み取る方法。

---

`gt-tanstack-start/server` エントリは、ローダー、サーバー関数、サーバー側でレンダリングされるメタデータ向けに、リクエストスコープの翻訳ヘルパーを提供します。

## 始める前に [#before-start]

[TanStack Start のセットアップ](/docs/react/tanstack-start/setup)を完了してください。[`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware) をグローバルに登録し、ミドルウェアがリクエストを処理する前に [`initializeGT`](/docs/react/reference/config#initialize) を呼び出す必要があります。

サーバーヘルパーは、アクティブなミドルウェアのリクエストスコープ外で呼び出すと例外をスローします。

## サーバー関数内で翻訳する [#translate]

TanStack Start のサーバー関数を作成し、そのハンドラー内で [`getGT`](/docs/react/tanstack-start/reference/functions/get-gt) を呼び出します。レスポンスにもリクエストの状態が必要な場合は、[`getLocale`](/docs/react/tanstack-start/reference/functions/get-locale) と [`getEnableI18n`](/docs/react/tanstack-start/reference/functions/get-enable-i18n) を使用します。

```tsx title="src/routes/account.tsx"
import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import {
  getEnableI18n,
  getGT,
  getLocale,
} from 'gt-tanstack-start/server';

const loadAccount = createServerFn({ method: 'GET' }).handler(async () => {
  const gt = await getGT();

  return {
    locale: getLocale(),
    enableI18n: getEnableI18n(),
    title: gt('Account'),
  };
});

export const Route = createFileRoute('/account')({
  loader: () => loadAccount(),
  head: ({ loaderData }) => ({
    meta: [{ title: loaderData?.title }],
  }),
  component: Account,
});

function Account() {
  const data = Route.useLoaderData();
  return <h1>{data.title}</h1>;
}
```

TanStack Start は、リクエスト ミドルウェアのスコープ内でハンドラーを実行します。各リクエストには、並行サーバーレンダリング時を含め、それぞれ固有のロケールと国際化設定が適用されます。

## 登録済みメッセージと辞書を翻訳する [#messages]

[`msg`](/docs/react/reference/functions/msg) で登録した文字列には [`getMessages`](/docs/react/tanstack-start/reference/functions/get-messages) を使用します。辞書エントリには [`getTranslations`](/docs/react/tanstack-start/reference/functions/get-translations) を使用します。

```ts
import { createServerFn } from '@tanstack/react-start';
import { msg } from 'gt-tanstack-start';
import {
  getMessages,
  getTranslations,
} from 'gt-tanstack-start/server';

const status = msg('Ready');

export const loadCopy = createServerFn({ method: 'GET' }).handler(async () => {
  const m = await getMessages();
  const t = await getTranslations('account');

  return {
    status: m(status),
    heading: t('heading'),
  };
});
```