Intlayerの今後のリリースに関する通知を受け取る
    作成:2024-08-11最終更新: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の両方を向上させることができます。

    ドキュメント履歴

    • 5.5.10 - 2025-06-29: 履歴初期化
    Intlayerの今後のリリースに関する通知を受け取る