@intlayer/docs 8.7.7 → 8.7.8-canary.0

package/docs/ja/intlayer_with_angular.md

@@ -14,6 +14,7 @@ slugs:
   - environment
   - angular
 applicationTemplate: https://github.com/aymericzip/intlayer-angular-template
+applicationShowcase: https://intlayer-angular-template.vercel.app
 history:
   - version: 8.0.0
     date: 2025-12-30
@@ -48,13 +49,24 @@ Intlayerを使用すると、以下のことが可能です：
   <Tab label="コード" value="code">
 
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-angular-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-angular-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-angular-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-angular-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
   </Tab>
 </Tabs>
 
@@ -102,7 +114,7 @@ bun x intlayer init
 
 アプリケーションの言語を構成するための設定ファイルを作成します：
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -120,44 +132,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // その他のロケール
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // その他のロケール
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 > この構成ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、[構成ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) を参照してください。
 
 ### ステップ 3: Angular構成へのIntlayerの統合
@@ -207,7 +181,7 @@ export default mergeConfig({});
 
 翻訳を保存するためのコンテンツ宣言を作成および管理します：
 
-```tsx fileName="src/app/app.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="src/app/app.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
 import { t, type Dictionary } from "intlayer";
 
 const appContent = {

package/docs/ja/intlayer_with_astro.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-03-07
 updatedAt: 2025-12-30
-title: Astro i18n - Astroアプリの翻訳方法 2026
-description: Intlayerを使用してAstroウェブサイトに国際化（i18n）を追加する方法を学びます。このガイドに従ってサイトを多言語対応にしましょう。
+title: Astro i18n - 2026年にAstroアプリケーションを翻訳する方法
+description: Intlayerを使用してAstroサイトに国際化（i18n）を追加する方法を学びます。このガイドに従って、サイトを多言語化しましょう。
 keywords:
   - 国際化
   - ドキュメント
@@ -16,61 +16,91 @@ slugs:
   - environment
   - astro
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
+applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
   - version: 7.5.9
     date: 2025-12-30
-    changes: "initコマンドを追加"
+    changes: "initコマンドの追加"
   - version: 6.2.0
     date: 2025-10-03
-    changes: "Astro統合、設定、使用法のリフレッシュ"
+    changes: "Astro統合、設定、使用方法の更新"
 ---
 
-# IntlayerでAstroを翻訳する | 国際化（i18n）
+# Intlayerを使用したAstroサイトの翻訳 | 国際化 (i18n)
 
-GitHubの[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-astro-template)をご覧ください。
+<Tabs defaultTab="code">
+  <Tab label="コード" value="code">
+
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-astro-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-astro-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-astro-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
+## 目次
+
+<TOC/>
 
 ## Intlayerとは？
 
-**Intlayer**は、最新のウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。
+**Intlayer**は、現代的なウェブアプリケーションでの多言語サポートを簡素化するために設計された、革新的でオープンソースの国際化 (i18n) ライブラリです。
 
-Intlayerを使うと、以下が可能です：
+Intlayerを使用すると、以下のことが可能になります：
 
-- **コンポーネントレベルで宣言的な辞書を使用して翻訳を簡単に管理**できます。
-- **メタデータ、ルート、コンテンツを動的にローカライズ**できます。
-- **自動生成された型によりTypeScriptサポートを確保**し、オートコンプリートやエラー検出を向上させます。
-- **動的なロケール検出や切り替えなどの高度な機能**を活用できます。
+- **翻訳の管理が容易**：コンポーネントレベルの宣言型辞書を使用します。
+- **動的なローカライズ**：メタデータ、ルート、コンテンツを動的にローカライズできます。
+- **TypeScriptのサポート**：自動生成された型により、オートコンプリートやエラー検出が向上します。
+- **高度な機能**：動的なロケール検出や切り替えなどの機能を利用できます。
 
 ---
 
-## AstroでIntlayerをセットアップするステップバイステップガイド
+## AstroへのIntlayer設定ステップバイステップガイド
+
+GitHubで[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-astro-template)を表示。
 
-### ステップ1：依存関係のインストール
+### ステップ1: 依存関係のインストール
 
-パッケージマネージャーを使って必要なパッケージをインストールします：
+お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
 
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
-# Optional: add React island support
+# オプション: Reactアイランドのサポートを追加する場合
 npm install react react-dom react-intlayer @astrojs/react
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer
-# オプション: Reactアイランドサポートを追加
+# オプション: Reactアイランドのサポートを追加する場合
 pnpm add react react-dom react-intlayer @astrojs/react
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer astro-intlayer
-# オプション: Reactアイランドサポートを追加
+# オプション: Reactアイランドのサポートを追加する場合
 yarn add react react-dom react-intlayer @astrojs/react
 ```
 
-- **intlayer**  
+- **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)のための国際化ツールを提供するコアパッケージ。
 
-- **astro-intlayer**  
-  Astroとの統合プラグインを含み、Intlayerを[Viteバンドラー](https://vite.dev/guide/why.html#why-bundle-for-production)と連携させるほか、ユーザーの優先ロケールの検出、クッキー管理、URLリダイレクトの処理を行うミドルウェアも提供します。
+- **astro-intlayer**
+  Intlayerを[Viteバンドラー](https://vite.dev/guide/why.html#why-bundle-for-production)と統合するためのAstro統合プラグイン、およびユーザーの優先ロケールの検出、クッキーの管理、URLリダイレクトの処理を行うミドルウェアが含まれています。
 
 ### ステップ2: プロジェクトの設定
 
@@ -85,7 +115,7 @@ const config: IntlayerConfig = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // 他のロケールをここに追加
+      // その他のロケール
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -94,11 +124,11 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-> この設定ファイルを通じて、ローカライズされたURLの設定、ミドルウェアのリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子の指定、コンソールでのIntlayerログの無効化などを行うことができます。利用可能なパラメータの完全なリストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
+> この設定ファイルを使用して、ローカライズされたURL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの全リストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-### ステップ3: Astro設定にIntlayerを統合する
+### ステップ3: Astro設定へのIntlayerの統合
 
-intlayerプラグインを設定に追加します。
+Astroの設定にintlayerプラグインを追加します。
 
 ```typescript fileName="astro.config.ts"
 // @ts-check
@@ -112,11 +142,11 @@ export default defineConfig({
 });
 ```
 
-> `intlayer()` Astro統合プラグインは、IntlayerをAstroと統合するために使用されます。これは、コンテンツ宣言ファイルのビルドを確実に行い、開発モードでそれらを監視します。Astroアプリケーション内でIntlayerの環境変数を定義します。さらに、パフォーマンスを最適化するためのエイリアスも提供します。
+> Astro統合プラグイン `intlayer()` は、IntlayerをAstroと統合するために使用されます。コンテンツ宣言ファイルの構築を確実にし、開発モードで監視します。Astroアプリケーション内でIntlayerの環境変数を定義し、パフォーマンス最適化のためのエイリアスを提供します。
 
-### ステップ4: コンテンツを宣言する
+### ステップ4: コンテンツの宣言
 
-翻訳を格納するためのコンテンツ宣言を作成および管理します：
+翻訳を保存するためのコンテンツ宣言を作成・管理します：
 
 ```tsx fileName="src/app.content.tsx"
 import { t, type Dictionary } from "intlayer";
@@ -129,6 +159,7 @@ const appContent = {
       en: "Hello World",
       fr: "Bonjour le monde",
       es: "Hola mundo",
+      ja: "こんにちは世界",
     }),
   },
 } satisfies Dictionary;
@@ -136,13 +167,13 @@ const appContent = {
 export default appContent;
 ```
 
-> コンテンツ宣言は、`contentDir` ディレクトリ（デフォルトは `./src`）に含まれている限り、アプリケーションのどこにでも定義できます。また、コンテンツ宣言ファイルの拡張子（デフォルトは `.content.{json,ts,tsx,js,jsx,mjs,cjs}`）に一致している必要があります。
+> コンテンツ宣言は、`contentDir`（デフォルトは `./src`）に含まれ、コンテンツ宣言ファイルの拡張子（デフォルトは `.content.{json,ts,tsx,js,jsx,mjs,cjs}`）と一致していれば、アプリケーション内のどこにでも定義できます。
 
 > 詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。
 
-### ステップ 5: Astro でコンテンツを使用する
+### ステップ5: Astroでのコンテンツの使用
 
-`intlayer` からエクスポートされるコアヘルパーを使って、`.astro` ファイル内で辞書を直接利用できます。
+`intlayer`からエクスポートされたコアヘルパーを使用して、`.astro`ファイル内で直接辞書を消費できます。
 
 ```astro fileName="src/pages/index.astro"
 <!-- astro -->
@@ -153,7 +184,7 @@ import appContent from "../app.content";
 const { title } = getIntlayer('app');
 ---
 
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
@@ -167,7 +198,7 @@ const { title } = getIntlayer('app');
 
 ### ステップ6: ローカライズされたルーティング
 
-ローカライズされたページを提供するために、動的なルートセグメントを作成します。例えば `src/pages/[locale]/index.astro` のようにします。
+ローカライズされたページを提供するための動的なルートセグメントを作成します（例：`src/pages/[locale]/index.astro`）：
 
 ```astro fileName="src/pages/[locale]/index.astro"
 <!-- astro -->
@@ -180,11 +211,11 @@ const { title } = getIntlayer('app');
 <h1>{title}</h1>
 ```
 
-Astroの統合は、開発中にViteのミドルウェアを追加し、ロケール対応のルーティングや環境定義を支援します。独自のロジックや、`intlayer` の `getLocalizedUrl` のようなユーティリティ関数を使って、ロケール間のリンクを作成することも可能です。
+Astro統合により、開発中に言語認識ルーティングや環境定義を支援するViteミドルウェアが追加されます。独自のロジックや `intlayer` の `getLocalizedUrl` などのユーティリティを使用して、言語間のリンクを作成することもできます。
 
-### ステップ7: お気に入りのフレームワークを使い続ける
+### ステップ7: お好みのフレームワークの使用を続ける
 
-お気に入りのフレームワークを使い続けて、アプリケーションを構築してください。
+お好みのフレームワークを使用してアプリケーションを構築し続けましょう。
 
 - Intlayer + React: [Intlayer with React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+react.md)
 - Intlayer + Vue: [Intlayer with Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+vue.md)
@@ -194,11 +225,11 @@ Astroの統合は、開発中にViteのミドルウェアを追加し、ロケ
 
 ### TypeScriptの設定
 
-Intlayerはモジュール拡張を使用してTypeScriptの利点を活かし、コードベースをより強固にします。
+Intlayerはモジュール拡張（module augmentation）を使用してTypeScriptの利点を活かし、コードベースをより堅牢にします。
 
-![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+![オートコンプリート](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+![翻訳エラー](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 TypeScriptの設定に自動生成された型が含まれていることを確認してください。
 
@@ -212,36 +243,136 @@ TypeScriptの設定に自動生成された型が含まれていることを確
 }
 ```
 
-### Git設定
+### Gitの設定
 
-Intlayerによって生成されたファイルは無視することを推奨します。これにより、Gitリポジトリへのコミットを避けることができます。
+Intlayerによって生成されたファイルを無視することをお勧めします。これにより、それらをGitリポジトリにコミットすることを避けることができます。
 
-これを行うには、以下の指示を `.gitignore` ファイルに追加できます。
+そのためには、`.gitignore`ファイルに以下の指示を追加してください：
 
 ```bash
-#  Intlayer によって生成されたファイルを無視する
+# Intlayerによって生成されたファイルを無視
 .intlayer
 ```
 
-### VS Code 拡張機能
+### VS Code拡張機能
 
-Intlayer での開発体験を向上させるために、公式の **Intlayer VS Code 拡張機能** をインストールできます。
+Intlayerを使用した開発体験を向上させるために、**公式のIntlayer VS Code拡張機能**をインストールできます。
 
-[VS Code Marketplace からインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[VS Code Marketplaceからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
 この拡張機能は以下を提供します：
 
-- 翻訳キーの **オートコンプリート**。
-- 欠落している翻訳の **リアルタイムエラー検出**。
-- 翻訳されたコンテンツの **インラインプレビュー**。
-- 翻訳を簡単に作成・更新できる **クイックアクション**。
+- 翻訳キーの**オートコンプリート**。
+- 欠落している翻訳の**リアルタイムエラー検出**。
+- 翻訳されたコンテンツの**インラインプレビュー**。
+- 翻訳を簡単に作成・更新するための**クイックアクション**。
 
-拡張機能の使い方の詳細については、[Intlayer VS Code 拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。
+拡張機能の使用方法の詳細については、[Intlayer VS Code拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。
 
 ---
 
-### さらに進むために
+### (Optional) Step 15: Extract the content of your components
+
+If you have an existing codebase, transforming thousands of files can be time-consuming.
+
+To ease this process, Intlayer propose a [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/extract.md) to transform your components and extract the content.
+
+To set it up, you can add a `compiler` section in your `intlayer.config.ts` file:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... Rest of your config
+  compiler: {
+    /**
+     * Indicates if the compiler should be enabled.
+     */
+    enabled: true,
+
+    /**
+     * Defines the output files path
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Indicates if the components should be saved after being transformed.
+     *
+     * - If `true`, the compiler will rewrite the component file in the disk. So the transformation will be permanent, and the compiler will skip the transformation for the next process. That way, the compiler can transform the app, and then it can be removed.
+     *
+     * - If `false`, the compiler will inject the `useIntlayer()` function call into the code in the build output only, and keep the base codebase intact. The transformation will be done only in memory.
+     */
+    saveComponents: false,
+
+    /**
+     * Dictionary key prefix
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+<Tabs>
+ <Tab value='Extract command'>
+
+Run the extractor to transform your components and extract the content
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bun x intlayer extract
+```
+
+ </Tab>
+ <Tab value='Babel compiler'>
+
+Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Adds the compiler plugin
+  ],
+});
+```
+
+```bash packageManager="npm"
+npm run build # Or npm run dev
+```
 
-さらに進むためには、[ビジュアルエディター](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)を使ってコンテンツを外部化することができます。
+```bash packageManager="pnpm"
+pnpm run build # Or pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # Or yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Or bun run dev
+```
+
+ </Tab>
+</Tabs>
 
 ---
+
+### さらに詳しく
+
+さらに詳しく知りたい場合は、[ビジュアルエディター](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)を使用してコンテンツを外部化したりすることもできます。