なぜ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

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

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|mjs|cjs|json}} ファイルは VSCode の拡張機能を使って作成できます
   • IDE のオートコンプリート AI ツール（GitHub Copilot など）がコンテンツの宣言を支援し、コピー＆ペーストを減らせます

2. コードベースをクリーンにする

   • 複雑さを減らす
   • 保守性を高める

3. コンポーネントと関連コンテンツの複製をより簡単に行う（例：ログイン/登録コンポーネントなど）

   • 他のコンポーネントのコンテンツに影響を与えるリスクを制限することで
   • 外部依存なしにコンテンツを別のアプリケーションにコピー＆ペーストできることで

4. 未使用のコンポーネントの未使用キー/値でコードベースを汚染しない

   • コンポーネントを使用しない場合、Intlayerはその関連コンテンツをインポートしません
   • コンポーネントを削除すると、その関連コンテンツも同じフォルダーに存在するため、より簡単に削除を思い出せます

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

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

Intlayerの追加機能

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

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

ドキュメント履歴