@intlayer/docs 8.9.4 → 8.9.6-canary.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (182) hide show
  1. package/docs/ar/benchmark/index.md +0 -3
  2. package/docs/ar/benchmark/nextjs.md +15 -6
  3. package/docs/ar/benchmark/solid.md +155 -0
  4. package/docs/ar/benchmark/svelte.md +148 -0
  5. package/docs/ar/benchmark/tanstack.md +12 -3
  6. package/docs/ar/benchmark/vue.md +160 -0
  7. package/docs/ar/configuration.md +16 -12
  8. package/docs/ar/dictionary/content_file.md +51 -1
  9. package/docs/ar/plugins/sync-po.md +0 -21
  10. package/docs/bn/configuration.md +16 -12
  11. package/docs/cs/configuration.md +16 -12
  12. package/docs/de/benchmark/index.md +0 -3
  13. package/docs/de/benchmark/nextjs.md +15 -6
  14. package/docs/de/benchmark/solid.md +155 -0
  15. package/docs/de/benchmark/svelte.md +148 -0
  16. package/docs/de/benchmark/tanstack.md +12 -3
  17. package/docs/de/benchmark/vue.md +160 -0
  18. package/docs/de/configuration.md +16 -12
  19. package/docs/de/dictionary/content_file.md +52 -2
  20. package/docs/de/plugins/sync-po.md +0 -22
  21. package/docs/en/benchmark/nextjs.md +11 -2
  22. package/docs/en/benchmark/solid.md +22 -4
  23. package/docs/en/benchmark/svelte.md +17 -5
  24. package/docs/en/benchmark/tanstack.md +18 -3
  25. package/docs/en/benchmark/vue.md +17 -11
  26. package/docs/en/configuration.md +16 -13
  27. package/docs/en/dictionary/content_file.md +51 -1
  28. package/docs/en/plugins/sync-po.md +0 -21
  29. package/docs/en-GB/benchmark/index.md +0 -3
  30. package/docs/en-GB/benchmark/nextjs.md +15 -6
  31. package/docs/en-GB/benchmark/solid.md +155 -0
  32. package/docs/en-GB/benchmark/svelte.md +148 -0
  33. package/docs/en-GB/benchmark/tanstack.md +12 -3
  34. package/docs/en-GB/benchmark/vue.md +160 -0
  35. package/docs/en-GB/configuration.md +15 -11
  36. package/docs/en-GB/dictionary/content_file.md +51 -1
  37. package/docs/en-GB/plugins/sync-po.md +0 -21
  38. package/docs/es/benchmark/index.md +0 -3
  39. package/docs/es/benchmark/nextjs.md +15 -6
  40. package/docs/es/benchmark/solid.md +155 -0
  41. package/docs/es/benchmark/svelte.md +148 -0
  42. package/docs/es/benchmark/tanstack.md +12 -3
  43. package/docs/es/benchmark/vue.md +160 -0
  44. package/docs/es/configuration.md +16 -12
  45. package/docs/es/dictionary/content_file.md +51 -1
  46. package/docs/es/plugins/sync-po.md +0 -21
  47. package/docs/fr/benchmark/index.md +0 -3
  48. package/docs/fr/benchmark/nextjs.md +15 -6
  49. package/docs/fr/benchmark/solid.md +155 -0
  50. package/docs/fr/benchmark/svelte.md +148 -0
  51. package/docs/fr/benchmark/tanstack.md +12 -3
  52. package/docs/fr/benchmark/vue.md +160 -0
  53. package/docs/fr/configuration.md +16 -12
  54. package/docs/fr/dictionary/content_file.md +51 -1
  55. package/docs/fr/plugins/sync-po.md +0 -21
  56. package/docs/hi/benchmark/nextjs.md +15 -6
  57. package/docs/hi/benchmark/solid.md +155 -0
  58. package/docs/hi/benchmark/svelte.md +148 -0
  59. package/docs/hi/benchmark/tanstack.md +12 -3
  60. package/docs/hi/benchmark/vue.md +160 -0
  61. package/docs/hi/configuration.md +16 -12
  62. package/docs/hi/dictionary/content_file.md +51 -1
  63. package/docs/hi/plugins/sync-po.md +0 -21
  64. package/docs/id/benchmark/index.md +0 -3
  65. package/docs/id/benchmark/nextjs.md +15 -6
  66. package/docs/id/benchmark/solid.md +155 -0
  67. package/docs/id/benchmark/svelte.md +148 -0
  68. package/docs/id/benchmark/tanstack.md +12 -3
  69. package/docs/id/benchmark/vue.md +160 -0
  70. package/docs/id/configuration.md +16 -12
  71. package/docs/id/dictionary/content_file.md +51 -1
  72. package/docs/id/plugins/sync-po.md +0 -21
  73. package/docs/it/benchmark/index.md +1 -4
  74. package/docs/it/benchmark/nextjs.md +15 -6
  75. package/docs/it/benchmark/solid.md +155 -0
  76. package/docs/it/benchmark/svelte.md +148 -0
  77. package/docs/it/benchmark/tanstack.md +12 -3
  78. package/docs/it/benchmark/vue.md +160 -0
  79. package/docs/it/configuration.md +16 -12
  80. package/docs/it/dictionary/content_file.md +51 -1
  81. package/docs/it/plugins/sync-po.md +0 -21
  82. package/docs/ja/benchmark/index.md +5 -5
  83. package/docs/ja/benchmark/nextjs.md +15 -6
  84. package/docs/ja/benchmark/solid.md +155 -0
  85. package/docs/ja/benchmark/svelte.md +148 -0
  86. package/docs/ja/benchmark/tanstack.md +12 -3
  87. package/docs/ja/benchmark/vue.md +160 -0
  88. package/docs/ja/configuration.md +16 -12
  89. package/docs/ja/dictionary/content_file.md +50 -2
  90. package/docs/ja/intlayer_with_nextjs_no_locale_path.md +4 -3
  91. package/docs/ja/plugins/sync-po.md +0 -21
  92. package/docs/ko/benchmark/nextjs.md +15 -6
  93. package/docs/ko/benchmark/solid.md +155 -0
  94. package/docs/ko/benchmark/svelte.md +148 -0
  95. package/docs/ko/benchmark/tanstack.md +12 -3
  96. package/docs/ko/benchmark/vue.md +160 -0
  97. package/docs/ko/configuration.md +16 -12
  98. package/docs/ko/dictionary/content_file.md +51 -1
  99. package/docs/ko/intlayer_with_nextjs_no_locale_path.md +3 -2
  100. package/docs/ko/plugins/sync-po.md +0 -21
  101. package/docs/nl/configuration.md +16 -12
  102. package/docs/pl/benchmark/index.md +0 -3
  103. package/docs/pl/benchmark/nextjs.md +15 -6
  104. package/docs/pl/benchmark/solid.md +155 -0
  105. package/docs/pl/benchmark/svelte.md +148 -0
  106. package/docs/pl/benchmark/tanstack.md +12 -3
  107. package/docs/pl/benchmark/vue.md +160 -0
  108. package/docs/pl/configuration.md +16 -12
  109. package/docs/pl/dictionary/content_file.md +51 -1
  110. package/docs/pl/plugins/sync-po.md +0 -21
  111. package/docs/pt/benchmark/index.md +0 -3
  112. package/docs/pt/benchmark/nextjs.md +16 -7
  113. package/docs/pt/benchmark/solid.md +155 -0
  114. package/docs/pt/benchmark/svelte.md +148 -0
  115. package/docs/pt/benchmark/tanstack.md +13 -4
  116. package/docs/pt/benchmark/vue.md +160 -0
  117. package/docs/pt/configuration.md +16 -12
  118. package/docs/pt/dictionary/content_file.md +51 -1
  119. package/docs/pt/plugins/sync-po.md +0 -21
  120. package/docs/ru/benchmark/nextjs.md +15 -6
  121. package/docs/ru/benchmark/solid.md +155 -0
  122. package/docs/ru/benchmark/svelte.md +148 -0
  123. package/docs/ru/benchmark/tanstack.md +12 -3
  124. package/docs/ru/benchmark/vue.md +160 -0
  125. package/docs/ru/configuration.md +16 -12
  126. package/docs/ru/dictionary/content_file.md +52 -2
  127. package/docs/ru/plugins/sync-po.md +0 -21
  128. package/docs/tr/benchmark/index.md +0 -3
  129. package/docs/tr/benchmark/nextjs.md +15 -6
  130. package/docs/tr/benchmark/solid.md +155 -0
  131. package/docs/tr/benchmark/svelte.md +148 -0
  132. package/docs/tr/benchmark/tanstack.md +12 -3
  133. package/docs/tr/benchmark/vue.md +160 -0
  134. package/docs/tr/configuration.md +16 -12
  135. package/docs/tr/dictionary/content_file.md +51 -1
  136. package/docs/tr/plugins/sync-po.md +0 -21
  137. package/docs/uk/benchmark/nextjs.md +15 -6
  138. package/docs/uk/benchmark/solid.md +155 -0
  139. package/docs/uk/benchmark/svelte.md +148 -0
  140. package/docs/uk/benchmark/tanstack.md +12 -3
  141. package/docs/uk/benchmark/vue.md +160 -0
  142. package/docs/uk/configuration.md +16 -12
  143. package/docs/uk/dictionary/content_file.md +51 -1
  144. package/docs/uk/plugins/sync-po.md +0 -21
  145. package/docs/ur/configuration.md +16 -12
  146. package/docs/vi/benchmark/index.md +0 -3
  147. package/docs/vi/benchmark/nextjs.md +15 -6
  148. package/docs/vi/benchmark/solid.md +155 -0
  149. package/docs/vi/benchmark/svelte.md +148 -0
  150. package/docs/vi/benchmark/tanstack.md +12 -3
  151. package/docs/vi/benchmark/vue.md +160 -0
  152. package/docs/vi/configuration.md +16 -12
  153. package/docs/vi/dictionary/content_file.md +51 -1
  154. package/docs/vi/intlayer_with_nextjs_15.md +10 -57
  155. package/docs/vi/plugins/sync-po.md +0 -21
  156. package/docs/zh/benchmark/nextjs.md +15 -6
  157. package/docs/zh/benchmark/solid.md +155 -0
  158. package/docs/zh/benchmark/svelte.md +148 -0
  159. package/docs/zh/benchmark/tanstack.md +12 -3
  160. package/docs/zh/benchmark/vue.md +160 -0
  161. package/docs/zh/configuration.md +16 -12
  162. package/docs/zh/dictionary/content_file.md +51 -3
  163. package/docs/zh/plugins/sync-po.md +0 -21
  164. package/frequent_questions/ar/intlayerNode.md +3 -3
  165. package/frequent_questions/de/intlayerNode.md +3 -3
  166. package/frequent_questions/en/intlayerNode.md +3 -3
  167. package/frequent_questions/en-GB/intlayerNode.md +3 -3
  168. package/frequent_questions/es/intlayerNode.md +3 -3
  169. package/frequent_questions/fr/intlayerNode.md +3 -3
  170. package/frequent_questions/hi/intlayerNode.md +3 -3
  171. package/frequent_questions/id/intlayerNode.md +3 -3
  172. package/frequent_questions/it/intlayerNode.md +3 -3
  173. package/frequent_questions/ja/intlayerNode.md +3 -3
  174. package/frequent_questions/ko/intlayerNode.md +3 -3
  175. package/frequent_questions/pl/intlayerNode.md +3 -3
  176. package/frequent_questions/pt/intlayerNode.md +3 -3
  177. package/frequent_questions/ru/intlayerNode.md +3 -3
  178. package/frequent_questions/tr/intlayerNode.md +3 -3
  179. package/frequent_questions/uk/intlayerNode.md +3 -3
  180. package/frequent_questions/vi/intlayerNode.md +3 -3
  181. package/frequent_questions/zh/intlayerNode.md +3 -3
  182. package/package.json +8 -8
@@ -0,0 +1,148 @@
1
+ ---
2
+ createdAt: 2026-04-20
3
+ updatedAt: 2026-04-21
4
+ title: 2026年 Svelte向けの最高のi18nソリューション - ベンチマークレポート
5
+ description: svelte-i18n、Paraglide、IntlayerなどのSvelte国際化(i18n)ライブラリを比較します。バンドルサイズ、リーク、反応性に関する詳細なパフォーマンスレポート。
6
+ keywords:
7
+ - benchmark
8
+ - i18n
9
+ - intl
10
+ - svelte
11
+ - パフォーマンス
12
+ - intlayer
13
+ slugs:
14
+ - doc
15
+ - benchmark
16
+ - svelte
17
+ author: Aymeric PINEAU
18
+ applicationTemplate: https://github.com/intlayer-org/benchmark-i18n-svelte-template
19
+ history:
20
+ - version: 8.7.12
21
+ date: 2026-01-06
22
+ changes: "ベンチマークの初期化"
23
+ ---
24
+
25
+ # Svelte i18nライブラリ - 2026年ベンチマークレポート
26
+
27
+ このページは、Svelteにおけるi18nソリューションのベンチマークレポートです。
28
+
29
+ ## 目次
30
+
31
+ <Toc/>
32
+
33
+ ## インタラクティブベンチマーク
34
+
35
+ <I18nBenchmark framework="vite-svelte" vertical/>
36
+
37
+ ## 結果のリファレンス:
38
+
39
+ <iframe
40
+ src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_svelte.md"
41
+ width="100%"
42
+ height="600px"
43
+ style="border:none;">
44
+ </iframe>
45
+
46
+ > https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_svelte.md
47
+
48
+ 完全なベンチマークリポジトリは[こちら](https://github.com/intlayer-org/benchmark-i18n/tree/main)でご覧いただけます。
49
+
50
+ ## はじめに
51
+
52
+ 国際化ソリューションは、Svelteアプリにおいて最も重い依存関係の一つです。主なリスクは、不必要なコンテンツ(単一のルートのバンドルに含まれる他のページや他のロケールの翻訳)を送信してしまうことです。
53
+
54
+ アプリが成長するにつれて、この問題はクライアントに送信されるJavaScriptを急速に増大させ、ナビゲーションを遅くする可能性があります。
55
+
56
+ 実際、最適化が不十分な実装では、国際化されたページがi18nなしのバージョンよりも数倍重くなることがあります。
57
+
58
+ もう一つの影響は、開発者エクスペリエンス(DX)です。コンテンツの宣言方法、型、名前空間の構成、動的ロード、ロケール変更時の反応性などが含まれます。
59
+
60
+ ## TL;DR
61
+
62
+ - **Intlayer**: 最もパフォーマンス効率が高く、フットプリントが最も小さい選択肢(v8.7.12)。
63
+ - **Paraglide**: ツリーシェイキング(tree-shaking)の強力な候補ですが、開発者エクスペリエンスがより複雑で、反応性のオーバーヘッドがあります。
64
+ - **svelte-i18n**: Svelte向けの標準的で機能が充実したソリューションですが、バンドル重量が非常に大きくなります(Intlayerの約7倍)。
65
+
66
+ ## アプリをテストする
67
+
68
+ i18nリークの問題を素早く特定するために、無料のスキャナーを用意しました。[こちら](https://intlayer.org/i18n-seo-scanner)でお試しいただけます。
69
+
70
+ <iframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
71
+
72
+ ## 問題点
73
+
74
+ 多言語アプリのコストを抑えるためには、2つのレバーが不可欠です。
75
+
76
+ - ページ/名前空間ごとにコンテンツを分割し、不要な時に辞書全体をロードしないようにする。
77
+ - 必要な時にだけ、適切なロケールを動的にロードする。
78
+
79
+ これらのアプローチの技術的限界を理解する:
80
+
81
+ **動的ロード**
82
+
83
+ 動的ロードがない場合、ほとんどのソリューションは最初のレンダリングからメッセージをメモリに保持するため、ルートやロケールが多いアプリでは大きなオーバーヘッドとなります。
84
+
85
+ 動的ロードを使用する場合、トレードオフを受け入れることになります。初期JSは減りますが、言語切り替え時などに追加のリクエストが発生することがあります。
86
+
87
+ **コンテンツの分割**
88
+
89
+ `t('a.b.c')` を中心に構築された構文は非常に便利ですが、実行時に大きなJSONオブジェクトを保持することを助長しがちです。このモデルでは、ライブラリがページごとの分割戦略を提供していない限り、ツリーシェイキングが難しくなります。
90
+
91
+ ## 研究方法
92
+
93
+ このベンチマークでは、以下のライブラリを比較しました。
94
+
95
+ - `Base App` (i18nライブラリなし)
96
+ - `svelte-intlayer` (v8.7.12)
97
+ - `svelte-i18n` (v4.0.1)
98
+ - `@inlang/paraglide-js` (v2.17.0)
99
+
100
+ フレームワークは `Svelte` で、**10ページ**と**10言語**を持つ多言語アプリを使用しました。
101
+
102
+ **4つのロード戦略**を比較しました。
103
+
104
+ | 戦略 | 名前空間なし(グローバル) | 名前空間あり(スコープ) |
105
+ | :------------- | :---------------------------------------------- | :--------------------------------------------------------- |
106
+ | **静的ロード** | **Static**: 起動時にすべてをメモリに保持。 | **Scoped static**: 名前空間で分割。起動時にすべてロード。 |
107
+ | **動的ロード** | **Dynamic**: ロケールごとのオンデマンドロード。 | **Scoped dynamic**: 名前空間とロケールごとの詳細なロード。 |
108
+
109
+ ## 戦略のまとめ
110
+
111
+ - **静的(Static)**: シンプル。初期ロード後のネットワーク遅延なし。欠点:バンドルサイズが大きい。
112
+ - **動的(Dynamic)**: 初期重量を削減(遅延ロード)。ロケールが多い場合に理想的。
113
+ - **名前空間付き静的(Scoped static)**: 複雑な追加リクエストなしで、コードを整理(論理的分離)した状態に保つ。
114
+ - **名前空間付き動的(Scoped dynamic)**: コード分割とパフォーマンスのための最善のアプローチ。現在のビューとアクティブなロケールに必要なものだけをロードし、メモリ使用量を最小限に抑える。
115
+
116
+ ## 結果の詳細
117
+
118
+ ### 1 - 避けるべきソリューション
119
+
120
+ > Svelteエコシステムにおいて、明確に避けるべきソリューションはありません。
121
+
122
+ ### 2 - 許容できるソリューション
123
+
124
+ **(Paraglide)** (`@inlang/paraglide-js@2.17.0`):
125
+
126
+ `Paraglide` は革新的でよく考えられたアプローチを提供しています。Vite + Svelte アプリの文脈では、彼らが宣伝しているツリーシェイキングは期待通りに機能しており、素晴らしいことです。
127
+ しかし、React + TanStack Start の場合、ツリーシェイキングは期待通りに機能せず、Next.jsでも同様でした。とはいえ、Svelte および TanStack Start プロジェクトにおける Paraglide の使用は再確認する価値があるでしょう。
128
+ ワークフローとDXも他のオプションより複雑です。
129
+ 個人的には、プッシュする前に毎回JSファイルを再生成しなければならないのが好きではありません。これはPRを通じた開発者間の絶え間ないマージコンフリクトのリスクを生みます。また、このツールはNext.jsよりもViteに重点を置いているようです。
130
+ 最後に、他のソリューションと比較して、Paraglide はコンテンツをレンダリングするための現在のロケールを取得するためにストア(例:Svelte store)を使用しません。パースされる各ノードに対して、localStorage / cookie などからロケールを要求します。これにより、コンポーネントの反応性に影響を与える不要なロジックの実行が発生します。
131
+
132
+ > paraglideに関する注意:このソリューションはインポートのためにコードベースにコードを注入するため、ベンチマークレポートの「ライブラリサイズ(lib size)」メトリックはほぼ0になります。コード生成は、使用される関数に必要なロジック(接頭辞あり vs 接頭辞なし、クッキー vs ストレージなど)のみが含まれるため、良いことです。比較すると、Intlayer はビルド時に環境変数を注入することでこのフィルタリングを行い、ロジックに応じてコンテンツをツリーシェイクするようにバンドラーに強制します。このおかげで、paraglide と intlayer は i18next や next-intl よりも 6〜10倍軽量なソリューションとなります。
133
+
134
+ **(svelte-i18n)** (`svelte-i18n@3.4.0`):
135
+
136
+ このソリューションは、Svelteプロジェクトにおけるi18nのすべてのニーズに応えます。しかし、i18nextや他の主要なi18nソリューションと同様に、少し重いです(~15.9kb。これは `svelte-intlayer` の約7倍です)。
137
+
138
+ ### 3 - 推奨事項
139
+
140
+ **(Intlayer)** (`svelte-intlayer@8.7.12`):
141
+
142
+ 客観性を保つため、`svelte-intlayer` については私自身のソリューションであるため、個人的な評価は控えます。
143
+
144
+ ### 個人メモ
145
+
146
+ このメモは個人的なものであり、ベンチマーク結果には影響しません。それでも、i18nの世界では翻訳されたコンテンツに対して `const t = useTranslation('xx')` + `<>{t('xx.xx')}</>` のようなパターンが一般的です。
147
+
148
+ Svelteアプリにおいて、関数を `Slot` として注入することは、私の考えではアンチパターンです。また、回避可能な複雑さとJavaScriptの実行オーバーヘッド(たとえほとんど目立たなくても)を追加することになります。
@@ -57,6 +57,13 @@ history:
57
57
 
58
58
  もう一つの影響は開発体験(DX)への影響です。コンテンツの宣言方法、型、ネームスペースの構成、動的ロード、およびロケール変更時の反応性などが挙げられます。
59
59
 
60
+ ## TL;DR
61
+
62
+ - **Intlayer**: TanStack Startにおいて最高のパフォーマンスと最小のバンドルサイズ(v8.7.12)を提供します。
63
+ - **react-i18next** & **use-intl**: 大規模なエコシステムを持つ成熟した代替案ですが、大幅に重く、最適化がより複雑です。
64
+ - **Paraglide**: 革新的なツリーシェイキングのアイデアですが、実際には機能しません。TanStack StartにおいてはDXが複雑で、反応性のオーバーヘッドがあります。
65
+ - **避けるべき**: **General Translation (GT)** と **Lingo.dev**。深刻なパフォーマンスの問題、AIクォータの制限、およびベンダーロックインのためです。
66
+
60
67
  ## アプリをテストする
61
68
 
62
69
  i18nのリーク問題を素早く特定するために、無料のスキャナーを用意しました。[こちら](https://intlayer.org/i18n-seo-scanner)で利用可能です。
@@ -87,12 +94,12 @@ i18nのリーク問題を素早く特定するために、無料のスキャナ
87
94
  このベンチマークでは、以下のライブラリを比較しました。
88
95
 
89
96
  - `Base App`(i18nライブラリなし)
90
- - `react-intlayer` (v8.7.5-canary.0)
97
+ - `react-intlayer` (v8.7.12)
91
98
  - `react-i18next` (v17.0.2)
92
99
  - `use-intl` (v4.9.1)
93
100
  - `@lingui/core` (v5.3.0)
94
101
  - `@inlang/paraglide-js` (v2.15.1)
95
- - `tolgee` (v7.0.0)
102
+ - `@tolgee/react` (v7.0.0)
96
103
  - `react-intl` (v10.1.1)
97
104
  - `wuchale` (v0.22.11)
98
105
  - `gt-react` (vlatest)
@@ -150,7 +157,9 @@ i18nのリーク問題を素早く特定するために、無料のスキャナ
150
157
 
151
158
  `Paraglide`は革新的でよく考えられたアプローチを提供しています。それにもかかわらず、このベンチマークでは、Next.jsの実装やTanStack Startにおいて、彼らが宣伝していたツリーシェイキングは機能しませんでした。ワークフローとDXも他の選択肢より複雑です。個人的には、プッシュのたびにJSファイルを再生成しなければならないのが好きではありません。これはPRを通じて常にマージ競合のリスクを生み出します。
152
159
 
153
- **(Tolgee)** (`tolgee@7.0.0`):
160
+ > paraglideに関する注意:このソリューションはインポートのためにコードベースにコードを注入するため、ベンチマークレポートの「lib size」メトリクスはほぼ0になります。コード生成は、使用される関数に必要なロジック(すべてのプレフィックス対プレフィックスなし、クッキー対ストレージなど)のみが含まれるため、良いことです。対照的に、Intlayerはビルド時に環境変数を注入してこのフィルタリングを行い、ロケールに応じたコンテンツをバンドラーにツリーシェイクさせます。このおかげで、paraglideとintlayerは、i18nextやnext-intlよりも6〜10倍軽量なソリューションとなります。
161
+
162
+ **(Tolgee)** (`@tolgee/react@7.0.0`):
154
163
 
155
164
  `Tolgee`は前述の問題の多くに対処しています。しかし、同様のアプローチを持つ他のツールよりも導入が難しいと感じました。型安全性が提供されていないため、コンパイル時に紛失したキーを見つけることが非常に困難です。キーの不備を検出するために、TolgeeのAPIを自前のAPIでラップする必要がありました。
156
165
 
@@ -0,0 +1,160 @@
1
+ ---
2
+ createdAt: 2026-04-20
3
+ updatedAt: 2026-04-21
4
+ title: 2026年 Vue向けの最高のi18nソリューション - ベンチマークレポート
5
+ description: vue-i18n、fluent-vue、IntlayerなどのVue国際化(i18n)ライブラリを比較します。バンドルサイズ、リーク、反応性に関する詳細なパフォーマンスレポート。
6
+ keywords:
7
+ - benchmark
8
+ - i18n
9
+ - intl
10
+ - vue
11
+ - パフォーマンス
12
+ - intlayer
13
+ slugs:
14
+ - doc
15
+ - benchmark
16
+ - vue
17
+ author: Aymeric PINEAU
18
+ applicationTemplate: https://github.com/intlayer-org/benchmark-i18n-vue-template
19
+ history:
20
+ - version: 8.7.12
21
+ date: 2026-01-06
22
+ changes: "ベンチマークの初期化"
23
+ ---
24
+
25
+ # Vue i18nライブラリ - 2026年ベンチマークレポート
26
+
27
+ このページは、Vueにおけるi18nソリューションのベンチマークレポートです。
28
+
29
+ ## 目次
30
+
31
+ <Toc/>
32
+
33
+ ## インタラクティブベンチマーク
34
+
35
+ <I18nBenchmark framework="vite-vue" vertical/>
36
+
37
+ ## 結果のリファレンス:
38
+
39
+ <iframe
40
+ src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
41
+ width="100%"
42
+ height="600px"
43
+ style="border:none;">
44
+ </iframe>
45
+
46
+ > https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md
47
+
48
+ 完全なベンチマークリポジトリは[こちら](https://github.com/intlayer-org/benchmark-i18n/tree/main)でご覧いただけます。
49
+
50
+ ## はじめに
51
+
52
+ 国際化ソリューションは、Vueアプリにおいて最も重い依存関係の一つです。主なリスクは、不必要なコンテンツ(単一のルートのバンドルに含まれる他のページや他のロケールの翻訳)を送信してしまうことです。
53
+
54
+ アプリが成長するにつれて、この問題はクライアントに送信されるJavaScriptを急速に増大させ、ナビゲーションを遅くする可能性があります。
55
+
56
+ 実際、最適化が不十分な実装では、国際化されたページがi18nなしのバージョンよりも数倍重くなることがあります。
57
+
58
+ もう一つの影響は、開発者エクスペリエンス(DX)です。コンテンツの宣言方法、型、名前空間の構成、動的ロード、ロケール変更時の反応性などが含まれます。
59
+
60
+ ## TL;DR
61
+
62
+ - **Intlayer**: スコーピング(scoping)と動的ロードを内蔵した、最も軽量なソリューション(v8.7.12)。
63
+ - **vue-i18n**: 豊かなエコシステムを持つ業界標準ですが、非常に重くなる可能性があり、大規模アプリケーションでのコード分割の最適化が難しい場合があります。
64
+ - **fluent-vue**: 革新的なメッセージ構成ですが、型安全性が欠けており、非常に重いソリューションです。
65
+
66
+ ## アプリをテストする
67
+
68
+ i18nリークの問題を素早く特定するために、無料のスキャナーを用意しました。[こちら](https://intlayer.org/i18n-seo-scanner)でお試しいただけます。
69
+
70
+ <iframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
71
+
72
+ ## 問題点
73
+
74
+ 多言語アプリのコストを抑えるためには、2つのレバーが不可欠です。
75
+
76
+ - ページ/名前空間ごとにコンテンツを分割し、不要な時に辞書全体をロードしないようにする。
77
+ - 必要な時にだけ、適切なロケールを動的にロードする。
78
+
79
+ これらのアプローチの技術的限界を理解する:
80
+
81
+ **動的ロード**
82
+
83
+ 動的ロードがない場合、ほとんどのソリューションは最初のレンダリングからメッセージをメモリに保持するため、ルートやロケールが多いアプリでは大きなオーバーヘッドとなります。
84
+
85
+ 動的ロードを使用する場合、トレードオフを受け入れることになります。初期JSは減りますが、言語切り替え時などに追加のリクエストが発生することがあります。
86
+
87
+ **コンテンツの分割**
88
+
89
+ `const { t } = useI18n()` + `t('a.b.c')` を中心に構築された構文は非常に便利ですが、実行時に大きなJSONオブジェクトを保持することを助長しがちです。このモデルでは、ライブラリがページごとの分割戦略を提供していない限り、ツリーシェイキング(tree-shaking)が難しくなります。
90
+
91
+ ## 研究方法
92
+
93
+ このベンチマークでは、以下のライブラリを比較しました。
94
+
95
+ - `Base App` (i18nライブラリなし)
96
+ - `vue-intlayer` (v8.7.12)
97
+ - `vue-i18n` (v11.4.0)
98
+ - `fluent-vue` (v3.8.2)
99
+
100
+ フレームワークは `Vue` で、**10ページ**と**10言語**を持つ多言語アプリを使用しました。
101
+
102
+ **4つのロード戦略**を比較しました。
103
+
104
+ | 戦略 | 名前空間なし(グローバル) | 名前空間あり(スコープ) |
105
+ | :------------- | :---------------------------------------------- | :--------------------------------------------------------- |
106
+ | **静的ロード** | **Static**: 起動時にすべてをメモリに保持。 | **Scoped static**: 名前空間で分割。起動時にすべてロード。 |
107
+ | **動的ロード** | **Dynamic**: ロケールごとのオンデマンドロード。 | **Scoped dynamic**: 名前空間とロケールごとの詳細なロード。 |
108
+
109
+ ## 戦略のまとめ
110
+
111
+ - **静的(Static)**: シンプル。初期ロード後のネットワーク遅延なし。欠点:バンドルサイズが大きい。
112
+ - **動的(Dynamic)**: 初期重量を削減(遅延ロード)。ロケールが多い場合に理想的。
113
+ - **名前空間付き静的(Scoped static)**: 複雑な追加リクエストなしで、コードを整理(論理的分離)した状態に保つ。
114
+ - **名前空間付き動的(Scoped dynamic)**: コード分割とパフォーマンスのための最善のアプローチ。現在のビューとアクティブなロケールに必要なものだけをロードし、メモリ使用量を最小限に抑える。
115
+
116
+ ### 測定項目:
117
+
118
+ 各スタックについて実際のブラウザで同じ多言語アプリを実行し、実際にネットワーク上を流れたデータ量と時間を記録しました。サイズは**通常のWeb圧縮後**の数値です。これは、生のソースコード量よりもユーザーが実際にダウンロードする量に近いからです。
119
+
120
+ - **i18nライブラリのサイズ**: バンドル、ツリーシェイキング、ミニファイ後のi18nライブラリのサイズです。空のコンポーネントにおけるプロバイダーやコンポーザブル(composables)のコードサイズを指し、翻訳ファイルのロードは含みません。コンテンツが入る前に、ライブラリ自体がどれほど「高価」であるかを示します。
121
+
122
+ - **1ページあたりのJavaScript**: 各ベンチマークルートにおいて、ブラウザが読み込むスクリプトの量です。テストスイート内のページの平均値(およびロケールごとの平均値)です。重いページは遅いページです。
123
+
124
+ - **他のロケールからのリーク(Leakage)**: 同じページの内容ですが、別の言語のコンテンツが誤って監査対象のページにロードされてしまうことです。このコンテンツは不要であり、避けるべきです(例:`/en/about` ページのバンドルに含まれる `/fr/about` ページの内容)。
125
+
126
+ - **他のルートからのリーク**: アプリ内の**他の画面**についても同様です。1つのページしか開いていないのに、他の画面のテキストが一緒に運ばれていないかを示します(例:`/en/contact` ページのバンドルに含まれる `/en/about` ページの内容)。数値が高い場合は、分割が不十分であるか、バンドルが広範すぎることを示唆しています。
127
+
128
+ - **コンポーネントの平均バンドルサイズ**: 一般的なUI要素を**一つずつ**測定します。これにより、国際化が日常的なコンポーネントをひっそりと肥大化させていないかを確認できます。例えば、コンポーネントが再レンダリングされる際、それらすべてのデータをメモリからロードすることになります。巨大なJSONをコンポーネントに紐付けることは、未使用のデータの大きなストアを接続するようなもので、コンポーネントのパフォーマンスを低下させます。
129
+
130
+ - **言語切り替えの反応性**: アプリ自身のコントロールを使用して言語を切り替え、ページが明確に切り替わるまでの時間を測定します。これはユーザーが気づく時間です。
131
+
132
+ - **言語変更後のレンダリング作業**: 言語が切り替わり始めた後に、インターフェースが新しい言語で再描画するために費やした労力です。「体感」時間とフレームワークのコストが異なる場合に役立ちます。
133
+
134
+ - **初期ページロード時間**: ナビゲーションから、ブラウザがページを完全にロードしたと判断するまでの時間です。コールドスタートの比較に役立ちます。
135
+
136
+ - **ハイドレーション時間(Hydration)**: クライアントがサーバーからのHTMLをインタラクティブなものに変えるのに費やす時間です。表内のダッシュ(-)は、その実装がこのベンチマークで信頼できるハイドレーションの数値を提供しなかったことを意味します。
137
+
138
+ ## 結果の詳細
139
+
140
+ ### 1 - 避けるべきソリューション
141
+
142
+ > Vueエコシステムにおいて、明確に避けるべきソリューションはありません。
143
+
144
+ ### 2 - 許容できるソリューション
145
+
146
+ **(vue-i18n)** (`vue-i18n@11.4.0`):
147
+
148
+ - **vue-i18n** は間違いなくVueで最も使用されているi18nライブラリであり、多くの機能と巨大なエコシステムを持っています。しかし、内部的にはかなり重いソリューションです。メッセージの遅延ロードを統合していても、スコーピング(scoping)機能が欠けています。標準的なVue SPAアプリの場合は問題ありませんが、@nuxt/i18nを使用するNuxtアプリの場合、すべてのページのメッセージが単一のページに含まれてしまうことになります。10ページを超える大規模なNuxtアプリでは、これが深刻な問題になる可能性があります。
149
+
150
+ パッケージは非常に重いです(~24.3kb。これは `vue-intlayer` の約9倍です)。
151
+
152
+ **(fluent-vue)** (`fluent-vue@0.5.0`):
153
+
154
+ - **fluent-vue** は .ftl 形式を通じて革新を試みています。メッセージの構成は素晴らしく、始めやすいです。しかし実際には、型安全性の欠如によりエラーのリスクが高まり、デバッグに時間がかかる可能性があります。さらに、このソリューションはViteプラグインを使用してメッセージをロードしますが、これによりすべての言語の全コンテンツが各ページに強制的にロードされます。加えて、これは極めて重いソリューションです(~92.7kb。これは `vue-intlayer` の約34倍です)。
155
+
156
+ ### 3 - 推奨事項
157
+
158
+ **(Intlayer)** (`vue-intlayer@8.7.12`):
159
+
160
+ 客観性を保つため、`vue-intlayer` については私自身のソリューションであるため、個人的な評価は控えます。
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2024-08-13
3
- updatedAt: 2026-04-08
3
+ updatedAt: 2026-05-12
4
4
  title: 設定 (Configuration)
5
5
  description: アプリケーションにIntlayerを設定する方法について説明します。ニーズに合わせてIntlayerをカスタマイズするためのさまざまな設定とオプションを理解してください。
6
6
  keywords:
@@ -14,6 +14,9 @@ slugs:
14
14
  - concept
15
15
  - configuration
16
16
  history:
17
+ - version: 8.9.4
18
+ date: 2026-05-12
19
+ changes: "LM Studio プロバイダーのサポートを追加"
17
20
  - version: 8.7.0
18
21
  date: 2026-04-08
19
22
  changes: "ビルド設定に `prune` と `minify` オプションを追加"
@@ -350,7 +353,7 @@ const config: IntlayerConfig = {
350
353
  ai: {
351
354
  /**
352
355
  * 使用する AI プロバイダー。
353
- * オプション: 'openai', 'anthropic', 'mistral', 'deepseek', 'gemini', 'ollama', 'openrouter', 'alibaba', 'fireworks', 'groq', 'huggingface', 'bedrock', 'googlevertex', 'togetherai'
356
+ * オプション: 'openai', 'anthropic', 'mistral', 'deepseek', 'gemini', 'ollama', 'openrouter', 'alibaba', 'fireworks', 'groq', 'huggingface', 'bedrock', 'googlevertex', 'togetherai', 'lmstudio'
354
357
  * デフォルト: 'openai'
355
358
  */
356
359
  provider: "openai",
@@ -916,16 +919,17 @@ Intlayer は、柔軟性を最大限に高めるために複数の AI プロバ
916
919
  - **Groq**
917
920
  - **Amazon Bedrock**
918
921
  - **Together.ai**
919
-
920
- | フィールド | 説明 | 型 | デフォルト | 例 | 備考 |
921
- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
922
- | `provider` | Intlayer AI 機能に使用するプロバイダー。 | `'openai'` &#124; <br/> `'anthropic'` &#124; <br/> `'mistral'` &#124; <br/> `'deepseek'` &#124; <br/> `'gemini'` &#124; <br/> `'ollama'` &#124; <br/> `'openrouter'` &#124; <br/> `'alibaba'` &#124; <br/> `'fireworks'` &#124; <br/> `'groq'` &#124; <br/> `'huggingface'` &#124; <br/> `'bedrock'` &#124; <br/> `'googleaistudio'` &#124; <br/> `'googlevertex'` &#124; <br/> `'togetherai'` | `undefined` | `'anthropic'` | プロバイダーによって、必要な API キーや価格が異なります。 |
923
- | `model` | AI 機能に使用するモデル。 | `string` | なし | `'gpt-4o-2024-11-20'` | 特定のモデルはプロバイダーによって異なります。 |
924
- | `temperature` | AI の応答のランダム性を制御します。 | `number` | なし | `0.1` | 温度が高いほど、創造的で予測しにくくなります。 |
925
- | `apiKey` | 選択したプロバイダーの API キー。 | `string` | なし | `process.env.OPENAI_API_KEY` | 秘密にする必要があるため、環境変数に保存してください。 |
926
- | `applicationContext` | AI がより正確な翻訳を生成できるようにするための、アプリケーションに関する追加のコンテキスト (ドメイン、ターゲットオーディエンス、トーン、用語)。 | `string` | なし | `'旅行予約アプリのコンテキスト'` | ルールを追加するためにも使用できます (例: `"URL を変換しないでください"`)。 |
927
- | `baseURL` | AI API のベース URL。 | `string` | なし | `'https://api.openai.com/v1'` <br/> `'http://localhost:5000'` | ローカルまたはカスタムの AI API エンドポイントを指すことができます。 |
928
- | `dataSerialization` | AI 機能のデータシリアライゼーション形式。 | `'json'` &#124; <br/> `'toon'` | `undefined` | `'toon'` | `'json'`: デフォルト、信頼性が高いがトークン消費が多い。<br/>• `'toon'`: トークン消費が少ないが、一貫性に欠ける。<br/>• 推論の努力 (reasoning effort) などの追加パラメータがコンテキストとしてモデルに渡されます。 |
922
+ - **LM Studio**
923
+
924
+ | フィールド | 説明 | | デフォルト | | 備考 |
925
+ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
926
+ | `provider` | Intlayer の AI 機能に使用するプロバイダー。 | `'openai'` &#124; <br/> `'anthropic'` &#124; <br/> `'mistral'` &#124; <br/> `'deepseek'` &#124; <br/> `'gemini'` &#124; <br/> `'ollama'` &#124; <br/> `'openrouter'` &#124; <br/> `'alibaba'` &#124; <br/> `'fireworks'` &#124; <br/> `'groq'` &#124; <br/> `'huggingface'` &#124; <br/> `'bedrock'` &#124; <br/> `'googleaistudio'` &#124; <br/> `'googlevertex'` &#124; <br/> `'togetherai'` &#124; <br/> `'lmstudio'` | `undefined` | `'anthropic'` | プロバイダーによって、必要な API キーや価格が異なります。 |
927
+ | `model` | AI 機能に使用するモデル。 | `string` | なし | `'gpt-4o-2024-11-20'` | 特定のモデルはプロバイダーによって異なります。 |
928
+ | `temperature` | AI の応答のランダム性を制御します。 | `number` | なし | `0.1` | 温度が高いほど、創造的で予測しにくくなります。 |
929
+ | `apiKey` | 選択したプロバイダーの API キー。 | `string` | なし | `process.env.OPENAI_API_KEY` | 秘密にする必要があるため、環境変数に保存してください。 |
930
+ | `applicationContext` | AI がより正確な翻訳を生成できるようにするための、アプリケーションに関する追加のコンテキスト (ドメイン、ターゲットオーディエンス、トーン、用語)。 | `string` | なし | `'旅行予約アプリのコンテキスト'` | ルールを追加するためにも使用できます (例: `"URL を変換しないでください"`)。 |
931
+ | `baseURL` | AI API のベース URL。 | `string` | なし | `'https://api.openai.com/v1'` <br/> `'http://localhost:5000'` | ローカルまたはカスタムの AI API エンドポイントを指すことができます。 |
932
+ | `dataSerialization` | AI 機能のデータシリアライゼーション形式。 | `'json'` &#124; <br/> `'toon'` | `undefined` | `'toon'` | • `'json'`: デフォルト、信頼性が高いがトークン消費が多い。<br/>• `'toon'`: トークン消費が少ないが、一貫性に欠ける。<br/>• 推論の努力 (reasoning effort) などの追加パラメータがコンテキストとしてモデルに渡されます。 |
929
933
 
930
934
  ---
931
935
 
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2025-02-07
3
- updatedAt: 2026-01-28
3
+ updatedAt: 2026-05-12
4
4
  title: コンテンツファイル
5
5
  description: コンテンツ宣言ファイルの拡張機能をカスタマイズする方法を学びます。このドキュメントに従って、プロジェクトで効率的に条件を実装しましょう。
6
6
  keywords:
@@ -12,6 +12,9 @@ slugs:
12
12
  - concept
13
13
  - content
14
14
  history:
15
+ - version: 8.9.0
16
+ date: 2026-05-12
17
+ changes: "コンテンツノードタイプ `plural` を追加"
15
18
  - version: 8.0.0
16
19
  date: 2026-01-28
17
20
  changes: "`html` コンテンツノードタイプを追加"
@@ -63,6 +66,7 @@ import { type ReactNode } from "react";
63
66
  import {
64
67
  t,
65
68
  enu,
69
+ plural,
66
70
  cond,
67
71
  nest,
68
72
  md,
@@ -82,6 +86,7 @@ interface Content {
82
86
  };
83
87
  multilingualContent: string;
84
88
  quantityContent: string;
89
+ pluralContent: string;
85
90
  conditionalContent: string;
86
91
  markdownContent: never;
87
92
  htmlContent: never;
@@ -118,6 +123,10 @@ export default {
118
123
  ">5": "いくつかの車",
119
124
  ">19": "多くの車",
120
125
  }),
126
+ pluralContent: plural({
127
+ one: "One car",
128
+ other: "{{count}} cars",
129
+ }),
121
130
  conditionalContent: cond({
122
131
  true: "検証が有効です",
123
132
  false: "検証が無効です",
@@ -172,6 +181,13 @@ export default {
172
181
  ">5": "いくつかの車",
173
182
  ">19": "多くの車",
174
183
  },
184
+ "pluralContent": {
185
+ "nodeType": "plural",
186
+ "plural": {
187
+ "one": "One car",
188
+ "other": "{{count}} cars",
189
+ },
190
+ },
175
191
  },
176
192
  "conditionalContent": {
177
193
  "nodeType": "condition",
@@ -219,6 +235,7 @@ export default {
219
235
  - **プリミティブ値**:文字列、数値、真偽値、null、undefined
220
236
  - **型付きノード**:翻訳、条件、マークダウンなどの特殊なコンテンツタイプ
221
237
  - **関数**:実行時に評価可能な動的コンテンツ [関数フェッチについてはこちら](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/function_fetching.md)
238
+ - **複数形コンテンツ**: 詳細については、 複数形コンテンツ [詳細については、 複数形コンテンツ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/plural.md)
222
239
  - **ネストされたコンテンツ**:他の辞書への参照
223
240
 
224
241
  #### コンテンツタイプ
@@ -544,6 +561,8 @@ multilingualContent: t({
544
561
  });
545
562
  ```
546
563
 
564
+ > 詳細については、 [翻訳コンテンツ (`t`) ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/translation.md) を参照してください。
565
+
547
566
  ### 条件コンテンツ (`cond`)
548
567
 
549
568
  ブール条件に基づいて変化するコンテンツ:
@@ -557,6 +576,8 @@ conditionalContent: cond({
557
576
  });
558
577
  ```
559
578
 
579
+ > 詳細については、 [条件コンテンツ (`cond`) ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/condition.md) を参照してください。
580
+
560
581
  ### 列挙コンテンツ (`enu`)
561
582
 
562
583
  列挙された値に基づいて変化するコンテンツ:
@@ -571,7 +592,22 @@ statusContent: enu({
571
592
  });
572
593
  ```
573
594
 
574
- ### 挿入コンテンツ (`insert`)
595
+ > 詳細については、 [列挙コンテンツ (`enu`) ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/enumeration.md) を参照してください。
596
+
597
+ ### Plural Content (`plural`)
598
+
599
+ Content that varies based on plural rules:
600
+
601
+ ```typescript
602
+ import { plural } from "intlayer";
603
+
604
+ pluralContent: plural({
605
+ one: "One car",
606
+ other: "{{count}} cars",
607
+ });
608
+ ```
609
+
610
+ > 詳細については、 [Plural Content ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/plural.md) を参照してください。### 挿入コンテンツ (`insert`)
575
611
 
576
612
  他のコンテンツに挿入できるコンテンツ:
577
613
 
@@ -581,6 +617,8 @@ import { insert } from "intlayer";
581
617
  insertionContent: insert("This text can be inserted anywhere"); // このテキストはどこにでも挿入できます
582
618
  ```
583
619
 
620
+ > 詳細については、 [挿入コンテンツ (`insert`) ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/insertion.md) を参照してください。
621
+
584
622
  ### ネストコンテンツ (`nest`)
585
623
 
586
624
  他の辞書への参照:
@@ -591,6 +629,8 @@ import { nest } from "intlayer";
591
629
  nestedContent: nest("about-page"); // "about-page" への参照
592
630
  ```
593
631
 
632
+ > 詳細については、 [ネストコンテンツ (`nest`) ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/nesting.md) を参照してください。
633
+
594
634
  ### マークダウンコンテンツ (`md`)
595
635
 
596
636
  Markdown形式のリッチテキストコンテンツ:
@@ -603,6 +643,8 @@ markdownContent: md(
603
643
  );
604
644
  ```
605
645
 
646
+ > 詳細については、 [マークダウンコンテンツ (`md`) ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/markdown.md) を参照してください。
647
+
606
648
  ### HTMLコンテンツ (`html`)
607
649
 
608
650
  標準タグまたはカスタムコンポーネントを使用できるリッチHTMLコンテンツ:
@@ -620,6 +662,8 @@ localizedHtmlContent: t({
620
662
  });
621
663
  ```
622
664
 
665
+ > 詳細については、 [HTMLコンテンツ (`html`) ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/html.md) を参照してください。
666
+
623
667
  ### ジェンダーコンテンツ (`gender`)
624
668
 
625
669
  ジェンダーに基づいて変化するコンテンツ:
@@ -634,6 +678,8 @@ genderContent: gender({
634
678
  });
635
679
  ```
636
680
 
681
+ > 詳細については、 [ジェンダーコンテンツ (`gender`) ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/gender.md) を参照してください。
682
+
637
683
  ### ファイルコンテンツ (`file`)
638
684
 
639
685
  外部ファイルへの参照:
@@ -644,6 +690,8 @@ import { file } from "intlayer";
644
690
  fileContent: file("./path/to/content.txt");
645
691
  ```
646
692
 
693
+ > 詳細については、 [ファイルコンテンツ (`file`) ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/file.md) を参照してください。
694
+
647
695
  ## コンテンツファイルの作成
648
696
 
649
697
  ### 基本的なコンテンツファイル構造
@@ -639,14 +639,15 @@ Intlayer は TypeScript の利点を活かすためにモジュール拡張 (mod
639
639
 
640
640
  TypeScript の設定に自動生成された型が含まれていることを確認してください。
641
641
 
642
- ````json5 fileName="tsconfig.json"
642
+ ```json5 fileName="tsconfig.json"
643
643
  {
644
644
  // ... 既存の TypeScript 設定
645
645
  "include": [
646
- // ... 既存の TypeScript 設定
646
+ // ... 既存의 TypeScript 設定
647
647
  ".intlayer/**/*.ts", // 自動生成された型を含める
648
648
  ],
649
649
  }
650
+ ```
650
651
 
651
652
  ### Git 設定
652
653
 
@@ -657,7 +658,7 @@ Intlayer によって生成されたファイルは無視することを推奨
657
658
  ```plaintext fileName=".gitignore"
658
659
  # Intlayer によって生成されたファイルを無視する
659
660
  .intlayer
660
- ````
661
+ ```
661
662
 
662
663
  ### VS Code 拡張機能
663
664