@intlayer/docs 8.12.4 → 9.0.0-canary.10

package/docs/ja/intlayer_with_react_native+expo.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-06-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-25
 title: "Expo + React Native i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）Expo + React Nativeアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
@@ -17,6 +17,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
 applicationShowcase: https://intlayer-react-native.vercel.app
 history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "プロバイダーとフックを react-native-intlayer から直接インポートするよう変更。react-intlayer は直接の依存関係として不要になった"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"
@@ -26,6 +29,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "履歴初期化"
+author: aymericzip
 ---
 
 # ExpoとReact Nativeアプリを翻訳する | 国際化（i18n）
@@ -55,120 +59,118 @@ history:
   </Tab>
 </Tabs>
 
-GitHub の [アプリケーションテンプレート](https://github.com/aymericzip/intlayer-react-native-template) を参照してください。
+## 目次
 
-## 代替手段ではなく Interlayer を使用する理由
+<TOC/>
 
-「react-native-localize」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
+## 代替手段ではなく Intlayer を使用する理由
 
-**React Native を完全にカバー**
+`react-native-localize` や `i18next` などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayer は、**コンポーネント レベルのコンテンツ スコープ**、**TypeScript サポート**、およびモバイル アプリの国際化 (i18n) のスケーリングに必要なすべての機能を提供することにより、React Native および Expo と完全に連携するように最適化されています。
+<AccordionGroup>
 
-**保守性**
+<Accordion header="React Native を完全にカバー">
 
-アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
+Intlayer は、**コンポーネントレベルのコンテンツスコープ**、**TypeScript サポート**、およびモバイルアプリの国際化 (i18n) のスケーリングに必要なすべての機能を提供することにより、React Native および Expo と完全に連携するように最適化されています。
 
-**AI エージェント**
+</Accordion>
 
-コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[エージェント スキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
+<Accordion header="保守性">
 
-**オートメーション**
+アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの**メンテナンスが容易になります**。コンテンツコードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
 
-AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
+</Accordion>
 
-**パフォーマンス**
+<Accordion header="AI エージェント">
 
-大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
+コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって**必要なコンテキストが削減**されます。Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**、および **[エージェントスキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)** などのツールスイートも付属しており、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
 
-**非開発によるスケーリング**
+</Accordion>
 
-Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
+<Accordion header="オートメーション">
 
-**バンドルサイズ**
+AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化して翻訳します。Intlayer は、コンテンツ抽出を自動化する**コンパイラー**と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
 
-大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとビューのサイズを最大 50% 削減**するのに役立ちます。
+</Accordion>
 
-## ステップ 1: 依存関係をインストールする
+<Accordion header="パフォーマンス">
 
-GitHub の [アプリケーション テンプレート](https://github.com/aymericzip/intlayer-react-native-template) を参照してください。
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
 
-React Native プロジェクトから、次のパッケージをインストールします。
+</Accordion>
 
-````bash packageManager="npm"
-npm install intlayer 反応-intlayer
-npm install --save-dev 反応ネイティブ-intlayer
-npx 内部層初期化
-「」
+<Accordion header="非開発者によるスケーリング">
 
-```bash packageManager="pnpm"
-pnpm add intlayer 反応-intlayer
-pnpm add --save-dev 反応ネイティブ-intlayer
-pnpm 内部層初期化
-「」
+Intlayer は単なる i18n ソリューションではなく、**自己ホスト型[ビジュアルエディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供し、**リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチームメンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
-```bash packageManager="yarn"
-糸 中間層を追加 反応内部層
-糸追加 --save-dev 反応ネイティブ-内部層
-糸の中間層の初期化
-「」
+</Accordion>
 
-```bash packageManager="bun"
-bun add intlayer 反応-intlayer
-バン追加 --dev 反応ネイティブ-intlayer
-bun x 内部層の初期化
-「」
+<Accordion header="バンドルサイズ">
 
-### パッケージ
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。Intlayer は、**バンドルとビューのサイズを最大 50% 削減**するのに役立ちます。
 
-- **中間層**
-  構成、辞書コンテンツ、タイプ生成、および CLI コマンド用のコア i18n ツールキット。
+</Accordion>
+</AccordionGroup>
 
-- **反応内部層**
-  React Native でロケールの取得と切り替えに使用するコンテキスト プロバイダーと React フックを提供する React 統合。
+<Steps>
 
-- **反応ネイティブ内部層**
-  Intlayer を React Native バンドラーと統合するための Metro プラグインを提供する React Native 統合。
+<Step number={1} title="依存関係をインストールする">
 
----
+GitHub の [アプリケーションテンプレート](https://github.com/aymericzip/intlayer-react-native-template) を参照してください。
+
+React Native プロジェクトから、次のパッケージをインストールします：
+
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
 
-## ステップ 1: 依存パッケージのインストール
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` フラグはオプションです。AI エージェントの場合は `intlayer-cli init` を使用してください。
 
-React Native プロジェクトから、以下のパッケージをインストールしてください：
+> このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：
 
 ```bash packageManager="npm"
-bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install --save-dev react-native-intlayer
-````
+npm install intlayer react-native-intlayer
+```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add --save-dev react-native-intlayer
-pnpm intlayer init
+pnpm add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add --save-dev react-native-intlayer
+yarn add intlayer react-native-intlayer
+```
+
+```bash packageManager="bun"
+bun add intlayer react-native-intlayer
 ```
 
 ### パッケージ
 
 - **intlayer**  
-  設定、辞書コンテンツ、型生成、CLIコマンドのためのコアi18nツールキット。
-
-- **react-intlayer**  
-  React Nativeでロケールの取得や切り替えに使用するコンテキストプロバイダーとReactフックを提供するReact統合。
+  設定、辞書コンテンツ、型生成、CLI コマンドのためのコア i18n ツールキット。
 
 - **react-native-intlayer**  
-  IntlayerをReact Nativeバンドラーと統合するためのMetroプラグインを提供するReact Native統合。
+  ロケールの取得や切り替えに使用するコンテキストプロバイダーと React フック、React Native ポリフィル、および Intlayer を React Native バンドラーと統合するための Metro プラグインを提供する React Native 統合。`react-intlayer` からすべてを再エクスポートするため、React Native アプリではこの単一パッケージのみが必要です。
 
 ---
 
-## ステップ 2: Intlayer設定ファイルの作成
+</Step>
+
+<Step number={2} title="Intlayer設定ファイルの作成">
 
-プロジェクトのルート（または任意の便利な場所）に**Intlayer設定ファイル**を作成します。以下のような内容になるかもしれません：
+プロジェクトのルート（または任意の便利な場所）に **Intlayer 設定ファイル**を作成します。以下のような内容になるかもしれません：
 
 ```ts fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 /**
@@ -196,11 +198,13 @@ export default config;
 - **サポートするロケールのリスト**を設定する。
 - **デフォルト**のロケールを設定する。
 - 後で、より高度なオプション（例：ログ、カスタムコンテンツディレクトリなど）を追加することも可能です。
-- 詳細は[Intlayerの設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
+- 詳細は [Intlayer の設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md) を参照してください。
 
-## ステップ3: Metroプラグインを追加する
+</Step>
 
-MetroはReact Native用のバンドラーです。`react-native init`コマンドで作成されたReact Nativeプロジェクトのデフォルトバンドラーです。IntlayerをMetroで使用するには、`metro.config.js`ファイルにプラグインを追加する必要があります。
+<Step number={3} title="Metro プラグインを追加する">
+
+Metro は React Native 用のバンドラーです。`react-native init` コマンドで作成された React Native プロジェクトのデフォルトバンドラーです。Intlayer を Metro で使用するには、`metro.config.js` ファイルにプラグインを追加する必要があります。
 
 ```js fileName="metro.config.js"
 const { getDefaultConfig } = require("expo/metro-config");
@@ -213,32 +217,25 @@ module.exports = (async () => {
 })();
 ```
 
-## ステップ4: Intlayerプロバイダーを追加する
+> 注：`configMetroIntlayer` は Promise 関数です。同期的に使用したい場合は `configMetroIntlayerSync` を使用するか、IFFE（即時実行関数式）を避けてください。
+> 注：`configMetroIntlayerSync` はサーバー起動時に intlayer 辞書をビルドすることができません
 
-アプリケーション全体でユーザーの言語を同期させるには、ルートコンポーネントを `react-intlayer-native` の `IntlayerProvider` コンポーネントでラップする必要があります。
+</Step>
 
-> `react-intlayer` の代わりに `react-native-intlayer` のプロバイダーを使用してください。`react-native-intlayer` のエクスポートには Web API のポリフィルが含まれています。
+<Step number={4} title="Intlayer プロバイダーを追加する">
 
-```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
-import { Stack } from "expo-router";
-import { getLocales } from "expo-localization";
-import { IntlayerProvider } from "react-native-intlayer";
-import { type FC } from "react";
+アプリケーション全体でユーザーの言語を同期させるには、ルートコンポーネントを `react-native-intlayer` の `IntlayerProvider` コンポーネントでラップする必要があります。
 
+> 常に `react-native-intlayer` からインポートしてください。その `IntlayerProvider` には Intlayer が使用する Web API のポリフィルが含まれており、このパッケージは `react-intlayer` からすべてのフックとユーティリティを再エクスポートします。
 
-const getDeviceLocale = () => getLocales()[0]?.languageTag;
+また、Intlayer が正しく動作するように、`index.js` ファイルに `intlayerPolyfill` 関数を追加する必要があります。
 
-const RootLayout: FC = () => {
-  return (
-    <IntlayerProvider defaultLocale={getDeviceLocale()}>
-      <Stack>
-tsx fileName="app/_layout.tsx" codeFormat="typescript"
+```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
 import { Stack } from "expo-router";
 import { getLocales } from "expo-localization";
 import { IntlayerProvider } from "react-native-intlayer";
 import { type FC } from "react";
 
-
 const getDeviceLocale = () => getLocales()[0]?.languageTag;
 
 const RootLayout: FC = () => {
@@ -254,33 +251,15 @@ const RootLayout: FC = () => {
 export default RootLayout;
 ```
 
-## ステップ5: コンテンツを宣言する
-
-```jsx fileName="app/_layout.cjx" codeFormat="commonjs"
-const { Stack } = require("expo-router");
-const { getLocales } = require("expo-localization");
-const { IntlayerProvider } = require("react-native-intlayer");
-
-const getDeviceLocale = () => getLocales()[0]?.languageTag;
-
-const RootLayout = () => {
-  return (
-    <IntlayerProvider defaultLocale={getDeviceLocale()}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-      </Stack>
-    </IntlayerProvider>
-  );
-};
-
-module.exports = RootLayout;
-```
+</Step>
 
-## ステップ5: コンテンツを宣言する
+<Step number={5} title="コンテンツを宣言する">
 
 プロジェクト内の任意の場所（一般的には `src/` 内）に**コンテンツ宣言**ファイルを作成します。Intlayer がサポートする任意の拡張子形式を使用できます：
 
 - `.content.json`
+- `.content.jsonc`
+- `.content.json5`
 - `.content.ts`
 - `.content.tsx`
 - `.content.js`
@@ -288,9 +267,20 @@ module.exports = RootLayout;
 - `.content.mjs`
 - `.content.mjx`
 - `.content.cjs`
-- `.content.cjx`
+- `.content.md`
+- `.content.mdx`
+- `.content.yaml`
+- `.content.yml`
 - その他
 
+> **Expo Router (Web): `.content.*` ファイルは `app/` ディレクトリの外に配置してください。** Expo Router は `app/` 内のすべての JavaScript/TypeScript ファイルをルートとして扱います。Web では、ルート検出がファイルシステムを直接スキャンし、Metro の `resolver.blockList` を**考慮しない**ため、同じ場所に配置された `*.content.ts` がルートとして登録されてしまいます。`app/(tabs)/_layout.content.ts` のようなファイルはレイアウトとして解析され（`.content` 部分がプラットフォームの接尾辞として読み込まれます）、実際の `_layout.tsx` と競合して次のエラーがスローされます:
+>
+> ```
+> The layouts "./(tabs)/_layout.content.ts" and "./(tabs)/_layout.tsx" conflict on the route "/(tabs)/_layout.content". Remove or rename one of these files.
+> ```
+>
+> 宣言は `app/` 以外のディレクトリ（例: `content/` や `src/content/`）に配置してください。Intlayer はプロジェクト内のどこにあっても `.content.*` ファイルを検出し、辞書はその `key` によって参照されるため、インポートの変更は不要です。ネイティブではこれは必須ではありませんが（Metro の `blockList` がすでにそれらを隠しているため）、`app/` 以外のディレクトリを使用することで両方のプラットフォームが機能し続けます。
+
 例（React Native 用の TSX ノードを含む TypeScript）：
 
 ```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
@@ -333,19 +323,21 @@ export default homeScreenContent;
 }
 ```
 
-> コンテンツ宣言の詳細については、[Intlayerのコンテンツドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。
+> コンテンツ宣言の詳細については、[Intlayer のコンテンツドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md) を参照してください。
 
 ---
 
-## ステップ4: コンポーネントでIntlayerを使用する
+</Step>
 
-子コンポーネントで`useIntlayer`フックを使用して、ローカライズされたコンテンツを取得します。
+<Step number={6} title="コンポーネントで Intlayer を使用する">
+
+子コンポーネントで `useIntlayer` フックを使用して、ローカライズされたコンテンツを取得します。
 
 ### 例
 
 ```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
 import { Image, StyleSheet, Platform } from "react-native";
-import { useIntlayer } from "intlayer";
+import { useIntlayer } from "react-native-intlayer";
 import { HelloWave } from "@/components/HelloWave";
 import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { ThemedText } from "@/components/ThemedText";
@@ -390,7 +382,9 @@ export default HomeScreen;
 
 ---
 
-## （オプション）ステップ5：アプリのロケールを変更する
+</Step>
+
+<Step number={7} title="アプリのロケールを変更する" isOptional={true}>
 
 コンポーネント内からロケールを切り替えるには、`useLocale` フックの `setLocale` メソッドを使用できます。
 
@@ -398,7 +392,7 @@ export default HomeScreen;
 import { type FC } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { getLocaleName } from "intlayer";
-import { useLocale } from "react-intlayer";
+import { useLocale } from "react-native-intlayer";
 
 export const LocaleSwitcher: FC = () => {
   const { setLocale, availableLocales } = useLocale();
@@ -439,18 +433,22 @@ const styles = StyleSheet.create({
 });
 ```
 
-これにより、Intlayerのコンテンツを使用しているすべてのコンポーネントが再レンダリングされ、新しいロケールの翻訳が表示されます。
+これにより、Intlayer のコンテンツを使用しているすべてのコンポーネントが再レンダリングされ、新しいロケールの翻訳が表示されます。
 
-> 詳細は[`useLocale`のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md)をご覧ください。
+> 詳細は [`useLocale` のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md) をご覧ください。
 
-## TypeScriptの設定（TypeScriptを使用している場合）
+</Step>
 
-Intlayerは、補完機能を向上させ、翻訳エラーを検出するために、隠しフォルダ（デフォルトは `.intlayer`）に型定義を生成します：
+</Steps>
+
+## TypeScript の設定（TypeScript を使用している場合）
+
+Intlayer は、補完機能を向上させ、翻訳エラーを検出するために、隠しフォルダ（デフォルトは `.intlayer`）に型定義を生成します：
 
 ```json5
 // tsconfig.json
 {
-  // ... 既存のTS設定
+  // ... 既存の TS 設定
   "include": [
     "src", // ソースコード
     ".intlayer/types/**/*.ts", // <-- 自動生成された型定義を含める
@@ -466,22 +464,22 @@ Intlayerは、補完機能を向上させ、翻訳エラーを検出するため
 
 ---
 
-## Git設定
+## Git 設定
 
-Intlayerによって自動生成されたファイルをコミットしないように、`.gitignore`に以下を追加してください：
+Intlayer によって自動生成されたファイルをコミットしないように、`.gitignore` に以下を追加してください：
 
 ```bash
-#  Intlayerによって生成されたファイルを無視
+# Intlayer によって生成されたファイルを無視
 .intlayer
 ```
 
 ---
 
-### VS Code拡張機能
+### VS Code 拡張機能
 
-Intlayerの開発体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールできます。
+Intlayer の開発体験を向上させるために、公式の **Intlayer VS Code 拡張機能**をインストールできます。
 
-[VS Codeマーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[VS Code マーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
 この拡張機能は以下を提供します：
 
@@ -490,16 +488,44 @@ Intlayerの開発体験を向上させるために、公式の**Intlayer VS Code
 - 翻訳内容の**インラインプレビュー**。
 - 翻訳の作成や更新を簡単に行うための**クイックアクション**。
 
-拡張機能の使い方の詳細については、[Intlayer VS Code拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。
+拡張機能の使い方の詳細については、[Intlayer VS Code 拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension) を参照してください。
 
 ---
 
 ## さらに進む
 
-- **ビジュアルエディター**：翻訳を視覚的に管理するために、[Intlayerビジュアルエディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を使用してください。
-- **CMS統合**: 辞書コンテンツを外部化し、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)から取得することも可能です。
-- **CLIコマンド**: 翻訳の**抽出**や**欠落キーの確認**などのタスクには、[Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/index.md)を活用してください。
+- **ビジュアルエディター**：翻訳を視覚的に管理するために、[Intlayer ビジュアルエディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md) を使用してください。
+- **CMS 統合**: 辞書コンテンツを外部化し、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md) から取得することも可能です。
+- **CLI コマンド**: 翻訳の**抽出**や**欠落キーの確認**などのタスクには、[Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/index.md) を活用してください。
+
+**Intlayer** を通じて、完全な i18n 機能を備えた **React Native** アプリの開発をお楽しみください！
+
+---
+
+### Debug
+
+React Native は React Web よりも安定性が低いため、バージョンの整合性に特に注意を払ってください。
+
+Intlayer は主に Web Intl API を対象としており、React Native では適切な polyfill を含める必要があります。
+
+チェックリスト:
+
+- `intlayer` および `react-native-intlayer` の最新バージョンを使用してください。
+- Intlayer polyfill を有効にしてください。
+- `getLocaleName` または他の Intl-API ベースのユーティリティを使用する場合は、これらの polyfill を早期にインポートしてください（たとえば `index.js` または `App.tsx` で）:
+
+```ts
+import "intl";
+import "@formatjs/intl-getcanonicallocales/polyfill";
+import "@formatjs/intl-locale/polyfill";
+import "@formatjs/intl-pluralrules/polyfill";
+import "@formatjs/intl-displaynames/polyfill";
+import "@formatjs/intl-listformat/polyfill";
+import "@formatjs/intl-numberformat/polyfill";
+import "@formatjs/intl-relativetimeformat/polyfill";
+import "@formatjs/intl-datetimeformat/polyfill";
+```
 
-**Intlayer**を通じて、完全なi18n機能を備えた**React Native**アプリの開発をお楽しみください！
+- モジュールの解決に失敗した場合は、Metro 設定（resolver aliases、asset plugins、`tsconfig` paths）を確認してください。
 
 ---

package/docs/ja/intlayer_with_react_router_v7.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "React Router v7 i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）React Router v7アプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
@@ -36,6 +36,7 @@ history:
   - version: 5.8.2
     date: 2025-09-04
     changes: "React Router v7対応追加"
+author: aymericzip
 ---
 
 # IntlayerでReact Router v7を翻訳する | 国際化（i18n）
@@ -110,28 +111,6 @@ Intlayer は単なる i18n ソリューションではなく、**自己ホスト
 
 ---
 
-## React Router v7アプリケーションでIntlayerをセットアップするステップバイステップガイド
-
----
-
-## Configure TypeScript
-
-Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
-
-Ensure your TypeScript configuration includes the autogenerated types:
-
-```json5 fileName="tsconfig.json"
-{
-  // ... your existing configurations
-  include: [
-    // ... your existing includes
-    ".intlayer/**/*.ts", // Include the auto-generated types
-  ],
-}
-```
-
----
-
 ## Git Configuration
 
 It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.
@@ -190,14 +169,17 @@ This comprehensive guide provides everything you need to integrate Intlayer with
 ```typescript {3,7} fileName="vite.config.ts"
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayerProxy(), // should be placed first
     reactRouter(),
 
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```
@@ -267,6 +249,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babelコンパイラ'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 ```bash packageManager="npm"
 npm install @intlayer/babel --save-dev
 ```