@intlayer/docs 7.0.5 → 7.0.7

package/blog/ja/intlayer_with_next-i18next.md

@@ -16,6 +16,9 @@ slugs:
   - blog
   - intlayer-with-next-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: loadJSON プラグインを追加
   - version: 7.0.0
     date: 2025-10-29
     changes: syncJSON プラグインへの変更と包括的な書き直し
@@ -27,32 +30,32 @@ history:
 
 <TOC/>
 
-## next-i18next とは？
+## next-i18next とは何か？
 
 **next-i18next** は、Next.js アプリケーション向けの最も人気のある国際化（i18n）フレームワークの一つです。強力な **i18next** エコシステムの上に構築されており、Next.js プロジェクトにおける翻訳、ローカリゼーション、言語切り替えの管理に包括的なソリューションを提供します。
 
 しかし、next-i18next にはいくつかの課題があります：
 
-- **複雑な設定**：next-i18next のセットアップには複数の設定ファイルが必要であり、サーバーサイドとクライアントサイドの i18n インスタンスの慎重な設定が求められます。
+- **複雑な設定**：next-i18next のセットアップには複数の設定ファイルが必要であり、サーバーサイドとクライアントサイドの i18n インスタンスを慎重に設定する必要があります。
 - **翻訳ファイルの分散**：翻訳ファイルは通常、コンポーネントとは別のディレクトリに保存されているため、一貫性の維持が難しくなります。
-- **名前空間の手動管理**：開発者は名前空間を手動で管理し、翻訳リソースが適切に読み込まれることを保証する必要があります。
+- **手動のネームスペース管理**：開発者はネームスペースを手動で管理し、翻訳リソースの適切な読み込みを確保する必要があります。
 - **限定的な型安全性**：TypeScript のサポートには追加の設定が必要であり、翻訳の自動型生成は提供されません。
 
 ## Intlayerとは？
 
 **Intlayer** は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。Next.jsアプリケーションにおけるコンテンツ管理に対してモダンなアプローチを提供します。
 
-[next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md) のブログ記事で next-intl との具体的な比較をご覧ください。
+具体的な比較は、当社のブログ記事 [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md) をご覧ください。
 
-## なぜ Intlayer を next-i18next と組み合わせるのか？
+## なぜIntlayerをnext-i18nextと組み合わせるのか？
 
-Intlayerは優れた単独のi18nソリューションを提供します（[Next.js統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_16.md)を参照）が、次のような理由でnext-i18nextと組み合わせたい場合があります。
+Intlayerは優れた単独のi18nソリューションを提供します（[Next.js統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_16.md)を参照）が、いくつかの理由でnext-i18nextと組み合わせたい場合があります。
 
 1. **既存のコードベース**: 既にnext-i18nextの実装があり、Intlayerの改善された開発者体験へ段階的に移行したい場合。
 2. **レガシー要件**: プロジェクトが既存のi18nextプラグインやワークフローとの互換性を必要とする場合。
 3. **チームの慣れ親しみ**: チームがnext-i18nextに慣れているが、より良いコンテンツ管理を望んでいる場合。
 
-**そのために、Intlayerはnext-i18nextのアダプターとして実装でき、CLIやCI/CDパイプラインでのJSON翻訳の自動化、翻訳のテストなどを支援します。**
+**そのため、Intlayerはnext-i18nextのアダプターとして実装でき、CLIやCI/CDパイプラインでのJSON翻訳の自動化、翻訳のテストなどを支援します。**
 
 このガイドでは、next-i18nextとの互換性を維持しながら、Intlayerの優れたコンテンツ宣言システムを活用する方法を示します。
 
@@ -62,7 +65,7 @@ Intlayerは優れた単独のi18nソリューションを提供します（[Next
 
 ### ステップ1: 依存関係のインストール
 
-お好みのパッケージマネージャーを使って必要なパッケージをインストールしてください：
+お好みのパッケージマネージャーを使って必要なパッケージをインストールします:
 
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin
@@ -76,18 +79,18 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-**パッケージの説明：**
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
+**パッケージの説明:**
 
 - **intlayer**: コンテンツ宣言と管理のためのコアライブラリ
-- **next-intlayer**: ビルドプラグインを備えたNext.js統合レイヤー
-- **i18next**: コアi18nフレームワーク
-- **next-i18next**: i18nextのNext.jsラッパー
-- **i18next-resources-to-backend**: i18nextのための動的リソース読み込み
 - **@intlayer/sync-json-plugin**: Intlayerのコンテンツ宣言をi18nextのJSON形式に同期するプラグイン
 
-### ステップ2: JSONをラップするためのIntlayerプラグインの実装
+### ステップ2: JSONをラップするためのIntlayerプラグインを実装する
 
-サポートするロケールを定義するためにIntlayerの設定ファイルを作成します。
+サポートするロケールを定義するためのIntlayer設定ファイルを作成します:
 
 **i18next用のJSON辞書もエクスポートしたい場合は、`syncJSON`プラグインを追加してください:**
 
@@ -102,7 +105,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+`source: ({ key, locale }) => \`./public/locales/\${locale}/\${key}.json\`,`
     }),
   ],
 };
@@ -112,37 +115,57 @@ export default config;
 
 `syncJSON`プラグインはJSONを自動的にラップします。コンテンツの構造を変更することなく、JSONファイルの読み書きを行います。
 
-JSONとintlayerのコンテンツ宣言ファイル（`.content`ファイル）を共存させたい場合、Intlayerは以下の手順で処理します：
+もしJSONをintlayerのコンテンツ宣言ファイル（`.content`ファイル）と共存させたい場合、Intlayerは以下のように処理します：
 
-    1. JSONファイルとコンテンツ宣言ファイルの両方を読み込み、intlayerの辞書に変換します。
+1. JSONファイルとコンテンツ宣言ファイルの両方を読み込み、intlayerの辞書に変換します。
+2. JSONとコンテンツ宣言ファイルの間に競合がある場合、Intlayerはそれらすべての辞書をマージします。これはプラグインの優先度やコンテンツ宣言ファイルの優先度に依存し、すべて設定可能です。
 
-2. JSONとコンテンツ宣言ファイル間に競合がある場合、Intlayerはすべての辞書をマージします。これはプラグインの優先順位やコンテンツ宣言ファイルの優先順位に依存します（すべて設定可能です）。
+CLIを使用してJSONの翻訳を変更した場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
 
-CLIを使用してJSONの翻訳を行った場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
+`syncJSON`プラグインの詳細については、[syncJSONプラグインのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)をご参照ください。
 
 ---
 
-## Git設定
+### （オプション）ステップ3：コンポーネントごとのJSON翻訳の実装
 
-生成されたファイルをバージョン管理から除外します：
+デフォルトでは、IntlayerはJSONファイルとコンテンツ宣言ファイルの両方を読み込み、マージし、同期します。詳細は[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)をご覧ください。しかし、必要に応じてIntlayerプラグインを使用し、コードベースの任意の場所でローカライズされたJSONをコンポーネント単位で管理することも可能です。
 
-```plaintext fileName=".gitignore"
-# Intlayerによって生成されたファイルを無視する
-.intlayer
-intl
-```
-
-これらのファイルはビルドプロセス中に自動的に再生成されるため、リポジトリにコミットする必要はありません。
+そのためには、`loadJSON` プラグインを使用できます。
 
-### VS Code拡張機能
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
 
-開発者体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールしてください：
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
 
-[VS Codeマーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+  // 現在のJSONファイルをIntlayerの辞書と同期させる
+  plugins: [
+    /**
+     * src内のパターン {key}.i18n.json に一致するすべてのJSONファイルを読み込みます
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // これらのJSONファイルが `./public/locales/en/${key}.json` のファイルより優先されることを保証します
+    }),
+    /**
+     * ローカルディレクトリ内のJSONファイルに出力と翻訳を書き戻します
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
 
-2. JSONとコンテンツ宣言ファイル間に競合がある場合、Intlayerはすべての辞書をマージします。プラグインの優先度とコンテンツ宣言ファイルの優先度に応じて処理されます（すべて設定可能です）。
+export default config;
+```
 
-CLIを使用してJSONの翻訳を変更した場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
+これは、`src`ディレクトリ内のパターン`{key}.i18n.json`に一致するすべてのJSONファイルを読み込み、Intlayerの辞書としてロードします。
 
 ---
 
@@ -151,7 +174,7 @@ CLIを使用してJSONの翻訳を変更した場合やCMSを使用した場合
 生成されたファイルをバージョン管理から除外します：
 
 ```plaintext fileName=".gitignore"
-# Intlayerによって生成されたファイルを無視
+# Intlayerによって生成されたファイルを無視する
 .intlayer
 intl
 ```
@@ -160,6 +183,6 @@ intl
 
 ### VS Code拡張機能
 
-開発者体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールしてください：
+開発者体験を向上させるために、公式の **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)

package/blog/ja/intlayer_with_next-intl.md

@@ -7,26 +7,29 @@ slugs:
   - blog
   - intlayer-with-next-intl
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: loadJSONプラグインを追加
   - version: 7.0.0
     date: 2025-10-29
-    changes: syncJSONプラグインへの変更
+    changes: syncJSONプラグインに変更
 ---
 
 # Intlayerを使ってnext-intlのJSON翻訳を自動化する方法
 
 ## Intlayerとは？
 
-**Intlayer**は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。Next.jsアプリケーションにおけるコンテンツ管理に対してモダンなアプローチを提供します。
+**Intlayer**は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。Next.jsアプリケーションにおけるコンテンツ管理に対して、モダンなアプローチを提供します。
 
 next-intlとの具体的な比較については、当社のブログ記事[ next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md)をご覧ください。
 
-## なぜIntlayerをnext-intlと組み合わせるのか？
+## なぜIntlayerとnext-intlを組み合わせるのか？
 
-Intlayerは優れた単独のi18nソリューションを提供します（当社の[Next.js統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_16.md)を参照）が、いくつかの理由でnext-intlと組み合わせたい場合があります。
+Intlayerは優れた単独のi18nソリューションを提供します（当社の[Next.js統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_16.md)を参照）が、以下のような理由でnext-intlと組み合わせたい場合があります。
 
-1. **既存のコードベース**: 既に確立されたnext-intlの実装があり、Intlayerの改善された開発者体験に徐々に移行したい場合。
-2. **レガシー要件**: プロジェクトが既存のnext-intlプラグインやワークフローとの互換性を必要とする場合。
-3. **チームの慣れ親しみ**: チームがnext-intlに慣れているが、より良いコンテンツ管理を望んでいる場合。
+1. **既存のコードベース**：すでに確立されたnext-intlの実装があり、Intlayerの改善された開発者体験に徐々に移行したい場合。
+2. **レガシー要件**：プロジェクトが既存のnext-intlプラグインやワークフローとの互換性を必要とする場合。
+3. **チームの習熟度**：チームはnext-intlに慣れているが、より良いコンテンツ管理を望んでいる場合。
 
 **そのために、Intlayerはnext-intlのアダプターとして実装でき、CLIやCI/CDパイプラインでのJSON翻訳の自動化、翻訳のテストなどを支援します。**
 
@@ -38,9 +41,9 @@ Intlayerは優れた単独のi18nソリューションを提供します（当
 
 ## next-intlとIntlayerをセットアップするステップバイステップガイド
 
-### ステップ1: 依存関係のインストール
+### ステップ1：依存関係のインストール
 
-必要なパッケージをインストールします:
+必要なパッケージをインストールします：
 
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin
@@ -54,6 +57,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **パッケージの説明:**
 
 - **intlayer**: 国際化管理、コンテンツ宣言、およびビルドのためのコアライブラリ
@@ -61,7 +68,7 @@ yarn add intlayer @intlayer/sync-json-plugin
 
 ### ステップ 2: JSONをラップするためのIntlayerプラグインの実装
 
-サポートするロケールを定義するためのIntlayer設定ファイルを作成します:
+サポートするロケールを定義するためにIntlayerの設定ファイルを作成します:
 
 **next-intl用のJSON辞書もエクスポートしたい場合は、`syncJSON`プラグインを追加してください:**
 
@@ -86,14 +93,57 @@ export default config;
 
 `syncJSON` プラグインは JSON を自動的にラップします。コンテンツの構造を変更することなく、JSON ファイルの読み書きを行います。
 
-JSON と intlayer のコンテンツ宣言ファイル（`.content` ファイル）を共存させたい場合、Intlayer は以下の手順で処理します：
+JSON を intlayer のコンテンツ宣言ファイル（`.content` ファイル）と共存させたい場合、Intlayer は以下の手順で処理します：
 
-    1. JSON ファイルとコンテンツ宣言ファイルの両方を読み込み、intlayer の辞書に変換します。
+    1. JSON とコンテンツ宣言ファイルの両方を読み込み、intlayer の辞書に変換します。
 
-2. JSONとコンテンツ宣言ファイル間に競合がある場合、Intlayerはすべての辞書をマージします。プラグインの優先順位やコンテンツ宣言ファイルの優先順位に応じて処理されます（すべて設定可能です）。
+2. JSONとコンテンツ宣言ファイルの間に競合がある場合、Intlayerはすべての辞書をマージする処理を行います。これはプラグインの優先度やコンテンツ宣言ファイルの優先度に依存します（すべて設定可能です）。
 
 CLIを使用してJSONの翻訳を行った場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
 
+`syncJSON`プラグインの詳細については、[syncJSONプラグインのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)をご参照ください。
+
+### （オプション）ステップ3：コンポーネントごとのJSON翻訳の実装
+
+デフォルトでは、IntlayerはJSONファイルとコンテンツ宣言ファイルの両方を読み込み、マージし、同期します。詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。しかし、必要に応じてIntlayerのプラグインを使用して、コードベースの任意の場所でローカライズされたJSONのコンポーネント単位の管理を実装することも可能です。
+
+そのためには、`loadJSON`プラグインを使用できます。
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // 現在のJSONファイルをIntlayerの辞書と同期させる
+  plugins: [
+    /**
+     * src内の{key}.i18n.jsonというパターンに一致するすべてのJSONファイルを読み込みます
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // これらのJSONファイルが`./locales/en/${key}.json`のファイルより優先されることを保証します
+    }),
+    /**
+     * ローカルディレクトリ内のJSONファイルに出力と翻訳を書き戻しながら読み込みます
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+これは、`src`ディレクトリ内のパターン `{key}.i18n.json` に一致するすべてのJSONファイルを読み込み、Intlayerの辞書としてロードします。
+
 ## Git設定
 
 自動生成されたIntlayerファイルは無視することを推奨します：
@@ -110,5 +160,3 @@ CLIを使用してJSONの翻訳を行った場合やCMSを使用した場合、I
 開発者体験を向上させるために、公式の**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)

package/blog/ja/intlayer_with_react-i18next.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-01-02
 updatedAt: 2025-10-29
-title: Intlayerを使ったreact-i18nextのJSON翻訳の自動化方法
+title: Intlayerを使ってreact-i18nextのJSON翻訳を自動化する方法
 description: Reactアプリケーションの国際化を強化するために、Intlayerとreact-i18nextを使ってJSON翻訳を自動化する方法。
 keywords:
   - react-i18next
@@ -18,12 +18,15 @@ slugs:
   - blog
   - intlayer-with-react-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: loadJSONプラグインを追加
   - version: 7.0.0
     date: 2025-10-29
-    changes: syncJSONプラグインへの変更
+    changes: syncJSONプラグインに変更
 ---
 
-# Intlayerを使ったreact-i18nextのJSON翻訳の自動化方法
+# Intlayerを使ってreact-i18nextのJSON翻訳を自動化する方法
 
 ## Intlayerとは何ですか？
 
@@ -33,11 +36,12 @@ history:
 
 ## なぜIntlayerをreact-i18nextと組み合わせるのか？
 
-Intlayerは優れた単独のi18nソリューションを提供します（[React統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+react.md)を参照）が、以下のような理由でreact-i18nextと組み合わせたい場合があります：
+Intlayerは優れた単独のi18nソリューションを提供します（当社の[React統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+react.md)を参照）が、以下のような理由でreact-i18nextと組み合わせたい場合があります：
 
-1. **既存のコードベース**: 既にreact-i18nextの実装があり、Intlayerの向上した開発者体験へ段階的に移行したい場合。
+1. **既存のコードベース**: 既に確立されたreact-i18nextの実装があり、Intlayerの改善された開発者体験に徐々に移行したい場合。
 2. **レガシー要件**: プロジェクトが既存のreact-i18nextプラグインやワークフローとの互換性を必要とする場合。
 3. **チームの慣れ親しみ**: チームがreact-i18nextに慣れているが、より良いコンテンツ管理を望んでいる場合。
+4. **Intlayerの機能利用**: コンテンツ宣言、翻訳の自動化、翻訳のテストなど、Intlayerの機能を活用したい場合。
 
 **そのために、Intlayerはreact-i18nextのアダプターとして実装でき、CLIやCI/CDパイプラインでのJSON翻訳の自動化、翻訳のテストなどを支援します。**
 
@@ -65,14 +69,18 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **パッケージの説明:**
 
-- **intlayer**: 国際化管理、コンテンツ宣言、ビルドのためのコアライブラリ
+- **intlayer**: 国際化管理、コンテンツ宣言、およびビルドのためのコアライブラリ
 - **@intlayer/sync-json-plugin**: Intlayerのコンテンツ宣言をreact-i18next互換のJSON形式にエクスポートするプラグイン
 
 ### ステップ2: JSONをラップするためのIntlayerプラグインの実装
 
-サポートするロケールを定義するIntlayer設定ファイルを作成します:
+サポートするロケールを定義するためのIntlayer設定ファイルを作成します。
 
 **react-i18next用のJSON辞書もエクスポートしたい場合は、`syncJSON`プラグインを追加してください:**
 
@@ -87,38 +95,79 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
     }),
   ],
 };
 
-export default config;
+`export default config;
 ```
 
-`syncJSON` プラグインは JSON を自動的にラップします。コンテンツの構造を変更することなく、JSON ファイルの読み書きを行います。
+`syncJSON`プラグインはJSONを自動的にラップします。コンテンツの構造を変更することなく、JSONファイルの読み書きを行います。
+
+もしJSONとintlayerのコンテンツ宣言ファイル（`.content`ファイル）を共存させたい場合、Intlayerは以下の手順で処理します：
+
+1. JSONファイルとコンテンツ宣言ファイルの両方を読み込み、intlayerの辞書に変換します。
+2. JSONとコンテンツ宣言ファイル間に競合がある場合、Intlayerはすべての辞書をマージします。プラグインの優先度やコンテンツ宣言ファイルの優先度に応じて処理されます（すべて設定可能です）。
+
+CLIを使ってJSONの翻訳を変更した場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
+
+`syncJSON`プラグインの詳細については、[syncJSONプラグインのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)を参照してください。
 
-もし JSON と intlayer のコンテンツ宣言ファイル（`.content` ファイル）を共存させたい場合、Intlayer は以下の手順で処理します：
+### （オプション）ステップ3：コンポーネントごとのJSON翻訳の実装
 
-    1. JSONファイルとコンテンツ宣言ファイルの両方を読み込み、Intlayerの辞書に変換します。
-    2. JSONファイルとコンテンツ宣言ファイルの間に競合がある場合、Intlayerはすべての辞書をマージします。これはプラグインの優先度やコンテンツ宣言ファイルの優先度に依存します（すべて設定可能です）。
+デフォルトでは、IntlayerはJSONファイルとコンテンツ宣言ファイルの両方を読み込み、マージし、同期します。詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。しかし、必要に応じてIntlayerプラグインを使用して、コードベースのどこにでもあるJSONのローカライズをコンポーネント単位で管理することも可能です。
 
-CLIを使用してJSONの翻訳を行った場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
+そのためには、`loadJSON`プラグインを使用できます。
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // 現在のJSONファイルをIntlayerの辞書と同期させる
+  plugins: [
+    /**
+     * src内の{key}.i18n.jsonパターンに一致するすべてのJSONファイルを読み込みます
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // これらのJSONファイルが`./locales/en/${key}.json`のファイルより優先されることを保証します
+    }),
+    /**
+     * ローカルディレクトリ内のJSONファイルに出力と翻訳を書き戻しながら読み込みます
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
 
-`syncJSON`プラグインの詳細については、[syncJSONプラグインのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)をご参照ください。
+これにより、`src` ディレクトリ内の `{key}.i18n.json` パターンに一致するすべての JSON ファイルが読み込まれ、Intlayer の辞書としてロードされます。
 
-## Git設定
+## Git 設定
 
-自動生成されたIntlayerファイルは無視することを推奨します：
+自動生成された Intlayer ファイルは無視することを推奨します：
 
 ```plaintext fileName=".gitignore"
-# Intlayerによって生成されたファイルを無視する
+# Intlayer によって生成されたファイルを無視する
 .intlayer
 ```
 
 これらのファイルはビルドプロセス中に再生成可能であり、バージョン管理にコミットする必要はありません。
 
-### VS Code拡張機能
+### VS Code 拡張機能
 
-開発者体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールしてください：
+開発者体験を向上させるために、公式の **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)

package/blog/ja/intlayer_with_react-intl.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-01-02
 updatedAt: 2025-10-29
-title: Intlayerを使ったreact-intl JSON翻訳の自動化方法
+title: Intlayerを使ってreact-intlのJSON翻訳を自動化する方法
 description: Reactアプリケーションの国際化を強化するために、Intlayerとreact-intlを使ってJSON翻訳を自動化する方法。
 keywords:
   - react-intl
@@ -16,14 +16,21 @@ slugs:
   - blog
   - intlayer-with-react-intl
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: loadJSONプラグインを追加
   - version: 7.0.0
     date: 2025-10-29
-    changes: syncJSONプラグインへの変更
+    changes: syncJSONプラグインに変更
 ---
 
-# Intlayerを使ったreact-intl JSON翻訳の自動化方法
+# Intlayerを使ってreact-intlのJSON翻訳を自動化する方法
 
-## Intlayerとは何か？
+## 目次
+
+<TOC/>
+
+## Intlayerとは？
 
 **Intlayer**は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。Reactアプリケーションにおけるコンテンツ管理に対して、モダンなアプローチを提供します。
 
@@ -31,15 +38,16 @@ history:
 
 ## なぜIntlayerをreact-intlと組み合わせるのか？
 
-Intlayerは優れた単独のi18nソリューションを提供します（[React統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react.md)をご覧ください）が、いくつかの理由でreact-intlと組み合わせたい場合があります：
+Intlayerは優れた単独のi18nソリューションを提供します（[React統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react.md)を参照）が、以下のような理由でreact-intlと組み合わせたい場合があります：
 
-1. **既存のコードベース**: 既にreact-intlの実装があり、Intlayerの優れた開発者体験へ段階的に移行したい場合。
+1. **既存のコードベース**: 既にreact-intlの実装があり、Intlayerの向上した開発者体験へ段階的に移行したい場合。
 2. **レガシー要件**: プロジェクトが既存のreact-intlプラグインやワークフローとの互換性を必要とする場合。
-3. **チームの慣れ親しみ**: チームがreact-intlに慣れているが、より良いコンテンツ管理を求めている場合。
+3. **チームの慣れ親しみ**: チームがreact-intlに慣れているが、より良いコンテンツ管理を望んでいる場合。
+4. **Intlayerの機能利用**: コンテンツ宣言、翻訳の自動化、翻訳テストなど、Intlayerの機能を利用したい場合。
 
-**そのために、Intlayerはreact-intlのアダプターとして実装でき、CLIやCI/CDパイプラインでのJSON翻訳の自動化、翻訳のテストなどを支援します。**
+**そのために、Intlayerはreact-intlのアダプターとして実装可能であり、CLIやCI/CDパイプラインでのJSON翻訳の自動化、翻訳のテストなどを支援します。**
 
-このガイドでは、react-intlとの互換性を保ちながら、Intlayerの優れたコンテンツ宣言システムを活用する方法を示します。
+このガイドでは、react-intlとの互換性を維持しながら、Intlayerの優れたコンテンツ宣言システムを活用する方法を説明します。
 
 ## 目次
 
@@ -49,7 +57,7 @@ Intlayerは優れた単独のi18nソリューションを提供します（[Reac
 
 ### ステップ1: 依存関係のインストール
 
-必要なパッケージをインストールします：
+必要なパッケージをインストールします:
 
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin
@@ -63,6 +71,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **パッケージの説明:**
 
 - **intlayer**: 国際化管理、コンテンツ宣言、およびビルドのためのコアライブラリ
@@ -70,9 +82,9 @@ yarn add intlayer @intlayer/sync-json-plugin
 
 ### ステップ2: JSONをラップするためのIntlayerプラグインの実装
 
-サポートするロケールを定義するためにIntlayerの設定ファイルを作成します：
+サポートするロケールを定義するためのIntlayer設定ファイルを作成します。
 
-**react-intl用のJSON辞書もエクスポートしたい場合は、`syncJSON`プラグインを追加してください：**
+**react-intl用のJSON辞書もエクスポートしたい場合は**、`syncJSON`プラグインを追加してください。
 
 ```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -90,27 +102,67 @@ const config: IntlayerConfig = {
   ],
 };
 
-export default config;
+`export default config;
 ```
 
-`syncJSON` プラグインは JSON を自動的にラップします。コンテンツの構造を変更することなく、JSON ファイルの読み書きを行います。
-
-JSON と intlayer のコンテンツ宣言ファイル（`.content` ファイル）を共存させたい場合、Intlayer は以下の手順で処理します：
+`syncJSON`プラグインはJSONを自動的にラップします。JSONファイルの内容構造を変更することなく、読み書きを行います。
 
-    1. JSON ファイルとコンテンツ宣言ファイルの両方を読み込み、intlayer の辞書に変換します。
+もしJSONとintlayerのコンテンツ宣言ファイル（`.content`ファイル）を共存させたい場合、Intlayerは以下の手順で処理します：
 
+1. JSONファイルとコンテンツ宣言ファイルの両方を読み込み、intlayerの辞書に変換します。
 2. JSONとコンテンツ宣言ファイル間に競合がある場合、Intlayerはすべての辞書をマージします。プラグインの優先度やコンテンツ宣言ファイルの優先度に応じて処理されます（すべて設定可能です）。
 
-CLIを使用してJSONの翻訳を行った場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
+CLIを使ってJSONの翻訳を変更した場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
 
 `syncJSON`プラグインの詳細については、[syncJSONプラグインのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)をご参照ください。
 
-## Git設定
+### （オプション）ステップ3：コンポーネントごとのJSON翻訳の実装
+
+デフォルトでは、IntlayerはJSONファイルとコンテンツ宣言ファイルの両方を読み込み、マージし、同期します。詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)をご覧ください。しかし、必要に応じてIntlayerプラグインを使用して、コードベースのどこにでもあるJSONのローカライズをコンポーネント単位で管理することも可能です。
+
+そのためには、`loadJSON`プラグインを使用できます。
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // 現在のJSONファイルをIntlayerの辞書と同期させる
+  plugins: [
+    /**
+     * src内のパターン{key}.i18n.jsonに一致するすべてのJSONファイルを読み込みます
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // これらのJSONファイルが`./locales/en/${key}.json`のファイルより優先されることを保証します
+    }),
+    /**
+     * ローカルディレクトリ内のJSONファイルに出力と翻訳を書き戻しながら読み込みます
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+これは、`src` ディレクトリ内の `{key}.i18n.json` というパターンに一致するすべての JSON ファイルを読み込み、Intlayer の辞書としてロードします。
+
+## Git 設定
 
-自動生成されたIntlayerファイルは無視することを推奨します：
+自動生成された Intlayer ファイルは無視することを推奨します：
 
 ```plaintext fileName=".gitignore"
-# Intlayerによって生成されたファイルを無視
+# Intlayer によって生成されたファイルを無視する
 .intlayer
 ```