# General Translation Integrations: クイックスタート
URL: https://generaltranslation.com/ja/docs/integrations/shopify/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: gt-react または gt-next を使ってヘッドレスな Shopify Hydrogen ストアフロントのインターフェースを翻訳し、カタログも同じ言語で表示します。

ローカライズされた Shopify ストアフロントのテキストは 2 つの層に分かれており、それぞれ異なる場所で翻訳します。

* **カタログコンテンツ。** 商品、コレクション、ページは、Shopify が提供するフレームワーク非依存のストアフロント SDK である Hydrogen を通じて Shopify から取得されます。これらは General Translation で翻訳し、その結果を Shopify の翻訳データとして保存して、Storefront API 経由で読み込みます。
* **ストアフロントの文言。** ナビゲーション、ボタン、カートのメッセージなど、コード内に記述されたテキストです。これらは、お使いのフレームワーク向けの General Translation SDK で翻訳します。React Router では [`gt-react`](/docs/react/react-router-quickstart)、Next.js (Vercel Shop テンプレートを含む) では [`gt-next`](/docs/react/nextjs-quickstart) を使用します。

どちらの層もリクエストごとに同じロケールを参照するため、フランス語のページでは文言も商品名もフランス語で表示されます。

*メモ：このインテグレーションは、React Router または Next.js 上で Hydrogen 2026.10 を使用するヘッドレスストアフロント向けです。Liquid で構築された Online Store テーマの場合は、Shopify 独自の翻訳アプリを使用してください。*

## ストアフロントの例 [#examples]

[gt-shopify-vercel.vercel.app](https://gt-shopify-vercel.vercel.app) は、Vercel Shop の Next.js テンプレートに `gt-next` を組み込んだサンプルです。ロケールはパスのプレフィックスで区別され、デフォルトロケールにはプレフィックスを付けません。すべてのページとカタログがフランス語、日本語、韓国語、インドネシア語に翻訳されており、言語ごとに個別の Shopify マーケットと通貨で販売しています。カタログの翻訳は Shopify には保存せず、CLI を使ってバンドルに含めています。

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

以下が必要です。

* React Router 7 または 8 上で `@shopify/hydrogen` を使用するヘッドレス Shopify ストアフロント、または Next.js App Router を使用するヘッドレス Shopify ストアフロント (Vercel Shop など) 。
* [プロジェクト](/docs/platform/dashboard/get-started)と、[`gt login`](/docs/cli/reference/commands/login) でサインイン済みの CLI。
* カタログの翻訳を Shopify に保存する場合は、Shopify 管理画面の **設定 > 言語** へのアクセス権。

## クイックスタート [#quickstart]

### 1. ロケールを一か所で定義する

`gt.config.json` にデフォルトロケールとターゲットロケールを記述します。ルーティング、`<html lang>`、プロバイダー、言語切り替え機能、Shopify のクエリは、いずれもこのリストを参照します。

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["fr", "ja"]
}
```

Shopify は `FR` や `PT_BR` などの `LanguageCode` 値で言語を識別するため、各ロケールと Shopify コードの対応表を明示的に用意しておいてください ([ロケールコード](/docs/integrations/shopify/reference/locale-handling#locale-codes)を参照) 。カタログの翻訳を Shopify に保存する場合は、Shopify 管理画面の **設定 &gt; 言語** で同じ言語を追加し、公開もしておいてください。

### 2. ストアフロントの翻訳を設定する

<Tabs items={['React Router', 'Next.js']}>
  <Tab value="React Router">
    まず [React Router クイックスタート](/docs/react/react-router-quickstart)の手順に従います。次に、ルートのミドルウェアで、同じロケールを Hydrogen のリクエストコンテキストに渡します (詳しくは [React Router で Shopify Hydrogen をローカライズする](/docs/integrations/shopify/guides/localizing-react-router)を参照してください) 。
  </Tab>

  <Tab value="Next.js">
    `gt-next` を追加し、ストアフロントのルートを `app/[locale]` 配下に移動します。さらに、Shopify のルートハンドラーが実行された後に、プレフィックスのないリクエストをデフォルトロケールへリライトします (詳しくは [Next.js の Shopify ストアフロントをローカライズする](/docs/integrations/shopify/guides/localizing-nextjs)を参照してください) 。
  </Tab>
</Tabs>

### 3. アクティブな言語で Shopify にクエリを送る

カタログコンテンツを返す Storefront API のクエリに `@inContext(language: $language)` を追加します。Hydrogen の Storefront クライアントがリクエストコンテキストの `i18n` から `$language` と `$country` を自動的に設定するため、クエリごとに渡す必要はありません。

```ts title="lib/queries.ts"
import {gql} from '@shopify/hydrogen';

export const PRODUCT_QUERY = gql(`
  query Product($handle: String!, $country: CountryCode, $language: LanguageCode)
  @inContext(country: $country, language: $language) {
    product(handle: $handle) {
      title
      description
    }
  }
`);
```

国によってマーケットが決まり、マーケットによって価格、通貨、販売可否が決まります。すべての言語で同じ国を使い続けるか、言語ごとに別々のマーケットで販売し、言語の切り替え時にカートを移行するかのいずれかを選択してください ([言語とマーケット](/docs/integrations/shopify/reference/locale-handling#language-market)を参照) 。

翻訳が存在しないフィールドについては、Shopify は原文を返します。カタログに翻訳を揃えるには、[Admin API を使用した Shopify 商品の翻訳](/docs/integrations/shopify/guides/translating-products)の手順に従ってください。

### 4. 翻訳を生成

ストアフロントの文言を翻訳対象としてマークし、[`npx gt translate`](/docs/cli/reference/commands/translate) で翻訳を生成します。このコマンドをビルド前に実行し、[翻訳をローカルに保存](/docs/react/guides/storing-translations)しておけば、キャッシュされたページやプリレンダリングされたページも翻訳込みで配信されます。

<Tabs items={['React Router', 'Next.js']}>
  <Tab value="React Router">
    ```json title="package.json"
    {
      "scripts": {
        "build": "npx gt translate && react-router build"
      }
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```json title="package.json"
    {
      "scripts": {
        "build": "npx gt translate && next build"
      }
    }
    ```
  </Tab>
</Tabs>

<Callout type="info">
  **メモ：** 新しい文言のラップと翻訳をプルリクエスト上で行いたい場合は、リポジトリを [Locadex](/docs/platform/locadex/quickstart) に接続してください。
</Callout>

### 5. ローカライズされたページを確認する

ストアフロントを起動し、対象ロケールでページをリクエストします。次の点を確認してください。

* `<html lang>`、ストアフロントの文言、翻訳された商品タイトルがロケールと一致していること。
* 価格が Shopify から返された通貨のまま表示されていること。
* 言語を切り替えた後も、カート、チェックアウト、アカウントの各ルートが正常に動作すること。

## よくある質問 [#faqs]

### Hydrogen は商品コンテンツを自動的に翻訳しますか？

いいえ。Hydrogen は Storefront API を通じて Shopify にある既存の翻訳を読み込むだけで、翻訳を生成することはありません。General Translation でカタログのフィールドを翻訳して結果を Shopify に登録するか、翻訳済みのカタログ JSON をストアフロントにバンドルしてください ([Admin API を使った Shopify 商品の翻訳](/docs/integrations/shopify/guides/translating-products)を参照) 。

### 言語を変更すると通貨も変わりますか？

言語を変更するだけでは変わりません。価格は Shopify のマーケットとカートの購入者の国によって決まり、ページの言語によって決まるのは翻訳されたテキストです。サンプルのストアフロントでは各言語を明示的にマーケットに対応付けていますが、すべての言語で 1 つのマーケットを共有することも、国の選択機能を別途用意することもできます ([言語とマーケット](/docs/integrations/shopify/reference/locale-handling#language-market)を参照してください) 。

## Next steps

- /docs/integrations/shopify/guides/localizing-react-router
- /docs/integrations/shopify/guides/localizing-nextjs
- /docs/integrations/shopify/guides/translating-products
- /docs/integrations/shopify/guides/selling-in-markets

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.