@intlayer/docs 6.1.5 → 6.1.6

package/docs/ja/intlayer_with_astro.md

@@ -0,0 +1,246 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-10-03
+title: AstroでのIntlayer入門
+description: Intlayerを使用してViteとReactアプリケーションに国際化（i18n）を追加する方法を学びます。このガイドに従ってアプリを多言語対応にしましょう。
+keywords:
+  - 国際化
+  - ドキュメント
+  - Intlayer
+  - Vite
+  - React
+  - i18n
+  - JavaScript
+slugs:
+  - doc
+  - environment
+  - astro
+applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
+---
+
+# IntlayerとAstroで始める国際化（i18n）
+
+GitHubの[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-astro-template)をご覧ください。
+
+## Intlayerとは？
+
+**Intlayer**は、最新のウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。
+
+Intlayerを使うと、以下が可能です：
+
+- **コンポーネントレベルで宣言的な辞書を使用して翻訳を簡単に管理**できます。
+- **メタデータ、ルート、コンテンツを動的にローカライズ**できます。
+- **自動生成された型によりTypeScriptサポートを確保**し、オートコンプリートやエラー検出を向上させます。
+- **動的なロケール検出や切り替えなどの高度な機能**を活用できます。
+
+---
+
+## AstroでIntlayerをセットアップするステップバイステップガイド
+
+### ステップ1：依存関係のインストール
+
+パッケージマネージャーを使って必要なパッケージをインストールします：
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer
+# Optional: add React island support
+npm install react react-dom react-intlayer @astrojs/react
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer astro-intlayer
+# オプション: Reactアイランドサポートを追加
+pnpm add react react-dom react-intlayer @astrojs/react
+```
+
+```bash packageManager="yarn"
+yarn add intlayer astro-intlayer
+# オプション: Reactアイランドサポートを追加
+yarn add react react-dom react-intlayer @astrojs/react
+```
+
+- **intlayer**  
+  設定管理、翻訳、[コンテンツ宣言](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/get_started.md)、トランスパイル、および[CLIコマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_cli.md)のための国際化ツールを提供するコアパッケージ。
+
+- **astro-intlayer**  
+  Astroとの統合プラグインを含み、Intlayerを[Viteバンドラー](https://vite.dev/guide/why.html#why-bundle-for-production)と連携させるほか、ユーザーの優先ロケールの検出、クッキー管理、URLリダイレクトの処理を行うミドルウェアも提供します。
+
+### ステップ2: プロジェクトの設定
+
+アプリケーションの言語を設定するための設定ファイルを作成します：
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // 他のロケールをここに追加
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+> この設定ファイルを通じて、ローカライズされたURLの設定、ミドルウェアのリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子の指定、コンソールでのIntlayerログの無効化などを行うことができます。利用可能なパラメータの完全なリストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
+
+### ステップ3: Astro設定にIntlayerを統合する
+
+intlayerプラグインを設定に追加します。
+
+```typescript fileName="astro.config.ts"
+// @ts-check
+
+import { intlayer } from "astro-intlayer";
+import { defineConfig } from "astro/config";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [intlayer()],
+});
+```
+
+> `intlayer()` Astro統合プラグインは、IntlayerをAstroと統合するために使用されます。これは、コンテンツ宣言ファイルのビルドを確実に行い、開発モードでそれらを監視します。Astroアプリケーション内でIntlayerの環境変数を定義します。さらに、パフォーマンスを最適化するためのエイリアスも提供します。
+
+### ステップ4: コンテンツを宣言する
+
+翻訳を格納するためのコンテンツ宣言を作成および管理します：
+
+```tsx fileName="src/app.content.tsx"
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola mundo",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+> コンテンツ宣言は、`contentDir` ディレクトリ（デフォルトは `./src`）に含まれている限り、アプリケーションのどこにでも定義できます。また、コンテンツ宣言ファイルの拡張子（デフォルトは `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`）に一致している必要があります。
+
+> 詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/get_started.md)を参照してください。
+
+### ステップ 5: Astro でコンテンツを使用する
+
+`intlayer` からエクスポートされるコアヘルパーを使って、`.astro` ファイル内で辞書を直接利用できます。
+
+```astro fileName="src/pages/index.astro"
+<!-- astro -->
+---
+import { getIntlayer } from "intlayer";
+import appContent from "../app.content";
+
+const { title } = getIntlayer('app');
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <h1>{title}</h1>
+  </body>
+</html>
+```
+
+### ステップ6: ローカライズされたルーティング
+
+ローカライズされたページを提供するために、動的なルートセグメントを作成します。例えば `src/pages/[locale]/index.astro` のようにします。
+
+```astro fileName="src/pages/[locale]/index.astro"
+<!-- astro -->
+---
+import { getIntlayer } from "intlayer";
+
+const { title } = getIntlayer('app');
+---
+
+<h1>{title}</h1>
+```
+
+Astroの統合は、開発中にViteのミドルウェアを追加し、ロケール対応のルーティングや環境定義を支援します。独自のロジックや、`intlayer` の `getLocalizedUrl` のようなユーティリティ関数を使って、ロケール間のリンクを作成することも可能です。
+
+### ステップ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)
+- Intlayer + Svelte: [Intlayer with Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+svelte.md)
+- Intlayer + Solid: [Intlayer with Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+solid.md)
+- Intlayer + Preact: [Intlayer with Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+preact.md)
+
+### TypeScriptの設定
+
+Intlayerはモジュール拡張を使用してTypeScriptの利点を活かし、コードベースをより強固にします。
+
+![Autocompletion](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)
+
+TypeScriptの設定に自動生成された型が含まれていることを確認してください。
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 既存のTypeScript設定
+  "include": [
+    // ... 既存のTypeScript設定
+    ".intlayer/**/*.ts", // 自動生成された型を含める
+  ],
+}
+```
+
+### Git設定
+
+Intlayerによって生成されたファイルは無視することを推奨します。これにより、Gitリポジトリへのコミットを避けることができます。
+
+これを行うには、以下の指示を `.gitignore` ファイルに追加できます。
+
+```plaintext
+# 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)を使ってコンテンツを外部化することができます。
+
+---
+
+## ドキュメント履歴
+
+| バージョン | 日付       | 変更内容                              |
+| ---------- | ---------- | ------------------------------------- |
+| 6.2.0      | 2025-10-03 | Astro統合、設定、使用法のリフレッシュ |

package/docs/ja/intlayer_with_create_react_app.md

@@ -1174,9 +1174,10 @@ module.exports = App;
 
 Intlayerはモジュール拡張を使用してTypeScriptの利点を活用し、コードベースを強化します。
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](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)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
 自動生成された型を含めるようにTypeScriptの設定を確認してください。
 
 ```json5 fileName="tsconfig.json"

package/docs/ja/intlayer_with_express.md

@@ -367,9 +367,9 @@ module.exports = config;
 
 `express-intlayer` は、TypeScript の強力な機能を活用して国際化プロセスを強化します。TypeScript の静的型付けにより、すべての翻訳キーが網羅されていることが保証され、翻訳漏れのリスクを減らし、保守性を向上させます。
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 自動生成された型定義ファイル（デフォルトでは ./types/intlayer.d.ts）が tsconfig.json ファイルに含まれていることを確認してください。
 

package/docs/ja/intlayer_with_nestjs.md

@@ -219,9 +219,9 @@ export default config;
 
 `express-intlayer` は、国際化プロセスを強化するために TypeScript の強力な機能を活用しています。TypeScript の静的型付けにより、すべての翻訳キーが確実に管理され、翻訳漏れのリスクを減らし、保守性を向上させます。
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 自動生成される型定義ファイル（デフォルトでは ./types/intlayer.d.ts）が tsconfig.json ファイルに含まれていることを確認してください。
 

package/docs/ja/intlayer_with_nextjs_14.md

@@ -1445,9 +1445,9 @@ yarn add @intlayer/swc --save-dev
 
 Intlayerはモジュール拡張を使用して、TypeScriptの利点を活かし、コードベースをより強固にします。
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 TypeScriptの設定に自動生成された型が含まれていることを確認してください。
 

package/docs/ja/intlayer_with_nextjs_15.md

@@ -1483,9 +1483,9 @@ yarn add @intlayer/swc --save-dev
 
 Intlayer はモジュール拡張を使用して TypeScript の利点を活かし、コードベースをより強固にします。
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 TypeScript の設定に自動生成された型を含めていることを確認してください。
 

package/docs/ja/intlayer_with_nextjs_page_router.md

@@ -1431,9 +1431,9 @@ yarn add @intlayer/swc --save-dev
 
 Intlayerはモジュール拡張を使用して、TypeScriptの利点を活かし、コードベースをより強固にします。
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 TypeScriptの設定に自動生成された型が含まれていることを確認してください。
 

package/docs/ja/intlayer_with_nuxt.md

@@ -749,9 +749,9 @@ module.exports = aboutMetaContent;
 
 Intlayerはモジュール拡張を使用してTypeScriptの利点を活かし、コードベースをより強固にします。
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 TypeScriptの設定に自動生成された型が含まれていることを確認してください。
 

package/docs/ja/intlayer_with_react_native+expo.md

@@ -149,43 +149,41 @@ module.exports = (async () => {
 
 ## ステップ4: Intlayerプロバイダーを追加する
 
-アプリケーション全体でユーザーの言語を同期させるために、ルートコンポーネントを `react-intlayer` からの `IntlayerProvider` コンポーネントでラップする必要があります。
+アプリケーション全体でユーザーの言語を同期させるには、ルートコンポーネントを `react-intlayer-native` の `IntlayerProvider` コンポーネントでラップする必要があります。
 
-また、Intlayer が正しく動作するように、`index.js` ファイルに `intlayerPolyfill` 関数を追加する必要があります。
+> `react-intlayer` の代わりに `react-native-intlayer` のプロバイダーを使用してください。`react-native-intlayer` のエクスポートには Web API のポリフィルが含まれています。
 
 ```tsx fileName="app/_layout.tsx" codeFormat="typescript"
 import { Stack } from "expo-router";
 import { getLocales } from "expo-localization";
-import { IntlayerProviderContent } from "react-intlayer";
-import { intlayerPolyfill } from "react-native-intlayer";
+import { IntlayerProvider } from "react-native-intlayer";
 import { type FC } from "react";
 
-intlayerPolyfill();
+
 
 const getDeviceLocale = () => getLocales()[0]?.languageTag;
 
 const RootLayout: FC = () => {
   return (
-    <IntlayerProviderContent defaultLocale={getDeviceLocale()}>
+    <IntlayerProvider defaultLocale={getDeviceLocale()}>
       <Stack>
 tsx fileName="app/_layout.tsx" codeFormat="typescript"
 import { Stack } from "expo-router";
 import { getLocales } from "expo-localization";
-import { IntlayerProviderContent } from "react-intlayer";
-import { intlayerPolyfill } from "react-native-intlayer";
+import { IntlayerProvider } from "react-native-intlayer";
 import { type FC } from "react";
 
-intlayerPolyfill();
+
 
 const getDeviceLocale = () => getLocales()[0]?.languageTag;
 
 const RootLayout: FC = () => {
   return (
-    <IntlayerProviderContent defaultLocale={getDeviceLocale()}>
+    <IntlayerProvider defaultLocale={getDeviceLocale()}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       </Stack>
-    </IntlayerProviderContent>
+    </IntlayerProvider>
   );
 };
 
@@ -195,20 +193,17 @@ export default RootLayout;
 ```jsx fileName="app/_layout.mjx" codeFormat="esm"
 import { Stack } from "expo-router";
 import { getLocales } from "expo-localization";
-import { IntlayerProviderContent } from "react-intlayer";
-import { intlayerPolyfill } from "react-native-intlayer";
-
-intlayerPolyfill();
+import { IntlayerProvider } from "react-native-intlayer";
 
 const getDeviceLocale = () => getLocales()[0]?.languageTag;
 
 const RootLayout = () => {
   return (
-    <IntlayerProviderContent defaultLocale={getDeviceLocale()}>
+    <IntlayerProvider defaultLocale={getDeviceLocale()}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       </Stack>
-    </IntlayerProviderContent>
+    </IntlayerProvider>
   );
 };
 
@@ -218,20 +213,17 @@ export default RootLayout;
 ```jsx fileName="app/_layout.cjx" codeFormat="commonjs"
 const { Stack } = require("expo-router");
 const { getLocales } = require("expo-localization");
-const { IntlayerProviderContent } = require("react-intlayer");
-const { intlayerPolyfill } = require("react-native-intlayer");
-
-intlayerPolyfill();
+const { IntlayerProvider } = require("react-native-intlayer");
 
 const getDeviceLocale = () => getLocales()[0]?.languageTag;
 
 const RootLayout = () => {
   return (
-    <IntlayerProviderContent defaultLocale={getDeviceLocale()}>
+    <IntlayerProvider defaultLocale={getDeviceLocale()}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       </Stack>
-    </IntlayerProviderContent>
+    </IntlayerProvider>
   );
 };
 
@@ -243,20 +235,17 @@ module.exports = RootLayout;
 ```jsx fileName="app/_layout.cjx" codeFormat="commonjs"
 const { Stack } = require("expo-router");
 const { getLocales } = require("expo-localization");
-const { IntlayerProviderContent } = require("react-intlayer");
-const { intlayerPolyfill } = require("react-native-intlayer");
-
-intlayerPolyfill();
+const { IntlayerProvider } = require("react-native-intlayer");
 
 const getDeviceLocale = () => getLocales()[0]?.languageTag;
 
 const RootLayout = () => {
   return (
-    <IntlayerProviderContent defaultLocale={getDeviceLocale()}>
+    <IntlayerProvider defaultLocale={getDeviceLocale()}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       </Stack>
-    </IntlayerProviderContent>
+    </IntlayerProvider>
   );
 };