なぜIntlayerを検討すべきなのか？

Intlayerとは？

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

なぜ他の選択肢ではなくIntlayerなのか？

next-intlやi18nextなどの主要なソリューションと比較して、Intlayerは以下のような統合された最適化を備えたソリューションです：

なぜIntlayerが作られたのか？

Intlayerは、next-intl、react-i18next、react-intl、next-i18next、vue-i18nなど、すべての一般的なi18nライブラリに影響を与える共通の課題を解決するために作成されました。

これらのソリューションはすべて、コンテンツをリスト化して管理するために中央集権的なアプローチを採用しています。例えば：

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

または、名前空間（namespaces）を使用する場合：

.
├── 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）でよく行うように、コンテンツのスコープをコンポーネントごとに限定し、コンテンツをコンポーネントの近くに維持するアプローチを採用しています。

.
└── 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>;
};

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

1. 開発スピードの向上

   • .content.{ts|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml}ファイルはVSCode拡張機能を使用して作成できます
   • IDEのAI補完ツール（GitHub Copilotなど）がコンテンツの宣言を支援し、コピー＆ペーストを削減します

2. コードベースのクリーンアップ

   • 複雑さを軽減
   • メンテナンス性を向上

3. コンポーネントとそれに関連するコンテンツの複製がより容易に（例：ログイン/登録コンポーネントなど）

   • 他のコンポーネントのコンテンツに影響を与えるリスクを限定
   • 外部依存関係なしに、あるアプリケーションから別のアプリケーションへコンテンツをコピー＆ペースト可能

4. 未使用のコンポーネント用コードベースに未使用のキー/値が残るのを防止

   • コンポーネントを使用しない場合、Intlayerは関連するコンテンツをインポートしません
   • コンポーネントを削除する場合、関連するコンテンツも同じフォルダに存在するため、削除し忘れが防げます

5. 多言語コンテンツを宣言するAIエージェントの推論コストを削減

   • AIエージェントはコンテンツをどこに実装すべきか知るためにコードベース全体をスキャンする必要がありません
   • IDEのAI補完ツール（GitHub Copilotなど）で簡単に翻訳を行えます

6. 読み込みパフォーマンスの最適化

   • コンポーネントが遅延読み込み（lazy-loaded）される場合、関連するコンテンツも同時に読み込まれます

Intlayerの追加機能

テーブルのすべての内容を表示

テーブルのすべての内容を表示

テーブルをモーダルで開き、すべてのデータを明確に表示

機能	説明
	クロスフレームワークサポート Intlayerは、Next.js、React、Vite、Vue.js、Nuxt、Preact、Expressなど、すべての主要なフレームワークやライブラリと互換性があります。
	JavaScriptによるコンテンツ管理 JavaScriptの柔軟性を活かして、コンテンツを効率的に定義および管理します。 - コンテンツ宣言
	コンパイラ Intlayerコンパイラは、コンポーネントからコンテンツを自動的に抽出し、辞書ファイルを生成します。 - コンパイラ
	ロケールごとのコンテンツ宣言ファイル 自動生成の前にコンテンツを一度宣言するだけで、開発速度を向上させます。 - ロケールごとのコンテンツ宣言ファイル
	型安全な環境 TypeScriptを活用して、コンテンツ定義とコードにエラーがないことを保証し、IDEの自動補完も享受できます。 - TypeScript設定
	シンプルなセットアップ 最小限の設定で迅速に稼働させることができます。国際化、ルーティング、AI、ビルド、コンテンツ処理の設定を簡単に調整できます。 - Next.js統合の探索
	シンプルなコンテンツ取得 コンテンツの各部分でt関数を呼び出す必要はありません。単一のフックを使用して、すべてのコンテンツを直接取得できます。 - React統合
	一貫したサーバーコンポーネントの実装 Next.jsサーバーコンポーネントに最適で、クライアントコンポーネントとサーバーコンポーネントの両方で同じ実装を使用でき、各サーバーコンポーネントでt関数を渡す必要はありません。 - サーバーコンポーネント
	整理されたコードベース コードベースを整理された状態に保ちます：同じフォルダ内に1コンポーネント＝1辞書。それぞれのコンポーネントの近くに翻訳を配置することで、メンテナンス性と明瞭性が向上します。 - Intlayerの仕組み
	強化されたルーティング アプリルーティングの完全なサポート。Next.js、React、Vite、Vue.jsなどの複雑なアプリケーション構造にシームレスに適応します。 - Next.js統合の探索
	Markdownサポート プライバシーポリシーやドキュメントなどの多言語コンテンツのために、ローカルファイルやリモートのMarkdownをインポートして解釈します。コード内でMarkdownメタデータを解釈し、アクセス可能にします。 - コンテンツファイル
	無料のビジュアルエディタとCMS コンテンツライター向けに無料のビジュアルエディタとCMSが利用可能で、ローカリゼーションプラットフォームの必要性を排除します。Gitを使用してコンテンツを同期させるか、CMSで部分的または完全に外部管理します。 - Intlayerエディタ - Intlayer CMS
	Tree-shakableコンテンツ 最終バンドルのサイズを削減するTree-shakableコンテンツ。コンポーネントごとにコンテンツを読み込み、未使用のコンテンツをバンドルから除外します。アプリの読み込み効率を高めるための遅延読み込み（lazy loading）をサポートします。 - アプリビルドの最適化
	静的レンダリング 静的レンダリングをブロックしません。 - Next.js統合
	AI支援の翻訳 独自のAIプロバイダー/APIキーを使用し、Intlayerの高度なAI翻訳ツールを使用してワンクリックでウェブサイトを231言語に翻訳します。 - CI/CD統合 - Intlayer CLI - 自動入力
	MCPサーバー統合 IDE自動化のためのMCP（Model Context Protocol）サーバーを提供し、開発環境内で直接シームレスなコンテンツ管理とi18nワークフローを可能にします。 - MCPサーバー
	VSCode拡張機能 Intlayerは、コンテンツや翻訳の管理、辞書の作成、コンテンツの翻訳などを支援するVSCode拡張機能を提供します。 - VSCode拡張機能
	相互運用性 react-i18next、next-i18next、next-intl、およびreact-intlとの相互運用を可能にします。 - Intlayerとreact-intl - Intlayerとnext-intl - Intlayerとnext-i18next - Intlayer の互換アダプター
翻訳漏れのテスト（CLI/CI）	✅ CLI: npx intlayer content test（CIフレンドリーな監査）

Intlayerと他のソリューションの比較

GitHubスター数

GitHubスター数は、プロジェクトの知名度、コミュニティからの信頼、長期的な関連性を示す強い指標です。技術的な品質を直接測定するものではありませんが、プロジェクトが有用であると感じ、その進捗を追いかけ、採用する可能性が高い開発者がどれだけいるかを反映しています。プロジェクトの価値を評価する際、スター数は選択肢間の勢いを比較し、エコシステムの成長に関する洞察を得るのに役立ちます。

相互運用性

intlayerは、react-intl、react-i18next、next-intl、next-i18next、vue-i18nの名前空間の管理にも役立ちます。

intlayerを使用すると、お気に入りのi18nライブラリの形式でコンテンツを宣言でき、intlayerは任意の場所に名前空間を生成します（例：/messages/{{locale}}/{{namespace}}.json）。

現在の i18n ライブラリの API を使い続けたい場合、intlayer は 互換アダプター（compat adapters） も提供しています。これは react-i18next、next-intl、react-intl、vue-i18n などとまったく同じ API を公開しつつ、内容は Intlayer の辞書から提供されるパッケージです。これにより、コードを書き直すことなく段階的に移行できます。互換アダプターのドキュメントをご覧ください。

よくある質問