Intlayer

--- createdAt: 2024-08-11 updatedAt: 2025-08-23 title: vue-i18n vs Intlayer description: Vue/Nuxtアプリにおける国際化（i18n）について、vue-i18nとIntlayerを比較 keywords: - vue-i18n - Intlayer - 国際化 - i18n - ブログ - Vue - Nuxt - JavaScript slugs: - blog - vue-i18n-vs-intlayer --- # vue-i18n VS Intlayer | Vueの国際化（i18n） 本ガイドでは、**Vue 3**（および**Nuxt**）向けの人気i18nオプションである**vue-i18n**と**Intlayer**を比較します。 モダンなVueツール（Vite、Composition API）に焦点を当て、以下を評価します： 1. **アーキテクチャとコンテンツの構成** 2. **TypeScriptと安全性** 3. **翻訳漏れの取り扱い** 4. **ルーティングとURL戦略** 5. **パフォーマンスと読み込み挙動** 6. **開発者体験（DX）、ツールとメンテナンス** 7. **SEOと大規模プロジェクトのスケーラビリティ** > **要約**：どちらもVueアプリのローカライズが可能です。もし**コンポーネント単位のコンテンツ管理**、**厳格なTypeScript型**、**ビルド時の未翻訳キー検出**、**ツリーシェイク可能な辞書**、そして**ルーターやSEOヘルパーが標準装備**されていて、さらに**ビジュアルエディターとAI翻訳**も欲しいなら、**Intlayer**がより完全でモダンな選択肢です。 --- ## 高レベルのポジショニング - **vue-i18n** - Vueの事実上の標準i18nライブラリ。柔軟なメッセージフォーマット（ICUスタイル）、ローカルメッセージ用のSFC `<i18n>` ブロック、大規模なエコシステムを持ちます。安全性や大規模メンテナンスは主にユーザーの責任です。 - **Intlayer** - Vue/Vite/Nuxt向けのコンポーネント中心のコンテンツモデルで、**厳格なTS型付け**、**ビルド時チェック**、**ツリーシェイキング**、**ルーター＆SEOヘルパー**、オプションの**ビジュアルエディター/CMS**、および**AI支援翻訳**を備えています。 --- ## 機能の比較（Vueに特化） | 機能 | **Intlayer** | **vue-i18n** | | -------------------------------------------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | **コンポーネント近くの翻訳** | ✅ はい、コンポーネントごとにコンテンツが共置（例：`MyComp.content.ts`） | ✅ はい、SFCの`<i18n>`ブロック経由（オプション） | | **TypeScript統合** | ✅ 高度で自動生成された**厳密な**型とキーのオートコンプリート | ✅ 良好な型定義；**厳密なキー安全性は追加の設定/規律が必要** | | **翻訳漏れ検出** | ✅ **ビルド時**の警告/エラーとTSへの反映 | ⚠️ 実行時のフォールバック/警告 | | **リッチコンテンツ（コンポーネント/Markdown）** | ✅ リッチノードおよびMarkdownコンテンツファイルの直接サポート | ⚠️ 制限あり（コンポーネントは`<i18n-t>`経由、Markdownは外部プラグイン経由） | | **AIによる翻訳** | ✅ 独自のAIプロバイダーキーを使用した組み込みワークフロー | ❌ 組み込みなし | | **ビジュアルエディター / CMS** | ✅ 無料のビジュアルエディターおよびオプションのCMS | ❌ 組み込みなし（外部プラットフォームを使用） | | **ローカライズされたルーティング** | ✅ Vue Router/Nuxt用のローカライズされたパス、URL、および`hreflang`を生成するヘルパー | ⚠️ コア機能ではない（Nuxt i18nまたはカスタムVue Router設定を使用） | | **動的ルート生成** | ✅ あり | ❌ 提供されていない（Nuxt i18nが提供） | | **複数形とフォーマット** | ✅ 列挙パターン；Intlベースのフォーマッター | ✅ ICUスタイルのメッセージ；Intlフォーマッター | | **コンテンツ形式** | ✅ `.ts`、`.js`、`.json`、`.md`、`.txt`（YAML 作業中） | ✅ `.json`、`.js`（および SFC の `<i18n>` ブロック） | | **ICU サポート** | ⚠️ 作業中 | ✅ 対応 | | **SEO ヘルパー（サイトマップ、robots、メタデータ）** | ✅ 組み込みヘルパー（フレームワーク非依存） | ❌ コア機能ではない（Nuxt i18n / コミュニティ） | | **SSR/SSG** | ✅ Vue SSRおよびNuxtで動作；静的レンダリングをブロックしない | ✅ Vue SSR/Nuxtで動作 | | **ツリーシェイキング（使用されるコンテンツのみを出荷）** | ✅ ビルド時にコンポーネント単位で実施 | ⚠️ 部分的；手動でのコード分割や非同期メッセージが必要 | | **遅延読み込み** | ✅ ロケール単位／辞書単位で対応 | ✅ 非同期ロケールメッセージをサポート | | **未使用コンテンツの削除** | ✅ はい（ビルド時） | ❌ 組み込みではない | | **大規模プロジェクトの保守性** | ✅ モジュール化されたデザインシステムに適した構造を推奨 | ✅ 可能だが、強力なファイル/名前空間の規律が必要 | | **エコシステム / コミュニティ** | ⚠️ 小規模だが急速に成長中 | ✅ Vueエコシステム内で大規模かつ成熟している | --- ## 詳細比較 ### 1) アーキテクチャとスケーラビリティ - **vue-i18n**: 一般的な設定では、ロケールごとに**集中管理されたカタログ**を使用します（ファイルや名前空間に分割することも可能）。SFCの`<i18n>`ブロックはローカルメッセージを許可しますが、プロジェクトが大きくなるとチームはしばしば共有カタログに戻ります。 - **Intlayer**: コンポーネントごとに辞書を持ち、そのコンポーネントの隣に保存することを推奨します。これによりチーム間の競合が減り、コンテンツの発見性が保たれ、自然にキーのズレや未使用を制限できます。 **重要な理由:** 大規模なVueアプリやデザインシステムでは、**モジュール化されたコンテンツ**の方がモノリシックなカタログよりもスケールしやすいです。 --- ### 2) TypeScript と安全性 - **vue-i18n**: TSサポートは良好ですが、**厳密なキー型付け**には通常カスタムスキーマやジェネリクス、慎重な規約が必要です。 - **Intlayer**: コンテンツから**厳密な型定義を生成**し、**IDEのオートコンプリート**やタイプミス・キーの欠落に対する**コンパイル時エラー**を提供します。 **重要な理由:** 強力な型付けにより、実行時**前に問題を検出**できます。 --- ### 3) 翻訳欠落の処理 - **vue-i18n**: **実行時**の警告やフォールバック（例：フォールバックロケールやキー）。 - **Intlayer**: **ビルド時**にロケールやキー全体で警告やエラーを検出します。 **重要な理由:** ビルド時の検証により、本番環境のUIをクリーンかつ一貫性のある状態に保てます。 --- ### 4) ルーティングとURL戦略（Vue Router/Nuxt） - **両者**ともローカライズされたルートに対応可能です。 - **Intlayer** は、**ローカライズされたパスの生成**、**ロケールプレフィックスの管理**、および SEO のための **`<link rel="alternate" hreflang>` の発行**を支援するヘルパーを提供します。Nuxt では、フレームワークのルーティングを補完します。 **重要な理由:** カスタムの接着層が減り、ロケール間での **よりクリーンな SEO** を実現します。 --- ### 5) パフォーマンスと読み込み動作 - **vue-i18n**: 非同期ロケールメッセージをサポートしますが、過剰なバンドルを避けるのはユーザー次第です（カタログを慎重に分割してください）。 - **Intlayer**: ビルド時に **ツリーシェイク** を行い、**辞書／ロケールごとに遅延読み込み** を行います。未使用のコンテンツは配信されません。 **重要な理由:** マルチロケールの Vue アプリで、より小さなバンドルサイズと高速な起動を実現します。 --- ### 6) 開発者体験とツール - **vue-i18n**: 成熟したドキュメントとコミュニティを持ち、編集ワークフローには通常、**外部のローカリゼーションプラットフォーム**に依存します。 - **Intlayer**: **無料のビジュアルエディター**、オプションの**CMS**（Gitフレンドリーまたは外部化可能）、**VSCode拡張機能**、**CLI/CIユーティリティ**、および独自のプロバイダーキーを使用した**AI支援翻訳**を提供します。 **重要な理由:** 運用コストの削減と開発–コンテンツのループ短縮。 --- ### 7) SEO、SSR & SSG - **両者**ともにVue SSRおよびNuxtと連携します。 - **Intlayer**: フレームワークに依存しない**SEOヘルパー**（サイトマップ/メタデータ/`hreflang`）を追加し、Vue/Nuxtのビルドとスムーズに連携します。 **重要な理由:** カスタム配線なしでの国際SEO。 --- ## なぜIntlayerなのか？（問題とアプローチ） ほとんどのi18nスタック（**vue-i18n**を含む）は、**集中型カタログ**から始まります： ```bash . ├── locales │ ├── en.json │ ├── es.json │ └── fr.json └── src └── components └── MyComponent.vue ``` またはロケールごとのフォルダ構成： ```bash . ├── locales │ ├── en │ │ ├── footer.json │ │ └── navbar.json │ ├── fr │ │ ├── footer.json │ │ └── navbar.json │ └── es │ ├── footer.json │ └── navbar.json └── src └── components └── MyComponent.vue ``` アプリが成長するにつれて、これが開発の遅延を招くことがよくあります： 1. **新しいコンポーネントの場合**、リモートカタログを作成/編集し、名前空間を設定し、翻訳を行います（多くの場合、AIツールからの手動コピー＆ペーストによる）。 2. **コンポーネントを変更する場合**、共有キーを探し出し、翻訳し、ロケールを同期させ、不要なキーを削除し、JSON構造を整合させます。 **Intlayer**はコンテンツを**コンポーネント単位**でスコープし、CSS、ストーリー、テスト、ドキュメントと同様に**コードの隣に保持**します。 ```bash . └── components └── MyComponent ├── MyComponent.content.ts └── MyComponent.vue ``` **コンテンツ宣言**（コンポーネント単位）: ```ts fileName="./components/MyComponent/MyComponent.content.ts" import { t, type Dictionary } from "intlayer"; const componentExampleContent = { key: "component-example", content: { greeting: t({ en: "Hello World", es: "Hola Mundo", fr: "Bonjour le monde", }), }, } satisfies Dictionary; export default componentExampleContent; ``` **Vueでの使用例**（Composition API）: ```vue fileName="./components/MyComponent/MyComponent.vue" <script setup lang="ts"> import { useIntlayer } from "vue-intlayer"; // Vue統合 const { greeting } = useIntlayer("component-example"); </script> <template> <span>{{ greeting }}</span> </template> ``` このアプローチは以下の利点があります： - **開発を高速化**（一度宣言すれば、IDEやAIが自動補完）。 - **コードベースをクリーンに保つ**（1コンポーネント = 1辞書）。 - **複製や移行を容易に**（コンポーネントとそのコンテンツを一緒にコピー）。 - **不要なキーを回避**（未使用のコンポーネントはコンテンツをインポートしない）。 - **読み込みを最適化**（遅延読み込みされるコンポーネントは自身のコンテンツを持つ）。 --- ## Intlayerの追加機能（Vue関連） - **クロスフレームワーク対応**：Vue、Nuxt、Vite、React、Expressなどで動作。 - **JavaScript駆動のコンテンツ管理**：コード内で柔軟に宣言可能。 - **ロケールごとの宣言ファイル**: すべてのロケールをシードし、ツールが残りを生成します。 - **型安全な環境**: 強力なTS設定とオートコンプリート機能。 - **簡素化されたコンテンツ取得**: 辞書のすべてのコンテンツを取得する単一のフック/コンポーザブル。 - **整理されたコードベース**: 1コンポーネント = 同じフォルダ内の1辞書。 - **強化されたルーティング**: **Vue Router/Nuxt** のローカライズされたパスとメタデータのためのヘルパー。 - **Markdownサポート**: ロケールごとにリモート/ローカルMarkdownをインポートし、フロントマターをコードに公開。 - **無料のビジュアルエディター＆オプションのCMS**: 有料のローカリゼーションプラットフォームなしでの作成が可能。Gitに優しい同期。 - **ツリーシェイカブルなコンテンツ**: 使用されるものだけを出荷。遅延読み込みをサポート。 - **静的レンダリングに優しい**: SSGをブロックしません。 - **AI搭載の翻訳**: ご自身のAIプロバイダー/APIキーを使用して231言語に翻訳可能。 - **MCPサーバー＆VSCode拡張機能**: IDE内でのi18nワークフローとオーサリングを自動化。 - **相互運用性**: 必要に応じて**vue-i18n**、**react-i18next**、**react-intl**と連携。 --- ## どちらを選ぶべきか？ - **vue-i18nを選ぶ場合**: 標準的なVueのアプローチを望み、カタログや名前空間の管理に慣れていて、アプリが**小規模から中規模**（またはすでにNuxt i18nを利用している）場合。 - **Intlayerを選ぶ場合**: **コンポーネントスコープのコンテンツ**、**厳密なTypeScript**、**ビルド時の保証**、**ツリーシェイキング**、および**ルーティング/SEO/エディターツールが一式揃っていること**を重視し、特に**大規模でモジュール化されたVue/Nuxtコードベース**に適している場合。 --- ## 実践的な移行ノート（vue-i18n → Intlayer） - **機能単位で開始**：ルート／ビュー／コンポーネントを一つずつローカルの Intlayer 辞書に移行します。 - **移行中のブリッジ**：vue-i18n のカタログを並行して保持し、段階的にルックアップを置き換えます。 - **厳密なチェックを有効化**：ビルド時に欠落しているキーやロケールを早期に検出できるようにします。 - **ルーター／SEO ヘルパーを採用**：ロケール検出と `hreflang` タグを標準化します。 - **バンドルサイズを測定**：未使用のコンテンツが除外されることで、**バンドルサイズの削減**が期待できます。 --- ## 結論 **vue-i18n** と **Intlayer** はどちらも Vue アプリのローカライズに優れています。違いは、堅牢でスケーラブルなセットアップを実現するために、**どれだけ自分で構築する必要があるか**にあります： - **Intlayer**では、**モジュール化されたコンテンツ**、**厳格なTypeScript**、**ビルド時の安全性**、**ツリーシェイクされたバンドル**、および**ルーター/SEO/エディター用ツール**が**標準で提供**されます。 - チームがマルチロケール対応のコンポーネント駆動型Vue/Nuxtアプリにおいて、**保守性と速度**を重視する場合、Intlayerは現時点で**最も充実した**体験を提供します。 詳細は['Why Intlayer?' ドキュメント](https://intlayer.org/doc/why)をご参照ください。