このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
翻訳
翻訳の定義
intlayer の t 関数を使うと、複数言語でコンテンツを宣言できます。この関数は型安全性を保証し、翻訳が欠けている場合にエラーを発生させます。これは特に TypeScript 環境で役立ちます。
以下は翻訳付きのコンテンツを宣言する例です。
コードをクリップボードにコピー
import { t, type Dictionary } 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",
}),
},
} satisfies Dictionary<Content>;ロケールの設定
適切な翻訳処理を行うために、intlayer.config.tsで受け入れるロケールを設定できます。この設定により、アプリケーションがサポートする言語を定義できます。
コードをクリップボードにコピー
import { Locales, type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
internationalization: {
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
},
};
export default config;ロケールの設定
適切な翻訳処理を確実にするために、intlayer.config.tsで受け入れるロケールを設定できます。この設定により、アプリケーションがサポートする言語を定義できます。
コードをクリップボードにコピー
import { Locales, type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
internationalization: {
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
},
};
export default config;Reactコンポーネントでの翻訳の使用
react-intlayerを使用すると、Reactコンポーネント内で翻訳を利用できます。以下はその例です：
コードをクリップボードにコピー
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は、翻訳のためのカスタムコンテンツオブジェクトをサポートしており、より複雑な構造を定義しつつ型安全性を確保できます。以下はカスタムオブジェクトの例です：
このコンポーネントは、アプリケーションで設定された現在のロケールに基づいて対応する翻訳を取得します。
カスタムコンテンツオブジェクト
intlayer は、翻訳のためのカスタムコンテンツオブジェクトをサポートしており、より複雑な構造を定義しつつ型安全性を確保できます。以下はカスタムオブジェクトの例です：
コードをクリップボードにコピー
import { t, type Dictionary } 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",
},
}),
},
} satisfies Dictionary;
export default customContent;