@intlayer/docs 9.5.6 → 9.5.7

package/blog/ja/vue-i18n_vs_intlayer-vue-i18n.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "vue-i18n vs @intlayer/vue-i18n: 同じAPI、異なるBundle"
 description: Vue 3アプリが vue-i18n の呼び出しを保持しながら、@intlayer/vue-i18n compat adapterを通じてそれらをサーブする場合の変更点。同じ Vite + Vue コード上での、ページごとのJavaScript、ランタイムサイズ、コンポーネントサイズとリークの測定、およびアダプターが保持、無視、および置き換えることができないものの説明。
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # vue-i18n VS @intlayer/vue-i18n | 同じAPI、異なるBundle
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 `@intlayer/vue-i18n` は互換性アダプター：vue-i18n API (`createI18n`、`useI18n`、`t()`、`d()`、`n()`、`$t`、`v-t`、`i18n.global.locale`...) を公開し、Intlayer によってコンパイルされたディクショナリから提供します。`.vue` ファイルは変わりません。`t("footer.github")` がバインドされるものが変わるだけです。
 
 この記事では、同じVite + Vue 3アプリケーションでこのスワップを測定します。このアプリケーションは`vue-i18n`で1回、アダプターで1回ビルドされました。数値は[Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom)から取得されています。ライブラリとして比較される`vue-i18n`とIntlayerについては、[vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer)と[vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark)を参照してください。この記事は、コンポーネントをそのまま保つ場合にアダプターが何を変更するかについてです。
@@ -105,6 +107,10 @@ const { t } = useI18n(_dicHash_footer);
 
 ### Vite + Vue 3 での結果
 
+関心のある指標とライブラリを選択してください：
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
 | Setup                    | Strategy | Lib size (gz) | Lib size (min) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |  Page load |
 | ------------------------ | -------- | ------------: | -------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ---------: |
 | **base** (no i18n)       | -        |        0.0 KB |         0.0 KB |          41.3 KB |        0.0% |         - |             1.1 KB |         1.8 ms |    10.8 ms |
@@ -124,11 +130,24 @@ const { t } = useI18n(_dicHash_footer);
 - **リアクティビティとページ読み込み.** ロケール切り替えは両者にとって安価です（1.5～2.8 ms）；Vueのリアクティビティシステムは、メッセージがメモリ内にあれば可能にします。ページ読み込みは13.6 msから**9.3 ms**に短縮され、88 KBのJavaScriptのパースが減少することと一致しています。
 - **ネイティブ行について。** このrun で、`vue-intlayer` は `static` モードですべてのロケールをバンドルし、57.1 KB に到達し、3.9 KB のランタイムを実装しました。アダプタの同期辞書は外国語ロケール文字列が少なかったため、ページごとの数値が低くなりました。ネイティブランタイムは 3 つの中で最も軽量のままであり、その `.content.ts` モデルは SFC `<i18n>` ブロックが同等のものを見つける場所です。
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> すべてのライブラリと各戦略の完全な表は、[Vueベンチマークレポート](https://intlayer.org/ja/doc/benchmark/vue)をご覧ください。
+
 ## 数値が移動する理由
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 `src/components/` の何も変わっていないため、ゲインは `useI18n` がバインドされているものから来ています。
 
-**`vue-i18n`を使用する場合**、バインディングはグローバルインスタンスです。`createI18n({ messages: { en, fr, ... } })`は everything を保持する1つのインポートであり、`useI18n()`を呼び出すすべてのコンポーネントはそのすべてにアクセスできるため、bundler はインスタンス以下で分割できません。最適化とは、_あなたが_`en.json`をルートごとに分割し、router guard で`setLocaleMessage()`を呼び出し、コンポーネントが移動するときにルートからファイルへのマップを正確に保つことを意味します。
+**`vue-i18n`を使用する場合**、バインディングはグローバルインスタンスです。`createI18n({ messages: { en, fr, ... } })`は everything を保持する1つのインポートであり、`useI18n()`を呼び出すすべてのコンポーネントはそのすべてにアクセスできるため、bundler はインスタンス以下で分割できません。最適化とは、_あなたが_`en.json`をルートごとに分割し、router guard で`setLocaleMessage()`を呼び出し、コンポーネントが移動するときにルートからファイルへのマップを正確に保つことを意味します。 無駄はページとロケールの2つの軸で同時に増加します：
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -258,26 +277,107 @@ export const i18n = createI18n({ locale: "en" });
 
 ## 始める前に知っておくべき制限事項
 
-- **SFC `<i18n>` ブロックは読み込まれません。** メッセージがコンポーネント内に存在する場合、それらをロケールファイル（または `.content.ts`、これは型付きの同じ概念）に移動する必要があります。
-- **ランタイムメッセージロードは廃止されました。** `setLocaleMessage()` と `mergeLocaleMessage()` は警告を出して返されます。実行時に CMS から取得した翻訳には、Intlayer の CMS、または `intlayer pull` / `push` コマンドが必要です。
-- **`messages` はフォールバックであり、無料ではありません。** `createI18n()` で JSON import を保持すると、bundle に 75 KB が保持されます。`intlayer test` がパスしたら削除してください。
-- **アダプターはネイティブランタイムではありません。** `vue-intlayer` の 3.9 KB に対して 7.9 KB です。すべてのコンポーネントが `useIntlayer` に移行したら、削除してください。
+<AccordionGroup>
+<Accordion header="SFC <i18n> ブロックは読み取られません">
+
+メッセージがコンポーネント内にある場合は、ロケールファイルまたは生成された型を持つ同じ概念の `.content.ts` に移動する必要があります。
+
+</Accordion>
+<Accordion header="ランタイムでのメッセージ読み込みは削除されました">
+
+`setLocaleMessage()` および `mergeLocaleMessage()` は警告を出力して返ります。実行時にCMSから取得される翻訳には、[Intlayer CMS](https://intlayer.org/ja/doc/concept/cms) または `intlayer pull` / `push` コマンドが必要です。
+
+</Accordion>
+<Accordion header="messages はフォールバックであり、無料ではありません">
+
+`createI18n()` 内のJSONインポートを保持すると、バンドル内に75 KBが残ります。`intlayer test` が成功したら削除してください。
+
+</Accordion>
+<Accordion header="アダプターはネイティブランタイムではありません">
+
+`vue-intlayer` の3.9 KBに対してアダプターは7.9 KBです。すべてのコンポーネントが `useIntlayer` に移行したら削除してください。
+
+</Accordion>
+</AccordionGroup>
 
 ## どのような場合にどちらを使うか？
 
-- **`vue-i18n` に留まる** アプリが SFC `<i18n>` ブロック、ランタイム `setLocaleMessage()` フロー、または 90 KB/ページがオーディエンスにとって問題でない場合。
-- **`@intlayer/vue-i18n` を使用する** `vue-i18n` を使用しており、88 KB の削減、コンポーネント 23 倍小型化、0% ページリーク、型付きキー、`.vue` ファイル編集なしの CI チェックが必要な場合。これは既存の `vue-i18n` コードベースのエントリーポイントです。
-- **ネイティブ (`vue-intlayer`) に移行する** 新規プロジェクト、またはアダプターが役目を果たした後。最軽量のランタイム (3.9 KB) と、`<i18n>` ブロックを型付きコンテンツで置き換える、コンポーネント単位の `.content.ts` モデルを備えています。
+<AccordionGroup>
+<Accordion header="vue-i18n を継続利用する">
+
+アプリがSFC `<i18n>` ブロックやランタイムの `setLocaleMessage()` フローに依存している場合、またはページあたり90 KBがユーザー層にとって懸念事項でない場合。
+
+</Accordion>
+<Accordion header="@intlayer/vue-i18n を使用する">
+
+`vue-i18n` を使用中で、`.vue` ファイルを編集せずに88 KBの削減、23倍小さいコンポーネント、0%のページリーク、型付けされたキー、CIチェックを実現したい場合。既存の `vue-i18n` コードベースのエントリポイントとなります。
+
+</Accordion>
+<Accordion header="ネイティブに移行する (vue-intlayer)">
+
+新規プロジェクト、またはアダプターが役割を果たした後向けです。最も軽量なランタイム（3.9 KB）と、`<i18n>` ブロックを型付きコンテンツに置き換えるコンポーネント単位の `.content.ts` モデルを備えています。[VueとIntlayer](https://intlayer.org/ja/doc/environment/vite-and-vue) または [Nuxtとの組み合わせ](https://intlayer.org/ja/doc/environment/nuxt-and-vue) から始めてください。
+
+</Accordion>
+</AccordionGroup>
+
+## よくある質問
+
+<FAQ>
+
+<Question title=".vue ファイルを編集する必要がありますか？">
+
+いいえ。ベンチマークのビルドでは、`vite.config.ts`、`intlayer.config.ts`、そして `src/i18n.ts` 内の `messages` インポートの1行のみを変更しました。すべての `useI18n()`、`$t`、`v-t`、Options APIの呼び出し箇所はそのまま保持されました。
+
+</Question>
+
+<Question title="なぜコンポーネントサイズが23倍も小さいのですか？">
+
+`useI18n()` がグローバルインスタンスの参照を停止するためです。`createI18n({ messages })` はすべてのロケールの全メッセージを保持するため、単独でコンパイルされたコンポーネントでも196 KBを引き込みます。アダプターを使用すると、自身の辞書のみにアクセスします：8.4 KB。
+
+</Question>
+
+<Question title="d() や n() のフォーマットはどうなりますか？">
+
+維持されます。`createI18n()` に渡された `datetimeFormats` と `numberFormats` は尊重され、ネイティブの `Intl` APIによって処理されます。[日付、時間、数値のフォーマット](https://intlayer.org/ja/blog/date-time-number-formatting-locales)をご覧ください。
+
+</Question>
+
+<Question title="Nuxt でも動作しますか？">
+
+`@intlayer/vue-i18n` は Vite + Vue を対象としています。`@nuxtjs/i18n` については、[Nuxt i18n 互換アダプター](https://intlayer.org/ja/doc/compatibility/nuxtjs-i18n) を使用し、ネイティブ構成については [NuxtとIntlayer](https://intlayer.org/ja/doc/environment/nuxt-and-vue) をご覧ください。
+
+</Question>
+
+<Question title="コンポーネントごとに段階的に移行できますか？">
+
+はい。任意のコンポーネントで、同一ディレクトリのコンテンツファイルを使用して `useI18n()` から `useIntlayer("footer")` に切り替えることができます。JSON と `.content.ts` の辞書は共存してマージされます。
+
+</Question>
+
+</FAQ>
 
 ## 関連する比較
 
-- [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) (機能とDX)
-- [vue-i18n vs Intlayer ベンチマーク](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark) (ライブラリ、同じベンチマーク)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/blog/next-intl-vs-intlayer-next-intl) (同じアダプターシリーズ)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (同じアダプターシリーズ)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (同じアダプターシリーズ)
-- [マイグレーションガイド: vue-i18n to Intlayer](https://intlayer.org/doc/migration/vue-i18n)
-- [互換性アダプターリファレンス: vue-i18n](https://intlayer.org/doc/compatibility/vue-i18n), [Nuxt i18n](https://intlayer.org/doc/compatibility/nuxtjs-i18n)
+同じアダプターシリーズ：
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/ja/blog/next-intl-vs-intlayer-next-intl)
+- [i18next vs @intlayer/i18next](https://intlayer.org/ja/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/ja/blog/lingui-vs-intlayer-lingui)
+
+直接比較されたライブラリ：
+
+- [vue-i18n vs Intlayer](https://intlayer.org/ja/blog/vue-i18n-vs-intlayer), features and DX
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/ja/blog/vue-i18n-vs-intlayer-benchmark)
+- [Is vue-i18n outdated?](https://intlayer.org/ja/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/ja/blog/how-to-pick-vue-i18n-library)
+
+リファレンスドキュメント：
+
+- [Compat adapter: vue-i18n](https://intlayer.org/ja/doc/compatibility/vue-i18n) and [Nuxt i18n](https://intlayer.org/ja/doc/compatibility/nuxtjs-i18n)
+- [移行ガイド：vue-i18n から Intlayer へ](https://intlayer.org/ja/doc/migration/vue-i18n)
+- [Vueベンチマークレポート](https://intlayer.org/ja/doc/benchmark/vue)
+- [バンドル最適化](https://intlayer.org/ja/doc/concept/bundle-optimization) と [Intlayerコンパイラ](https://intlayer.org/ja/doc/compiler)
+- [ビジュアルエディター](https://intlayer.org/ja/doc/concept/editor)、[CMS](https://intlayer.org/ja/doc/concept/cms) および [AI翻訳](https://intlayer.org/ja/doc/concept/auto-fill)
 
 ## 結論
 
@@ -285,4 +385,4 @@ export const i18n = createI18n({ locale: "en" });
 
 すべてのrawデータ、テストアプリ、スクリプトは[Benchmark Bloomリポジトリ](https://github.com/intlayer-org/benchmark-bloom)にあります。自分で実行してみてください。
 
-詳細については、['Intlayerについて'ドキュメント](https://intlayer.org/doc/why)を参照してください。
+詳細については、['Intlayerについて'ドキュメント](https://intlayer.org/ja/doc/why)を参照してください。

package/blog/ja/vue-i18n_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-08-23
+updatedAt: 2026-09-22
 title: vue-i18n vs Intlayer
 description: Vue/Nuxtアプリにおける国際化（i18n）について、vue-i18nとIntlayerを比較
 keywords:
@@ -20,6 +20,8 @@ author: aymericzip
 
 # vue-i18n VS Intlayer | Vueの国際化（i18n）
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 本ガイドでは、**Vue 3**（および**Nuxt**）向けの人気i18nオプションである**vue-i18n**と**Intlayer**を比較します。  
 モダンなVueツール（Vite、Composition API）に焦点を当て、以下を評価します：
 
@@ -31,6 +33,8 @@ author: aymericzip
 6. **開発者体験（DX）、ツールとメンテナンス**
 7. **SEOと大規模プロジェクトのスケーラビリティ**
 
+<TOC/>
+
 > **要約**：どちらもVueアプリのローカライズが可能です。もし**コンポーネント単位のコンテンツ管理**、**厳格なTypeScript型**、**ビルド時の未翻訳キー検出**、**ツリーシェイク可能な辞書**、そして**ルーターやSEOヘルパーが標準装備**されていて、さらに**ビジュアルエディターとAI翻訳**も欲しいなら、**Intlayer**がより完全でモダンな選択肢です。
 
 ## 高レベルのポジショニング
@@ -38,6 +42,30 @@ author: aymericzip
 - **vue-i18n** - Vueの事実上の標準i18nライブラリ。柔軟なメッセージフォーマット（ICUスタイル）、ローカルメッセージ用のSFC `<i18n>` ブロック、大規模なエコシステムを持ちます。安全性や大規模メンテナンスは主にユーザーの責任です。
 - **Intlayer** - Vue/Vite/Nuxt向けのコンポーネント中心のコンテンツモデルで、**厳格なTS型付け**、**ビルド時チェック**、**ツリーシェイキング**、**ルーター＆SEOヘルパー**、オプションの**ビジュアルエディター/CMS**、および**AI支援翻訳**を備えています。
 
+## ビルド時にかかるコスト
+
+機能比較表の前に、実測値をご覧ください。[Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) は同じ Vite + Vue 3 アプリ（10ページ、10言語）を各ライブラリで構築し、ブラウザがダウンロードするサイズを記録しています：
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+| Setup                | Lib size (gz) | Page JS avg (gz) | Page leak | Component avg (gz) |
+| -------------------- | ------------: | ---------------: | --------: | -----------------: |
+| **base** (no i18n)   |        0.0 KB |          41.3 KB |         - |             1.1 KB |
+| `vue-i18n`           |       24.3 KB |         134.9 KB |     90.0% |           196.0 KB |
+| `@intlayer/vue-i18n` |        7.9 KB |          47.0 KB |      0.0% |             8.4 KB |
+| **`vue-intlayer`**   |    **3.9 KB** |      **57.1 KB** |  **0.0%** |         **7.7 KB** |
+
+`vue-i18n` のランタイム単体で Intlayer の **6倍** の重さがあり、各ページは **90% の他ページの文字列** を抱え込み、単独でコンパイルされたコンポーネントは `useI18n()` がグローバルなメッセージツリーにバインドするため **196 KB** を引き込みます。リアクティビティやページ読み込み時間の完全な計測結果は、[vue-i18n vs Intlayer ベンチマーク](https://intlayer.org/ja/blog/vue-i18n-vs-intlayer-benchmark) をご覧ください。
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> 完全な表は [Vueベンチマークレポート](https://intlayer.org/ja/doc/benchmark/vue) をご覧ください。
+
 ## 機能の比較（Vueに特化）
 
 | 機能                                                     | **Intlayer**                                                                          | **vue-i18n**                                                                |
@@ -63,59 +91,74 @@ author: aymericzip
 
 ## 詳細比較
 
-### 1) アーキテクチャとスケーラビリティ
+<AccordionGroup>
+<Accordion header="1) アーキテクチャとスケーラビリティ">
 
-- **vue-i18n**: 一般的な設定では、ロケールごとに**集中管理されたカタログ**を使用します（ファイルや名前空間に分割することも可能）。SFCの`<i18n>`ブロックはローカルメッセージを許可しますが、プロジェクトが大きくなるとチームはしばしば共有カタログに戻ります。
+- **vue-i18n**: 一般的な設定では、ロケールごとに**集中管理されたカタログ**を使用します（ファイルや名前空間に分割することも可能）。SFCの`<i18n>`ブロックはローカルメッセージを許可しますが、プロジェクトが大きくなるとチームはしばしば共有カタログに戻ります。 [コンポーネント単位 vs 集中管理 i18n](https://intlayer.org/ja/blog/per-component-vs-centralized-i18n) をご覧ください。
 - **Intlayer**: コンポーネントごとに辞書を持ち、そのコンポーネントの隣に保存することを推奨します。これによりチーム間の競合が減り、コンテンツの発見性が保たれ、自然にキーのズレや未使用を制限できます。
 
 **重要な理由:** 大規模なVueアプリやデザインシステムでは、**モジュール化されたコンテンツ**の方がモノリシックなカタログよりもスケールしやすいです。
 
-### 2) TypeScript と安全性
+</Accordion>
+<Accordion header="2) TypeScriptと安全性">
 
 - **vue-i18n**: TSサポートは良好ですが、**厳密なキー型付け**には通常カスタムスキーマやジェネリクス、慎重な規約が必要です。
 - **Intlayer**: コンテンツから**厳密な型定義を生成**し、**IDEのオートコンプリート**やタイプミス・キーの欠落に対する**コンパイル時エラー**を提供します。
 
 **重要な理由:** 強力な型付けにより、実行時**前に問題を検出**できます。
 
-### 3) 翻訳欠落の処理
+</Accordion>
+<Accordion header="3) 欠落している翻訳の処理">
 
-- **vue-i18n**: **実行時**の警告やフォールバック（例：フォールバックロケールやキー）。
-- **Intlayer**: **ビルド時**にロケールやキー全体で警告やエラーを検出します。
+- **vue-i18n**: **実行時**の警告やフォールバック（例：フォールバックロケールやキー）。 [欠落した翻訳の検出](https://intlayer.org/ja/blog/detecting-missing-translations) をご覧ください。
+- **Intlayer**: **ビルド時**にロケールやキー全体で警告やエラーを検出します。、さらにCIでの `npx intlayer test` も備えています。
 
 **重要な理由:** ビルド時の検証により、本番環境のUIをクリーンかつ一貫性のある状態に保てます。
 
-### 4) ルーティングとURL戦略（Vue Router/Nuxt）
+</Accordion>
+<Accordion header="4) ルーティングとURL戦略 (Vue Router/Nuxt)">
 
-- **両者**ともローカライズされたルートに対応可能です。
+- **両者**ともローカライズされたルートに対応可能です。 [hreflang ガイド](https://intlayer.org/ja/blog/hreflang-guide-multilingual-seo) をご覧ください。
 - **Intlayer** は、**ローカライズされたパスの生成**、**ロケールプレフィックスの管理**、および SEO のための **`<link rel="alternate" hreflang>` の発行**を支援するヘルパーを提供します。Nuxt では、フレームワークのルーティングを補完します。
 
 **重要な理由:** カスタムの接着層が減り、ロケール間での **よりクリーンな SEO** を実現します。
 
-### 5) パフォーマンスと読み込み動作
+</Accordion>
+<Accordion header="5) パフォーマンスと読み込み動作">
 
-- **vue-i18n**: 非同期ロケールメッセージをサポートしますが、過剰なバンドルを避けるのはユーザー次第です（カタログを慎重に分割してください）。
+- **vue-i18n**: 非同期ロケールメッセージをサポートしますが、過剰なバンドルを避けるのはユーザー次第です（カタログを慎重に分割してください）。 上記のベンチマークがその数字を示しています：ページあたり 134.9 KB に対し 57.1 KB です。
 - **Intlayer**: ビルド時に **ツリーシェイク** を行い、**辞書／ロケールごとに遅延読み込み** を行います。未使用のコンテンツは配信されません。
 
 **重要な理由:** マルチロケールの Vue アプリで、より小さなバンドルサイズと高速な起動を実現します。
 
-### 6) 開発者体験とツール
+</Accordion>
+<Accordion header="6) 開発者体験とツール">
 
 - **vue-i18n**: 成熟したドキュメントとコミュニティを持ち、編集ワークフローには通常、**外部のローカリゼーションプラットフォーム**に依存します。
-- **Intlayer**: **無料のビジュアルエディター**、オプションの**CMS**（Gitフレンドリーまたは外部化可能）、**VSCode拡張機能**、**CLI/CIユーティリティ**、および独自のプロバイダーキーを使用した**AI支援翻訳**を提供します。
+- **Intlayer**: **無料のビジュアルエディター**、オプションの**CMS**（Gitフレンドリーまたは外部化可能）、**VSCode拡張機能**、**CLI/CIユーティリティ**、および独自のプロバイダーキーを使用した**AI支援翻訳**を提供します。、**MCPサーバー**
 
 **重要な理由:** 運用コストの削減と開発–コンテンツのループ短縮。
 
-### 7) SEO、SSR & SSG
+</Accordion>
+<Accordion header="7) SEO、SSR、SSG">
 
-- **両者**ともにVue SSRおよびNuxtと連携します。
+- **両者**ともにVue SSRおよびNuxtと連携します。 [国際化とSEO](https://intlayer.org/ja/blog/SEO-and-i18n) をご覧ください。
 - **Intlayer**: フレームワークに依存しない**SEOヘルパー**（サイトマップ/メタデータ/`hreflang`）を追加し、Vue/Nuxtのビルドとスムーズに連携します。
 
 **重要な理由:** カスタム配線なしでの国際SEO。
 
+</Accordion>
+</AccordionGroup>
+
 ## なぜIntlayerなのか？（問題とアプローチ）
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 ほとんどのi18nスタック（**vue-i18n**を含む）は、**集中型カタログ**から始まります：
 
+<Tabs defaultTab="per-locale" group="catalog">
+<Tab label="ロケールごとに1ファイル" value="per-locale">
+
 ```bash
 .
 ├── locales
@@ -127,7 +170,8 @@ author: aymericzip
         └── MyComponent.vue
 ```
 
-またはロケールごとのフォルダ構成：
+</Tab>
+<Tab label="ロケールごとに1フォルダー" value="per-folder">
 
 ```bash
 .
@@ -146,6 +190,34 @@ author: aymericzip
         └── MyComponent.vue
 ```
 
+</Tab>
+</Tabs>
+
+各言語で機能ごとに名前空間が増え、そのフォルダーは肥大化し続けます：
+
+```txt
+locales
+├── EN
+│   ├── blog.json
+│   ├── about.json
+│   ├── auth.json
+│   ├── blog.json
+│   ├── cart.json
+│   ├── categories.json
+│   ├── contact.json
+│   ├── dashboard.json
+│   ├── errors.json
+│   ├── faq.json
+│   ├── footer.json
+│   ├── form.json
+│   ├── home.json
+│   ├── language.json
+│   ├── navbar.json
+│   ├── ... 65 files
+│   └── validation.json
+└── ES
+```
+
 アプリが成長するにつれて、これが開発の遅延を招くことがよくあります：
 
 1. **新しいコンポーネントの場合**、リモートカタログを作成/編集し、名前空間を設定し、翻訳を行います（多くの場合、AIツールからの手動コピー＆ペーストによる）。
@@ -161,7 +233,33 @@ author: aymericzip
         └── MyComponent.vue
 ```
 
-**コンテンツ宣言**（コンポーネント単位）:
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="./locales/en.json"
+{
+  "componentExample": {
+    "greeting": "Hello World"
+  }
+}
+```
+
+```vue fileName="./components/MyComponent.vue"
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span>{{ t("componentExample.greeting") }}</span>
+</template>
+```
+
+すべての言語ファイルを手動で編集する必要があり、キーは単なるプレーンテキストです。誤字があると本番環境で `componentExample.greting` とそのままレンダリングされてしまいます。
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="./components/MyComponent/myComponent.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -171,8 +269,8 @@ const componentExampleContent = {
   content: {
     greeting: t({
       en: "Hello World",
-      es: "Hola Mundo",
       fr: "Bonjour le monde",
+      es: "Hola Mundo",
     }),
   },
 } satisfies Dictionary;
@@ -180,11 +278,10 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-**Vueでの使用例**（Composition API）:
-
 ```vue fileName="./components/MyComponent/MyComponent.vue"
 <script setup lang="ts">
-import { useIntlayer } from "vue-intlayer"; // Vue統合
+import { useIntlayer } from "vue-intlayer"; // Vue integration
+
 const { greeting } = useIntlayer("component-example");
 </script>
 
@@ -193,6 +290,11 @@ const { greeting } = useIntlayer("component-example");
 </template>
 ```
 
+すべての言語がコンポーネントの隣にある1つの型付きファイルに収まります。
+
+</Tab>
+</Tabs>
+
 このアプローチは以下の利点があります：
 
 - **開発を高速化**（一度宣言すれば、IDEやAIが自動補完）。
@@ -220,22 +322,71 @@ const { greeting } = useIntlayer("component-example");
 
 ## どちらを選ぶべきか？
 
-- **vue-i18nを選ぶ場合**: 標準的なVueのアプローチを望み、カタログや名前空間の管理に慣れていて、アプリが**小規模から中規模**（またはすでにNuxt i18nを利用している）場合。
-- **Intlayerを選ぶ場合**: **コンポーネントスコープのコンテンツ**、**厳密なTypeScript**、**ビルド時の保証**、**ツリーシェイキング**、および**ルーティング/SEO/エディターツールが一式揃っていること**を重視し、特に**大規模でモジュール化されたVue/Nuxtコードベース**に適している場合。
+<AccordionGroup>
+<Accordion header="vue-i18n を選択する">
+
+**標準的な Vue のアプローチ** を希望し、カタログや名前空間の自己管理に慣れており、アプリケーションが **小規模から中規模** の場合（または既に Nuxt i18n に依存している場合）。SFC `<i18n>` ブロックやランタイムの `setLocaleMessage()` は、Intlayer が意図的に再現していない機能です。
+
+</Accordion>
+<Accordion header="Intlayer を選択する">
+
+**コンポーネント単位のコンテンツ**、**厳格な TypeScript**、**ビルド時の保証**、**Tree-shaking**、および組み込みのルーティング、SEO、エディターツールを重視する場合。特に **大規模でモジュール化された Vue/Nuxt コードベース** やデザインシステムに適しています。[VueとIntlayer](https://intlayer.org/ja/doc/environment/vite-and-vue) または [Nuxtとの組み合わせ](https://intlayer.org/ja/doc/environment/nuxt-and-vue) から始めてください。
+
+</Accordion>
+<Accordion header="@intlayer/vue-i18n を選択する">
+
+現在 `vue-i18n` を使用しており、`.vue` ファイルを編集せずにバンドルサイズを削減したい場合。[互換アダプター](https://intlayer.org/ja/doc/compatibility/vue-i18n) は `createI18n`、`useI18n`、`t()`、`d()`、`n()`、`$t`、`v-t` を保持し、コンパイル済み辞書から提供します。[vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/ja/blog/vue-i18n-vs-intlayer-vue-i18n) での直接比較をご覧ください。
+
+</Accordion>
+</AccordionGroup>
+
+## vue-i18n との相互運用性
+
+`intlayer` は `vue-i18n` の名前空間の管理にも役立ちます。
+
+`intlayer` を使用すると、お好みの i18n ライブラリの形式でコンテンツを宣言でき、intlayer が選択した場所（例：`/messages/{{locale}}/{{namespace}}.json`）に名前空間を生成します。 [vue-i18n 互換性ドキュメント](https://intlayer.org/ja/doc/compatibility/vue-i18n) および [Nuxt i18n アダプター](https://intlayer.org/ja/doc/compatibility/nuxtjs-i18n) をご覧ください。
+
+## よくある質問
+
+<FAQ>
+
+<Question title="Intlayer は vue-i18n の代替ですか、それとも上位レイヤーですか？">
+
+導入方法によって両方になります。`vue-intlayer` は独自の `useIntlayer()` コンポーザブルを持つネイティブランタイムです。`@intlayer/vue-i18n` は `vue-i18n` API を維持しながらバインド先を入れ替える互換アダプターであり、コンポーネントを変更せずに移行し、その後ファイル単位で移行を進めることができます。
 
-## 実践的な移行ノート（vue-i18n → Intlayer）
+</Question>
 
-- **機能単位で開始**：ルート／ビュー／コンポーネントを一つずつローカルの Intlayer 辞書に移行します。
-- **移行中のブリッジ**：vue-i18n のカタログを並行して保持し、段階的にルックアップを置き換えます。
-- **厳密なチェックを有効化**：ビルド時に欠落しているキーやロケールを早期に検出できるようにします。
-- **ルーター／SEO ヘルパーを採用**：ロケール検出と `hreflang` タグを標準化します。
-- **バンドルサイズを測定**：未使用のコンテンツが除外されることで、**バンドルサイズの削減**が期待できます。
+<Question title="SFC <i18n> ブロックはどうなりますか？">
+
+アダプターはそれらを読み取りません。メッセージをロケール JSON に移動するか、生成された型を持つ同じ概念のコンポーネント隣の `.content.ts` に移動してください。これが引き継がれない唯一の `vue-i18n` 機能です。
+
+</Question>
+
+<Question title="Intlayer は Nuxt で動作しますか？">
+
+はい。[NuxtとIntlayer](https://intlayer.org/ja/doc/environment/nuxt-and-vue) は多言語ルーティング、ロケール検出ミドルウェア、サイトマップ生成をサポートしています。`@nuxtjs/i18n` をご利用の場合は、[Nuxt i18n 互換アダプター](https://intlayer.org/ja/doc/compatibility/nuxtjs-i18n) が移行パスとなります。
+
+</Question>
+
+<Question title="locales/{locale}.json を信頼できる唯一の情報源として維持できますか？">
+
+はい。[JSON同期プラグイン](https://intlayer.org/ja/doc/compatibility/vue-i18n) は `vue-i18n` 構文（`{name}`、`{0}`、パイプによる複数形 `"car | cars"`）で読み取り、CLI または CMS が更新したときに翻訳を書き戻します。
+
+</Question>
+
+<Question title="Vue 上の Intlayer で ICU は動作しますか？">
+
+ネイティブの ICU サポートは準備中です。`@intlayer/vue-i18n` アダプターは、パイプによる複数形や名前付き/リスト補間を含む `vue-i18n` 自身のメッセージ構文を処理します。Intlayer の複数形モデルについては、[列挙コンテンツ](https://intlayer.org/ja/doc/concept/content/enumeration) をご覧ください。
+
+</Question>
+
+</FAQ>
 
 ## GitHub スター
 
 GitHub のスターは、プロジェクトの人気度、コミュニティの信頼、および長期的な関連性の強力な指標です。技術的品質の直接的な尺度ではありませんが、多くの開発者がプロジェクトを有用であると認識し、その進行状況をフォローし、採用する可能性があることを反映しています。プロジェクトの価値を見積もるために、スターは代替案間の牽引力を比較し、エコシステムの成長に関する洞察を提供するのに役立ちます。
 
-[![Star History Chart](https://api.star-history.com/svg?repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
 ## 結論
 
@@ -244,4 +395,15 @@ GitHub のスターは、プロジェクトの人気度、コミュニティの
 - **Intlayer**では、**モジュール化されたコンテンツ**、**厳格なTypeScript**、**ビルド時の安全性**、**ツリーシェイクされたバンドル**、および**ルーター/SEO/エディター用ツール**が**標準で提供**されます。
 - チームがマルチロケール対応のコンポーネント駆動型Vue/Nuxtアプリにおいて、**保守性と速度**を重視する場合、Intlayerは現時点で**最も充実した**体験を提供します。
 
-詳細は['Why Intlayer?' ドキュメント](https://intlayer.org/doc/why)をご参照ください。
+## 参考文献
+
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/ja/blog/vue-i18n-vs-intlayer-benchmark), the measured run behind the table above
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/ja/blog/vue-i18n-vs-intlayer-vue-i18n), the adapter on the same app
+- [Is vue-i18n outdated?](https://intlayer.org/ja/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/ja/blog/how-to-pick-vue-i18n-library)
+- [Using Intlayer with vue-i18n](https://intlayer.org/ja/blog/intlayer-with-vue-i18n)
+- [Vue benchmark report](https://intlayer.org/ja/doc/benchmark/vue)
+- [Migration guide: vue-i18n to Intlayer](https://intlayer.org/ja/doc/migration/vue-i18n)
+- [Bundle optimization](https://intlayer.org/ja/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/ja/doc/compiler)
+
+Refer to ['Why Intlayer?' doc](https://intlayer.org/ja/doc/why) for more details.