@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.6

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 の使用法を直接プロパティアクセスに更新"
@@ -56,127 +59,118 @@ author: aymericzip
   </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>
 
-<Steps>
+<Accordion header="パフォーマンス">
 
-<Step number={1} title="依存関係をインストールする">
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
 
-GitHub の [アプリケーション テンプレート](https://github.com/aymericzip/intlayer-react-native-template) を参照してください。
+</Accordion>
 
-React Native プロジェクトから、次のパッケージをインストールします。
+<Accordion header="非開発者によるスケーリング">
 
-````bash packageManager="npm"
-npm install intlayer 反応-intlayer
-npm install --save-dev 反応ネイティブ-intlayer
-npx 内部層初期化
-「」
+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="pnpm"
-pnpm add intlayer 反応-intlayer
-pnpm add --save-dev 反応ネイティブ-intlayer
-pnpm 内部層初期化
-「」
+</Accordion>
 
-```bash packageManager="yarn"
-糸 中間層を追加 反応内部層
-糸追加 --save-dev 反応ネイティブ-内部層
-糸の中間層の初期化
-「」
+<Accordion header="バンドルサイズ">
 
-```bash packageManager="bun"
-bun add intlayer 反応-intlayer
-バン追加 --dev 反応ネイティブ-intlayer
-bun x 内部層の初期化
-「」
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。Intlayer は、**バンドルとビューのサイズを最大 50% 削減**するのに役立ちます。
 
-### パッケージ
+</Accordion>
+</AccordionGroup>
 
-- **中間層**
-  構成、辞書コンテンツ、タイプ生成、および CLI コマンド用のコア i18n ツールキット。
+<Steps>
 
-- **反応内部層**
-  React Native でロケールの取得と切り替えに使用するコンテキスト プロバイダーと React フックを提供する React 統合。
+<Step number={1} title="依存関係をインストールする">
 
-- **反応ネイティブ内部層**
-  Intlayer を React Native バンドラーと統合するための Metro プラグインを提供する React Native 統合。
+GitHub の [アプリケーションテンプレート](https://github.com/aymericzip/intlayer-react-native-template) を参照してください。
 
----
+React Native プロジェクトから、次のパッケージをインストールします：
 
-</Step>
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
 
-<Step number={2} title="依存パッケージのインストール">
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
 
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
 
-React Native プロジェクトから、以下のパッケージをインストールしてください：
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` フラグはオプションです。AI エージェントの場合は `intlayer-cli init` を使用してください。
+
+> このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：
 
 ```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 アプリではこの単一パッケージのみが必要です。
 
 ---
 
 </Step>
 
-<Step number={3} title="Intlayer設定ファイルの作成">
+<Step number={2} title="Intlayer設定ファイルの作成">
 
-プロジェクトのルート（または任意の便利な場所）に**Intlayer設定ファイル**を作成します。以下のような内容になるかもしれません：
+プロジェクトのルート（または任意の便利な場所）に **Intlayer 設定ファイル**を作成します。以下のような内容になるかもしれません：
 
 ```ts fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 /**
@@ -204,13 +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) を参照してください。
 
 </Step>
 
-<Step number={4} title="Metroプラグインを追加する">
+<Step number={3} title="Metro プラグインを追加する">
 
-MetroはReact Native用のバンドラーです。`react-native init`コマンドで作成されたReact Nativeプロジェクトのデフォルトバンドラーです。IntlayerをMetroで使用するには、`metro.config.js`ファイルにプラグインを追加する必要があります。
+Metro は React Native 用のバンドラーです。`react-native init` コマンドで作成された React Native プロジェクトのデフォルトバンドラーです。Intlayer を Metro で使用するには、`metro.config.js` ファイルにプラグインを追加する必要があります。
 
 ```js fileName="metro.config.js"
 const { getDefaultConfig } = require("expo/metro-config");
@@ -223,34 +217,25 @@ module.exports = (async () => {
 })();
 ```
 
-</Step>
-
-<Step number={5} title="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 = () => {
@@ -268,31 +253,7 @@ export default RootLayout;
 
 </Step>
 
-<Step number={6} title="コンテンツを宣言する">
-
-```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>
-
-<Step number={7} title="コンテンツを宣言する">
+<Step number={5} title="コンテンツを宣言する">
 
 プロジェクト内の任意の場所（一般的には `src/` 内）に**コンテンツ宣言**ファイルを作成します。Intlayer がサポートする任意の拡張子形式を使用できます：
 
@@ -307,6 +268,14 @@ module.exports = RootLayout;
 - `.content.cjx`
 - その他
 
+> **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"]}
@@ -349,21 +318,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) を参照してください。
 
 ---
 
 </Step>
 
-<Step number={8} title="コンポーネントでIntlayerを使用する">
+<Step number={6} title="コンポーネントで Intlayer を使用する">
 
-子コンポーネントで`useIntlayer`フックを使用して、ローカライズされたコンテンツを取得します。
+子コンポーネントで `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";
@@ -410,7 +379,7 @@ export default HomeScreen;
 
 </Step>
 
-<Step number={9} title="アプリのロケールを変更する">
+<Step number={7} title="アプリのロケールを変更する" isOptional={true}>
 
 コンポーネント内からロケールを切り替えるには、`useLocale` フックの `setLocale` メソッドを使用できます。
 
@@ -418,7 +387,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();
@@ -459,22 +428,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) をご覧ください。
 
 </Step>
 
 </Steps>
 
-## TypeScriptの設定（TypeScriptを使用している場合）
+## TypeScript の設定（TypeScript を使用している場合）
 
-Intlayerは、補完機能を向上させ、翻訳エラーを検出するために、隠しフォルダ（デフォルトは `.intlayer`）に型定義を生成します：
+Intlayer は、補完機能を向上させ、翻訳エラーを検出するために、隠しフォルダ（デフォルトは `.intlayer`）に型定義を生成します：
 
 ```json5
 // tsconfig.json
 {
-  // ... 既存のTS設定
+  // ... 既存の TS 設定
   "include": [
     "src", // ソースコード
     ".intlayer/types/**/*.ts", // <-- 自動生成された型定義を含める
@@ -490,22 +459,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)
 
 この拡張機能は以下を提供します：
 
@@ -514,16 +483,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:
@@ -111,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.

package/docs/ja/intlayer_with_react_router_v7_fs_routes.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-12-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "React Router v7 i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）React Router v7アプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
@@ -760,101 +760,6 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 ---
 
-## Documentation References
-
-- [Intlayer Documentation](https://intlayer.org)
-- [React Router v7 Documentation](https://reactrouter.com/)
-- [React Router fs-routes Documentation](https://reactrouter.com/how-to/file-route-conventions)
-- [useIntlayer hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md)
-- [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)
-- [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
-- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
-
-This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 using file-system based routing for a fully internationalized application with locale-aware routing and TypeScript support.
-
-<Steps>
-
-<Step number={10} title="ミドルウェアを追加する（オプション）">
-
-`intlayerProxy` を使用して、アプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインは、URL に基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最も適切なロケールを判断します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
-
-> `intlayerProxy` を本番環境で使用するには、`vite-intlayer` パッケージを `devDependencies` から `dependencies` に切り替える必要があることに注意してください。
-
-```typescript {3,7} fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayerProxy(), // should be placed first
-    reactRouter(),
-
-    intlayer(),
-  ],
-});
-```
-
----
-
-</Step>
-
-</Steps>
-
-## TypeScriptの設定
-
-Intlayerはモジュール拡張を使用して、TypeScriptの利点を活かし、コードベースをより強固にします。
-
-TypeScriptの設定に自動生成された型が含まれていることを確認してください。
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 既存の設定
-  include: [
-    // ... 既存のinclude
-    ".intlayer/**/*.ts", // 自動生成された型を含める
-  ],
-}
-```
-
----
-
-## Gitの設定
-
-Intlayerによって生成されたファイルは無視することを推奨します。これにより、Gitリポジトリへのコミットを避けることができます。
-
-これを行うには、`.gitignore`ファイルに以下の指示を追加してください。
-
-```plaintext fileName=".gitignore"
-# Intlayerによって生成されたファイルを無視する
-.intlayer
-```
-
----
-
-## VS Code 拡張機能
-
-Intlayerでの開発体験を向上させるために、公式の **Intlayer VS Code 拡張機能** をインストールできます。
-
-[VS Code Marketplaceからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-この拡張機能は以下を提供します：
-
-- 翻訳キーの **自動補完**。
-- 翻訳が不足している場合の **リアルタイムエラー検出**。
-- 翻訳内容の **インラインプレビュー**。
-- 翻訳を簡単に作成・更新できる **クイックアクション**。
-
-拡張機能の使い方の詳細は、[Intlayer VS Code 拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。
-
----
-
-## さらに進む
-
-さらに進めるために、[ビジュアルエディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を実装するか、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)を使用してコンテンツを外部化することができます。
-
----
-
 ## ドキュメント参照
 
 - [Intlayer ドキュメント](https://intlayer.org)

package/docs/ja/intlayer_with_svelte_kit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "SvelteKit i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）SvelteKitアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
@@ -256,6 +256,17 @@ bun run build # Or bun run dev
 
 </Steps>
 
+### Git Configuration
+
+Intlayerによって生成されたファイルを無視することをお勧めします。
+
+```plaintext fileName=".gitignore"
+# Intlayerによって生成されたファイルを無視する
+.intlayer
+```
+
+---
+
 ### さらに進む
 
 - **ビジュアルエディター**: UIから直接翻訳を編集するために、[Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を統合します。