@intlayer/docs 9.3.3 → 9.4.0

package/docs/ja/dictionary/plurial.md

@@ -35,10 +35,72 @@ 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.
+
+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:
+
+## 複数形コンテンツのセットアップ
+
+Intlayerプロジェクトで複数形コンテンツをセットアップするには、`plural` ヘルパーを使用するコンテンツモジュールを作成します。`other` カテゴリは必須であり、ロケールがより具体的なカテゴリを定義していない場合のフォールバックとして使用されます。
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      ja: plural({
+        other: "{{count}} 件の求人",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "ja": {
+          "nodeType": "plural",
+          "plural": {
+            "other": "{{count}} 件の求人"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+> サポートされているカテゴリは `zero`、`one`、`two`、`few`、`many`、`other` です。ターゲット言語が使用するカテゴリのみを宣言すればよく、特定のカテゴリが一致しない場合、Intlayerは `other` にフォールバックします。
+>
+> `{{count}}` プレースホルダーは、実行時に渡すカウント値に自動的に置き換えられます。他のプレースホルダーを含めることも可能です（下記の[カスタムプレースホルダー](#custom-placeholders)を参照）。
+
+## React Intlayer で複数形コンテンツを使用する
+
 <Tabs group="framework">
   <Tab label="React" value="react">
 
-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.
+React コンポーネント内で複数形のコンテンツを使用するには、`useIntlayer` フックを介して取得し、count を指定して呼び出します。アクティブなロケールと count を組み合わせて、一致する CLDR カテゴリを選択します。
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -60,31 +122,34 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Next.js" value="nextjs">
 
-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:
+Reactコンポーネント内で複数形コンテンツを使用するには、`useIntlayer` フック経由で取得し、カウント値を指定して呼び出します。アクティブなロケールとカウント値が組み合わされ、一致するCLDRカテゴリが選択されます。
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
 import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
+import { useIntlayer } from "react-intlayer";
 
 const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
   const { totalOpenings } = useIntlayer("total_openings");
 
   return (
     <div>
+      {/* 英語の場合:                                  */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
       <p>{totalOpenings(count)}</p>
     </div>
   );
 };
 
 export default OpeningsComponent;
+推敲;
 ```
 
-  </Tab>
-  <Tab label="Vue" value="vue">
+返された関数は、次の2つの等価な方法で呼び出すことができます。
 
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Vue コンポーネントで複数形のコンテンツを使用するには、`useIntlayer` フックを使用して取得し、count を指定して呼び出します。以下は例です:
 
 ```vue fileName="**/*.vue"
 <script setup lang="ts">
@@ -105,7 +170,7 @@ const { totalOpenings } = useIntlayer("total_openings");
   </Tab>
   <Tab label="Svelte" value="svelte">
 
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
+Svelte コンポーネントで複数形のコンテンツを使用するには、`useIntlayer` フックを介して取得し、count で呼び出します。ストアは `$` でアクセスされます。以下が例です:
 
 ```svelte fileName="**/*.svelte"
 <script lang="ts">
@@ -124,7 +189,7 @@ const content = useIntlayer("total_openings");
   </Tab>
   <Tab label="Preact" value="preact">
 
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Preact コンポーネントで複数形のコンテンツを使用するには、`useIntlayer` フックで取得し、count を指定して呼び出します。以下に例を示します:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "preact";
@@ -146,7 +211,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Solid" value="solid">
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+SolidJS コンポーネントで複数形のコンテンツを使用するには、`useIntlayer` フックを通じて取得し、カウント付きで呼び出します。以下は例です:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { Component } from "solid-js";
@@ -168,7 +233,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Angular" value="angular">
 
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Angular コンポーネントで複数形のコンテンツを使用するには、`useIntlayer` フックを使用して取得し、カウント付きで呼び出します。次に例を示します：
 
 ```typescript fileName="app.component.ts" codeFormat="typescript"
 import { Component, Input } from "@angular/core";
@@ -192,115 +257,16 @@ export class OpeningsComponent {
   </Tab>
   <Tab label="Vanilla JS" value="vanilla">
 
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
-
-  </Tab>
-</Tabs>
-
-## 複数形コンテンツのセットアップ
-
-Intlayerプロジェクトで複数形コンテンツをセットアップするには、`plural` ヘルパーを使用するコンテンツモジュールを作成します。`other` カテゴリは必須であり、ロケールがより具体的なカテゴリを定義していない場合のフォールバックとして使用されます。
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { plural, t, type Dictionary } from "intlayer";
-
-const openingsContent = {
-  key: "total_openings",
-  content: {
-    totalOpenings: t({
-      en: plural({
-        one: "{{count}} opening",
-        other: "{{count}} openings",
-      }),
-      ja: plural({
-        other: "{{count}} 件の求人",
-      }),
-    }),
-  },
-} satisfies Dictionary;
-
-export default openingsContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "total_openings",
-  "content": {
-    "totalOpenings": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} opening",
-            "other": "{{count}} openings"
-          }
-        },
-        "ja": {
-          "nodeType": "plural",
-          "plural": {
-            "other": "{{count}} 件の求人"
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-> サポートされているカテゴリは `zero`、`one`、`two`、`few`、`many`、`other` です。ターゲット言語が使用するカテゴリのみを宣言すればよく、特定のカテゴリが一致しない場合、Intlayerは `other` にフォールバックします。
->
-> `{{count}}` プレースホルダーは、実行時に渡すカウント値に自動的に置き換えられます。他のプレースホルダーを含めることも可能です（下記の[カスタムプレースホルダー](#custom-placeholders)を参照）。
-
-## React Intlayer で複数形コンテンツを使用する
-
-Reactコンポーネント内で複数形コンテンツを使用するには、`useIntlayer` フック経由で取得し、カウント値を指定して呼び出します。アクティブなロケールとカウント値が組み合わされ、一致するCLDRカテゴリが選択されます。
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      {/* 英語の場合:                                  */}
-      {/*  count=0  → "0 openings"   (other)           */}
-      {/*  count=1  → "1 opening"    (one)             */}
-      {/*  count=2  → "2 openings"   (other)           */}
-      {/*  count=21 → "21 openings"  (other)           */}
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
-推敲;
-```
-
-返された関数は、次の2つの等価な方法で呼び出すことができます。
+`vanilla-intlayer`で複数形コンテンツを使用するには、`useIntlayer`フックを使用して取得し、countを指定して呼び出します。以下は例です:
 
 ```tsx
 totalOpenings(21); // 短縮形: カウントのみ
 totalOpenings({ count: 21 }); // 明示的な形式
 ```
 
+  </Tab>
+</Tabs>
+
 ## カスタムプレースホルダー
 
 複数形の文字列には、`{{count}}` 以外のプレースホルダーを含めることができます。`count` と並んでオブジェクト形式で渡します。

package/docs/ja/dynamic_dictionaries/variants.md

@@ -523,6 +523,27 @@ const content = useIntlayer("product", { variant: { id: "prod_abc" } });
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
+    <Tabs>
+      <Tab label="Intlayer >=9.4" value=">=9.4">
+
+        ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+        import { IntlayerProvider } from "next-intlayer/server";
+
+        export default async function Layout({ children, params }) {
+          const { locale } = await params;
+          const schoolType = await getSchoolType();
+
+          return (
+            <IntlayerProvider locale={locale} variant={schoolType}>
+              {children}
+            </IntlayerProvider>
+          );
+        }
+        ```
+
+      </Tab>
+      <Tab label="Intlayer <9.4" value="<9.4">
+
     ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
     import { IntlayerServerProvider } from "next-intlayer/server";
     import { IntlayerClientProvider } from "next-intlayer";
@@ -541,6 +562,9 @@ const content = useIntlayer("product", { variant: { id: "prod_abc" } });
     }
     ```
 
+      </Tab>
+    </Tabs>
+
   </Tab>
   <Tab label="Vue" value="vue">
     ```ts fileName="main.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}

package/docs/ja/formatters.md

@@ -56,44 +56,14 @@ Intlayerは、ネイティブの`Intl` APIの上に構築された軽量なヘ
 
 エクスポートされる`Intl`は、グローバルな`Intl`の薄いキャッシュラッパーです。`NumberFormat`、`DateTimeFormat`、`RelativeTimeFormat`、`ListFormat`、`DisplayNames`、`Collator`、および`PluralRules`のインスタンスをメモ化し、同じフォーマッターを繰り返し再構築するのを防ぎます。
 
-フォーマッターの構築は比較的コストが高いため、このキャッシュは動作を変えずにパフォーマンスを向上させます。ラッパーはネイティブの`Intl`と同じAPIを公開しているため、使用方法は同一です。
-
-- キャッシュはプロセス単位で行われ、呼び出し元には透過的です。
-
 > 環境に`Intl.DisplayNames`が存在しない場合、開発者向けの警告が一度だけ表示されます（ポリフィルの検討を推奨）。
 
 例：
 
-```ts
-import { Intl } from "intlayer";
-
-// 数値のフォーマット
-const numberFormat = new Intl.NumberFormat("en-GB", {
-  style: "currency",
-  currency: "GBP",
-});
-numberFormat.format(1234.5); // "£1,234.50"
-
-// 言語、地域などの表示名
-const displayNames = new Intl.DisplayNames("fr", { type: "language" });
-displayNames.of("en"); // "anglais"
-
-// ソート用の照合
-const collator = new Intl.Collator("fr", { sensitivity: "base" });
-collator.compare("é", "e"); // 0（等しい）
-
-// 複数形ルール
-const pluralRules = new Intl.PluralRules("fr");
-pluralRules.select(1); // "one"
-pluralRules.select(2); // "other"
-```
-
 ## ロケールユーティリティ
 
 ### `getLocaleLang(locale?)`
 
-ロケール文字列から言語コードを抽出します：
-
 ```ts
 import { getLocaleLang } from "intlayer";
 
@@ -102,28 +72,15 @@ getLocaleLang("fr-CA"); // "fr"
 getLocaleLang("de"); // "de"
 ```
 
-- **locale**: 言語コードを抽出する対象のロケール（省略時は現在のロケール）
-
 ### `getLocaleFromPath(inputUrl)`
 
 URLまたはパス名からロケール部分を抽出します：
 
-```ts
-import { getLocaleFromPath } from "intlayer";
-
-getLocaleFromPath("/en/dashboard"); // "en"
-getLocaleFromPath("/fr/dashboard"); // "fr"
-getLocaleFromPath("/dashboard"); // "en"（デフォルトのロケール）
-getLocaleFromPath("https://example.com/es/about"); // "es"
-```
-
 - **inputUrl**: 処理する完全なURL文字列またはパス名
 - **returns**: 検出されたロケール、またはロケールが見つからない場合はデフォルトのロケール
 
 ### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
 
-現在のロケールに対応したローカライズされたURLを生成します：
-
 ```ts
 import { getLocalizedUrl } from "intlayer";
 
@@ -132,12 +89,6 @@ getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
 getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
 ```
 
-- **url**: ローカライズする元のURL
-- **currentLocale**: 現在のロケール
-- **locales**: サポートされているロケールのオプション配列（デフォルトは設定されたロケール）
-- **defaultLocale**: オプションのデフォルトロケール（設定されたデフォルトロケールが使用されます）
-- **prefixDefault**: デフォルトロケールにプレフィックスを付けるかどうか（設定された値が使用されます）
-
 ### `getHTMLTextDir(locale?)`
 
 ロケールに対するテキストの方向を返します：
@@ -150,15 +101,10 @@ getHTMLTextDir("ar"); // "rtl"
 getHTMLTextDir("he"); // "rtl"
 ```
 
-- **locale**: テキスト方向を取得するロケール（デフォルトは現在のロケール）
-- **returns**: `"ltr"`、`"rtl"`、または `"auto"`
-
 ## コンテンツ処理ユーティリティ
 
 ### `getContent(node, nodeProps, locale?)`
 
-すべての利用可能なプラグイン（翻訳、列挙、挿入など）を使ってコンテンツノードを変換します：
-
 ```ts
 import { getContent } from "intlayer";
 
@@ -169,36 +115,16 @@ const content = getContent(
 );
 ```
 
-- **node**: 変換するコンテンツノード
-- **nodeProps**: 変換コンテキストのプロパティ
-- **locale**: オプションのロケール（デフォルトは設定されたデフォルトロケール）
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 言語コンテンツオブジェクトから特定のロケールのコンテンツを抽出します：
 
-```ts
-import { getTranslation } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-    de: "Hallo",
-  },
-  "fr",
-  true
-); // "Bonjour"
-```
-
 - **languageContent**: ロケールをコンテンツにマッピングしたオブジェクト
 - **locale**: 対象のロケール（デフォルトは設定されたデフォルトロケール）
 - **fallback**: デフォルトロケールにフォールバックするかどうか（デフォルトは true）
 
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
-キーによって辞書からコンテンツを取得し変換します：
-
 ```ts
 import { getIntlayer } from "intlayer";
 
@@ -206,10 +132,6 @@ const content = getIntlayer("common", "fr");
 const nestedContent = getIntlayer("common", "fr", customPlugins);
 ```
 
-- **dictionaryKey**: 取得する辞書のキー
-- **locale**: オプションのロケール（デフォルトは設定されたデフォルトロケール）
-- **plugins**: オプションのカスタム変換プラグインの配列
-
 ### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
 
 遠隔の辞書から非同期にコンテンツを取得します：
@@ -220,25 +142,12 @@ import { getIntlayerAsync } from "intlayer";
 const content = await getIntlayerAsync("common", "fr");
 ```
 
-- **dictionaryKey**: 取得する辞書のキー
-- **locale**: オプションのロケール（デフォルトは設定されたデフォルトロケール）
-- **plugins**: オプションのカスタム変換プラグインの配列
-
 ## フォーマッター
 
 以下のすべてのヘルパーは `intlayer` からエクスポートされています。
 
 ### `percentage(value, options?)`
 
-数値をパーセンテージ文字列としてフォーマットします。
-
-動作: 1より大きい値は全体のパーセンテージとして解釈され正規化されます（例：`25` → `25%`、`0.25` → `25%`）。
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-例:
-
 ```ts
 import { percentage } from "intlayer";
 
@@ -434,13 +343,6 @@ pluralRules.select(11); // "many"
 
 ### `units(value, options?)`
 
-`Intl.NumberFormat` の `style: 'unit'` を使って数値をローカライズされた単位文字列としてフォーマットします。
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - 共通フィールド: `unit`（例: `"kilometer"`、`"byte"`）、`unitDisplay`（`"short" | "narrow" | "long"`）
-  - デフォルト: `unit: 'day'`、`unitDisplay: 'short'`、`useGrouping: false`
-
 例:
 
 ```ts
@@ -463,11 +365,6 @@ getLocaleLang("fr-CA"); // "fr"
 
 ### `compact(value, options?)`
 
-数値をコンパクト表記（例: `1.2K`、`1M`）でフォーマットします。
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`（内部で `notation: 'compact'` を使用）
-
 例:
 
 ```ts
@@ -490,13 +387,6 @@ getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
 
 ### `list(values, options?)`
 
-`Intl.ListFormat`を使用して、値の配列をローカライズされたリスト文字列にフォーマットします。
-
-- **values**: `(string | number)[]`
-- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
-  - 共通フィールド: `type`（`"conjunction" | "disjunction" | "unit"`）、`style`（`"long" | "short" | "narrow"`）
-  - デフォルト: `type: 'conjunction'`、`style: 'long'`
-
 例:
 
 ```ts
@@ -525,56 +415,6 @@ getHTMLTextDir("he"); // "rtl"
 
 クライアントコンポーネント:
 
-```tsx
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "react-intlayer/format";
-// または Next.js アプリの場合
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/client/format";
-
-const MyComponent = () => {
-  const number = useNumber();
-  const currency = useCurrency();
-  const date = useDate();
-  const percentage = usePercentage();
-  const compact = useCompact();
-  const list = useList();
-  const relativeTime = useRelativeTime();
-  const unit = useUnit();
-
-  return (
-    <div>
-      <p>{number(123456.789)}</p>
-      <p>{currency(1234.5, { currency: "EUR" })}</p>
-      <p>{date(new Date(), "short")}</p>
-      <p>{percentage(0.25)}</p>
-      <p>{compact(1200)}</p>
-      <p>{list(["apple", "banana", "orange"])}</p>
-      <p>{relativeTime(new Date(), new Date() + 1000)}</p>
-      <p>{unit(123456.789, { unit: "kilometer" })}</p>
-    </div>
-  );
-};
-```
-
-サーバーコンポーネント（または React Server ランタイム）:
-
 ```ts
 import {
   useNumber,
@@ -599,8 +439,6 @@ import {
 } from "next-intlayer/server/format";
 ```
 
-> これらのフックは `IntlayerProvider` または `IntlayerServerProvider` からロケールを考慮します
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 特定のロケールのコンテンツを抽出します：
@@ -632,8 +470,6 @@ import {
 } from "vue-intlayer/format";
 ```
 
-> これらのコンポーザブルは、注入された `IntlayerProvider` からロケールを考慮します
-
 ## 注記
 
 - すべてのヘルパーは `string` 入力を受け入れます。内部的には数値または日付に強制されます。

package/docs/ja/how_works_intlayer.md

@@ -62,6 +62,8 @@ Intlayerの主なアイデアは、コンポーネントごとのコンテンツ
    - これらの辞書は、すべてのニーズに対応し、アプリケーションのパフォーマンスを最適化するために、さまざまな形式で生成されます。
 
 3. 辞書型の生成
+
+4. 辞書型の生成
    `辞書`に基づいて、Intlayerはアプリケーションで使用可能な型を生成します。
 
 - 辞書型はIntlayerの`コンテンツ宣言ファイル`から生成されます。デフォルトでは、Intlayer辞書型はプロジェクトの`.intlayer/types`ディレクトリに生成されます。
@@ -103,8 +105,13 @@ Intlayerは、視覚的にコンテンツを編集できるビジュアルエデ
   `useIntlayer`を使ってコンテンツを呼び出し、エディタが有効になっている場合、文字列は自動的に`IntlayerNode`という名前のProxyオブジェクトでラップされます。このノードは、ビジュアルエディタのインターフェースを含むラップされたiframeと通信するために`window.postMessage`を使用します。
   エディタ側では、これらのメッセージを受信してコンテンツとの実際のインタラクションをシミュレートし、アプリケーションのコンテキスト内で直接テキストを編集できるようにします。
 
+`useIntlayer`を使用してコンテンツを呼び出し、エディタが有効になっている場合、文字列は`IntlayerNode`という名前のProxyオブジェクトで自動的にラップされます。このノードは`window.postMessage`を使用して、ビジュアルエディタインターフェースを含むラップされたiframeと通信します。
+エディタ側では、エディタはこれらのメッセージをリッスンし、コンテンツとの実際のインタラクションをシミュレートして、アプリケーションのコンテキスト内でテキストを直接編集できるようにします。
+
 ## アプリビルドの最適化
 
+アプリケーションのバンドルサイズを最適化するために、Intlayerはアプリケーションのビルドを最適化するための2つのプラグイン(`@intlayer/babel`および`@intlayer/swc`プラグイン)を提供しています。
+
 アプリケーションのバンドルサイズを最適化するために、Intlayerはアプリケーションのビルドを最適化するための2つのプラグインを提供しています：`@intlayer/babel`と`@intlayer/swc`プラグイン。
 BabelおよびSWCプラグインは、アプリケーションの抽象構文木（AST）を解析してIntlayer関数の呼び出しを最適化されたコードに置き換えることで動作します。このプロセスにより、実際に使用されている辞書のみがインポートされるようになり、チャンクの最適化とバンドルサイズの削減が行われるため、本番環境での最終バンドルが軽量化されます。