このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "履歴初期化"v5.5.102025/6/29
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
Intlayerにおける「ロケール別」コンテンツ宣言
Intlayerは多言語コンテンツを宣言するために2つの方法をサポートしています：
- すべての翻訳を含む単一ファイル
- ロケールごとに1ファイル（ロケール別フォーマット）
この柔軟性により、
- 他のi18nツールからの容易な移行
- 自動翻訳ワークフローのサポート
- 翻訳をロケール別のファイルに明確に整理
複数翻訳を含む単一ファイル
このフォーマットは以下に最適です：
- コード内での迅速な反復作業
- CMSとのシームレスな統合
これはほとんどのユースケースで推奨されるアプローチです。翻訳を一元化することで、反復作業やCMSとの統合が容易になります。
コードをクリップボードにコピー
import { t, type Dictionary } from "intlayer";
const helloWorldContent = {
key: "hello-world",
content: {
multilingualContent: t({
en: "Title of my component",
es: "Título de mi componente",
}),
},
} satisfies Dictionary;
export default helloWorldContent;推奨: このフォーマットは、Intlayerのビジュアルエディターを使用する場合や、コード内で直接翻訳を管理する場合に最適です。
ロケールごとのファイルのグローバル設定
intlayer.config.ts ファイルに以下を追加することで、ロケールごとのファイルのグローバル設定を構成できます。
コードをクリップボードにコピー
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { dictionary: { locale: Locales.ENGLISH, },};export default config;この設定を使用すると、すべてのロケールごとのファイルがデフォルトロケールを英語として生成されます。これには、extract コマンドを使用した .content ファイルの生成や、コンパイラも含まれます。（詳細については、Compiler または Extract を参照してください。）
ロケール別フォーマット
このフォーマットは以下の場合に便利です：
- 翻訳を独立してバージョン管理または上書きしたい場合。
- 機械翻訳や人力翻訳のワークフローを統合している場合。
また、localeフィールドを指定することで翻訳を個別のロケールファイルに分割することもできます：
コードをクリップボードにコピー
import { t, Locales, type Dictionary } from "intlayer";
const helloWorldContent = {
key: "hello-world",
locale: Locales.SPANISH, // 重要
content: { multilingualContent: "Título de mi componente" },
} satisfies Dictionary;
export default helloWorldContent;重要: locale フィールドが定義されていることを確認してください。これは Intlayer にファイルがどの言語を表しているかを伝えます。
注意: どちらの場合も、コンテンツ宣言ファイルは Intlayer に認識されるために*.content.{ts,tsx,js,jsx,mjs,cjs,json}という命名パターンに従う必要があります。.[locale]のサフィックスは任意で、命名規則としてのみ使用されます。
フォーマットの混在
同じコンテンツキーに対して、両方の宣言方法を組み合わせることができます。例えば：
- index.content.ts のようなファイルでベースコンテンツを静的に宣言する。
- index.fr.content.ts や index.content.json のような別ファイルで特定の翻訳を追加または上書きする。
このセットアップは特に以下の場合に便利です：
- 初期のコンテンツ構造をコード内で定義したい場合。
- 後からCMSや自動化ツールを使って翻訳を充実させたり完成させたりする予定がある場合。
コードをクリップボードにコピー
.└── Components └── MyComponent ├── index.content.ts ├── index.content.json └── index.ts例
多言語コンテンツ宣言ファイルの例：
コードをクリップボードにコピー
import { t, type Dictionary } from "intlayer";const helloWorldContent = { key: "hello-world", locale: Locales.ENGLISH, content: { multilingualContent: "私のコンポーネントのタイトル", projectName: "私のプロジェクト", },} satisfies Dictionary;export default helloWorldContent;コードをクリップボードにコピー
{ "$schema": "https://intlayer.org/schema.json", "key": "hello-world", "content": { "multilingualContent": { "nodeType": "translation", "translation": { "fr": "Titre de mon composant", "es": "Título de mi componente" } } }}Intlayerは多言語ファイルとロケール別ファイルを自動的にマージします。
コードをクリップボードにコピー
import { getIntlayer, Locales } from "intlayer";const intlayer = getIntlayer("hello-world"); // デフォルトのロケールはENGLISHなので、ENGLISHのコンテンツが返されますconsole.log(JSON.stringify(intlayer, null, 2));// 結果:// {// "multilingualContent": "Title of my component",// "projectName": "My project"// }const intlayer = getIntlayer("hello-world", Locales.SPANISH);console.log(JSON.stringify(intlayer, null, 2));// 結果:// {// "multilingualContent": "Título de mi componente",// "projectName": "My project"// }const intlayer = getIntlayer("hello-world", Locales.FRENCH);console.log(JSON.stringify(intlayer, null, 2));// 結果:// {// "multilingualContent": "Titre de mon composant",// "projectName": "My project"// }自動翻訳生成
intlayer CLI を使用して、お好みのサービスに基づいて不足している翻訳を自動的に補完します。