著者:
    Aymeric PINEAU
    作成:2025-08-23最終更新:2026-09-06

    Intlayer ドキュメント

    公式のIntlayerドキュメントへようこそ！ここでは、Next.js、React、Vite、Express、またはその他のJavaScript環境を使用しているかどうかにかかわらず、国際化（i18n）のすべてのニーズに合わせてIntlayerを統合、構成、およびマスターするために必要なすべてを見つけることができます。

    はじめに

    Intlayerとは何ですか？

    Intlayerは、JavaScript開発者向けに特別に設計された国際化ライブラリです。コード内のどこにでもコンテンツの宣言を行うことができます。多言語コンテンツの宣言を構造化された辞書に変換し、コードに簡単に統合できるようにします。TypeScriptを使用することで、Intlayerは開発をより堅牢かつ効率的にします。

    Intlayerには、コンテンツを簡単に編集および管理できるオプションのビジュアルエディタも用意されています。このエディタは、コンテンツ管理のためにビジュアルインターフェイスを好む開発者や、コードを気にせずにコンテンツを生成するチームに特に役立ちます。

    使用例

    bash
    .
└── Components
    └── MyComponent
        ├── index.content.ts
        └── index.tsx
    src/components/MyComponent/index.content.ts
    import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-key",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
      ja: "こんにちは世界",
    }),
  },
} satisfies Dictionary;

export default componentContent;
    src/components/MyComponent/index.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const MyComponent: FC = () => {
  const { myTranslatedContent } = useIntlayer("component-key");

  return <span>{myTranslatedContent}</span>;
};

    なぜ他の選択肢よりもIntlayerなのか？

    next-intlやi18nextのような主流のソリューションと比較して、Intlayerは以下のような統合された最適化機能を提供するソリューションです：

    巨大なJSONファイルをページに読み込む代わりに、必要なコンテンツのみを読み込みます。Intlayerはバンドルとページのサイズを最大50%削減するのに役立ちます。

    アプリケーションのコンテンツのスコープを限定することは、大規模なアプリケーションの保守を容易にします。コンテンツのコードベース全体を確認するという精神的負担なしに、単一の機能フォルダを複製または削除できます。さらに、Intlayerはコンテンツの正確性を確保するために完全に型付け（fully typed）されています。

    コンテンツを同一の場所に配置することは、大規模言語モデル（LLM）によって必要なコンテキストを減らします。Intlayerには、不足している翻訳をテストするためのCLI、LSP、MCP、およびagent skillsなどの一連のツールも付属しており、AIエージェント向けのデベロッパーエクスペリエンス（DX）をさらにスムーズにします。

    CI/CDパイプラインでの翻訳に、AIプロバイダーのコストでお好みのLLMを使用して自動化を利用できます。Intlayerはまた、コンテンツ抽出を自動化するためのコンパイラーや、バックグラウンドでの翻訳を支援するウェブプラットフォームを提供します。

    巨大なJSONファイルをコンポーネントに接続すると、パフォーマンスやリアクティビティの問題が発生する可能性があります。Intlayerはビルド時にコンテンツの読み込みを最適化します。

    Intlayerは単なるi18nソリューションではありません。セルフホスト可能なビジュアルエディターや完全なCMSを提供し、多言語コンテンツをリアルタイムで管理するのに役立ち、翻訳者、コピーライター、その他のチームメンバーとのコラボレーションをシームレスにします。コンテンツはローカルおよび/またはリモートに保存できます。

    主な機能

    Intlayerは、最新のWeb開発のニーズに合わせたさまざまな機能を提供しています。以下は主な機能であり、それぞれに詳細なドキュメントへのリンクがあります：

    • 国際化サポート: 国際化の組み込みサポートにより、アプリケーションのグローバルな展開を強化します。
    • ビジュアルエディタ: Intlayer用に設計されたエディタプラグインを使用して、開発ワークフローを改善します。ビジュアルエディタガイドを確認してください。
    • 構成の柔軟性: 構成ガイドで詳しく説明されている広範な構成オプションを使用して、セットアップをカスタマイズします。
    • 高度なCLIツール: Intlayerのコマンドラインインターフェースを使用して、プロジェクトを効率的に管理します。CLIツールドキュメントで機能を調べます。

    コアコンセプト

    辞書

    コードの近くに多言語コンテンツを整理し、すべてを一貫性があり保守可能に保ちます。

    • 始め方
      Intlayerでコンテンツを宣言するための基本を学びます。

    • 翻訳
      翻訳がアプリケーションでどのように生成、保存、利用されるかを理解します。

    • 列挙
      さまざまな言語で繰り返しまたは固定されたデータセットを簡単に管理します。

    • 条件
      Intlayerで条件論理を使用してダイナミックコンテンツを作成する方法を学びます。

    • 挿入 挿入プレースホルダーを使用して文字列に値を挿入する方法を発見します。

    • 関数フェッチ
      プロジェクトのワークフローに合わせて、カスタムロジックで動的にコンテンツをフェッチする方法を確認します。

    • Markdown
      IntlayerでMarkdownを使用してリッチコンテンツを作成する方法を学びます。

    • ファイル埋め込み
      コンテンツエディターで使用するために、Intlayerに外部ファイルを埋め込む方法を発見します。

    • ネスト
      Intlayerでコンテンツをネストして複雑な構造を作成する方法を理解します。

    環境と統合

    柔軟性を念頭に置いてIntlayerを構築し、人気のフレームワークやビルドツールでのシームレスな統合を提供しています：

    各統合ガイドには、サーバーサイドレンダリング、ダイナミックルーティング、またはクライアントサイドレンダリングなど、Intlayerの機能を使用するためのベストプラクティスが含まれており、高速でSEOフレンドリーかつスケーラビリティの高いアプリケーションを維持できます。

    貢献とフィードバック

    私たちはオープンソースとコミュニティ主導の開発の力を大切にしています。改善を提案したり、新しいガイドを追加したり、ドキュメントの問題を修正したりする場合は、GitHubリポジトリでPull Requestを送信するか、Issueを開いてください。

    アプリケーションをより速く、より効率的に翻訳する準備はできましたか？ 今すぐドキュメントにアクセスして、Intlayerの使用を開始してください。コンテンツを整理し、チームの生産性を向上させる堅牢で合理化された国際化アプローチを体験してください。

    よくある質問

    Intlayerは、JavaScriptおよびTypeScriptアプリケーション向けの国際化（i18n）ライブラリです。コンポーネントのコンテンツを.content.tsファイルでそのコンポーネントの隣に宣言すると、Intlayerはビルド時にそれらの宣言を型付き辞書にコンパイルし、コンポーネントはuseIntlayerなどのhookを通じてそれらを読み込みます。翻訳、複数形ルール、性別、Markdown、ロケール対応ルーティング、SEOメタデータ、AI支援翻訳、および非開発者向けのビジュアルエディタをカバーしています。

    名前空間ベースのセットアップよりもはるかに少なくなります。ページはレンダリングしないカタログをダウンロードしないためです。サーバーレンダリングされたマークアップはサーバー上でコンテンツを解決し、ビルド時コンパイラはuseIntlayer呼び出しをコンポーネントが使用する正確な辞書エントリに置き換えるため、未使用のキーと未使用の言語は削除されます。Dynamic dictionariesは残りをロケールごとに分割します。通常の代替案と比較すると、Intlayerはバンドルとページサイズを最大50%削減します。bundle optimizationとbenchmarkを参照してください。

    はい、2つのパスがあります。i18next migration guideまたはnext-intl migration guideを使用してコンテンツを段階的に移行できます。または、現在のAPIを完全に保つことができます。compat adaptersはi18next、react-i18next、next-intl、next-i18next、react-intl、use-intl、vue-i18n、Linguiと同じAPIを公開していますが、Intlayer辞書によって提供されるため、importは変わりますがコンポーネントコードは変わりません。

    はい。sync JSON pluginは/messages/{locale}/{namespace}.jsonファイルを信頼できるソースとして保持し、双方向でIntlayer辞書を生成します。sync PO pluginはgettextカタログに対して同じことを行い、per locale filesではロケールを1つのファイルにグループ化する代わりに言語ごとにコンテンツを分割できます。

    いいえ。npx intlayer extractを実行すると、Intlayerはソースファイルを読み込み、ユーザーに見える文字列を抽出し、各ファイルの隣に.contentファイルを書き込むため、文字列をカタログに1つずつコピーする代わりにdiffを確認できます。extract commandを参照してください。

    完全に自動化されたパイプラインの場合、Intlayer Compilerはビルド時にJSX、TSX、Vue、Svelteソースに対して同じことを行い、変更のたびに辞書を生成するため、手動で保守するキーはありません。静的分析によって動作するため、実行時にのみ存在する文字列は到達不可能なままであり、ユーザーに見える文字列をアプリケーションロジックから区別するためにいくつかのアノテーションが必要です。

    5つあり、すべてオプションです：

    • VS Code extension: useIntlayerキーからそれを宣言するコンテンツファイルにジャンプし、コンポーネントからコンテンツを抽出し、コマンドパレットまたは専用のIntlayerタブからビルド、fill、test、push、pullを実行します。
    • LSP server: LSPを話す任意のエディタで同じ認識を提供し、定義へのジャンプ、すべての参照を検索、翻訳値のホバープレビュー、キーとフィールドのオートコンプリート、キーがどこにも宣言されていない場合の警告があります。また、i18next、react-i18next、next-intl、use-intl呼び出しも解決し、移行中に役立ちます。
    • MCP server: IntlayerドキュメントとCLIをCursor、VS Code、Claude Desktop、Claude Code、ChatGPTに公開するため、アシスタントは推測する代わりに現在のドキュメントから回答でき、intlayer fillなどのコマンドを自分で実行できます。
    • Agent skills: intlayer-config、intlayer-cli、intlayer-contentなどの焦点を絞ったスキル、およびフレームワークごとに1つのスキルがあり、エージェントにルーティング設定とコンテンツノードタイプを教えます。
    • ESLint plugin: no-raw-textはハードコードされた文字列にフラグを立て、静的辞書キーと未使用コンテンツのさらなるルールがあります。
    なぜIntlayer？Intlayerの仕組み