このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
Intlayer MCPサーバーを統合することで、ChatGPT、DeepSeek、Cursor、VSCodeなどから直接ドキュメントを取得できます。
MCPサーバーのドキュメントを表示このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
なぜIntlayerを検討すべきか?
Intlayerとは?
IntlayerはJavaScript開発者向けに特化して設計された国際化ライブラリです。コードのあらゆる場所でコンテンツの宣言を可能にします。多言語コンテンツの宣言を構造化された辞書に変換し、コードに簡単に統合できるようにします。TypeScriptを使用することで、Intlayerは開発をより強力かつ効率的にします。
なぜIntlayerは作られたのか?
Intlayerは、next-intl、react-i18next、react-intl、next-i18next、react-intl、およびvue-i18nなどの一般的なi18nライブラリすべてに共通する問題を解決するために作られました。
これらのすべてのソリューションは、コンテンツを一覧化し管理するために集中管理型のアプローチを採用しています。例えば:
コードをクリップボードにコピー
.├── locales│ ├── en.json│ ├── fr.json│ └── es.json├── i18n.ts└── src └── components └── MyComponent └── index.tsx
または、名前空間を使用した場合:
コードをクリップボードにコピー
.├── locales│ ├── en│ │ ├── footer.json│ │ └── navbar.json│ ├── fr│ │ ├── footer.json│ │ └── navbar.json│ └── es│ ├── footer.json│ └── navbar.json├── i18n.ts└── src └── components └── MyComponent └── index.tsx
このようなアーキテクチャは、開発プロセスを遅くし、コードベースの保守を複雑にするいくつかの理由があります:
新しいコンポーネントを作成するたびに、以下を行う必要があります:
- locales フォルダに新しいリソース/名前空間を作成する
- ページ内で新しい名前空間をインポートすることを忘れない
- コンテンツを翻訳する(多くの場合、AI提供者からのコピー&ペーストで手動で行われる)
コンポーネントに変更を加えるたびに、以下を行う必要があります:
- 関連するリソース/名前空間を検索する(コンポーネントから離れている)
- コンテンツを翻訳する
- すべてのロケールでコンテンツが最新であることを確認する
- 名前空間に未使用のキー/値が含まれていないことを検証する
- すべてのロケールでJSONファイルの構造が同じであることを保証する
プロフェッショナルなプロジェクトでは、これらのソリューションを使用する際に、コンテンツの翻訳管理を支援するためにローカリゼーションプラットフォームがよく利用されます。しかし、大規模なプロジェクトではこれがすぐにコスト高になることがあります。
この問題を解決するために、Intlayerはコンテンツをコンポーネント単位でスコープし、CSS(styled-components)、型定義、ドキュメント(storybook)、ユニットテスト(jest)と同様に、コンテンツをコンポーネントの近くに保持するアプローチを採用しています。
コードをクリップボードにコピー
.└── components └── MyComponent ├── index.content.ts ├── index.test.tsx ├── index.stories.tsx └── index.tsx
コードをクリップボードにコピー
import { t, type Dictionary } from "intlayer";const componentExampleContent = { key: "component-example", content: { myTranslatedContent: t({ en: "Hello World", es: "Hola Mundo", fr: "Bonjour le monde", }), },} satisfies Dictionary;export default componentExampleContent;
コードをクリップボードにコピー
import { useIntlayer } from "react-intlayer";export const ComponentExample = () => { const { myTranslatedContent } = useIntlayer("component-example"); return <span>{myTranslatedContent}</span>;};
このアプローチにより、以下が可能になります:
開発速度の向上
- .content.{{ts|mjs|cjs|json}} ファイルは VSCode の拡張機能を使って作成できます
- IDE のオートコンプリート AI ツール(GitHub Copilot など)がコンテンツの宣言を支援し、コピー&ペーストを減らせます
コードベースをクリーンにする
- 複雑さを減らす
- 保守性を高める
コンポーネントと関連コンテンツの複製をより簡単に行う(例:ログイン/登録コンポーネントなど)
- 他のコンポーネントのコンテンツに影響を与えるリスクを制限することで
- 外部依存なしにコンテンツを別のアプリケーションにコピー&ペーストできることで
未使用のコンポーネントの未使用キー/値でコードベースを汚染しない
- コンポーネントを使用しない場合、Intlayerはその関連コンテンツをインポートしません
- コンポーネントを削除すると、その関連コンテンツも同じフォルダーに存在するため、より簡単に削除を思い出せます
多言語コンテンツを宣言する際のAIエージェントの推論コストを削減
- AIエージェントはコンテンツを実装する場所を知るためにコードベース全体をスキャンする必要がありません
- IDEのオートコンプリートAIツール(例:GitHub Copilot)で簡単に翻訳が行えます
Intlayerの追加機能
機能 | 説明 |
---|---|
![]() | クロスフレームワーク対応 Intlayerは、Next.js、React、Vite、Vue.js、Nuxt、Preact、Expressなど、主要なフレームワークやライブラリすべてに対応しています。 |
![]() | JavaScriptによるコンテンツ管理 JavaScriptの柔軟性を活用して、コンテンツを効率的に定義・管理します。 - コンテンツ宣言 |
![]() | ロケール別コンテンツ宣言ファイル 自動生成の前に一度だけコンテンツを宣言することで、開発をスピードアップします。 - ロケール別コンテンツ宣言ファイル |
![]() | 型安全な環境 TypeScriptを活用して、コンテンツ定義やコードのエラーを防ぎ、IDEのオートコンプリート機能も利用できます。 - TypeScriptの設定 |
![]() | 簡素化されたセットアップ 最小限の設定で迅速に開始できます。国際化、ルーティング、AI、ビルド、コンテンツ処理の設定を簡単に調整可能です。 - Next.js統合を探る |
![]() | 簡素化されたコンテンツ取得 各コンテンツごとに t 関数を呼び出す必要はありません。単一のフックを使ってすべてのコンテンツを直接取得できます。 - React 統合 |
![]() | 一貫したサーバーコンポーネントの実装 Next.jsのサーバーコンポーネントに最適で、クライアントコンポーネントとサーバーコンポーネントの両方で同じ実装を使用できます。各サーバーコンポーネントに t 関数を渡す必要はありません。 - サーバーコンポーネント |
![]() | 整理されたコードベース コードベースをより整理された状態に保ちます:1つのコンポーネント = 同じフォルダ内の1つの辞書。翻訳をそれぞれのコンポーネントの近くに配置することで、保守性と明確さが向上します。 - Intlayerの仕組み |
![]() | 強化されたルーティング Next.js、React、Vite、Vue.jsなどの複雑なアプリケーション構造にシームレスに適応し、アプリのルーティングを完全にサポートします。 - Next.js統合を探る |
![]() | マークダウンサポート プライバシーポリシーやドキュメントなどの多言語コンテンツのために、ロケールファイルやリモートのMarkdownをインポートして解釈します。Markdownのメタデータを解釈し、コード内でアクセス可能にします。 - コンテンツファイル |
![]() | 無料のビジュアルエディター&CMS コンテンツライター向けに無料のビジュアルエディターとCMSが利用可能で、ローカリゼーションプラットフォームは不要です。Gitを使ってコンテンツを同期させるか、CMSで完全または部分的に外部化できます。 - Intlayerエディター - Intlayer CMS |
![]() | ツリーシェイカブルコンテンツ ツリーシェイカブルコンテンツにより、最終バンドルのサイズを削減します。コンポーネントごとにコンテンツを読み込み、未使用のコンテンツはバンドルから除外されます。遅延読み込みをサポートし、アプリの読み込み効率を向上させます。 - アプリビルドの最適化 |
![]() | 静的レンダリング 静的レンダリングを妨げません。 - Next.js 統合 |
![]() | AI搭載翻訳 Intlayerの高度なAI搭載翻訳ツールを使用し、ご自身のAIプロバイダー/APIキーを使って、ワンクリックでウェブサイトを231言語に変換します。 - CI/CD統合 - Intlayer CLI - 自動入力 |
![]() | MCPサーバー統合 IDEの自動化のためのMCP(モデルコンテキストプロトコル)サーバーを提供し、開発環境内でシームレスなコンテンツ管理とi18nワークフローを可能にします。 - MCPサーバー |
![]() | VSCode 拡張機能 Intlayer は、コンテンツや翻訳の管理、辞書の構築、コンテンツの翻訳などを支援する VSCode 拡張機能を提供します。 - VSCode 拡張機能 |
![]() | 相互運用性 react-i18next、next-i18next、next-intl、react-intlとの相互運用性を可能にします。 - Intlayer と react-intl - Intlayer と next-intl - Intlayer と next-i18next |
Intlayer と他のソリューションの比較
機能 | Intlayer | React-i18next / i18next | React-Intl (FormatJS) | LinguiJS | next-intl | next-i18next | vue-i18n |
---|---|---|---|---|---|---|---|
コンポーネント近くの翻訳 | はい、各コンポーネントに内容が共置されています | いいえ | いいえ | いいえ | いいえ | いいえ | はい - Single File Components(SFCs)を使用しています |
TypeScript 統合 | 高度で自動生成された厳密な型 | 基本的なもの;安全性のための追加設定が必要 | 良好だが厳密さはやや劣る | 型定義あり、設定が必要 | 良好 | 基本的 | 良好(型は利用可能;キーの安全性には設定が必要) |
翻訳漏れ検出 | ビルド時のエラー/警告 | 実行時にほとんどフォールバック文字列を使用 | フォールバック文字列 | 追加設定が必要 | 実行時フォールバック | 実行時フォールバック | 実行時フォールバック/警告(設定可能) |
リッチコンテンツ(JSX/Markdown/コンポーネント) | Reactノードも含めて直接サポート | 制限あり / 補間のみ | ICU構文、実際のJSXではない | 制限あり | リッチノード向けに設計されていない | 制限あり | 制限あり(コンポーネントは<i18n-t>経由、Markdownはプラグイン経由) |
AI搭載翻訳 | はい、複数のAIプロバイダーをサポートしています。ご自身のAPIキーを使用して利用可能です。アプリケーションとコンテンツの範囲のコンテキストを考慮します | いいえ | いいえ | いいえ | いいえ | いいえ | いいえ |
ビジュアルエディター | はい、ローカルビジュアルエディター+オプションのCMS;コードベースのコンテンツを外部化可能;埋め込み可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 |
ローカライズされたルーティング | 組み込み、ミドルウェアサポート | プラグインまたは手動設定 | 組み込みではない | プラグイン/手動設定 | 組み込み | 組み込み | Vue Router経由の手動設定(Nuxt i18nが対応) |
動的ルート生成 | はい | プラグイン/エコシステムまたは手動設定 | 提供されていません | プラグイン/手動 | はい | はい | 提供されていません(Nuxt i18nが提供) |
複数形処理 | 列挙ベースのパターン;ドキュメント参照 | 設定可能(i18next-icuのようなプラグイン) | 高度(ICU) | 高度(ICU/messageformat) | 良好 | 良好 | 高度(組み込みの複数形ルール) |
フォーマット(日時、数値、通貨) | 最適化されたフォーマッター(内部でIntlを使用) | プラグインまたはカスタムIntlの使用による | 高度なICUフォーマッター | ICU/CLIヘルパー | 良好(Intlヘルパー) | 良好(Intlヘルパー) | 組み込みの日付/数値フォーマッター(Intl) |
コンテンツ形式 | .tsx, .ts, .js, .json, .md, .txt | .json | .json, .js | .po, .json | .json, .js, .ts | .json | .json, .js |
ICUサポート | 作業中(ネイティブICU) | プラグイン経由(i18next-icu) | はい | はい | はい | プラグイン経由(i18next-icu) | カスタムフォーマッター/コンパイラー経由 |
SEOヘルパー(hreflang、サイトマップ) | 組み込みツール:サイトマップ、robots.txt、メタデータのヘルパー | コミュニティプラグイン/手動 | コアではない | コアではない | 良好 | 良好 | コアではない(Nuxt i18nがヘルパーを提供) |
エコシステム / コミュニティ | 小規模だが急速に成長し活発 | 最大かつ最も成熟している | 大規模、エンタープライズ向け | 成長中だが小規模 | 中規模、Next.jsに特化 | 中規模、Next.jsに特化 | Vueエコシステムで大規模 |
サーバーサイドレンダリングとサーバーコンポーネント | はい、SSR / Reactサーバーコンポーネント向けに最適化されています | サポートされていますが、いくつかの設定が必要です | Next.jsでサポートされています | サポートされています | 完全サポート | 完全サポート | Nuxt/Vue SSR経由のSSR(RSCはなし) |
ツリーシェイキング(使用されるコンテンツのみを読み込む) | はい、Babel/SWCプラグインを使用したビルド時のコンポーネント単位で対応 | 通常はすべて読み込む(名前空間やコード分割で改善可能) | 通常はすべて読み込む | デフォルトでは対応していない | 部分的に対応 | 部分的に対応 | 部分的に対応(コード分割や手動設定が必要) |
遅延読み込み | はい、ロケールごと/コンポーネントごとに対応 | はい(例:バックエンド/名前空間をオンデマンドで) | はい(ロケールバンドルを分割) | はい(動的カタログインポート) | はい(ルートごと/ロケールごと) | はい(ルートごと/ロケールごと) | はい(非同期ロケールメッセージ) |
大規模プロジェクトの管理 | モジュール化を推奨し、デザインシステムに適している | 適切なファイル管理が必要 | 中央カタログが大きくなる可能性がある | 複雑になる可能性がある | セットアップによるモジュール化 | セットアップによるモジュール化 | Vue Router/Nuxt i18n セットアップによるモジュール化 |
ドキュメント履歴
バージョン | 日付 | 変更内容 |
---|---|---|
5.8.0 | 2025-08-19 | 比較表の更新 |
5.5.10 | 2025-06-29 | 履歴の初期化 |