@intlayer/docs 9.4.0 → 9.4.2

package/docs/ja/analytics.md

@@ -103,6 +103,21 @@ export default config;
 
 Intlayerをセルフホスト（self-host）している場合、`editor.backendURL`を共有しているため、アナリティクスは自動的にご自身のインスタンスを指します。
 
+### ブラウザからAPIを呼び出す
+
+同じトークンが認証不要の小さなクライアントを支えているため、静的サイトやSPAはサーバーなし、サーバーアクションなし、バンドル内のシークレットなしで、実行時にCMSコンテンツを読み取ることができます:
+
+```ts fileName="content.ts"
+import { createPublicClient } from "@intlayer/api/public";
+
+const client = createPublicClient();
+
+const keys = await client.getDictionaryKeys();
+const [navbar] = await client.getDictionaries(["navbar"]);
+```
+
+これは `editor.clientId` から自身を認証します。トークンの交換、キャッシュ、更新はすべて内部で処理されます。スコープはアクセスできる範囲を制限します：公開された辞書コンテンツとアナリティクスの取り込みのみです。それ以外の操作（辞書のプッシュ、プロジェクトの読み取り、AIクレジットの消費）には本物の認証情報、つまりサーバーまたはサインイン済みユーザーが必要です。
+
 ### オプトアウトする
 
 任意の `analytics` ブロックで収集を調整、または停止できます:
@@ -134,6 +149,126 @@ export default config;
 - ロケールが変更されるたびに`page_view`を記録します。
 - 約20秒間のフラッシュ（送信）ループを開始し、アンマウント時またはタブを閉じた時に残りのイベントを送信します（`navigator.sendBeacon`経由、`fetch(..., { keepalive: true })`にフォールバック）。
 
+エントリーポイントはフレームワークごとに異なりますが、いずれの場合もIntlayerのセットアップにすでに使用しているものと同じであるため、追加で行うことは何もありません:
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+    `IntlayerProvider`は内部でアナリティクスプロバイダをマウントします。
+
+    ```tsx fileName="App.tsx"
+    import { IntlayerProvider } from "react-intlayer";
+
+    const App = () => (
+      <IntlayerProvider>
+        <Router />
+      </IntlayerProvider>
+    );
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    `next-intlayer`はReactの`IntlayerProvider`を再エクスポートしているため、アナリティクスも同じ方法で組み込まれます。
+
+    ```tsx fileName="app/[locale]/layout.tsx"
+    import { IntlayerProvider } from "next-intlayer";
+
+    const LocaleLayout = ({ children }) => (
+      <IntlayerProvider>{children}</IntlayerProvider>
+    );
+
+    export default LocaleLayout;
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+    `intlayer`プラグインは、ルートコンポーネントのライフサイクルにアナリティクスのフックを登録します。
+
+    ```javascript fileName="main.js"
+    import { createApp } from "vue";
+    import { intlayer } from "vue-intlayer";
+    import App from "./App.vue";
+
+    const app = createApp(App);
+
+    app.use(intlayer);
+
+    app.mount("#app");
+    ```
+
+    > Nuxtの場合、`nuxt-intlayer`がプラグインを代わりにインストールするため、特に何もする必要はありません。
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+    `setupIntlayer()`は、Intlayerをセットアップするコンポーネントからアナリティクスを開始します。
+
+    ```svelte fileName="src/routes/[[locale=locale]]/+layout.svelte"
+    <script lang="ts">
+      import { setupIntlayer } from "svelte-intlayer";
+      import type { Snippet } from "svelte";
+
+      let { children, data }: { children: Snippet, data: LayoutData } = $props();
+
+      $effect(() => {
+        setupIntlayer(data.locale);
+      });
+    </script>
+
+    {@render children()}
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+    `IntlayerProvider`は内部でアナリティクスプロバイダをマウントします。
+
+    ```tsx fileName="app.tsx"
+    import { IntlayerProvider } from "preact-intlayer";
+
+    const App = () => (
+      <IntlayerProvider>
+        <Router />
+      </IntlayerProvider>
+    );
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+    `IntlayerProvider`はアナリティクスプロバイダを遅延（lazy）マウントするため、そのチャンクはクリティカルパスの外にとどまります。
+
+    ```tsx fileName="App.tsx"
+    import { IntlayerProvider } from "solid-intlayer";
+
+    const App = () => (
+      <IntlayerProvider>
+        <Router />
+      </IntlayerProvider>
+    );
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    `provideIntlayer()`にはすでに`provideIntlayerAnalytics()`が含まれています。
+
+    ```ts fileName="app.config.ts"
+    import { provideIntlayer } from "angular-intlayer";
+    import type { ApplicationConfig } from "@angular/core";
+
+    export const appConfig: ApplicationConfig = {
+      providers: [provideIntlayer()],
+    };
+    ```
+
+    > プロバイダを個別に管理する場合のみ、`provideIntlayerAnalytics()`を単独で使用してください。
+
+  </Tab>
+</Tabs>
+
 ### 自動ノードレベルのトラッキング
 
 `useIntlayer`が表示用のコンテンツを解決するたびに、インタープリタは正確な`dictionaryKey` + キーパス + ロケールに対して`content_exposure`イベントを報告します。これについてもコードの変更は必要ありません。送信ウィンドウ内で同じノードが繰り返し表示された場合は、`count`付きの単一のイベントとしてまとめられるため、50回再レンダリングされるリストが50のイベントを送信することはありません。
@@ -142,30 +277,341 @@ export default config;
 
 `useConversion()`を使用して、セッションが表示されたバリアントに目標を紐付けます：
 
-```tsx fileName="CTAButton.tsx" codeFormat="tsx"
-import { useConversion } from "react-intlayer";
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+    ```tsx fileName="CTAButton.tsx"
+    import { useConversion } from "react-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          はじめる
+        </button>
+      );
+    };
+    ```
 
-const CTAButton = () => {
-  const trackConversion = useConversion();
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    ```tsx fileName="CTAButton.tsx"
+    "use client";
+
+    import { useConversion } from "next-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          はじめる
+        </button>
+      );
+    };
+    ```
+
+    > `useConversion`はクライアントフックです。コンポーネントに`"use client"`を指定してください。
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+    ```vue fileName="CTAButton.vue"
+    <script setup lang="ts">
+    import { useConversion } from "vue-intlayer";
+
+    const trackConversion = useConversion();
+    </script>
+
+    <template>
+      <button
+        @click="
+          trackConversion({
+            experimentKey: 'homepage-hero',
+            variant: 'black_friday',
+            goal: 'cta_click',
+          })
+        "
+      >
+        はじめる
+      </button>
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+    ```svelte fileName="CTAButton.svelte"
+    <script lang="ts">
+      import { useConversion } from "svelte-intlayer";
+
+      const trackConversion = useConversion();
+    </script>
 
-  return (
     <button
-      onClick={() =>
+      onclick={() =>
         trackConversion({
           experimentKey: "homepage-hero",
           variant: "black_friday",
           goal: "cta_click",
-        })
-      }
+        })}
     >
       はじめる
     </button>
-  );
-};
-```
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+    ```tsx fileName="CTAButton.tsx"
+    import { useConversion } from "preact-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          はじめる
+        </button>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+    ```tsx fileName="CTAButton.tsx"
+    import { useConversion } from "solid-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          はじめる
+        </button>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    ```typescript fileName="cta-button.component.ts"
+    import { Component } from "@angular/core";
+    import { useConversion } from "angular-intlayer";
+
+    @Component({
+      selector: "app-cta-button",
+      template: `<button (click)="onClick()">はじめる</button>`,
+    })
+    export class CtaButtonComponent {
+      private trackConversion = useConversion();
+
+      onClick() {
+        this.trackConversion({
+          experimentKey: "homepage-hero",
+          variant: "black_friday",
+          goal: "cta_click",
+        });
+      }
+    }
+    ```
+
+  </Tab>
+</Tabs>
 
 ### クライアント側でのバリアント解決
 
+`useExperiment()`はセッションをバリアントに割り当て、コンバージョン率の分母となる露出（exposure）を記録します。割り当てが確定する前に訪問者がコントロールのちらつきを見ないよう、バリアントに依存するサブツリーは`isAssigned`でゲートしてください：
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+    `variant`は単純な文字列です。
+
+    ```tsx fileName="Hero.tsx"
+    import { useExperiment } from "react-intlayer";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      if (!isAssigned) return null;
+
+      return <HeroBanner variant={variant} />;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    `variant`は単純な文字列です。割り当てはブラウザ内で行われるため、コンポーネントはクライアントコンポーネントである必要があります。
+
+    ```tsx fileName="Hero.tsx"
+    "use client";
+
+    import { useExperiment } from "next-intlayer";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      if (!isAssigned) return null;
+
+      return <HeroBanner variant={variant} />;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+    `variant`と`isAssigned`は`Ref`です。
+
+    ```vue fileName="Hero.vue"
+    <script setup lang="ts">
+    import { useExperiment } from "vue-intlayer";
+    import HeroBanner from "./HeroBanner.vue";
+
+    const { variant, isAssigned } = useExperiment("homepage-hero", [
+      "default",
+      "black_friday",
+    ]);
+    </script>
+
+    <template>
+      <HeroBanner v-if="isAssigned" :variant="variant" />
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+    `variant`と`isAssigned`はストアです。`$`プレフィックスを付けて読み取ってください。
+
+    ```svelte fileName="Hero.svelte"
+    <script lang="ts">
+      import { useExperiment } from "svelte-intlayer";
+      import HeroBanner from "./HeroBanner.svelte";
+
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+    </script>
+
+    {#if $isAssigned}
+      <HeroBanner variant={$variant} />
+    {/if}
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+    `variant`は単純な文字列です。
+
+    ```tsx fileName="Hero.tsx"
+    import { useExperiment } from "preact-intlayer";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      if (!isAssigned) return null;
+
+      return <HeroBanner variant={variant} />;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+    `variant`と`isAssigned`は`Accessor`です。値を読み取るには呼び出してください。
+
+    ```tsx fileName="Hero.tsx"
+    import { useExperiment } from "solid-intlayer";
+    import { Show } from "solid-js";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      return (
+        <Show when={isAssigned()}>
+          <HeroBanner variant={variant()} />
+        </Show>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    `variant`と`isAssigned`は`Signal`です。値を読み取るには呼び出してください。
+
+    ```typescript fileName="hero.component.ts"
+    import { Component } from "@angular/core";
+    import { useExperiment } from "angular-intlayer";
+    import { HeroBannerComponent } from "./hero-banner.component";
+
+    @Component({
+      selector: "app-hero",
+      imports: [HeroBannerComponent],
+      template: `@if (experiment.isAssigned()) {
+        <app-hero-banner [variant]="experiment.variant()" />
+      }`,
+    })
+    export class HeroComponent {
+      experiment = useExperiment("homepage-hero", ["default", "black_friday"]);
+    }
+    ```
+
   </Tab>
 </Tabs>
 
@@ -255,7 +701,7 @@ const cms = createIntlayerCMS();
 const { data: audience } = await analyticsEndpoint(cms).getAudience(30);
 ```
 
-> **サーバーサイドのみ。** `createIntlayerCMS()` は `clientId` + `clientSecret` で認証され、シークレットはブラウザで利用できません — このスニペットがそこで実行されると、認証されていないリクエストが発行されます。ルートハンドラー、サーバーアクション、またはスクリプトに保つようにしてください。
+> **サーバーサイドのみ。** `createIntlayerCMS()` は `clientId` + `clientSecret` で認証され、シークレットはブラウザで利用できません。このスニペットがそこで実行されると、認証されていないリクエストが発行されます。ルートハンドラー、サーバーアクション、またはスクリプトに保つようにしてください。
 
 ## 便利なリンク
 

package/docs/ja/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-08-22
+updatedAt: 2026-08-30
 title: 設定 (Configuration)
 description: アプリケーションにIntlayerを設定する方法について説明します。ニーズに合わせてIntlayerをカスタマイズするためのさまざまな設定とオプションを理解してください。
 keywords:
@@ -1117,3 +1117,101 @@ Intlayer がアプリケーションの国際化をどのように最適化お
 | フィールド | 説明                                     | 型                 |
 | ---------- | ---------------------------------------- | ------------------ |
 | `plugins`  | 有効にする Intlayer プラグインのリスト。 | `IntlayerPlugin[]` |
+
+## よくある質問
+
+<FAQ>
+
+<Question title="intlayer.config.ts ファイルはどこに置くべきですか？">
+
+プロジェクトのルート、`package.json` の隣です。Intlayer は `intlayer.config.js`、`intlayer.config.mjs`、`intlayer.config.cjs`、および JSON も受け入れるため、ファイルはプロジェクトが使用するモジュールシステムに一致します。
+
+</Question>
+
+<Question title="i18n は bundle サイズにどのくらい影響しますか？">
+
+名前空間ベースのセットアップよりもはるかに少ないです。なぜなら、ページはレンダリングしないカタログをダウンロードすることがないからです。サーバーでレンダリングされたマークアップはサーバー上でコンテンツを解決し、ビルド時コンパイラは `useIntlayer` の呼び出しをコンポーネントが使用する正確な辞書エントリに置き換えるため、未使用のキーや未使用の言語は削除されます。[動的辞書](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/index.md)は残りをロケールごとに分割します。一般的な代替案と比較して、Intlayer は `bundle` およびページサイズを最大 50% 削減します。[bundle optimization](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/bundle_optimization.md) および [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/benchmark/index.md) を参照してください。
+
+</Question>
+
+<Question title="コンポーネントを書き直さずに `i18next`、`next-intl`、または `react-i18next` から移行できますか？">
+
+はい、2つの方法があります。[i18next 移行ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/migration_from_i18next_to_intlayer.md)または [next-intl 移行ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/migration_from_next-intl_to_intlayer.md)を使用して、コンテンツを段階的に移行できます。または、現在の API を完全に維持することも可能です。[compat adapters](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compat/index.md)は、`i18next`、`react-i18next`、`next-intl`、`next-i18next`、`react-intl`、`use-intl`、`vue-i18n`、および `Lingui` とまったく同じ API を公開しますが、Intlayer の辞書によって提供されるため、インポートは変更されますが、コンポーネントのコードは変更されません。
+
+</Question>
+
+<Question title="既存の JSON 翻訳ファイルを保持できますか？">
+
+はい。[sync JSON plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)は、`/messages/{locale}/{namespace}.json` ファイルを信頼できる情報源として保持し、それらから Intlayer 辞書を双方向に生成します。[sync PO plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-po.md)は gettext カタログに対しても同様の処理を行い、[per locale files](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/per_locale_file.md)を使用すると、ロケールを1つのファイルにまとめるのではなく、言語ごとにコンテンツを分割できます。
+
+</Question>
+
+<Question title="コンテンツをキーごとに移動する必要がありますか？">
+
+いいえ。`npx intlayer extract` を実行すると、Intlayer はソースファイルを読み取り、ユーザー向けの文字列を抽出し、それぞれの隣に `.content` ファイルを書き込みます。これにより、一度に1つずつ文字列をカタログにコピーする代わりに、差分を確認できます。[extract command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/extract.md) を参照してください。
+
+完全に自動化されたパイプラインの場合、[Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compiler.md) はビルド時に JSX、TSX、Vue、Svelte のソースに対して同様の処理を行い、変更があるたびに辞書を生成するため、手動でキーを管理する必要がありません。これは静的解析によって機能するため、実行時にのみ存在する文字列は対象外となり、ユーザー向けのテキストとアプリケーションロジックを区別するためにいくつかの注釈が必要です。
+
+</Question>
+
+<Question title="利用可能なエディタおよび AI エージェントツールは何ですか？">
+
+5つのオプションがあり、すべて任意です。
+
+- **[VS Code extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/vs_code_extension.md)**: `useIntlayer` キーからそれを宣言するコンテンツファイルにジャンプしたり、コンポーネントからコンテンツを抽出したり、コマンドパレットまたは専用の Intlayer タブからビルド、フィル、テスト、プッシュ、プルを実行したりできます。
+- **[LSP server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/lsp.md)**: LSP をサポートする任意のエディタで同様の認識機能を提供します。定義へのジャンプ、すべての参照の検索、翻訳された値のホバープレビュー、キーとフィールドのオートコンプリート、キーがどこにも宣言されていない場合の警告などがあります。また、`i18next`、`react-i18next`、`next-intl`、`use-intl` の呼び出しも解決するため、移行中に役立ちます。
+- **[MCP server](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` などのコマンドを自身で実行できます。
+- **[Agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/agent_skills.md)**: `intlayer-config`、`intlayer-cli`、`intlayer-content` などの特定のスキルに加え、フレームワークごとのスキルがあり、エージェントにルーティング設定とコンテンツノードタイプを教えます。
+- **[ESLint plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/eslint.md)**: `no-raw-text` はハードコードされた文字列を検出し、静的辞書キーや未使用のコンテンツに対する追加のルールも提供します。
+
+</Question>
+
+<Question title="アプリに新しい言語を追加するにはどうすればよいですか？">
+
+`internationalization.locales` にロケールを追加し、`npx intlayer fill` を実行して既存のコンテンツをその言語に翻訳します。生成される型も同時に更新されるため、新しいロケールが欠落しているコンテンツファイルは、サイレントなフォールバックではなく型エラーになります。
+
+</Question>
+
+<Question title="URL からロケールプレフィックスを削除するにはどうすればよいですか？">
+
+`routing.mode` を設定します。デフォルトの `"prefix-no-default"` は、デフォルトのロケールには `/about` を、その他のロケールには `/fr/about` を与えます。`"prefix-all"` はすべてのロケールにプレフィックスを付けます。`"no-prefix"` はパスからロケールを完全に除外し、`cookie`、`header`、またはドメインから解決します。`"search-params"` はクエリ文字列に `/about?locale=fr` のように配置します。
+
+</Question>
+
+<Question title="各言語を独自のドメインから提供できますか？">
+
+はい。`routing.domains` はロケールをホスト名にマッピングします。例えば、`{ fr: 'example.fr', en: 'example.com' }` のようになります。ドメインがロケールを識別するため、パスにプレフィックスは追加されず、`getLocalizedUrl` は適切なドメイン上の絶対 URL を返します。
+
+</Question>
+
+<Question title="ユーザーの言語はどのように検出されますか？">
+
+`routing.storage` を通じて検出されます。これは、読み取るソースを順序付けてリストします。通常は URL、次に `cookie`、そして `Accept-Language` `header` です。ユーザーによる明示的な選択は永続化され、次回の訪問時に優先されます。
+
+</Question>
+
+<Question title="`routing.enableProxy` は何をしますか？">
+
+ロケールルーティング `proxy`、つまりプレフィックスを解決しリダイレクトを行う `middleware` を制御します。設定されていない場合、`proxy` は実行されますが、開発サーバーとプレビューサーバーは、テストしていない言語にリダイレクトされるのを避けるため、保存されたロケールをリダイレクト元として無視します。本番環境では `true` と同じように動作します。ロケールルーティングを自分で処理する場合は `false` に設定します。
+
+</Question>
+
+<Question title="`importMode` の `static`、`dynamic`、`fetch` の違いは何ですか？">
+
+デフォルトの `"static"` は、辞書を静的にインポートするため、`bundle` され同期的に読み込まれます。`"dynamic"` は `Suspense` を介してインポートするため、ロケールはコンポーネントがレンダリングするときにのみダウンロードされます。これは大規模なコンテンツセットに適しています。`"fetch"` はライブ同期 API から辞書を取得し、失敗した場合は `"dynamic"` にフォールバックします。[bundle optimization](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/bundle_optimization.md) および [dynamic dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/index.md) を参照してください。
+
+</Question>
+
+<Question title="自動翻訳のための AI プロバイダーと API キーはどこで設定しますか？">
+
+設定ファイル、またはコマンドラインで `--provider`、`--model`、`--api-key` を使用して設定します。キーはあなたのものです。翻訳呼び出しは、あなたのマシンまたは CI ランナーから選択したプロバイダーに直接送信されるため、第三者を介してルーティングされることはありません。[fill command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/fill.md) を参照してください。
+
+</Question>
+
+<Question title="設定を変更した後、開発サーバーを再起動する必要がありますか？">
+
+通常は必要ありません。Intlayer のウォッチャーは `intlayer.config.ts` 自体を監視しています。保存時に設定をリロードし、辞書を再度準備するため、ロケールの追加やルーティングモードの変更はコンテンツの変更と同様に認識されます。ただし、設定はシステムによってキャッシュされる場合があります。アプリを再起動するのが良い解決策となる場合があります。
+
+</Question>
+
+</FAQ>

package/docs/ja/dictionary/content_file.md

@@ -364,15 +364,15 @@ Intlayerの辞書は`Dictionary`型で定義され、その動作を制御する
 
 **例:**
 
-```json
+```jsonc
 // ロケール別辞書
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // これは 'en' の翻訳ノードになります
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -441,7 +441,7 @@ export default aboutPageMetaContent;
 
 **例：**
 
-```json
+```jsonc
 // すべてのロケールで有効化
 {
   "autoFill": true

package/docs/ja/dictionary/plurial.md

@@ -35,9 +35,12 @@ Intlayerでは、複数形コンテンツは `plural` 関数を通じて実現
 
 ## `plural` と `enu` の使い分け
 
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+| ユースケース                                            | ヘルパー |
+| ------------------------------------------------------- | -------- |
+| ロケールに応じた文法上の複数形 (one apple / two apples) | `plural` |
+| カスタム数値範囲 (`<5`, `>=10`) や非 CLDR カテゴリ      | `enu`    |
 
-To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+英語のみを対象とする場合（`one` / `other` のみ）、どちらでも機能します。`few` / `many` / `two` の区別がある言語の場合は `plural` を推奨します。
 
 ## 複数形コンテンツのセットアップ