翻訳

    翻訳の定義

    intlayert 関数は、複数の言語でコンテンツを宣言することを可能にします。この関数は型安全性を確保し、欠落している翻訳がある場合にはエラーを発生させます。この機能は特に TypeScript 環境で便利です。

    TypeScript の使用

    以下は、翻訳付きのコンテンツを宣言する方法の例です。

    **/*.content.ts
    import { t, type DeclarationContent } from "intlayer";interface Content {  welcomeMessage: string;}export default {  key: "multi_lang",  content: {    welcomeMessage: t({      en: "Welcome to our application",      fr: "Bienvenue dans notre application",      es: "Bienvenido a nuestra aplicación",      ja: "私たちのアプリケーションへようこそ",    }),  },} satisfies DeclarationContent<Content>;

    ロケールの設定

    適切な翻訳処理を確保するために、intlayer.config.tsで受け入れられるロケールを設定できます。この設定により、アプリケーションがサポートする言語を定義できます。

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      Locales.JAPANESE,    ],  },};export default config;

    React コンポーネントでの翻訳の使用

    react-intlayerを使用すると、React コンポーネントで翻訳を使用できます。以下はその例です。

    **/*.tsx
    import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => {  const content = useIntlayer("multi_lang");  return (    <div>      <p>{content.welcomeMessage}</p>    </div>  );};export default MyComponent;

    このコンポーネントは、アプリケーション内の現在のロケールに基づいた対応する翻訳を取得します。

    カスタムコンテンツオブジェクト

    intlayerは翻訳のためにカスタムコンテンツオブジェクトをサポートしており、型安全性を確保しながらより複雑な構造を定義できます。以下はカスタムオブジェクトを使用した例です。

    **/*.content.ts
    import { t, type DeclarationContent } from "intlayer";interface ICustomContent {  title: string;  content: string;}const customContent = {  key: "custom_content",  content: {    profileText: t<ICustomContent>({      en: {        title: "Page Title",        content: "Page Content",      },      fr: {        title: "Titre de la Page",        content: "Contenu de la Page",      },      es: {        title: "Título de la Página",        content: "Contenido de la Página",      },      ja: {        title: "ページタイトル",        content: "ページ内容",      },    }),  },} satisfies DeclarationContent;export default customContent;

    このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

    ドキュメントへのGitHubリンク