@intlayer/docs 9.4.4 → 9.5.1

package/docs/ja/intlayer_with_vite+react_compiler.md

@@ -1,652 +0,0 @@
----
-createdAt: 2024-03-07
-updatedAt: 2026-08-30
-title: "Vite + React i18n - あなたのアプリを翻訳する完全ガイド"
-description: "i18nextはもう不要。2026年に多言語（i18n）Vite + Reactアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
-keywords:
-  - 国際化
-  - ドキュメント
-  - Intlayer
-  - Vite
-  - React
-  - コンパイラ
-  - AI
-slugs:
-  - doc
-  - environment
-  - vite-and-react
-  - compiler
-applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
-applicationShowcase: https://intlayer-vite-react-template.vercel.app
-youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
-history:
-  - version: 8.9.0
-    date: 2026-05-04
-    changes: "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"
-  - version: 8.2.0
-    date: 2026-03-09
-    changes: "Update compiler options, add FilePathPattern support"
-  - version: 8.1.6
-    date: 2026-02-23
-    changes: "初回リリース"
-author: aymericzip
----
-
-# 既存の Vite および React アプリケーションを後から多言語化 (i18n) する方法 (i18n ガイド 2026)
-
-<Tabs defaultTab="video">
-  <Tab label="ビデオ" value="video">
-
-<iframe title="Vite と React に最適な i18n ソリューションは？ Intlayer を発見する" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
-
-  </Tab>
-  <Tab label="コード" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-vite-react-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Intlayer を使用してアプリケーションを国際化する方法"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="デモ" value="demo">
-
-<iframe
-  src="https://intlayer-vite-react-template.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="デモ - intlayer-vite-react-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-GitHub で [アプリケーションテンプレート](https://github.com/aymericzip/intlayer-vite-react-template) を見る。
-
-## 目次
-
-<TOC/>
-
-## なぜ既存のアプリケーションを国際化するのは難しいのか？
-
-単一言語向けに構築されたアプリに複数の言語を追加しようとしたことがあるなら、その苦労がわかるでしょう。それは単に「難しい」だけでなく、「面倒」です。すべてのファイルを調べ、すべてのテキスト文字列を探し出し、それらを個別の辞書ファイルに移動する必要があります。
-
-次にリスクの高い部分が来ます。レイアウトやロジックを壊さずに、これらすべてのテキストをコードフックに置き換えることです。これは、新しい機能の開発を数週間停止させ、終わりのないリファクタリングのように感じられる種類の作業です。
-
-## Intlayer Compiler とは？
-
-**Intlayer Compiler** は、その手作業をスキップするために構築されました。手動で文字列を抽出する代わりに、コンパイラが自動的に行います。コードをスキャンしてテキストを見つけ、バックグラウンドで AI を使用して辞書を生成します。
-その後、ビルド中にコードを変更して、必要な i18n フックを注入します。基本的には、単一言語であるかのようにアプリを書き続け、コンパイラが多言語への変換を自動的に処理します。
-
-> Doc Compiler: [https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compiler.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compiler.md)
-
-### 制限事項
-
-コンパイラは、**コンパイル時**にコード分析と変換 (フックの挿入と辞書の生成) を実行するため、アプリケーションの**ビルドプロセスが遅くなる**可能性があります。
-
-開発中のこの影響を軽減するために、コンパイラを [`'build-only'`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md) モードで実行するように構成するか、不要なときに無効にすることができます。
-
----
-
-## Vite および React アプリケーションに Intlayer を設定するためのステップバイステップガイド
-
-<Steps>
-
-<Step number={1} title="依存関係のインストール">
-
-npm を使用して必要なパッケージをインストールします。
-
-```bash packageManager="npm"
-npx intlayer init --interactive
-```
-
-```bash packageManager="pnpm"
-pnpm dlx intlayer init --interactive
-```
-
-```bash packageManager="yarn"
-yarn dlx intlayer init --interactive
-```
-
-```bash packageManager="bun"
-bunx intlayer init --interactive
-```
-
-> `--interactive` フラグはオプションです。AI エージェントの場合は `intlayer-cli init` を使用してください。
-
-> このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：
-
-```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install vite-intlayer --save-dev
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add vite-intlayer --save-dev
-```
-
-```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add vite-intlayer --save-dev
-```
-
-```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add vite-intlayer --dev
-```
-
-- **intlayer**
-  設定管理、翻訳、[コンテンツ宣言](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)、トランスパイル、および [CLI コマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/index.md) のための国際化ツールを提供するコアパッケージ。
-
-- **react-intlayer**
-  Intlayer を React アプリケーションと統合するパッケージ。React の国際化のためのコンテキストプロバイダーとフックを提供します。
-
-- **vite-intlayer**
-  Intlayer を [Vite バンドラー](https://vite.dev/guide/why.html#why-bundle-for-production) と統合するための Vite プラグイン、およびユーザーの優先ロケールの検出、クッキーの管理、URL リダイレクトの処理のためのミドルウェアが含まれています。
-
-</Step>
-
-<Step number={2} title="プロジェクトの構成">
-
-アプリケーションの言語を構成するための構成ファイルを作成します。
-
-```typescript fileName="intlayer.config.ts"
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  compiler: {
-    /**
-     * コンパイラを有効にするかどうかを示します。
-     */
-    enabled: true,
-
-    /**
-     * 最適化された辞書の出力ディレクトリ。
-     */
-    output: ({ locale, key }) => `compiler/${locale}/${key}.json`,
-
-    /**
-     * キーなしで、生成されたファイルにコンテンツのみを挿入します。
-     */
-    noMetadata: false,
-
-    /**
-     * 辞書キーのプレフィックス
-     */
-    dictionaryKeyPrefix: "", // Remove base prefix
-
-    /**
-     * 変換後にコンポーネントを保存するかどうかを示します。
-     * これにより、コンパイラを1回だけ実行してアプリを変換し、その後削除することができます。
-     */
-    saveComponents: false,
-  },
-  ai: {
-    provider: "openai",
-    model: "gpt-5-mini",
-    apiKey: process.env.OPEN_AI_API_KEY,
-    applicationContext: "This app is an map app", // 注意: このアプリの説明をカスタマイズできます
-  },
-};
-
-export default config;
-```
-
-> **注意**: 環境変数に `OPEN_AI_API_KEY` が設定されていることを確認してください。
-
-> この構成ファイルを通じて、ローカライズされた URL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでの Intlayer ログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、[構成ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md) を参照してください。
-
-</Step>
-
-<Step number={3} title="Vite 構成に Intlayer を統合する">
-
-構成に intlayer プラグインを追加します。
-
-```typescript fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import { intlayer } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    intlayer({
-      proxy: {
-        ignore: (req) => req.url?.startsWith("/api"),
-      },
-    }),
-  ],
-});
-```
-
-> `intlayer()` Vite プラグインは、Intlayer を Vite と統合するために使用されます。コンテンツ宣言ファイルの構築を確実にし、開発モードでそれらを監視します。Vite アプリケーション内で Intlayer 環境変数を定義します。さらに、パフォーマンスを最適化するためのエイリアスを提供します。
-
-> `intlayerCompiler()` Vite プラグインは、コンポーネントからコンテンツを抽出し、`.content` ファイルを書き出すために使用されます。
-
-> Intlayer v9 以降、コンパイラは `intlayer()` プラグインに直接バンドルされており、`compiler.enabled` が `compiler.output` パスで設定されると自動的に有効になります。下記に示すように `intlayerCompiler()` を個別に登録することはオプションになりました — また追加された場合は自動的に重複排除されます。[v9 リリースノート](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/releases/v9.md)を参照してください。
-
-</Step>
-
-<Step number={4} title="コードをコンパイルする">
-
-デフォルトのロケールでハードコードされた文字列を使用してコンポーネントを記述するだけです。残りはコンパイラが処理します。
-
-ページの表示例:
-
-<Tabs>
- <Tab value="コード">
-
-```tsx fileName="src/App.tsx"
-import { useState, type FC } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
-import { IntlayerProvider } from "react-intlayer";
-
-const AppContent: FC = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  );
-};
-
-const App: FC = () => (
-  <IntlayerProvider>
-    <AppContent />
-  </IntlayerProvider>
-);
-
-export default App;
-```
-
- </Tab>
- <Tab value="出力">
-
-```ts fileName="i18n/app-content.content.json"
-{
-  key: "app-content",
-  content: {
-    nodeType: "translation",
-    translation: {
-      en: {
-        viteLogo: "Vite logo",
-        reactLogo: "React logo",
-        title: "Vite + React",
-        countButton: "count is",
-        editMessage: "Edit",
-        hmrMessage: "and save to test HMR",
-        readTheDocs: "Click on the Vite and React logos to learn more",
-      },
-      fr: {
-        viteLogo: "Logo Vite",
-        reactLogo: "Logo React",
-        title: "Vite + React",
-        countButton: "compte est",
-        editMessage: "Modifier",
-        hmrMessage: "et enregistrer pour tester HMR",
-        readTheDocs: "Cliquez sur les logos Vite et React pour en savoir plus",
-      },
-    }
-  }
-}
-```
-
-```tsx fileName="src/App.tsx"
-import { useState, type FC } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
-import { IntlayerProvider, useIntlayer } from "react-intlayer";
-
-const AppContent: FC = () => {
-  const [count, setCount] = useState(0);
-  const content = useIntlayer("app-content");
-
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt={content.viteLogo.value} />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img
-            src={reactLogo}
-            className="logo react"
-            alt={content.reactLogo.value}
-          />
-        </a>
-      </div>
-      <h1>{content.title}</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          {content.countButton} {count}
-        </button>
-        <p>
-          {content.editMessage} <code>src/App.tsx</code> {content.hmrMessage}
-        </p>
-      </div>
-      <p className="read-the-docs">{content.readTheDocs}</p>
-    </>
-  );
-};
-
-const App: FC = () => (
-  <IntlayerProvider>
-    <AppContent />
-  </IntlayerProvider>
-);
-
-export default App;
-```
-
- </Tab>
-</Tabs>
-
-- **`IntlayerProvider`** は、ネストされたコンポーネントにロケールを提供するために使用されます。
-
-</Step>
-
-<Step number={6} title="コンテンツの言語を変更する" isOptional={true}>
-
-コンテンツの言語を変更するには、`useLocale` フックによって提供される `setLocale` 関数を使用できます。この関数を使用すると、アプリケーションのロケールを設定し、それに応じてコンテンツを更新できます。
-
-```tsx fileName="src/components/LocaleSwitcher.tsx"
-import type { FC } from "react";
-import { Locales } from "intlayer";
-import { useLocale } from "react-intlayer";
-
-const LocaleSwitcher: FC = () => {
-  const { setLocale } = useLocale();
-
-  return (
-    <button onClick={() => setLocale(Locales.English)}>
-      Change Language to English
-    </button>
-  );
-};
-```
-
-> `useLocale` フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md) を参照してください。
-
-</Step>
-
-<Step number={7} title="欠落した翻訳を埋める" isOptional={true}>
-
-Intlayerは、欠落した翻訳を埋めるためのCLIツールを提供しています。`intlayer`コマンドを使用して、コードから欠落した翻訳をテストおよび埋めることができます。
-
-```bash packageManager="npm"
-npx intlayer test         # 欠落した翻訳があるかテストする
-```
-
-```bash packageManager="yarn"
-yarn intlayer test         # 欠落した翻訳があるかテストする
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer test         # 欠落した翻訳があるかテストする
-```
-
-```bash packageManager="bun"
-bun x intlayer test         # 欠落した翻訳があるかテストする
-```
-
-```bash packageManager="npm"
-npx intlayer fill         # 欠落した翻訳を埋める
-```
-
-```bash packageManager="yarn"
-yarn intlayer fill         # 欠落した翻訳を埋める
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer fill         # 欠落した翻訳を埋める
-```
-
-```bash packageManager="bun"
-bun x intlayer fill         # 欠落した翻訳を埋める
-```
-
-> 詳細については、[CLIドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/ci.md)を参照してください。
-
-</Step>
-
-</Steps>
-
-### （任意）サイトマップと robots.txt（ビルド時生成）
-
-Intlayer は `generateSitemap` と `getMultilingualUrls` により、クローラ向けに整形した多言語の `sitemap.xml` と `robots.txt` を `public/` に自動で書き出せます。通常は Vite より**前**に小さな Node スクリプトを走らせます（例: npm の `predev` / `prebuild`）。
-
-#### サイトマップ
-
-Intlayer のサイトマップ生成はロケール設定を踏まえ、クローラ向けのメタデータを含めます。
-
-> 生成されるサイトマップは `xhtml:link`（hreflang）をサポートします。単純な URL 列挙ではなく、各ページの言語版同士を双方向で結びます（例: `/about`、`/fr/about`、`/about?lang=fr` などルーティングに依存）。
-
-#### Robots.txt
-
-`getMultilingualUrls` で `Disallow` を、機微パスの**すべての言語 URL**に効かせます。
-
-#### 1. プロジェクトルートに `generate-seo.mjs` を置く
-
-```javascript fileName="generate-seo.mjs"
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-import { generateSitemap, getMultilingualUrls } from "intlayer";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
-  /\/$/,
-  ""
-);
-
-const pathList = [
-  { path: "/", changefreq: "daily", priority: 1.0 },
-  { path: "/about", changefreq: "monthly", priority: 0.7 },
-];
-
-const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
-fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
-
-const getAllMultilingualUrls = (urls) =>
-  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
-
-const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
-
-const robotsTxt = [
-  "User-agent: *",
-  "Allow: /",
-  ...disallowedPaths.map((path) => `Disallow: ${path}`),
-  "",
-  `Sitemap: ${SITE_URL}/sitemap.xml`,
-].join("\n");
-
-fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
-
-console.log("SEO files generated successfully.");
-```
-
-`intlayer` がインストールされている必要があります。本番では環境変数 `SITE_URL` を設定してください（CI など）。
-
-> Node の ESM では `generate-seo.mjs` を推奨します。`generate-seo.js` にする場合は `package.json` の `"type": "module"` などで ESM を有効にしてください。
-
-#### 2. Vite より前にスクリプトを実行する
-
-```json fileName="package.json"
-{
-  "scripts": {
-    "dev": "vite",
-    "prebuild": "node generate-seo.mjs",
-    "build": "vite build",
-    "preview": "vite preview"
-  }
-}
-```
-
-pnpm や yarn を使う場合はコマンドを読み替えてください。CI から呼び出しても構いません。
-
-### 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) を使用してコンテンツを外部化できます。
-
-## よくある質問
-
-<FAQ>
-
-<Question title="Vite と React アプリを国際化するために利用可能なソリューションにはどのようなものがありますか？">
-
-- **`react-i18next` / `i18next`**: ランタイムで読み込まれる JSON 名前空間。毎回の呼び出し時にキーを手動で記述します。
-- **`react-intl`** と **`Lingui`**: ICU メッセージ。抽出ステップを自分で実行する必要があります。
-- **`Intlayer`**: ビルド時にコンポーネントからコンテンツをコンパイル。完全に型付けされ、AI 翻訳、ビジュアルエディタ、CMS を備えています。
-
-このガイドではコンパイラセットアップを使用します。コンポーネントに通常の文字列を記述し、辞書は自動生成されます。[Intlayer を選ぶ理由](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/interest_of_intlayer.md)と[ベンチマーク](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/benchmark/index.md)を参照してください。
-
-</Question>
-
-<Question title="i18n は Vite バンドルサイズにどの程度の影響を与えますか？">
-
-名前空間ベースのセットアップよりもはるかに少なくなります。ページは自身がレンダリングしないカタログをダウンロードしないためです。ビルド時コンパイラは `useIntlayer` 呼び出しをコンポーネントが使用する正確な辞書エントリに置き換えるため、未使用のキーと未使用の言語は削除され、[動的辞書](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/index.md)はロケールごとに残りを分割します。通常の代替案と比較すると、Intlayer はバンドルとページサイズを最大 50% 削減します。[バンドル最適化](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/bundle_optimization.md)と[ベンチマーク](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/benchmark/index.md)を参照してください。
-
-</Question>
-
-<Question title="`react-i18next` または `react-intl` からコンポーネントを書き直さずに移行できますか？">
-
-はい、2 つの方法があります。[react-i18next 移行ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/migration_from_react-i18next_to_intlayer.md)または[i18next 移行ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/migration_from_i18next_to_intlayer.md)を使用してコンテンツを段階的に移行できます。または、現在の API をそのまま保持することもできます。[互換性アダプタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compat/index.md)は `react-i18next`、`react-intl`、`i18next` と同じ API を公開しますが、Intlayer 辞書によって提供されるため、インポートは変わりますがコンポーネントコードは変わりません。
-
-</Question>
-
-<Question title="既存の JSON 翻訳ファイルを保持できますか？">
-
-はい。[sync JSON プラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)は `/messages/{locale}/{namespace}.json` ファイルを信頼できるソースとして保持し、双方向で Intlayer 辞書を生成します。[sync PO プラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-po.md)は gettext カタログに対して同じことを行い、[ロケールごとのファイル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/per_locale_file.md)では 1 つのファイルにロケールをグループ化する代わりに言語ごとにコンテンツを分割できます。
-
-</Question>
-
-<Question title="コンテンツをキーごとに移動する必要がありますか？">
-
-いいえ。このガイドはそのようにセットアップされています。デフォルトロケールでコンポーネントに通常の文字列を記述すると、[Intlayer コンパイラ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compiler.md)はビルドのたびにソースをスキャンし、ユーザー向けテキストを抽出して辞書を生成するため、キーを手動で作成または保守する必要はありません。
-
-知っておく価値のある 2 つの制限があります。コンパイラは静的解析によって動作するため、API エラーコードや CMS フィールドなどランタイムにのみ存在する文字列は到達不可能であり、宣言された辞書が必要です。また、`className="active"` やステータスコードなどのアプリケーションロジックからユーザー向けテキストを区別する必要があり、大規模なコードベースではいくつかのアノテーションが必要です。
-
-制御を保持したい場合は、`npx intlayer extract` は同じ抽出を 1 回実行し、選択したファイルに対して各コンポーネントの隣に `.content` ファイルを書き込みます。[extract コマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/extract.md)を参照してください。
-
-</Question>
-
-<Question title="利用可能なエディタと AI エージェントツールは何ですか？">
-
-5 つあり、すべてオプションです。
-
-- **[VS Code 拡張機能](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/vs_code_extension.md)**: `useIntlayer` キーからそれを宣言するコンテンツファイルにジャンプ。コンポーネントからコンテンツを抽出。コマンドパレットまたは専用 Intlayer タブからビルド、fill、test、push、pull を実行。
-- **[LSP サーバー](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/lsp.md)**: LSP に対応した任意のエディタで同じ認識を実現。定義へのジャンプ、すべての参照を検索、翻訳値のホバープレビュー、キーとフィールドのオートコンプリート、キーが宣言されていない場合の警告。また `i18next`、`react-i18next`、`next-intl`、`use-intl` 呼び出しも解決し、移行中に役立ちます。
-- **[MCP サーバー](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/mcp_server.md)**: Intlayer ドキュメントと CLI を Cursor、VS Code、Claude Desktop、Claude Code、ChatGPT に公開。アシスタントが推測する代わりに現在のドキュメントから回答でき、`intlayer fill` などのコマンドを自身で実行できます。
-- **[エージェントスキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/agent_skills.md)**: `intlayer-config`、`intlayer-cli`、`intlayer-content` などの焦点を絞ったスキル、およびフレームワークごとに 1 つ。エージェントにルーティングセットアップとコンテンツノードタイプを教えます。
-- **[ESLint プラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/eslint.md)**: `no-raw-text` はハードコードされた文字列にフラグを立てます。静的辞書キーと未使用コンテンツの追加ルールもあります。
-
-</Question>
-
-<Question title="コンパイラを使用するか、コンテンツを自分で宣言するかどちらを選ぶべきですか？">
-
-既存のコードベースに最小限の変更で i18n を追加したい場合はコンパイラを使用してください。コンポーネントはそのままで、辞書が後に続きます。[標準 Vite と React ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+react.md)に示すようにコンテンツを自分で宣言する場合は、キー、構造、コンポーネント間の再利用を明示的に制御したいときです。2 つは共存できます。コンパイルされたコンテンツと宣言されたコンテンツは同じ辞書レイヤーに存在します。
-
-</Question>
-
-<Question title="コンパイラが見ることができない文字列はどうなりますか？">
-
-コンパイラは静的解析によって動作するため、翻訳されないままになります。API エラーメッセージ、CMS フィールド、連結によって構築された文字列など、ランタイムで組み立てられるものは、通常の方法でコンテンツファイルで宣言する必要があります。`npx intlayer test` を実行して、何が不足しているかを確認してください。
-
-</Question>
-
-<Question title="コンパイラはユーザー向けテキストをどのように判断しますか？">
-
-JSX に対するヒューリスティックによって判断されます。そのため両方向で間違う可能性があります。`className` 値またはステータスコードはコピーのように見える可能性があり、異常なパターンは見落とされる可能性があります。大規模なコードベースでは、アノテーションでエッジケースを修正します。このトレードオフが適さない場合は、`npx intlayer extract` が同じ抽出を 1 回実行し、結果をレビュー用の diff として残します。[extract コマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/extract.md)を参照してください。
-
-</Question>
-
-<Question title="不足している翻訳をどのように埋めますか？">
-
-ステップ 7 で説明されています。`npx intlayer fill` は抽出されたコンテンツを選択した LLM に送信し、独自のプロバイダと API キーを使用します。`--git-diff` はブランチで変更されたものに実行を制限します。[fill コマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/fill.md)と [CI/CD 統合](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/CI_CD.md)を参照してください。
-
-</Question>
-
-<Question title="ランタイムで言語を変更するにはどうすればよいですか？">
-
-ステップ 6 で説明されています。`useLocale` はアクティブなロケール、宣言されたロケール、選択を永続化するセッターを公開します。コンパイルされたコンテンツを読むコンポーネントはページをリロードせずに新しい言語で再レンダリングされます。
-
-</Question>
-
-<Question title="Intlayer は複数形、性別、リッチテキストをサポートしていますか？">
-
-はい。[複数形](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/plurial.md)、[性別ベースのコンテンツ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/gender.md)、条件、[挿入](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/insertion.md)、[Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/markdown.md)、および数値、日付、通貨の[フォーマッタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/formatters.md)をサポートしています。
-
-</Question>
-
-<Question title="翻訳者がコードに触れずにコンテンツを編集するにはどうすればよいですか？">
-
-[ビジュアルエディタ](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)を使用。コンテンツを外部化し、デプロイメントなしで変更できます。
-
-</Question>
-
-<Question title="Intlayer は無料でオープンソースですか？">
-
-はい。Apache 2.0 ライセンスの下で、商用利用を含みます。ホストされた CMS はオプションの有料サービスで、[自己ホスト](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/self_hosting.md)することもできます。
-
-</Question>
-
-</FAQ>