@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/ja/intlayer_with_astro_svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Svelte i18n - 2026年にAstro + Svelteアプリケーションを翻訳する方法
-description: Intlayerを使用してAstro + Svelteサイトに国際化（i18n）を追加する方法を学びます。このガイドに従って、サイトを多言語化しましょう。
+updatedAt: 2026-05-31
+title: "Astro + Svelte i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）Astro + Svelteアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -58,16 +58,37 @@ history:
 
 <TOC/>
 
-## Intlayerとは？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer**は、現代的なウェブアプリケーションでの多言語サポートを簡素化するために設計された、革新的でオープンソースの国際化 (i18n) ライブラリです。
+「astro-i18n」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayerを使用すると、以下のことが可能になります：
+**Astro を完全にカバー**
 
-- **翻訳の管理が容易**：コンポーネントレベルの宣言型辞書を使用します。
-- **動的なローカライズ**：メタデータ、ルート、コンテンツを動的にローカライズできます。
-- **TypeScriptサポート**：自動生成された型により、オートコンプリートやエラー検出が向上します。
-- **高度な機能**：動的なロケール検出や切り替えなどの機能を利用できます。
+Intlayer は、**多言語ルーティング**、**サイトマップ**、および国際化 (i18n) の拡張に必要なすべての機能を提供することで、Astro と完全に連携するように最適化されています。
+
+**バンドルサイズ**
+
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
+
+**保守性**
+
+アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
+
+**AI エージェント**
+
+コンテンツを同じ場所に配置すると、大規模言語モデル (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) がさらにスムーズになります。
+
+**オートメーション**
+
+AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
+
+**パフォーマンス**
+
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
+
+**非開発によるスケーリング**
+
+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)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
 ---
 
@@ -75,7 +96,9 @@ Intlayerを使用すると、以下のことが可能になります：
 
 GitHubで[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-astro-template)を表示。
 
-### ステップ1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
 
@@ -118,7 +141,9 @@ bun x intlayer init
 - **@astrojs/svelte**
   Svelteコンポーネントアイランドの使用を可能にする公式のAstro統合。
 
-### ステップ2: プロジェクトの設定
+</Step>
+
+<Step number={2} title="プロジェクトの設定">
 
 アプリケーションの言語を設定するための設定ファイルを作成します：
 
@@ -142,7 +167,9 @@ export default config;
 
 > この設定ファイルを使用して、ローカライズされたURL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの全リストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-### ステップ3: Astro設定へのIntlayerの統合
+</Step>
+
+<Step number={3} title="Astro設定へのIntlayerの統合">
 
 Astroの設定にintlayerプラグインとSvelte統合を追加します。
 
@@ -163,7 +190,9 @@ export default defineConfig({
 
 > `svelte()` 統合により、`client:only="svelte"` を通じてSvelteコンポーネントアイランドを使用できるようになります。
 
-### ステップ4: コンテンツの宣言
+</Step>
+
+<Step number={4} title="コンテンツの宣言">
 
 翻訳を保存するためのコンテンツ宣言を作成・管理します：
 
@@ -189,7 +218,9 @@ export default appContent;
 
 > 詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。
 
-### ステップ5: Astroでのコンテンツの使用
+</Step>
+
+<Step number={5} title="Astroでのコンテンツの使用">
 
 `intlayer`からエクスポートされたコアヘルパーを使用して、`.astro`ファイル内で直接辞書を消費できます。また、各ページにhreflangや正規リンクなどのSEOメタデータを追加し、クライアントサイドのインタラクティブなコンテンツのためにSvelteアイランドを組み込む必要があります。
 
@@ -277,7 +308,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** すべてのURLに言語プレフィックスが付きます。ルートを個別に処理する必要がない場合は、標準の `[locale]` を使用できます。
 > - **`search-param` または `no-prefix`:** ロケールフォルダは不要です。ロケールは検索パラメータまたはクッキーを通じて処理されます。
 
-### ステップ6: Svelteアイランドコンポーネントの作成
+</Step>
+
+<Step number={6} title="Svelteアイランドコンポーネントの作成">
 
 Svelteアプリケーションをラップするアイランドコンポーネントを作成します。ストアにアクセスする前に、サーバーによって検出されたロケールを使用して `setupIntlayer` を呼び出す必要があります。
 
@@ -322,7 +355,9 @@ Svelteアプリケーションをラップするアイランドコンポーネ
 
 > `locale` プロップはAstroページ（サーバー検出）から渡され、`setupIntlayer` を初期化するために使用されます。これにより、コンポーネント内のすべてのストアの初期ロケールとなります。
 
-### ステップ7: 言語切り替え機能の追加
+</Step>
+
+<Step number={7} title="言語切り替え機能の追加">
 
 言語切り替え機能はSvelteアイランド（ステップ6参照）に直接組み込まれています。`svelte-intlayer` の `useLocale` を使用し、ユーザーが新しい言語を選択したときにローカライズされたURLに移動します：
 
@@ -366,7 +401,9 @@ Svelteアプリケーションをラップするアイランドコンポーネ
 > **固定の維持に関する注意:**
 > `window.location.href` を介したリダイレクトのために `onLocaleChange` を使用することで、新しい言語のURLが確実に訪問され、Intlayerミドルウェアが言語クッキーを設定して、将来の訪問時にユーザーの好みが記憶されるようになります。
 
-### ステップ8: サイトマップとRobots.txt
+</Step>
+
+<Step number={8} title="サイトマップとRobots.txt">
 
 Intlayerは、動的にローカライズされたサイトマップとrobots.txtファイルを生成するためのユーティリティを提供します。
 
@@ -426,55 +463,9 @@ export const GET: APIRoute = ({ site }) => {
 };
 ```
 
-### TypeScriptの設定
+</Step>
 
-Intlayerはモジュール拡張を使用してTypeScriptの利点を活かし、コードベースをより堅牢にします。
-
-![オートコンプリート](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![翻訳エラー](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-TypeScriptの設定に自動生成された型が含まれていることを確認してください。
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 既存のTypeScript設定
-  include: [
-    // ... 既存のTypeScript設定
-    ".intlayer/**/*.ts", // 自動生成された型を含める
-  ],
-}
-```
-
-### Gitの設定
-
-Intlayerによって生成されたファイルを無視することをお勧めします。これにより、それらをGitリポジトリにコミットすることを避けることができます。
-
-そのためには、`.gitignore`ファイルに以下の指示を追加してください：
-
-```bash
-# 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)を参照してください。
-
----
-
-### (Optional) Step 15: Extract the content of your components
+<Step number={15} title="Extract the content of your components" isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -576,6 +567,58 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
+### TypeScriptの設定
+
+Intlayerはモジュール拡張を使用してTypeScriptの利点を活かし、コードベースをより堅牢にします。
+
+![オートコンプリート](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![翻訳エラー](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+TypeScriptの設定に自動生成された型が含まれていることを確認してください。
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 既存のTypeScript設定
+  include: [
+    // ... 既存のTypeScript設定
+    ".intlayer/**/*.ts", // 自動生成された型を含める
+  ],
+}
+```
+
+### Gitの設定
+
+Intlayerによって生成されたファイルを無視することをお勧めします。これにより、それらをGitリポジトリにコミットすることを避けることができます。
+
+そのためには、`.gitignore`ファイルに以下の指示を追加してください：
+
+```bash
+# 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)を使用してコンテンツを外部化したりすることもできます。

package/docs/ja/intlayer_with_astro_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Vanilla JS i18n - 2026年にAstro + Vanilla JSアプリケーションを翻訳する方法
-description: Intlayerを使用してAstro + Vanilla JSサイトに国際化（i18n）を追加する方法を学びます。このガイドに従って、サイトを多言語化しましょう。
+updatedAt: 2026-05-31
+title: "Astro + Vanilla JS i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）Astro + Vanilla JSアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -58,16 +58,37 @@ history:
 
 <TOC/>
 
-## Intlayerとは？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer**は、現代的なウェブアプリケーションでの多言語サポートを簡素化するために設計された、革新的でオープンソースの国際化 (i18n) ライブラリです。
+「astro-i18n」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayerを使用すると、以下のことが可能になります：
+**Astro を完全にカバー**
 
-- **翻訳の管理が容易**：コンポーネントレベルの宣言型辞書を使用します。
-- **動的なローカライズ**：メタデータ、ルート、コンテンツを動的にローカライズできます。
-- **TypeScriptのサポート**：自動生成された型により、オートコンプリートやエラー検出が向上します。
-- **高度な機能**：動的なロケール検出や切り替えなどの機能を利用できます。
+Intlayer は、**多言語ルーティング**、**サイトマップ**、および国際化 (i18n) の拡張に必要なすべての機能を提供することで、Astro と完全に連携するように最適化されています。
+
+**バンドルサイズ**
+
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
+
+**保守性**
+
+アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
+
+**AI エージェント**
+
+コンテンツを同じ場所に配置すると、大規模言語モデル (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) がさらにスムーズになります。
+
+**オートメーション**
+
+AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
+
+**パフォーマンス**
+
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
+
+**非開発によるスケーリング**
+
+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)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
 ---
 
@@ -75,7 +96,9 @@ Intlayerを使用すると、以下のことが可能になります：
 
 GitHubで[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-astro-template)を表示。
 
-### ステップ1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
 
@@ -112,7 +135,9 @@ bun x intlayer init
 - **vanilla-intlayer**
   IntlayerをVanilla JavaScript / TypeScriptアプリケーションと統合するパッケージ。UIフレームワークを使用せずに、Astroの `<script>` タグの任意の部分が言語変更に応答できるように、pub/subシングルトン (`IntlayerClient`) とコールバックベースのヘルパー (`useIntlayer`、`useLocale` など) を提供します。
 
-### ステップ2: プロジェクトの設定
+</Step>
+
+<Step number={2} title="プロジェクトの設定">
 
 アプリケーションの言語を設定するための設定ファイルを作成します：
 
@@ -136,7 +161,9 @@ export default config;
 
 > この設定ファイルを使用して、ローカライズされたURL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの全リストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-### ステップ3: Astro設定へのIntlayerの統合
+</Step>
+
+<Step number={3} title="Astro設定へのIntlayerの統合">
 
 Astroの設定にintlayerプラグインを追加します。Vanilla JSの場合、追加のUIフレームワーク統合は必要ありません。
 
@@ -154,7 +181,9 @@ export default defineConfig({
 
 > Astro統合プラグイン `intlayer()` は、IntlayerをAstroと統合するために使用されます。コンテンツ宣言ファイルの構築を確実にし、開発モードで監視します。Astroアプリケーション内でIntlayerの環境変数を定義し、パフォーマンス最適化のためのエイリアスを提供します。
 
-### ステップ4: コンテンツの宣言
+</Step>
+
+<Step number={4} title="コンテンツの宣言">
 
 翻訳を保存するためのコンテンツ宣言を作成・管理します：
 
@@ -192,7 +221,9 @@ export default appContent;
 
 > 詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。
 
-### ステップ5: Astroでのコンテンツの使用
+</Step>
+
+<Step number={5} title="Astroでのコンテンツの使用">
 
 Vanilla JSの場合、初期のサーバーサイドレンダリングには `.astro` ファイル内で `getIntlayer` を使用してすべてのレンダリングが行われます。その後、`<script>` ブロックがクライアントサイドで `vanilla-intlayer` を初期化し、言語の切り替えを処理します。
 
@@ -301,7 +332,9 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 > - **`prefix-all`:** すべてのURLに言語プレフィックスが付きます。ルートを個別に処理する必要がない場合は、標準の `[locale]` を使用できます。
 > - **`search-param` または `no-prefix`:** ロケールフォルダは不要です。ロケールは検索パラメータまたはクッキーを通じて処理されます。
 
-### ステップ6: 言語切り替え機能の追加
+</Step>
+
+<Step number={6} title="言語切り替え機能の追加">
 
 AstroでのVanilla JSの場合、言語切り替えは通常のリンクとしてサーバーサイドでレンダリングされ、クライアントサイドで `<script>` ブロックを通じてハイドレーションされます。ユーザーが言語リンクをクリックすると、`vanilla-intlayer` がローカライズされたURLに移動する前に `setLocale` を通じて言語クッキーを設定します。
 
@@ -342,7 +375,9 @@ AstroでのVanilla JSの場合、言語切り替えは通常のリンクとし
 > **プログレッシブエンハンスメントに関する注意:**
 > 言語切り替えリンクは、JavaScriptがなくても標準の `<a>` タグとして機能します。JSが利用可能な場合、`setLocale` の呼び出しが移動前にクッキーを更新するため、ミドルウェアが正しいリダイレクトを実行できます。
 
-### ステップ7: サイトマップとRobots.txt
+</Step>
+
+<Step number={7} title="サイトマップとRobots.txt">
 
 Intlayerは、動的にローカライズされたサイトマップとrobots.txtファイルを生成するためのユーティリティを提供します。
 
@@ -402,55 +437,9 @@ export const GET: APIRoute = ({ site }) => {
 };
 ```
 
-### TypeScriptの設定
-
-Intlayerはモジュール拡張を使用してTypeScriptの利点を活かし、コードベースをより堅牢にします。
-
-![オートコンプリート](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![翻訳エラー](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-TypeScriptの設定に自動生成された型が含まれていることを確認してください。
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 既存のTypeScript設定
-  include: [
-    // ... 既存のTypeScript設定
-    ".intlayer/**/*.ts", // 自動生成された型を含める
-  ],
-}
-```
-
-### Gitの設定
-
-Intlayerによって生成されたファイルを無視することをお勧めします。これにより、それらをGitリポジトリにコミットすることを避けることができます。
-
-そのためには、`.gitignore`ファイルに以下の指示を追加してください：
-
-```bash
-# 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)を参照してください。
-
----
+</Step>
 
-### (Optional) Step 15: Extract the content of your components
+<Step number={15} title="Extract the content of your components" isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -552,6 +541,58 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
+### TypeScriptの設定
+
+Intlayerはモジュール拡張を使用してTypeScriptの利点を活かし、コードベースをより堅牢にします。
+
+![オートコンプリート](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![翻訳エラー](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+TypeScriptの設定に自動生成された型が含まれていることを確認してください。
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 既存のTypeScript設定
+  include: [
+    // ... 既存のTypeScript設定
+    ".intlayer/**/*.ts", // 自動生成された型を含める
+  ],
+}
+```
+
+### Gitの設定
+
+Intlayerによって生成されたファイルを無視することをお勧めします。これにより、それらをGitリポジトリにコミットすることを避けることができます。
+
+そのためには、`.gitignore`ファイルに以下の指示を追加してください：
+
+```bash
+# 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)を使用してコンテンツを外部化したりすることもできます。