Intlayerの今後のリリースに関する通知を受け取る
    作成:2024-08-14最終更新:2025-08-20

    なぜIntlayerを検討すべきか?

    Intlayerとは?

    IntlayerはJavaScript開発者向けに特化して設計された国際化ライブラリです。コードのあらゆる場所でコンテンツの宣言を可能にします。多言語コンテンツの宣言を構造化された辞書に変換し、コードに簡単に統合できるようにします。TypeScriptを使用することで、Intlayerは開発をより強力かつ効率的にします。

    なぜIntlayerは作られたのか?

    Intlayerは、next-intlreact-i18nextreact-intlnext-i18nextreact-intl、およびvue-i18nなどの一般的なi18nライブラリすべてに共通する問題を解決するために作られました。

    これらのすべてのソリューションは、コンテンツを一覧化し管理するために集中管理型のアプローチを採用しています。例えば:

    bash
    .├── locales│   ├── en.json│   ├── fr.json│   └── es.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

    または、名前空間を使用した場合:

    bash
    .├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

    このようなアーキテクチャは、開発プロセスを遅くし、コードベースの保守を複雑にするいくつかの理由があります:

    1. 新しいコンポーネントを作成するたびに、以下を行う必要があります:

      • locales フォルダに新しいリソース/名前空間を作成する
      • ページ内で新しい名前空間をインポートすることを忘れない
      • コンテンツを翻訳する(多くの場合、AI提供者からのコピー&ペーストで手動で行われる)
    2. コンポーネントに変更を加えるたびに、以下を行う必要があります:

      • 関連するリソース/名前空間を検索する(コンポーネントから離れている)
      • コンテンツを翻訳する
      • すべてのロケールでコンテンツが最新であることを確認する
      • 名前空間に未使用のキー/値が含まれていないことを検証する
      • すべてのロケールでJSONファイルの構造が同じであることを保証する

    プロフェッショナルなプロジェクトでは、これらのソリューションを使用する際に、コンテンツの翻訳管理を支援するためにローカリゼーションプラットフォームがよく利用されます。しかし、大規模なプロジェクトではこれがすぐにコスト高になることがあります。

    この問題を解決するために、Intlayerはコンテンツをコンポーネント単位でスコープし、CSS(styled-components)、型定義、ドキュメント(storybook)、ユニットテスト(jest)と同様に、コンテンツをコンポーネントの近くに保持するアプローチを採用しています。

    bash
    .└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx
    ./components/MyComponent/index.content.ts
    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;
    ./components/MyComponent/index.tsx
    import { useIntlayer } from "react-intlayer";export const ComponentExample = () => {  const { myTranslatedContent } = useIntlayer("component-example");  return <span>{myTranslatedContent}</span>;};

    このアプローチにより、以下が可能になります:

    1. 開発速度の向上

      • .content.{{ts|mjs|cjs|json}} ファイルは VSCode の拡張機能を使って作成できます
      • IDE のオートコンプリート AI ツール(GitHub Copilot など)がコンテンツの宣言を支援し、コピー&ペーストを減らせます
    2. コードベースをクリーンにする

      • 複雑さを減らす
      • 保守性を高める
    3. コンポーネントと関連コンテンツの複製をより簡単に行う(例:ログイン/登録コンポーネントなど)

      • 他のコンポーネントのコンテンツに影響を与えるリスクを制限することで
      • 外部依存なしにコンテンツを別のアプリケーションにコピー&ペーストできることで
    4. 未使用のコンポーネントの未使用キー/値でコードベースを汚染しない

      • コンポーネントを使用しない場合、Intlayerはその関連コンテンツをインポートしません
      • コンポーネントを削除すると、その関連コンテンツも同じフォルダーに存在するため、より簡単に削除を思い出せます
    5. 多言語コンテンツを宣言する際のAIエージェントの推論コストを削減

      • AIエージェントはコンテンツを実装する場所を知るためにコードベース全体をスキャンする必要がありません
      • IDEのオートコンプリートAIツール(例:GitHub Copilot)で簡単に翻訳が行えます

    Intlayerの追加機能

    機能 説明
    Feature クロスフレームワーク対応

    Intlayerは、Next.js、React、Vite、Vue.js、Nuxt、Preact、Expressなど、主要なフレームワークやライブラリすべてに対応しています。
    Feature JavaScriptによるコンテンツ管理

    JavaScriptの柔軟性を活用して、コンテンツを効率的に定義・管理します。

    - コンテンツ宣言
    Feature ロケール別コンテンツ宣言ファイル

    自動生成の前に一度だけコンテンツを宣言することで、開発をスピードアップします。

    - ロケール別コンテンツ宣言ファイル
    Feature 型安全な環境

    TypeScriptを活用して、コンテンツ定義やコードのエラーを防ぎ、IDEのオートコンプリート機能も利用できます。

    - TypeScriptの設定
    Feature 簡素化されたセットアップ

    最小限の設定で迅速に開始できます。国際化、ルーティング、AI、ビルド、コンテンツ処理の設定を簡単に調整可能です。

    - Next.js統合を探る
    Feature 簡素化されたコンテンツ取得

    各コンテンツごとに t 関数を呼び出す必要はありません。単一のフックを使ってすべてのコンテンツを直接取得できます。

    - React 統合
    Feature 一貫したサーバーコンポーネントの実装

    Next.jsのサーバーコンポーネントに最適で、クライアントコンポーネントとサーバーコンポーネントの両方で同じ実装を使用できます。各サーバーコンポーネントに t 関数を渡す必要はありません。

    - サーバーコンポーネント
    Feature 整理されたコードベース

    コードベースをより整理された状態に保ちます:1つのコンポーネント = 同じフォルダ内の1つの辞書。翻訳をそれぞれのコンポーネントの近くに配置することで、保守性と明確さが向上します。

    - Intlayerの仕組み
    Feature 強化されたルーティング

    Next.js、React、Vite、Vue.jsなどの複雑なアプリケーション構造にシームレスに適応し、アプリのルーティングを完全にサポートします。

    - Next.js統合を探る
    Feature マークダウンサポート

    プライバシーポリシーやドキュメントなどの多言語コンテンツのために、ロケールファイルやリモートのMarkdownをインポートして解釈します。Markdownのメタデータを解釈し、コード内でアクセス可能にします。

    - コンテンツファイル
    Feature 無料のビジュアルエディター&CMS

    コンテンツライター向けに無料のビジュアルエディターとCMSが利用可能で、ローカリゼーションプラットフォームは不要です。Gitを使ってコンテンツを同期させるか、CMSで完全または部分的に外部化できます。

    - Intlayerエディター
    - Intlayer CMS
    Feature ツリーシェイカブルコンテンツ

    ツリーシェイカブルコンテンツにより、最終バンドルのサイズを削減します。コンポーネントごとにコンテンツを読み込み、未使用のコンテンツはバンドルから除外されます。遅延読み込みをサポートし、アプリの読み込み効率を向上させます。

    - アプリビルドの最適化
    Feature 静的レンダリング

    静的レンダリングを妨げません。

    - Next.js 統合
    Feature AI搭載翻訳

    Intlayerの高度なAI搭載翻訳ツールを使用し、ご自身のAIプロバイダー/APIキーを使って、ワンクリックでウェブサイトを231言語に変換します。

    - CI/CD統合
    - Intlayer CLI
    - 自動入力
    Feature MCPサーバー統合

    IDEの自動化のためのMCP(モデルコンテキストプロトコル)サーバーを提供し、開発環境内でシームレスなコンテンツ管理とi18nワークフローを可能にします。

    - MCPサーバー
    Feature VSCode 拡張機能

    Intlayer は、コンテンツや翻訳の管理、辞書の構築、コンテンツの翻訳などを支援する VSCode 拡張機能を提供します。

    - VSCode 拡張機能
    Feature 相互運用性

    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 履歴の初期化
    Intlayerの今後のリリースに関する通知を受け取る