著者:
    作成:2024-08-11最終更新:2025-06-29

    ドキュメント: intlayer の getLocalizedUrl 関数

    説明

    getLocalizedUrl 関数は、指定されたロケールを与えられた URL の前に付加することでローカライズされた URL を生成します。絶対 URL と相対 URL の両方を処理し、設定に基づいて正しいロケールのプレフィックスが適用されることを保証します。

    関数署名

    typescript
    getLocalizedUrl(  url: string,                   // 必須  currentLocale: Locales,        // 必須  options?: {                    // オプション    locales?: Locales[];    defaultLocale?: Locales;    mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params';  }): string

    パラメータ

    必須パラメータ

    • url: string

      • Description: ロケールをプレフィックスとして付与する元のURL文字列。
      • Type: string
      • Required: Yes

    • currentLocale: Locales

      • Description: URLがローカライズされている現在のロケール。
      • Type: Locales
      • Required: Yes

    パラメーター

    • url: string

      • 説明: ロケールのプレフィックスを付加する元の URL 文字列。
      • 型: string

    • currentLocale: Locales

      • 説明: URL をローカライズする対象の現在のロケール。
      • 型: Locales

    • locales: Locales[]

      • 説明: サポートされているロケールのオプション配列。デフォルトでは、プロジェクトで設定されたロケールが提供されます。
      • 型: Locales[]
      • デフォルト: プロジェクト設定

    • defaultLocale: Locales

      • 説明: アプリケーションのデフォルトロケール。デフォルトでは、プロジェクトで設定されたデフォルトロケールが提供されます。
      • 型: Locales
      • デフォルト: プロジェクト設定

    • prefixDefault: boolean

      • 説明: デフォルトロケールの URL にプレフィックスを付けるかどうか。デフォルトでは、プロジェクトで設定された値が提供されます。
      • 型: boolean
      • デフォルト: プロジェクト設定

    戻り値

    • 型: string
    • 説明: 指定されたロケールに対応するローカライズされた URL。

    使用例

    基本的な使用方法（必須パラメータのみ）

    プロジェクトを国際化設定で構成した後、必須パラメータだけで関数を使用できます:

    typescript
    import { getLocalizedUrl, Locales } from "intlayer";

// プロジェクトの設定（locales、defaultLocale、mode）を使用します
getLocalizedUrl("/about", Locales.FRENCH);
// 出力: "/fr/about" (フランス語がサポートされており、modeが'prefix-no-default'の場合)

getLocalizedUrl("/about", Locales.ENGLISH);
// 出力: "/about" または "/en/about" (modeの設定に応じて異なります)

    Advanced Usage (With Optional Parameters)

    オプションの options パラメーターを提供することで、デフォルト設定をオーバーライドできます:

    相対 URL

    typescript
    import { getLocalizedUrl, Locales } from "intlayer";

getLocalizedUrl(
  "/about",
  Locales.FRENCH,
  [Locales.ENGLISH, Locales.FRENCH],
  Locales.ENGLISH,
  false
);

// 出力: フランス語ロケールの場合 "/fr/about"
// 出力: デフォルト（英語）ロケールの場合 "/about"

    部分的な設定のオーバーライド

    オプションパラメータの一部のみを指定することもできます。指定しないパラメータについては、関数はプロジェクト設定を使用します:

    typescript
    import { getLocalizedUrl, Locales } from "intlayer";// localesのみをオーバーライドし、defaultLocaleとmodeはプロジェクト設定を使用getLocalizedUrl("/about", Locales.SPANISH, {  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],});// modeのみをオーバーライドし、localesとdefaultLocaleはプロジェクト設定を使用getLocalizedUrl("/about", Locales.ENGLISH, {  mode: "prefix-all", // デフォルトロケールを含むすべてのロケールにプリフィックスを強制});// 複数のオプションをオーバーライドgetLocalizedUrl("/about", Locales.FRENCH, {  defaultLocale: Locales.ENGLISH,  mode: "search-params", // クエリパラメータを使用: /about?locale=fr});

    絶対URL

    typescript
    getLocalizedUrl(  "https://example.com/about",  Locales.FRENCH, // 現在のロケール  [Locales.ENGLISH, Locales.FRENCH], // サポートされているロケール  Locales.ENGLISH, // デフォルトロケール  false // デフォルトロケールにプレフィックスを付けるかどうか); // フランス語の場合の出力: "https://example.com/fr/about"getLocalizedUrl(  "https://example.com/about",  Locales.ENGLISH, // 現在のロケール  [Locales.ENGLISH, Locales.FRENCH], // サポートされているロケール  Locales.ENGLISH, // デフォルトロケール  false // デフォルトロケールにプレフィックスを付けるかどうか); // 英語の場合の出力: "https://example.com/about"getLocalizedUrl(  "https://example.com/about",  Locales.ENGLISH, // 現在のロケール  [Locales.ENGLISH, Locales.FRENCH], // サポートされているロケール  Locales.ENGLISH, // デフォルトロケール  true // デフォルトロケールにプレフィックスを付けるかどうか); // 英語の場合の出力: "https://example.com/en/about"

    サポートされていないロケール

    typescript
    getLocalizedUrl(  "/about",  Locales.ITALIAN, // 現在のロケール  [Locales.ENGLISH, Locales.FRENCH], // サポートされているロケール  Locales.ENGLISH // デフォルトロケール); // 出力: "/about"（サポートされていないロケールにはプレフィックスが適用されません）

    エッジケース

    • ロケールセグメントがない場合:

      • URLにロケールセグメントが含まれていない場合、関数は適切なロケールを安全にプレフィックスします。

    • デフォルトロケール:

      • prefixDefault が false の場合、関数はデフォルトロケールのURLにプレフィックスを付けません。

    • サポートされていないロケール:

      • locales にリストされていないロケールには、関数はプレフィックスを適用しません。

    アプリケーションでの使用方法

    多言語対応アプリケーションでは、locales と defaultLocale を使用して国際化設定を構成することが、正しい言語を表示するために非常に重要です。以下は、getLocalizedUrl をアプリケーションのセットアップでどのように使用できるかの例です。

    tsx
    import { Locales, type IntlayerConfig } from "intlayer";

// サポートされているロケールとデフォルトロケールの設定
export default {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
} satisfies IntlayerConfig;

export default config;

    上記の設定により、アプリケーションは ENGLISH、FRENCH、SPANISH をサポート言語として認識し、フォールバック言語として ENGLISH を使用します。

    この設定を使用すると、getLocalizedUrl 関数はユーザーの言語設定に基づいて動的にローカライズされたURLを生成できます：

    typescript
    getLocalizedUrl("/about", Locales.FRENCH); // 出力: "/fr/about"getLocalizedUrl("/about", Locales.SPANISH); // 出力: "/es/about"getLocalizedUrl("/about", Locales.ENGLISH); // 出力: "/about"

    getLocalizedUrl を統合することで、開発者は複数言語にわたって一貫したURL構造を維持でき、ユーザー体験とSEOの両方を向上させることができます。

    getHTMLTextDir
    getLocalizedPath