Creation:2024-08-11Last update:2025-06-29

    ドキュメント: intlayergetLocalizedUrl 関数

    説明

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


    パラメーター

    • url: string

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

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

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

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

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

    戻り値

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

    使用例

    相対 URL

    typescript
    import { getLocalizedUrl, Locales } from "intlayer";
    
    getLocalizedUrl(
      "/about",
      Locales.FRENCH,
      [Locales.ENGLISH, Locales.FRENCH],
      Locales.ENGLISH,
      false
    );
    
    // 出力: フランス語ロケールの場合 "/fr/about"
    // 出力: デフォルト(英語)ロケールの場合 "/about"

    絶対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にロケールセグメントが含まれていない場合、関数は適切なロケールを安全にプレフィックスします。
    • デフォルトロケール:

      • prefixDefaultfalse の場合、関数はデフォルトロケールのURLにプレフィックスを付けません。
    • サポートされていないロケール:

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

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

    多言語対応アプリケーションでは、localesdefaultLocale を使用して国際化設定を構成することが、正しい言語を表示するために非常に重要です。以下は、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;

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

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

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

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