Vendure Dashboard 日本語化手順書¶

概要¶

このドキュメントでは、Vendure React Dashboardの日本語化（国際化）の設定方法と、新しい翻訳キーを追加する手順を説明します。

運用ルール（2026-03 更新）¶

Dashboard 拡張では、翻訳の実装境界を次のように固定します。

コンポーネント内テキスト @lingui/react/macro の Trans / useLingui を使う。
メタ情報（ルート・ナビ・パンくず・PageBlockタイトル） "dashboard.xxx" のような翻訳キー文字列を直接渡さず、表示文字列を直接指定する。
翻訳カタログの正本 packages/plugins/src/standard-extensions/admin-extensions/dashboard/i18n/{locale}.{po,mjs} のみを正本とする。
禁止事項 独自 lingui ラッパーで Trans / useLingui を再実装しない。抽出対象から外れて翻訳ドリフト（#~ 化やキー露出）の原因になるため。
Dashboard 拡張の登録経路は 1 本化する vendure-config.ts では DashboardExtensionsPlugin （apps/vendure-server/src/plugins/ritsubi-admin-extensions/dashboard-extensions.plugin.ts）を Dashboard 拡張の唯一の登録経路にする。 AdminExtensionsPlugin（@ritsubi/plugins）はGraphQL/設定フック専用として併用し、Dashboard エントリは持たせない。
再発防止の自動検知を必須化する breadcrumb / title に "dashboard.xxx" を直指定していないことを pnpm run lint:dashboard-i18n-meta で検証する。
custom Dashboard の visible copy は日本語、catalog key は英数字の明示 ID にする Actions / No results / tier / Pricing Rule / Campaign のような英語 literal を UI copy として残さず、Trans / t() に日本語文言を載せる。ただし <Trans>日本語</Trans> や t`日本語` のような implicit key は使わない。 visible copy は日本語でよいが、Lingui の msgid / key は dashboard.runtime.login.submit のような英数字の安定 ID に固定する。ここでいう source locale は「画面表示文言の元になる locale」であり、「日本語を key 名にする」という意味ではない。variant.カスタムフィールド のような日本語混じり key は catalog の安定識別子として扱いにくいため禁止する。実装例:

<Trans id="dashboard.runtime.login.submit">ログイン</Trans>;

t({
  id: "dashboard.product-custom-fields.general-tab",
  message: "基本情報",
});

悪い例:

<Trans>ログイン</Trans>;
{
  t`基本情報`;
}

既知の漏れは pnpm run lint:dashboard-i18n-literals で検出する。同コマンドは SKU / 品番 / Variant / ProductVariant / custom fields / Admin UI / admin dashboard が JSX text、表示用 props、toast の literal に出ることも検出する。型名・GraphQL field・変数名・template interpolation は対象外で、表示 literal だけを落とす。この guard は pnpm run lint:static-checks と Dashboard i18n pre-push gate に含める。日本語を含む implicit msgid は pnpm run lint:dashboard-i18n-catalog で検出する。どうしても英語業務用語を維持する場合だけ、 dashboard-i18n-literal-ok: <reason> を近傍コメントで明示する。

Dashboard のユーザー可視文言では SKU / 品番 を使わず、商品識別コードは「商品番号」と呼ぶ GraphQL field 名、型名、Handlebars の code sample、内部コメントなど実装識別子としての sku / ProductVariant は維持してよい。一方で、画面ラベル・placeholder・toast・helper text・ドキュメントの operator-facing な説明では「商品番号」に統一する。 ProductVariant / Variant を業務文言として出す必要がある場合は、原則「商品バリエーション」と書く。
Vendure built-in alert / toast の翻訳漏れは拡張層で吸収する 標準UIの日本語化は原則 upstream (@vendure/dashboard) に委ねるが、利用中の Vendure version で built-in alert / toast に英語 literal が残る場合がある。その場合でも node_modules 配下の直接 patch や backend plugin 側への文言移譲は行わず、 Dashboard extension 側で同一 id の alert / component を上書きし、Lingui catalog で管理する。upstream 側で公式対応されたら、ローカル override は削除する。

なぜ改善したか（今回の原因と対策）¶

今回キー露出が改善した主因は次の 3 点です。

Dashboard 拡張の読込経路を修正した
問題: Dashboard 拡張が 0 件として読み込まれる構成が混在し、翻訳バンドルが期待どおり適用されない状態が発生していた。
対策: DashboardExtensionsPlugin を唯一の Dashboard 登録経路に統一した。
プラグイン責務を分離した
問題: AdminExtensionsPlugin が Dashboard エントリまで持つ構成だと、配布物構成との不整合で拡張読込の揺らぎを生みやすい。
対策: AdminExtensionsPlugin から Dashboard エントリを外し、Admin API/設定フック専用に固定した。
メタ情報のキー直渡しを排除した
問題: loader.breadcrumb / navMenuItem.title に dashboard.* を文字列で直指定すると、翻訳未解決時にキーがそのまま露出する。
対策: これらは表示文字列を直接指定するルールにし、自動チェックを追加した。

重要な前提知識:

Vendure Dashboard 3.5.2には日本語翻訳が既に含まれています
標準UIの翻訳は @vendure/dashboard パッケージに同梱されており、原則として追加作業不要です
カスタムDashboard拡張を作成する場合のみ、Linguiを使用した翻訳作業が必要です
ただし、built-in alert / toast には version 依存の翻訳漏れが残る場合があります。現行運用では search-index-buffer-alert を Dashboard extension 側で上書きし、 Lingui で管理します

Dashboard開発全般: カスタムページの作成、コンポーネントの追加、データ連携などの詳細については Vendure開発ハンドブック - Dashboard開発を参照してください。

参考資料¶

第1部: デフォルト言語の設定（標準UI日本語化）¶

Vendure Dashboard標準UIを日本語で表示するための設定方法です。

前提条件¶

Vendure 3.5.2以降がインストール済み
DashboardPluginが vendure-config.ts に設定済み

設定手順¶

ステップ1: Vendure設定でデフォルト言語を指定¶

ファイル: apps/vendure-server/src/vendure-config.ts

import { LanguageCode, type VendureConfig } from "@vendure/core";

export const config: VendureConfig = {
  defaultLanguageCode: LanguageCode.ja,
  // ... 他の設定
};

説明:

defaultLanguageCode を LanguageCode.ja に設定することで、Vendure全体のデフォルト言語が日本語になります
この設定は新規作成されるチャネルに適用されます

ステップ2: 既存チャネルのデフォルト言語を更新¶

既にチャネルが存在する場合、データベースマイグレーションで更新します。

ファイル: apps/vendure-server/src/migrations/set-default-language-to-ja1731890000000.ts

import { MigrationInterface, QueryRunner } from "typeorm";

export class SetDefaultLanguageToJa1731890000000 implements MigrationInterface {
  name = "SetDefaultLanguageToJa1731890000000";

  public async up(queryRunner: QueryRunner): Promise<void> {
    // チャネルのデフォルト言語を日本語に更新
    await queryRunner.query(`
      UPDATE channel
      SET "defaultLanguageCode" = 'ja'
      WHERE "defaultLanguageCode" IS DISTINCT FROM 'ja'
    `);

    // 利用可能言語に日本語を追加
    await queryRunner.query(`
      UPDATE channel
      SET "availableLanguageCodes" = CASE
        WHEN "availableLanguageCodes" IS NULL OR "availableLanguageCodes" = '' THEN 'ja'
        WHEN POSITION('ja' IN "availableLanguageCodes") = 0 THEN "availableLanguageCodes" || ',ja'
        ELSE "availableLanguageCodes"
      END
    `);

    console.log("✅ Default language for channels set to Japanese (ja)");
  }

  public async down(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.query(`
      UPDATE channel
      SET "defaultLanguageCode" = 'en'
      WHERE "defaultLanguageCode" = 'ja'
    `);

    await queryRunner.query(`
      UPDATE channel
      SET "availableLanguageCodes" = 'en'
      WHERE "availableLanguageCodes" IN ('ja', 'en,ja', 'ja,en')
    `);

    console.log("✅ Default language for channels reverted to English");
  }
}

実行方法:

cd apps/vendure-server
pnpm exec nx run ritsubi-vendure-server:migrate:run

ステップ3: 既存ユーザー設定を日本語に更新¶

既にDashboardを使用しているユーザーの言語設定を日本語に更新します。

ファイル: apps/vendure-server/src/migrations/1731891000000-update-dashboard-user-settings-to-japanese.ts

import { MigrationInterface, QueryRunner } from "typeorm";

/**
 * Updates existing dashboard user settings to use Japanese as the default language.
 * This ensures that all users see the dashboard in Japanese by default.
 */
export class UpdateDashboardUserSettingsToJapanese1731891000000 implements MigrationInterface {
  name = "UpdateDashboardUserSettingsToJapanese1731891000000";

  public async up(queryRunner: QueryRunner): Promise<void> {
    // Update existing user settings to Japanese
    await queryRunner.query(`
      UPDATE settings_store_entry
      SET value = jsonb_set(
        jsonb_set(
          value::jsonb,
          '{displayLanguage}',
          '"ja"'
        ),
        '{contentLanguage}',
        '"ja"'
      )
      WHERE key = 'vendure.dashboard.userSettings'
        AND (
          value::jsonb->>'displayLanguage' != 'ja'
          OR value::jsonb->>'contentLanguage' != 'ja'
        )
    `);

    console.log("✅ Dashboard user settings updated to Japanese");
  }

  public async down(queryRunner: QueryRunner): Promise<void> {
    // Revert to English if needed
    await queryRunner.query(`
      UPDATE settings_store_entry
      SET value = jsonb_set(
        jsonb_set(
          value::jsonb,
          '{displayLanguage}',
          '"en"'
        ),
        '{contentLanguage}',
        '"en"'
      )
      WHERE key = 'vendure.dashboard.userSettings'
        AND (
          value::jsonb->>'displayLanguage' = 'ja'
          OR value::jsonb->>'contentLanguage' = 'ja'
        )
    `);

    console.log("✅ Dashboard user settings reverted to English");
  }
}

実行方法:

cd apps/vendure-server
pnpm exec nx run ritsubi-vendure-server:migrate:run

説明:

settings_store_entry テーブルには、各ユーザーのDashboard設定が保存されています
displayLanguage: UI表示言語
contentLanguage: コンテンツ（商品名等）の言語
このマイグレーションで既存ユーザーの設定を一括更新します

ステップ4: Dashboardをビルド¶

cd apps/vendure-server
pnpm exec nx run ritsubi-vendure-server:dashboard:build

ステップ5: 動作確認¶

サーバーを起動:

just vendure

ブラウザで http://localhost:6202/ にアクセス
サイドバー、メニュー、すべてのUI要素が日本語で表示されることを確認

設定の仕組み¶

Vendure Dashboardの言語設定は以下の優先順位で決定されます：

ユーザー設定 (settings_store_entry テーブル)
ユーザーが明示的に選択した言語
Dashboard右上メニューから変更可能
チャネル設定 (channel テーブル)
チャネルの defaultLanguageCode
ユーザー設定がない場合のフォールバック
Vendure設定 (vendure-config.ts)
defaultLanguageCode
新規チャネル作成時のデフォルト値

上記3つのステップで、これらすべてを日本語に設定することで、確実に日本語Dashboardが表示されます。

トラブルシューティング¶

問題: Dashboardが英語のまま表示される¶

原因: ブラウザのlocalStorageに古い設定が残っている

解決方法:

ブラウザの開発者ツールを開く（F12）
Application → Local Storage → 現在開いている React Dashboard の origin （例: http://dashboard.localhost:<worktree-proxy-port> または http://localhost:6202）を選択
vendure.dashboard.userSettings キーを削除
ページをリロード

問題: マイグレーション実行時にエラーが発生¶

原因: settings_store_entry テーブルが存在しない

解決方法: DashboardPluginが正しく設定されているか確認してください。DashboardPluginは初回起動時に settings_store_entry テーブルを自動作成します。

// vendure-config.ts
import { DashboardPlugin } from "@vendure/dashboard/plugin";

export const config: VendureConfig = {
  plugins: [
    DashboardPlugin.init({
      route: "dashboard",
      appDir: join(__dirname, "../dist/dashboard"),
    }),
    // ... 他のプラグイン
  ],
};

第2部: カスタムDashboard拡張の翻訳（Lingui使用）¶

カスタムDashboard拡張を作成する場合、Linguiを使用して翻訳を管理します。

前提条件¶

@lingui/cli, @lingui/macro, @lingui/vite-plugin がインストール済み
Vendure Dashboard Plugin が設定済み

現在の設定状況¶

ファイル構成¶

apps/vendure-server/
├── lingui.config.js              # Lingui設定ファイル
├── vite.config.mts              # Vite設定（Linguiプラグイン含む）
├── src/
│   ├── dashboard/
│   │   ├── index.tsx            # カスタムDashboardコンポーネント
│   │   └── i18n/
│   │       ├── ja.po            # 日本語翻訳ファイル（カスタム拡張用）
│   │       └── en.po            # 英語翻訳ファイル（カスタム拡張用）
│   └── i18n/
│       └── {locale}/messages/   # サーバー側翻訳（既存）

設定ファイル¶

lingui.config.js:

const { defineConfig } = require("@lingui/cli");

module.exports = defineConfig({
  sourceLocale: "ja",
  locales: ["ja", "en"],
  catalogs: [
    // Dashboard拡張用のカタログ
    {
      path: "<rootDir>/src/dashboard/i18n/{locale}",
      include: ["<rootDir>/src/dashboard/**"],
    },
    // 既存のサーバー側翻訳用カタログ
    {
      path: "<rootDir>/src/i18n/{locale}/messages",
      include: ["<rootDir>/src"],
      exclude: ["<rootDir>/src/dashboard/**"],
    },
  ],
  format: "po",
  fallbackLocales: {
    default: "ja",
  },
});

vite.config.mts:

import { lingui } from "@lingui/vite-plugin";
import { vendureDashboardPlugin } from "@vendure/dashboard/vite";
import { join, resolve } from "path";
import { pathToFileURL } from "url";
import { defineConfig } from "vite";

export default defineConfig({
  base: "/",
  build: {
    outDir: join(__dirname, "dist/dashboard"),
  },
  plugins: [
    lingui(),
    vendureDashboardPlugin({
      vendureConfigPath: pathToFileURL("./src/vendure-config.ts"),
      api: {
        host: "http://localhost",
        port: 3021,
      },
      gqlOutputPath: resolve(__dirname, "./src/gql/"),
    }),
  ],
});

カスタム拡張の翻訳手順¶

ステップ1: コンポーネントで文字列をラップする¶

カスタムDashboardコンポーネント内の翻訳対象文字列を Trans コンポーネントまたは useLingui フックでラップします。

Transコンポーネントを使用（推奨）:

import { Trans } from "@lingui/react/macro";

function MyCustomComponent() {
  return (
    <div>
      <h1>
        <Trans>Welcome to Custom Dashboard</Trans>
      </h1>
    </div>
  );
}

useLinguiフックを使用（動的文字列）:

import { useLingui } from "@lingui/react/macro";

function MyCustomComponent() {
  const { t } = useLingui();

  return (
    <div>
      <p>{t`Click here to continue`}</p>
    </div>
  );
}

ステップ2: 翻訳キーを抽出する¶

コンポーネント内の Trans や t でラップした文字列を .po ファイルに抽出します。

cd apps/vendure-server
npx lingui extract

このコマンドを実行すると、src/dashboard/i18n/ ディレクトリに以下のファイルが生成・更新されます：

ja.po - 日本語翻訳ファイル（sourceLocale）
en.po - 英語翻訳ファイル

実行結果の例:

Catalog statistics for src/dashboard/i18n/{locale}:
✔ Done in 869ms
┌─────────────┬─────────────┬─────────┐
│ Language    │ Total count │ Missing │
├─────────────┼─────────────┼─────────┤
│ ja (source) │      9      │    -    │
│ en          │      9      │    2    │
└─────────────┴─────────────┴─────────┘

Missing カラムに未翻訳のキー数が表示されます。

ステップ3: 翻訳を追加・編集する¶

生成された .po ファイルを編集して、各言語の翻訳を追加します。

例: src/dashboard/i18n/ja.po

#: src/dashboard/index.tsx:17
msgid "Welcome to Custom Dashboard"
msgstr "カスタムダッシュボードへようこそ"

例: src/dashboard/i18n/en.po

#: src/dashboard/index.tsx:17
msgid "Welcome to Custom Dashboard"
msgstr "Welcome to Custom Dashboard"

ステップ4: 翻訳をコンパイルする¶

.po ファイルを編集した後、コンパイルして実行時に使用可能な形式に変換します。

cd apps/vendure-server
npx lingui compile

ステップ5: Dashboardをビルドする¶

翻訳を反映するために、Dashboardを再ビルドします。

pnpm exec nx run ritsubi-vendure-server:dashboard:build

開発環境の場合：

pnpm run dashboard:dev

ステップ6: 動作確認¶

サーバーを起動:

just vendure

ブラウザで http://localhost:6202/ にアクセス
カスタムコンポーネントの文字列が日本語で表示されることを確認

第3部: 高度な使用例¶

変数を含む翻訳¶

import { useLingui } from "@lingui/react/macro";

function OrderSummary({ count }: { count: number }) {
  const { t } = useLingui();

  return <p>{t`You have ${count} orders`}</p>;
}

翻訳ファイル:

msgid "You have {count} orders"
msgstr "{count}件の注文があります"

複数形の処理¶

import { Trans } from '@lingui/react/macro';

function ItemCount({ count }: { count: number }) {
  return (
    <Trans>
      {count, plural,
        =0 {No items}
        one {# item}
        other {# items}
      }
    </Trans>
  );
}

翻訳ファイル:

msgid "{count, plural, =0 {No items} one {# item} other {# items}}"
msgstr "{count, plural, =0 {アイテムなし} one {#個のアイテム} other {#個のアイテム}}"

プラグインのDashboard拡張を翻訳する場合¶

カスタムプラグインにDashboard拡張がある場合、lingui.config.js に新しいカタログエントリを追加します。

例: packages/plugins/customer-management/ にDashboard拡張がある場合

const { defineConfig } = require("@lingui/cli");

module.exports = defineConfig({
  sourceLocale: "ja",
  locales: ["ja", "en"],
  catalogs: [
    // 既存のDashboard拡張用カタログ
    {
      path: "<rootDir>/src/dashboard/i18n/{locale}",
      include: ["<rootDir>/src/dashboard/**"],
    },
    // カスタムプラグインのDashboard拡張用カタログ
    {
      path: "<rootDir>/../../packages/plugins/customer-management/src/ui/i18n/{locale}",
      include: ["<rootDir>/../../packages/plugins/customer-management/src/ui/**"],
    },
    // 既存のサーバー側翻訳用カタログ
    {
      path: "<rootDir>/src/i18n/{locale}/messages",
      include: ["<rootDir>/src"],
      exclude: ["<rootDir>/src/dashboard/**"],
    },
  ],
  format: "po",
  fallbackLocales: {
    default: "ja",
  },
});

よくある質問（FAQ）¶

Q1: 標準UIの翻訳が反映されない¶

原因: ユーザー設定またはチャネル設定が英語のまま

解決方法:

第1部の「デフォルト言語の設定」を確認
マイグレーションを実行: pnpm exec nx run ritsubi-vendure-server:migrate:run
ブラウザのlocalStorageをクリア（開発者ツール → Application → Local Storage → vendure.dashboard.userSettings を削除）
Dashboardをリビルド: pnpm exec nx run ritsubi-vendure-server:dashboard:build

Q2: カスタム拡張の翻訳が反映されない¶

原因: 翻訳の抽出・コンパイル・ビルドのいずれかが実行されていない

解決方法:

cd apps/vendure-server
npx lingui extract     # 翻訳キーを抽出
npx lingui compile     # 翻訳をコンパイル
pnpm exec nx run ritsubi-vendure-server:dashboard:build  # Dashboardをビルド

Q3: 複数のコンポーネントで同じ文字列を使いたい¶

回答: msgid が同じであれば、1つの翻訳エントリで複数のコンポーネントに対応できます。Linguiは自動的に同じ msgid を統合します。

Q4: ビルド時に「Missing translations」警告が出る¶

原因: .po ファイルの msgstr が空

解決方法: .po ファイルを開き、すべての msgstr に翻訳を追加してください。

Q5: マイグレーション実行時にエラーが発生¶

原因: settings_store_entry テーブルが存在しない

解決方法: DashboardPluginが正しく設定されているか確認してください。DashboardPluginは初回起動時に settings_store_entry テーブルを自動作成します。

// vendure-config.ts
import { DashboardPlugin } from "@vendure/dashboard/plugin";

export const config: VendureConfig = {
  plugins: [
    DashboardPlugin.init({
      route: "dashboard",
      appDir: join(__dirname, "../dist/dashboard"),
    }),
    // ... 他のプラグイン
  ],
};

Q6: 標準UIの一部だけ英語の通知が残る¶

原因: 利用中の Vendure version で、built-in alert / toast の literal が upstream 側で未翻訳

解決方法:

まず第1部の設定（ユーザー設定・チャネル設定・defaultLanguageCode）が日本語になっていることを確認
@vendure/dashboard を直接 patch しない
backend plugin や search strategy に表示文言を持たせない
Dashboard extension 側で同一 id の alert / component を上書きし、Lingui catalog に翻訳を追加
just i18n-extract → just i18n-compile → pnpm exec nx run ritsubi-vendure-server:dashboard:build を実行して反映

現行の該当例:

search-index-buffer-alert
英語表示: {count} pending search index updates
管理方法: packages/plugins/src/standard-extensions/admin-extensions/dashboard/search-index-buffer-alert.ts で Dashboard alert を上書きし、 packages/plugins/src/standard-extensions/admin-extensions/dashboard/i18n/{locale}.{po,mjs} で翻訳を管理

ベストプラクティス¶

1. 翻訳キーの命名規則¶

具体的な文脈を含める: "Save" ではなく "Save Product" のように具体的に
一貫性を保つ: 同じ意味の文字列は同じ msgid を使用
短く明確に: 長すぎる文字列は避け、必要に応じて分割

2. 翻訳ファイルの管理¶

定期的にextract: コンポーネント追加後は必ず npx lingui extract を実行
未翻訳を確認: Missing カラムをチェックし、すべての翻訳を完了
バージョン管理: .po ファイルはGitで管理し、変更履歴を残す

3. 開発ワークフロー¶

# 1. コンポーネントに Trans/t を追加
# 2. 翻訳キーを抽出
npx lingui extract

# 3. .po ファイルを編集して翻訳を追加
# 4. 翻訳をコンパイル
npx lingui compile

# 5. 開発サーバーで確認（ホットリロード対応）
pnpm run dashboard:dev

# 6. 本番ビルド
pnpm exec nx run ritsubi-vendure-server:dashboard:build

4. 避けるべきパターン¶

❌ ハードコードされた文字列:

// 悪い例
<h1>Welcome to Dashboard</h1>

✅ Transでラップ:

// 良い例
<h1>
  <Trans>Welcome to Dashboard</Trans>
</h1>

❌ 文字列の連結:

// 悪い例
{
  t`You have ` + count + t` items`;
}

✅ 変数を含む翻訳:

// 良い例
{
  t`You have ${count} items`;
}

Vendure標準UIの日本語翻訳について¶

翻訳の詳細¶

翻訳ファイル: node_modules/@vendure/dashboard/src/i18n/locales/ja.po
翻訳数: 4936行
対象: 標準UIの大半（Insights、Catalog、Sales、Customers、Marketing、Administration、System等）
メンテナンス: Vendureコアチームが公式に管理

ビルド出力の確認¶

ビルドが成功すると、以下のファイルが生成されます：

dist/dashboard/assets/i18n/ja.js  (52.87 kB)

このファイルには、Vendure公式の日本語翻訳が大半含まれています。例外的な built-in alert / toast の翻訳漏れについては、後述の「例外運用」を参照してください。

翻訳の品質¶

Vendure公式の日本語翻訳は高品質で、以下の要素が含まれます：

UI要素（ボタン、ラベル、メニュー等）
エラーメッセージ
確認ダイアログ
フォームバリデーション
ヘルプテキスト

例外運用: built-in alert の翻訳漏れ¶

標準UIの翻訳は upstream 管理が原則ですが、version によっては built-in alert / toast に英語 literal が残ることがあります。現行では search-index-buffer-alert がこの例外に該当します。

責務の切り分け: この通知文言は search backend plugin ではなく、Dashboard frontend の alert 実装が持つ
禁止: @vendure/dashboard の直接 patch、node_modules の改変、 backend plugin への UI 文言移譲
対応: Dashboard extension 側で同一 id の alert を上書きし、Lingui catalog で ja/en を管理する
将来対応: upstream 側で正式に翻訳が入ったら、ローカル override を削除する

まとめ¶

標準UI日本語化の3ステップ¶

vendure-config.ts: defaultLanguageCode: LanguageCode.ja
チャネルマイグレーション: channel.defaultLanguageCode = 'ja'
ユーザー設定マイグレーション: settings_store_entry を更新

カスタム拡張翻訳の5ステップ¶

Trans/tでラップ: コンポーネント内の文字列を翻訳可能に
extract: npx lingui extract で .po ファイルを生成
翻訳追加: .po ファイルの msgstr に翻訳を記述
compile: npx lingui compile で実行時形式に変換
ビルド: pnpm exec nx run ritsubi-vendure-server:dashboard:build で反映

重要な注意事項¶

標準UIは原則追加作業不要: Vendure公式の日本語翻訳が自動適用されます
カスタム拡張のみLingui使用: 独自コンポーネントを作成する場合のみ翻訳作業が必要
例外的な built-in alert は拡張層で上書き: upstream の翻訳漏れは @vendure/dashboard を直接 patch せず、Dashboard extension 側で局所対応する
設定の優先順位: ユーザー設定 > チャネル設定 > Vendure設定

更新履歴¶

2025-11-18: 初版作成（Vendure公式ドキュメントに基づく実装）
2025-11-18: Vendure標準UIの日本語翻訳について追記
2025-11-18: 完全版に更新（デフォルト言語設定の詳細、トラブルシューティング、ベストプラクティスを追加）
2026-04-13: built-in alert の翻訳漏れ（search-index-buffer-alert）に対する拡張層 override 方針を追記