翻訳
翻訳の定義
intlayer の t 関数は、複数の言語でコンテンツを宣言することを可能にします。この関数は型安全性を確保し、欠落している翻訳がある場合にはエラーを発生させます。この機能は特に 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リンク