@intlayer/docs 5.7.2 → 5.7.4

package/docs/ja/dictionary/gender.md

@@ -0,0 +1,275 @@
+---
+createdAt: 2025-07-27
+updatedAt: 2025-07-27
+title: 性別に基づくコンテンツ
+description: Intlayerで性別に基づくコンテンツを使用して、性別に応じて動的にコンテンツを表示する方法を学びます。このドキュメントに従って、プロジェクトで性別特有のコンテンツを効率的に実装してください。
+keywords:
+  - 性別に基づくコンテンツ
+  - 動的レンダリング
+  - ドキュメント
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - gender
+---
+
+# 性別に基づくコンテンツ / Intlayerにおける性別
+
+## 性別の仕組み
+
+Intlayerでは、性別に基づくコンテンツは`gender`関数を通じて実現されます。この関数は特定の性別の値（'male'、'female'）を対応するコンテンツにマッピングします。この方法により、指定された性別に基づいて動的にコンテンツを選択することが可能です。React IntlayerやNext Intlayerと統合すると、実行時に提供された性別に応じて適切なコンテンツが自動的に選択されます。
+
+## 性別に基づくコンテンツの設定
+
+Intlayerプロジェクトで性別に基づくコンテンツを設定するには、性別特有の定義を含むコンテンツモジュールを作成します。以下に様々な形式の例を示します。
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { gender, type Dictionary } from "intlayer";
+
+const myGenderContent = {
+  key: "my_key",
+  content: {
+    myGender: gender({
+      male: "男性ユーザー向けのコンテンツ",
+      female: "女性ユーザー向けのコンテンツ",
+      fallback: "性別が指定されていない場合のコンテンツ", // オプション
+    }),
+  },
+} satisfies Dictionary;
+
+export default myGenderContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { gender } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const myGenderContent = {
+  key: "my_key",
+  content: {
+    myGender: gender({
+      male: "男性ユーザー向けのコンテンツ",
+      female: "女性ユーザー向けのコンテンツ",
+      fallback: "性別が指定されていない場合のコンテンツ", // オプション
+    }),
+  },
+};
+
+export default myGenderContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { gender } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const myGenderContent = {
+  key: "my_key",
+  content: {
+    myGender: gender({
+      male: "男性ユーザー向けのコンテンツ",
+      female: "女性ユーザー向けのコンテンツ",
+      fallback: "性別が指定されていない場合のコンテンツ", // オプション
+    }),
+  },
+};
+
+module.exports = myGenderContent;
+```
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "myGender": {
+      "nodeType": "gender",
+      "gender": {
+        "male": "男性ユーザー向けのコンテンツ",
+        "female": "女性ユーザー向けのコンテンツ",
+        "fallback": "性別が指定されていない場合のコンテンツ", // オプション
+      },
+    },
+  },
+}
+```
+
+> フォールバックが宣言されていない場合、性別が指定されていないか、定義された性別に一致しない場合は、最後に宣言されたキーがフォールバックとして使用されます。
+
+## React Intlayerでの性別ベースのコンテンツの使用
+
+Reactコンポーネント内で性別ベースのコンテンツを利用するには、`react-intlayer`パッケージから`useIntlayer`フックをインポートして使用します。このフックは指定されたキーのコンテンツを取得し、適切な出力を選択するために性別を渡すことができます。
+
+```tsx fileName="**/*.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const GenderComponent: FC = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>
+        {
+          /* 出力: 男性ユーザー向けのコンテンツ */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 女性ユーザー向けのコンテンツ */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 男性ユーザー向けのコンテンツ */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 女性ユーザー向けのコンテンツ */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 性別が指定されていない場合のコンテンツ */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 性別が指定されていない場合のコンテンツ */
+          myGender(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const GenderComponent = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>
+        {
+          /* 出力: 男性ユーザー向けのコンテンツ */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 女性ユーザー向けのコンテンツ */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 男性ユーザー向けのコンテンツ */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 女性ユーザー向けのコンテンツ */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 性別が指定されていない場合のコンテンツ */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 性別が指定されていない場合のコンテンツ */
+          myGender(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const GenderComponent = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>
+        {
+          /* 出力: 男性ユーザー向けのコンテンツ */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 女性ユーザー向けのコンテンツ */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 男性ユーザー向けのコンテンツ */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 女性ユーザー向けのコンテンツ */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 性別が指定されていない場合のコンテンツ */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* 出力: 性別が指定されていない場合のコンテンツ */
+          myGender(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+module.exports = GenderComponent;
+```
+
+## 追加リソース
+
+設定や使用方法の詳細については、以下のリソースを参照してください：
+
+- [Intlayer CLI ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_cli.md)
+- [React Intlayer ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_create_react_app.md)
+- [Next Intlayer ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_15.md)
+
+これらのリソースは、さまざまな環境やフレームワークにおけるIntlayerのセットアップと使用方法について、さらに詳しい情報を提供します。
+
+## ドキュメント履歴
+
+| バージョン | 日付       | 変更内容                     |
+| ---------- | ---------- | ---------------------------- |
+| 5.7.2      | 2025-07-27 | 性別に基づくコンテンツの導入 |

package/docs/ja/how_works_intlayer.md

@@ -93,7 +93,7 @@ Intlayerは、視覚的にコンテンツを編集できるビジュアルエデ
 
 - サーバーは、クライアントからのリクエストを受け取り、`dictionaries`やクライアント側でアクセス可能にするための設定など、アプリケーションのコンテンツを取得するシンプルなExpressアプリケーションです。
 - 一方、クライアントは視覚的なインターフェースを使ってコンテンツとやり取りするためのReactアプリケーションです。
-  `useIntlayer`を使ってコンテンツを呼び出し、エディタが有効になっている場合、文字列は自動的に`IntlayerNode`という名前のProxyオブジェクトでラップされます。このノードは、ビジュアルエディタのインターフェースを含むラップされたiframeと通信するために`window.sendMessage`を使用します。
+  `useIntlayer`を使ってコンテンツを呼び出し、エディタが有効になっている場合、文字列は自動的に`IntlayerNode`という名前のProxyオブジェクトでラップされます。このノードは、ビジュアルエディタのインターフェースを含むラップされたiframeと通信するために`window.postMessage`を使用します。
   エディタ側では、これらのメッセージを受信してコンテンツとの実際のインタラクションをシミュレートし、アプリケーションのコンテキスト内で直接テキストを編集できるようにします。
 
 ## アプリビルドの最適化

package/docs/ja/locale_mapper.md

@@ -0,0 +1,244 @@
+---
+createdAt: 2025-07-27
+updatedAt: 2025-07-27
+title: ロケールマッパー
+description: ロケールマッパーの動作方法を解説します。アプリケーションでロケールマッパーが使用する手順を確認しましょう。各パッケージの役割も説明します。
+keywords:
+  - ロケールマッパー
+  - はじめに
+  - Intlayer
+  - アプリケーション
+  - パッケージ
+slugs:
+  - doc
+  - locale-mapper
+---
+
+# ロケールマッパー
+
+ロケールマッパーは、Intlayerアプリケーションで国際化データを扱うための強力なユーティリティです。ロケール固有のデータを変換・整理するための3つの主要な関数、`localeMap`、`localeFlatMap`、`localeRecord`を提供します。
+
+## ロケールマッパーの仕組み
+
+ロケールマッパーは、ロケールに関する必要な情報をすべて含む`LocaleData`オブジェクトを操作します：
+
+```typescript
+type LocaleData = {
+  locale: LocalesValues; // 現在のロケールコード（例：'en', 'fr'）
+  defaultLocale: LocalesValues; // デフォルトのロケールコード
+  isDefault: boolean; // これはデフォルトのロケールかどうか
+  locales: LocalesValues[]; // 利用可能なすべてのロケールの配列
+  urlPrefix: string; // このロケールのURLプレフィックス（例：'/fr' または ''）
+};
+```
+
+マッパー関数は、設定内の各ロケールに対してこのデータを自動的に生成し、以下を考慮します：
+
+- 設定されたロケールリスト
+- デフォルトロケールの設定
+- デフォルトロケールがURLにプレフィックスされるかどうか
+
+## コア関数
+
+### `localeMap`
+
+マッパー関数を使って各ロケールを単一のオブジェクトに変換します。
+
+```typescript
+localeMap<T>(
+  mapper: (locale: LocaleData) => T,
+  locales?: LocalesValues[],
+  defaultLocale?: LocalesValues,
+  prefixDefault?: boolean
+): T[]
+```
+
+**例：ルートオブジェクトの作成**
+
+```typescript
+import { localeMap } from "intlayer";
+
+const routes = localeMap((localizedData) => ({
+  path: localizedData.urlPrefix,
+  name: localizedData.locale,
+  isDefault: localizedData.isDefault,
+  locales: localizedData.locales,
+  defaultLocale: localizedData.defaultLocale,
+}));
+
+// 結果:
+// [
+//   { path: '/', name: 'en', isDefault: true, locales: ['en', 'fr', 'es'], defaultLocale: 'en' },
+//   { path: '/fr', name: 'fr', isDefault: false, locales: ['en', 'fr', 'es'], defaultLocale: 'en' },
+//   { path: '/es', name: 'es', isDefault: false, locales: ['en', 'fr', 'es'], defaultLocale: 'en' }
+// ]
+```
+
+### `localeFlatMap`
+
+`localeMap`に似ていますが、マッパー関数がオブジェクトの配列を返し、それが単一の配列にフラット化されます。
+
+```typescript
+localeFlatMap<T>(
+  mapper: (locale: LocaleData) => T[],
+  locales?: LocalesValues[],
+  defaultLocale?: LocalesValues,
+  prefixDefault?: boolean
+): T[]
+```
+
+**例: ロケールごとに複数のルートを作成する**
+
+```typescript
+import { localeFlatMap } from "intlayer";
+
+const routes = localeFlatMap((localizedData) => [
+  {
+    path: localizedData.urlPrefix,
+    name: localizedData.locale,
+    isDefault: localizedData.isDefault,
+  },
+  {
+    path: `${localizedData.urlPrefix}/about`,
+    name: `${localizedData.locale}-about`,
+    isDefault: localizedData.isDefault,
+  },
+]);
+
+// 結果:
+// [
+//   { path: '/', name: 'en', isDefault: true },
+  { path: '/about', name: 'en-about', isDefault: true },
+  { path: '/fr', name: 'fr', isDefault: false },
+  { path: '/fr/about', name: 'fr-about', isDefault: false },
+  { path: '/es', name: 'es', isDefault: false },
+  { path: '/es/about', name: 'es-about', isDefault: false }
+]
+```
+
+### `localeRecord`
+
+各ロケールをキーとし、マッパー関数によって変換された値をマッピングするレコードオブジェクトを作成します。
+
+```typescript
+localeRecord<T>(
+  mapper: (locale: LocaleData) => T,
+  locales?: Locales[],
+  defaultLocale?: Locales,
+  prefixDefault?: boolean
+): Record<Locales, T>
+```
+
+**例: 翻訳ファイルの読み込み**
+
+```typescript
+import { localeRecord } from "intlayer";
+
+const translations = localeRecord(({ locale }) =>
+  require(`./translations/${locale}.json`)
+);
+
+// 結果:
+// {
+//   en: { welcome: 'Welcome', hello: 'Hello' },
+//   fr: { welcome: 'Bienvenue', hello: 'Bonjour' },
+//   es: { welcome: 'Bienvenido', hello: 'Hola' }
+// }
+```
+
+## ロケールマッパーの設定
+
+ロケールマッパーは自動的にあなたのIntlayer設定を使用しますが、パラメータを渡すことでデフォルト設定を上書きすることができます。
+
+### デフォルト設定の使用
+
+```typescript
+import { localeMap } from "intlayer";
+
+// intlayer.config.tsの設定を使用
+const routes = localeMap((data) => ({
+  path: data.urlPrefix,
+  locale: data.locale,
+}));
+```
+
+### 設定の上書き
+
+```typescript
+import { localeMap } from "intlayer";
+
+// ロケールとデフォルトロケールを上書き
+const customRoutes = localeMap(
+  (data) => ({ path: data.urlPrefix, locale: data.locale }),
+  ["en", "fr", "de"], // カスタムロケール
+  "en", // カスタムデフォルトロケール
+  true // URLにデフォルトロケールをプレフィックスする
+);
+```
+
+## 高度な使用例
+
+### ナビゲーションメニューの作成
+
+```typescript
+import { localeMap } from "intlayer";
+
+const navigationItems = localeMap((data) => ({
+  label: data.locale.toUpperCase(),
+  href: data.urlPrefix || "/",
+  isActive: data.isDefault,
+  flag: `/flags/${data.locale}.svg`, // 国旗のパス
+}));
+```
+
+### サイトマップデータの生成
+
+```typescript
+import { localeFlatMap } from "intlayer";
+
+const sitemapUrls = localeFlatMap((data) => [
+  {
+    url: `${data.urlPrefix}/`,
+    lastmod: new Date().toISOString(),
+    changefreq: "daily",
+    priority: data.isDefault ? 1.0 : 0.8,
+  },
+  {
+    url: `${data.urlPrefix}/about`,
+    lastmod: new Date().toISOString(),
+    changefreq: "monthly",
+    priority: data.isDefault ? 0.8 : 0.6,
+  },
+]);
+```
+
+### 動的翻訳の読み込み
+
+```typescript
+import { localeRecord } from "intlayer";
+
+const translationModules = localeRecord(({ locale }) => ({
+  messages: import(`./locales/${locale}/messages.json`), // メッセージのインポート
+  validation: import(`./locales/${locale}/validation.json`), // バリデーションメッセージのインポート
+  metadata: {
+    locale,
+    direction: ["ar", "he", "fa"].includes(locale) ? "rtl" : "ltr", // 右から左への言語かどうかの判定
+  },
+}));
+```
+
+## 設定との統合
+
+Locale MapperはIntlayerの設定とシームレスに統合されます：
+
+- **ロケール**: `configuration.internationalization.locales` を自動的に使用します
+- **デフォルトロケール**: `configuration.internationalization.defaultLocale` を使用します
+- **URLプレフィックス**: `configuration.middleware.prefixDefault` を尊重します
+
+これにより、アプリケーション全体で一貫性が保たれ、設定の重複が削減されます。
+
+## ドキュメント履歴
+
+| バージョン | 日付       | 変更内容                             |
+| ---------- | ---------- | ------------------------------------ |
+| 5.7.2      | 2025-07-27 | ロケールマッパーのドキュメントを追加 |