@intlayer/docs 5.7.8 → 5.8.0-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.
- package/blog/ar/intlayer_with_next-i18next.md +3 -4
- package/blog/ar/intlayer_with_next-intl.md +3 -4
- package/blog/ar/intlayer_with_react-i18next.md +1 -1
- package/blog/ar/intlayer_with_react-intl.md +1 -1
- package/blog/de/intlayer_with_next-i18next.md +3 -4
- package/blog/de/intlayer_with_react-intl.md +1 -1
- package/blog/en/intlayer_with_next-i18next.md +3 -4
- package/blog/en/intlayer_with_next-intl.md +3 -4
- package/blog/en/intlayer_with_react-i18next.md +1 -1
- package/blog/en/intlayer_with_react-intl.md +1 -1
- package/blog/en-GB/intlayer_with_next-i18next.md +3 -4
- package/blog/en-GB/intlayer_with_next-intl.md +3 -4
- package/blog/en-GB/intlayer_with_react-i18next.md +1 -1
- package/blog/en-GB/intlayer_with_react-intl.md +1 -1
- package/blog/es/intlayer_with_next-i18next.md +3 -4
- package/blog/es/intlayer_with_next-intl.md +3 -4
- package/blog/es/intlayer_with_react-i18next.md +1 -1
- package/blog/es/intlayer_with_react-intl.md +1 -1
- package/blog/fr/intlayer_with_next-i18next.md +3 -4
- package/blog/fr/intlayer_with_next-intl.md +3 -4
- package/blog/fr/intlayer_with_react-i18next.md +1 -1
- package/blog/fr/intlayer_with_react-intl.md +1 -1
- package/blog/hi/intlayer_with_next-i18next.md +3 -4
- package/blog/hi/intlayer_with_next-intl.md +3 -4
- package/blog/hi/intlayer_with_react-i18next.md +1 -1
- package/blog/hi/intlayer_with_react-intl.md +1 -1
- package/blog/it/intlayer_with_next-i18next.md +3 -4
- package/blog/it/intlayer_with_next-intl.md +3 -4
- package/blog/it/intlayer_with_react-i18next.md +1 -1
- package/blog/it/intlayer_with_react-intl.md +1 -1
- package/blog/ja/intlayer_with_next-i18next.md +3 -4
- package/blog/ja/intlayer_with_next-intl.md +3 -4
- package/blog/ja/intlayer_with_react-intl.md +1 -1
- package/blog/ko/intlayer_with_next-i18next.md +3 -4
- package/blog/ko/intlayer_with_next-intl.md +3 -4
- package/blog/ko/intlayer_with_react-intl.md +1 -1
- package/blog/pt/intlayer_with_next-i18next.md +3 -4
- package/blog/pt/intlayer_with_next-intl.md +3 -4
- package/blog/pt/intlayer_with_react-intl.md +1 -1
- package/blog/ru/intlayer_with_next-i18next.md +3 -4
- package/blog/ru/intlayer_with_next-intl.md +3 -4
- package/blog/ru/intlayer_with_react-i18next.md +1 -1
- package/blog/ru/intlayer_with_react-intl.md +1 -1
- package/blog/zh/intlayer_with_next-i18next.md +3 -4
- package/blog/zh/intlayer_with_next-intl.md +3 -4
- package/blog/zh/intlayer_with_react-i18next.md +1 -1
- package/blog/zh/intlayer_with_react-intl.md +1 -1
- package/dist/cjs/generated/docs.entry.cjs +41 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +41 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/formatters.md +239 -0
- package/docs/ar/interest_of_intlayer.md +162 -49
- package/docs/ar/introduction.md +3 -3
- package/docs/ar/packages/intlayer/index.md +3 -3
- package/docs/ar/packages/next-intlayer/index.md +3 -3
- package/docs/de/formatters.md +239 -0
- package/docs/de/interest_of_intlayer.md +161 -47
- package/docs/de/introduction.md +3 -3
- package/docs/de/packages/intlayer/index.md +3 -3
- package/docs/de/packages/next-intlayer/index.md +3 -3
- package/docs/de/packages/react-intlayer/index.md +3 -3
- package/docs/en/formatters.md +250 -0
- package/docs/en/interest_of_intlayer.md +159 -46
- package/docs/en/introduction.md +3 -3
- package/docs/en/packages/intlayer/index.md +3 -3
- package/docs/en/packages/next-intlayer/index.md +3 -3
- package/docs/en/packages/react-intlayer/index.md +3 -3
- package/docs/en-GB/formatters.md +239 -0
- package/docs/en-GB/interest_of_intlayer.md +160 -53
- package/docs/en-GB/packages/intlayer/index.md +3 -3
- package/docs/en-GB/packages/next-intlayer/index.md +3 -3
- package/docs/en-GB/packages/react-intlayer/index.md +3 -3
- package/docs/es/formatters.md +239 -0
- package/docs/es/interest_of_intlayer.md +159 -47
- package/docs/es/introduction.md +3 -3
- package/docs/es/packages/intlayer/index.md +3 -3
- package/docs/es/packages/next-intlayer/index.md +3 -3
- package/docs/fr/formatters.md +239 -0
- package/docs/fr/interest_of_intlayer.md +160 -46
- package/docs/fr/introduction.md +3 -3
- package/docs/fr/packages/intlayer/index.md +3 -3
- package/docs/fr/packages/next-intlayer/index.md +3 -3
- package/docs/fr/packages/react-intlayer/index.md +3 -3
- package/docs/hi/formatters.md +239 -0
- package/docs/hi/interest_of_intlayer.md +158 -42
- package/docs/hi/introduction.md +3 -3
- package/docs/hi/packages/intlayer/index.md +3 -3
- package/docs/hi/packages/next-intlayer/index.md +3 -3
- package/docs/hi/packages/react-intlayer/index.md +3 -3
- package/docs/it/formatters.md +239 -0
- package/docs/it/interest_of_intlayer.md +160 -46
- package/docs/it/introduction.md +3 -3
- package/docs/it/packages/intlayer/index.md +3 -3
- package/docs/it/packages/next-intlayer/index.md +3 -3
- package/docs/it/packages/react-intlayer/index.md +3 -3
- package/docs/ja/formatters.md +261 -0
- package/docs/ja/interest_of_intlayer.md +157 -48
- package/docs/ja/introduction.md +3 -3
- package/docs/ja/packages/intlayer/index.md +3 -3
- package/docs/ja/packages/next-intlayer/index.md +3 -3
- package/docs/ja/packages/react-intlayer/index.md +3 -3
- package/docs/ko/formatters.md +258 -0
- package/docs/ko/interest_of_intlayer.md +160 -48
- package/docs/ko/introduction.md +3 -3
- package/docs/ko/packages/intlayer/index.md +3 -3
- package/docs/ko/packages/next-intlayer/index.md +3 -3
- package/docs/ko/packages/react-intlayer/index.md +3 -3
- package/docs/pt/formatters.md +239 -0
- package/docs/pt/interest_of_intlayer.md +162 -47
- package/docs/pt/introduction.md +3 -3
- package/docs/pt/packages/intlayer/index.md +3 -3
- package/docs/pt/packages/next-intlayer/index.md +3 -3
- package/docs/pt/packages/react-intlayer/index.md +3 -3
- package/docs/ru/formatters.md +239 -0
- package/docs/ru/interest_of_intlayer.md +168 -50
- package/docs/ru/introduction.md +3 -3
- package/docs/ru/packages/intlayer/index.md +3 -3
- package/docs/ru/packages/next-intlayer/index.md +3 -3
- package/docs/ru/packages/react-intlayer/index.md +3 -3
- package/docs/zh/formatters.md +239 -0
- package/docs/zh/interest_of_intlayer.md +158 -48
- package/docs/zh/introduction.md +3 -3
- package/docs/zh/packages/intlayer/index.md +3 -3
- package/docs/zh/packages/next-intlayer/index.md +3 -3
- package/docs/zh/packages/react-intlayer/index.md +3 -3
- package/package.json +12 -12
- package/src/generated/docs.entry.ts +41 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2024-08-14
|
|
3
|
-
updatedAt: 2025-
|
|
3
|
+
updatedAt: 2025-08-20
|
|
4
4
|
title: Intlayerの利点
|
|
5
|
-
description: プロジェクトでIntlayer
|
|
5
|
+
description: プロジェクトでIntlayerを使用する利点とメリットを発見しましょう。Intlayerが他のフレームワークと比べて際立つ理由を理解してください。
|
|
6
6
|
keywords:
|
|
7
7
|
- 利点
|
|
8
8
|
- メリット
|
|
@@ -11,41 +11,104 @@ keywords:
|
|
|
11
11
|
- 比較
|
|
12
12
|
slugs:
|
|
13
13
|
- doc
|
|
14
|
-
-
|
|
15
|
-
- interest
|
|
14
|
+
- why
|
|
16
15
|
---
|
|
17
16
|
|
|
18
|
-
# Intlayer
|
|
17
|
+
# なぜIntlayerを検討すべきか？
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
## Intlayerとは？
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
**Intlayer**はJavaScript開発者向けに特化して設計された国際化ライブラリです。コードのあらゆる場所でコンテンツの宣言を可能にします。多言語コンテンツの宣言を構造化された辞書に変換し、コードに簡単に統合できるようにします。TypeScriptを使用することで、**Intlayer**は開発をより強力かつ効率的にします。
|
|
22
|
+
|
|
23
|
+
## なぜIntlayerは作られたのか？
|
|
24
|
+
|
|
25
|
+
Intlayerは、`next-intl`、`react-i18next`、`react-intl`、`next-i18next`、`react-intl`、および`vue-i18n`などの一般的なi18nライブラリすべてに共通する問題を解決するために作られました。
|
|
26
|
+
|
|
27
|
+
これらのすべてのソリューションは、コンテンツを一覧化し管理するために集中管理型のアプローチを採用しています。例えば：
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
.
|
|
31
|
+
├── locales
|
|
32
|
+
│ ├── en.json
|
|
33
|
+
│ ├── fr.json
|
|
34
|
+
│ └── es.json
|
|
35
|
+
├── i18n.ts
|
|
36
|
+
└── src
|
|
37
|
+
└── components
|
|
38
|
+
└── MyComponent
|
|
39
|
+
└── index.tsx
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
または、名前空間を使用した場合：
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
.
|
|
46
|
+
├── locales
|
|
47
|
+
│ ├── en
|
|
48
|
+
│ │ ├── footer.json
|
|
49
|
+
│ │ └── navbar.json
|
|
50
|
+
│ ├── fr
|
|
51
|
+
│ │ ├── footer.json
|
|
52
|
+
│ │ └── navbar.json
|
|
53
|
+
│ └── es
|
|
54
|
+
│ ├── footer.json
|
|
55
|
+
│ └── navbar.json
|
|
56
|
+
├── i18n.ts
|
|
57
|
+
└── src
|
|
58
|
+
└── components
|
|
59
|
+
└── MyComponent
|
|
60
|
+
└── index.tsx
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
このようなアーキテクチャは、開発プロセスを遅くし、コードベースの保守を複雑にするいくつかの理由があります：
|
|
64
|
+
|
|
65
|
+
1. **新しいコンポーネントを作成するたびに、以下を行う必要があります：**
|
|
66
|
+
- `locales` フォルダに新しいリソース／名前空間を作成する
|
|
67
|
+
- ページ内で新しい名前空間をインポートすることを忘れない
|
|
68
|
+
- コンテンツを翻訳する（多くの場合、AI提供者からのコピー＆ペーストで手動で行われる）
|
|
69
|
+
|
|
70
|
+
2. **コンポーネントに変更を加えるたびに、以下を行う必要があります：**
|
|
71
|
+
- 関連するリソース／名前空間を検索する（コンポーネントから離れている）
|
|
72
|
+
- コンテンツを翻訳する
|
|
73
|
+
- すべてのロケールでコンテンツが最新であることを確認する
|
|
74
|
+
- 名前空間に未使用のキー／値が含まれていないことを検証する
|
|
75
|
+
- すべてのロケールでJSONファイルの構造が同じであることを保証する
|
|
76
|
+
|
|
77
|
+
プロフェッショナルなプロジェクトでは、これらのソリューションを使用する際に、コンテンツの翻訳管理を支援するためにローカリゼーションプラットフォームがよく利用されます。しかし、大規模なプロジェクトではこれがすぐにコスト高になることがあります。
|
|
78
|
+
|
|
79
|
+
この問題を解決するために、Intlayerはコンテンツをコンポーネント単位でスコープし、CSS（`styled-components`）、型定義、ドキュメント（`storybook`）、ユニットテスト（`jest`）と同様に、コンテンツをコンポーネントの近くに保持するアプローチを採用しています。
|
|
23
80
|
|
|
24
81
|
```bash codeFormat="typescript"
|
|
25
82
|
.
|
|
26
|
-
└──
|
|
83
|
+
└── components
|
|
27
84
|
└── MyComponent
|
|
28
85
|
├── index.content.ts
|
|
86
|
+
├── index.test.tsx
|
|
87
|
+
├── index.stories.tsx
|
|
29
88
|
└── index.tsx
|
|
30
89
|
```
|
|
31
90
|
|
|
32
91
|
```bash codeFormat="commonjs"
|
|
33
92
|
.
|
|
34
|
-
└──
|
|
93
|
+
└── components
|
|
35
94
|
└── MyComponent
|
|
36
95
|
├── index.content.cjs
|
|
37
|
-
|
|
96
|
+
├── index.test.mjs
|
|
97
|
+
├── index.stories.mjs
|
|
98
|
+
└── index.tsx
|
|
38
99
|
```
|
|
39
100
|
|
|
40
101
|
```bash codeFormat="esm"
|
|
41
102
|
.
|
|
42
|
-
└──
|
|
103
|
+
└── components
|
|
43
104
|
└── MyComponent
|
|
44
105
|
├── index.content.mjs
|
|
45
|
-
|
|
106
|
+
├── index.test.mjs
|
|
107
|
+
├── index.stories.mjs
|
|
108
|
+
└── index.tsx
|
|
46
109
|
```
|
|
47
110
|
|
|
48
|
-
```tsx fileName="./
|
|
111
|
+
```tsx fileName="./components/MyComponent/index.content.ts" codeFormat="typescript"
|
|
49
112
|
import { t, type Dictionary } from "intlayer";
|
|
50
113
|
|
|
51
114
|
const componentExampleContent = {
|
|
@@ -53,8 +116,8 @@ const componentExampleContent = {
|
|
|
53
116
|
content: {
|
|
54
117
|
myTranslatedContent: t({
|
|
55
118
|
en: "Hello World",
|
|
56
|
-
fr: "Bonjour le monde",
|
|
57
119
|
es: "Hola Mundo",
|
|
120
|
+
fr: "Bonjour le monde",
|
|
58
121
|
}),
|
|
59
122
|
},
|
|
60
123
|
} satisfies Dictionary;
|
|
@@ -62,18 +125,17 @@ const componentExampleContent = {
|
|
|
62
125
|
export default componentExampleContent;
|
|
63
126
|
```
|
|
64
127
|
|
|
65
|
-
```jsx fileName="./
|
|
128
|
+
```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
|
|
66
129
|
import { t } from "intlayer";
|
|
67
130
|
|
|
68
131
|
/** @type {import('intlayer').Dictionary} */
|
|
69
|
-
// コンポーネントの翻訳コンテンツの定義
|
|
70
132
|
const componentExampleContent = {
|
|
71
133
|
key: "component-example",
|
|
72
134
|
content: {
|
|
73
135
|
myTranslatedContent: t({
|
|
74
136
|
en: "Hello World",
|
|
75
|
-
fr: "Bonjour le monde",
|
|
76
137
|
es: "Hola Mundo",
|
|
138
|
+
fr: "Bonjour le monde",
|
|
77
139
|
}),
|
|
78
140
|
},
|
|
79
141
|
};
|
|
@@ -81,18 +143,17 @@ const componentExampleContent = {
|
|
|
81
143
|
export default componentExampleContent;
|
|
82
144
|
```
|
|
83
145
|
|
|
84
|
-
```jsx fileName="./
|
|
146
|
+
```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
|
|
85
147
|
const { t } = require("intlayer");
|
|
86
148
|
|
|
87
149
|
/** @type {import('intlayer').Dictionary} */
|
|
88
|
-
// コンポーネントの翻訳コンテンツの定義
|
|
89
150
|
const componentExampleContent = {
|
|
90
151
|
key: "component-example",
|
|
91
152
|
content: {
|
|
92
153
|
myTranslatedContent: t({
|
|
93
154
|
en: "Hello World",
|
|
94
|
-
fr: "Bonjour le monde",
|
|
95
155
|
es: "Hola Mundo",
|
|
156
|
+
fr: "Bonjour le monde",
|
|
96
157
|
}),
|
|
97
158
|
},
|
|
98
159
|
};
|
|
@@ -100,10 +161,9 @@ const componentExampleContent = {
|
|
|
100
161
|
module.exports = componentExampleContent;
|
|
101
162
|
```
|
|
102
163
|
|
|
103
|
-
```tsx fileName="./
|
|
164
|
+
```tsx fileName="./components/MyComponent/index.tsx" codeFormat="typescript"
|
|
104
165
|
import { useIntlayer } from "react-intlayer";
|
|
105
166
|
|
|
106
|
-
// コンポーネント例の定義
|
|
107
167
|
export const ComponentExample = () => {
|
|
108
168
|
const { myTranslatedContent } = useIntlayer("component-example");
|
|
109
169
|
|
|
@@ -111,10 +171,9 @@ export const ComponentExample = () => {
|
|
|
111
171
|
};
|
|
112
172
|
```
|
|
113
173
|
|
|
114
|
-
```jsx fileName="./
|
|
174
|
+
```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
|
|
115
175
|
import { useIntlayer } from "react-intlayer";
|
|
116
176
|
|
|
117
|
-
// コンポーネント例の定義
|
|
118
177
|
const ComponentExample = () => {
|
|
119
178
|
const { myTranslatedContent } = useIntlayer("component-example");
|
|
120
179
|
|
|
@@ -122,10 +181,9 @@ const ComponentExample = () => {
|
|
|
122
181
|
};
|
|
123
182
|
```
|
|
124
183
|
|
|
125
|
-
```jsx fileName="./
|
|
184
|
+
```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
|
|
126
185
|
const { useIntlayer } = require("react-intlayer");
|
|
127
186
|
|
|
128
|
-
// コンポーネント例の定義
|
|
129
187
|
const ComponentExample = () => {
|
|
130
188
|
const { myTranslatedContent } = useIntlayer("component-example");
|
|
131
189
|
|
|
@@ -133,28 +191,79 @@ const ComponentExample = () => {
|
|
|
133
191
|
};
|
|
134
192
|
```
|
|
135
193
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
194
|
+
このアプローチにより、以下が可能になります：
|
|
195
|
+
|
|
196
|
+
1. **開発速度の向上**
|
|
197
|
+
- `.content.{{ts|mjs|cjs|json}}` ファイルは VSCode の拡張機能を使って作成できます
|
|
198
|
+
- IDE のオートコンプリート AI ツール（GitHub Copilot など）がコンテンツの宣言を支援し、コピー＆ペーストを減らせます
|
|
199
|
+
|
|
200
|
+
2. **コードベースの複雑さを減らす**
|
|
201
|
+
|
|
202
|
+
3. **コードベースの保守性を高める**
|
|
203
|
+
|
|
204
|
+
4. **コンポーネントと関連コンテンツの複製をより簡単に行う（例：ログイン/登録コンポーネントなど）**
|
|
205
|
+
- 他のコンポーネントのコンテンツに影響を与えるリスクを制限することで
|
|
206
|
+
- 外部依存なしにコンテンツを別のアプリケーションにコピー＆ペーストできることで
|
|
207
|
+
|
|
208
|
+
5. **未使用のコンポーネントの未使用キー/値でコードベースを汚染しない**
|
|
209
|
+
- コンポーネントを使用しない場合、そのコンテンツをインポートする必要はありません
|
|
210
|
+
- コンポーネントを削除すると、その関連コンテンツも同じフォルダーに存在するため、より簡単に削除を思い出せます
|
|
211
|
+
|
|
212
|
+
6. **多言語コンテンツを宣言する際のAIエージェントの推論コストを削減**
|
|
213
|
+
- AIエージェントはコンテンツを実装する場所を知るためにコードベース全体をスキャンする必要がありません
|
|
214
|
+
- IDEのオートコンプリートAIツール（例：GitHub Copilot）で簡単に翻訳が行えます
|
|
215
|
+
|
|
216
|
+
7. **読み込みパフォーマンスの最適化**
|
|
217
|
+
- コンポーネントがレイジーロードされる場合、その関連コンテンツも同時に読み込まれます
|
|
218
|
+
|
|
219
|
+
## Intlayerの追加機能
|
|
220
|
+
|
|
221
|
+
| 機能 | 説明 |
|
|
222
|
+
| ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
223
|
+
|  | **クロスフレームワーク対応**<br><br>Intlayerは、Next.js、React、Vite、Vue.js、Nuxt、Preact、Expressなど、主要なフレームワークやライブラリすべてに対応しています。 |
|
|
224
|
+
|  | **JavaScriptによるコンテンツ管理**<br><br>JavaScriptの柔軟性を活用して、コンテンツを効率的に定義・管理します。<br><br> - [コンテンツ宣言](https://intlayer.org/doc/concept/content) |
|
|
225
|
+
|  | **ロケール別コンテンツ宣言ファイル**<br><br>自動生成の前に一度だけコンテンツを宣言することで、開発をスピードアップします。<br><br> - [ロケール別コンテンツ宣言ファイル](https://intlayer.org/doc/concept/per-locale-file) |
|
|
226
|
+
|  | **型安全な環境**<br><br>TypeScriptを活用して、コンテンツ定義やコードのエラーを防ぎ、IDEのオートコンプリート機能も利用できます。<br><br> - [TypeScriptの設定](https://intlayer.org/doc/environment/vite-and-react#configure-typescript) |
|
|
227
|
+
|  | **簡素化されたセットアップ**<br><br>最小限の設定で迅速に開始できます。国際化、ルーティング、AI、ビルド、コンテンツ処理の設定を簡単に調整可能です。<br><br> - [Next.js統合を探る](https://intlayer.org/doc/environment/nextjs) |
|
|
228
|
+
|  | **簡素化されたコンテンツ取得**<br><br>各コンテンツごとに `t` 関数を呼び出す必要はありません。単一のフックを使ってすべてのコンテンツを直接取得できます。<br><br> - [React 統合](https://intlayer.org/doc/environment/create-react-app) |
|
|
229
|
+
|  | **一貫したサーバーコンポーネントの実装**<br><br>Next.jsのサーバーコンポーネントに最適で、クライアントコンポーネントとサーバーコンポーネントの両方で同じ実装を使用できます。各サーバーコンポーネントに `t` 関数を渡す必要はありません。<br><br> - [サーバーコンポーネント](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code) |
|
|
230
|
+
|  | **整理されたコードベース**<br><br>コードベースをより整理された状態に保ちます：1つのコンポーネント = 同じフォルダ内の1つの辞書。翻訳をそれぞれのコンポーネントの近くに配置することで、保守性と明確さが向上します。<br><br> - [Intlayerの仕組み](https://intlayer.org/doc/concept/how-works-intlayer) |
|
|
231
|
+
|  | **強化されたルーティング**<br><br>Next.js、React、Vite、Vue.jsなどの複雑なアプリケーション構造にシームレスに適応し、アプリのルーティングを完全にサポートします。<br><br> - [Next.js統合を探る](https://intlayer.org/doc/environment/nextjs) |
|
|
232
|
+
|  | **マークダウンサポート**<br><br>プライバシーポリシーやドキュメントなどの多言語コンテンツのために、ロケールファイルやリモートのMarkdownをインポートして解釈します。Markdownのメタデータを解釈し、コード内でアクセス可能にします。<br><br> - [コンテンツファイル](https://intlayer.org/doc/concept/content/file) |
|
|
233
|
+
|  | **無料のビジュアルエディター＆CMS**<br><br>コンテンツライター向けに無料のビジュアルエディターとCMSが利用可能で、ローカリゼーションプラットフォームは不要です。Gitを使ってコンテンツを同期させるか、CMSで完全または部分的に外部化できます。<br><br> - [Intlayerエディター](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms) |
|
|
234
|
+
|  | **ツリーシェイカブルコンテンツ**<br><br>ツリーシェイカブルコンテンツにより、最終バンドルのサイズを削減します。コンポーネントごとにコンテンツを読み込み、未使用のコンテンツはバンドルから除外されます。遅延読み込みをサポートし、アプリの読み込み効率を向上させます。<br><br> - [アプリビルドの最適化](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization) |
|
|
235
|
+
|  | **静的レンダリング**<br><br>静的レンダリングを妨げません。<br><br> - [Next.js 統合](https://intlayer.org/doc/environment/nextjs) |
|
|
236
|
+
|  | **AI搭載翻訳**<br><br>Intlayerの高度なAI搭載翻訳ツールを使用し、ご自身のAIプロバイダー/APIキーを使って、ワンクリックでウェブサイトを231言語に変換します。<br><br> - [CI/CD統合](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [自動入力](https://intlayer.org/doc/concept/auto-fill) |
|
|
237
|
+
|  | **MCPサーバー統合**<br><br>IDEの自動化のためのMCP（モデルコンテキストプロトコル）サーバーを提供し、開発環境内でシームレスなコンテンツ管理とi18nワークフローを可能にします。 <br><br> - [MCPサーバー](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/mcp_server.md) |
|
|
238
|
+
|  | **VSCode 拡張機能**<br><br>Intlayer は、コンテンツや翻訳の管理、辞書の構築、コンテンツの翻訳などを支援する VSCode 拡張機能を提供します。<br><br> - [VSCode 拡張機能](https://intlayer.org/doc/ja/vs-code-extension) |
|
|
239
|
+
|  | **相互運用性**<br><br>react-i18next、next-i18next、next-intl、react-intlとの相互運用性を可能にします。<br><br> - [Intlayer と react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer と next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer と next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) |
|
|
240
|
+
|
|
241
|
+
## Intlayer と他のソリューションの比較
|
|
242
|
+
|
|
243
|
+
| 機能 | Intlayer | React-i18next / i18next | React-Intl (FormatJS) | LinguiJS | next-intl | next-i18next | vue-i18n |
|
|
244
|
+
| ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | -------------------------------------------------------------------- |
|
|
245
|
+
| **コンポーネント近くの翻訳** | はい、各コンポーネントに内容が共置されています | いいえ | いいえ | いいえ | いいえ | いいえ | はい - `Single File Components`（SFCs）を使用しています |
|
|
246
|
+
| **TypeScript 統合** | 高度で自動生成された厳密な型 | 基本的なもの；安全性のための追加設定が必要 | 良好だが厳密さはやや劣る | 型定義あり、設定が必要 | 良好 | 基本的 | 良好（型は利用可能；キーの安全性には設定が必要） |
|
|
247
|
+
| **翻訳漏れ検出** | ビルド時のエラー/警告 | 実行時にほとんどフォールバック文字列を使用 | フォールバック文字列 | 追加設定が必要 | 実行時フォールバック | 実行時フォールバック | 実行時フォールバック/警告（設定可能） |
|
|
248
|
+
| **リッチコンテンツ（JSX/Markdown/コンポーネント）** | Reactノードも含めて直接サポート | 制限あり / 補間のみ | ICU構文、実際のJSXではない | 制限あり | リッチノード向けに設計されていない | 制限あり | 制限あり（コンポーネントは`<i18n-t>`経由、Markdownはプラグイン経由） |
|
|
249
|
+
| **AI搭載翻訳** | はい、複数のAIプロバイダーをサポートしています。ご自身のAPIキーを使用して利用可能です。アプリケーションとコンテンツの範囲のコンテキストを考慮します | いいえ | いいえ | いいえ | いいえ | いいえ | いいえ |
|
|
250
|
+
| **ビジュアルエディター** | はい、ローカルビジュアルエディター＋オプションのCMS；コードベースのコンテンツを外部化可能；埋め込み可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 | いいえ / 外部ローカリゼーションプラットフォームで利用可能 |
|
|
251
|
+
| **ローカライズされたルーティング** | 組み込み、ミドルウェアサポート | プラグインまたは手動設定 | 組み込みではない | プラグイン/手動設定 | 組み込み | 組み込み | Vue Router経由の手動設定（Nuxt i18nが対応） |
|
|
252
|
+
| **動的ルート生成** | はい | プラグイン/エコシステムまたは手動設定 | 提供されていません | プラグイン/手動 | はい | はい | 提供されていません（Nuxt i18nが提供） |
|
|
253
|
+
| **複数形処理** | 列挙ベースのパターン；ドキュメント参照 | 設定可能（i18next-icuのようなプラグイン） | 高度（ICU） | 高度（ICU/messageformat） | 良好 | 良好 | 高度（組み込みの複数形ルール） |
|
|
254
|
+
| **フォーマット（日時、数値、通貨）** | 最適化されたフォーマッター（内部でIntlを使用） | プラグインまたはカスタムIntlの使用による | 高度なICUフォーマッター | ICU/CLIヘルパー | 良好（Intlヘルパー） | 良好（Intlヘルパー） | 組み込みの日付/数値フォーマッター（Intl） |
|
|
255
|
+
| **コンテンツ形式** | .tsx, .ts, .js, .json, .md, .txt | .json | .json, .js | .po, .json | .json, .js, .ts | .json | .json, .js |
|
|
256
|
+
| **ICUサポート** | 作業中（ネイティブICU） | プラグイン経由（i18next-icu） | はい | はい | はい | プラグイン経由（i18next-icu） | カスタムフォーマッター/コンパイラー経由 |
|
|
257
|
+
| **SEOヘルパー（hreflang、サイトマップ）** | 組み込みツール：サイトマップ、**robots.txt**、メタデータのヘルパー | コミュニティプラグイン/手動 | コアではない | コアではない | 良好 | 良好 | コアではない（Nuxt i18nがヘルパーを提供） |
|
|
258
|
+
| **エコシステム / コミュニティ** | 小規模だが急速に成長し活発 | 最大かつ最も成熟している | 大規模、エンタープライズ向け | 成長中だが小規模 | 中規模、Next.jsに特化 | 中規模、Next.jsに特化 | Vueエコシステムで大規模 |
|
|
259
|
+
| **サーバーサイドレンダリングとサーバーコンポーネント** | はい、SSR / Reactサーバーコンポーネント向けに最適化されています | サポートされていますが、いくつかの設定が必要です | Next.jsでサポートされています | サポートされています | 完全サポート | 完全サポート | Nuxt/Vue SSR経由のSSR（RSCはなし） |
|
|
260
|
+
| **ツリーシェイキング（使用されるコンテンツのみを読み込む）** | はい、Babel/SWCプラグインを使用したビルド時のコンポーネント単位で対応 | 通常はすべて読み込む（名前空間やコード分割で改善可能） | 通常はすべて読み込む | デフォルトでは対応していない | 部分的に対応 | 部分的に対応 | 部分的に対応（コード分割や手動設定が必要） |
|
|
261
|
+
| **遅延読み込み** | はい、ロケールごと／コンポーネントごとに対応 | はい（例：バックエンド／名前空間をオンデマンドで） | はい（ロケールバンドルを分割） | はい（動的カタログインポート） | はい（ルートごと／ロケールごと） | はい（ルートごと／ロケールごと） | はい（非同期ロケールメッセージ） |
|
|
262
|
+
| **大規模プロジェクトの管理** | モジュール化を推奨し、デザインシステムに適している | 適切なファイル管理が必要 | 中央カタログが大きくなる可能性がある | 複雑になる可能性がある | セットアップによるモジュール化 | セットアップによるモジュール化 | Vue Router/Nuxt i18n セットアップによるモジュール化 |
|
|
157
263
|
|
|
158
264
|
## ドキュメント履歴
|
|
159
265
|
|
|
160
|
-
|
|
266
|
+
| バージョン | 日付 | 変更内容 |
|
|
267
|
+
| ---------- | ---------- | ------------ |
|
|
268
|
+
| 5.8.0 | 2025-08-19 | 比較表の更新 |
|
|
269
|
+
| 5.5.10 | 2025-06-29 | 履歴の初期化 |
|
package/docs/ja/introduction.md
CHANGED
|
@@ -44,8 +44,8 @@ const componentContent = {
|
|
|
44
44
|
content: {
|
|
45
45
|
myTranslatedContent: t({
|
|
46
46
|
en: "Hello World",
|
|
47
|
-
fr: "Bonjour le monde",
|
|
48
47
|
es: "Hola Mundo",
|
|
48
|
+
fr: "Bonjour le monde",
|
|
49
49
|
}),
|
|
50
50
|
},
|
|
51
51
|
} satisfies Dictionary;
|
|
@@ -63,8 +63,8 @@ const componentContent = {
|
|
|
63
63
|
content: {
|
|
64
64
|
myTranslatedContent: t({
|
|
65
65
|
en: "Hello World",
|
|
66
|
-
fr: "Bonjour le monde",
|
|
67
66
|
es: "Hola Mundo",
|
|
67
|
+
fr: "Bonjour le monde",
|
|
68
68
|
}),
|
|
69
69
|
},
|
|
70
70
|
};
|
|
@@ -81,8 +81,8 @@ const componentContent = {
|
|
|
81
81
|
content: {
|
|
82
82
|
myTranslatedContent: t({
|
|
83
83
|
en: "Hello World",
|
|
84
|
-
fr: "Bonjour le monde",
|
|
85
84
|
es: "Hola Mundo",
|
|
85
|
+
fr: "Bonjour le monde",
|
|
86
86
|
}),
|
|
87
87
|
},
|
|
88
88
|
};
|
|
@@ -148,8 +148,8 @@ const clientComponentContent = {
|
|
|
148
148
|
content: {
|
|
149
149
|
myTranslatedContent: t({
|
|
150
150
|
en: "Hello World",
|
|
151
|
-
fr: "Bonjour le monde",
|
|
152
151
|
es: "Hola Mundo",
|
|
152
|
+
fr: "Bonjour le monde",
|
|
153
153
|
}),
|
|
154
154
|
numberOfCar: enu({
|
|
155
155
|
"<-1": "Less than minus one car",
|
|
@@ -173,8 +173,8 @@ const clientComponentContent = {
|
|
|
173
173
|
content: {
|
|
174
174
|
myTranslatedContent: t({
|
|
175
175
|
en: "Hello World",
|
|
176
|
-
fr: "Bonjour le monde",
|
|
177
176
|
es: "Hola Mundo",
|
|
177
|
+
fr: "Bonjour le monde",
|
|
178
178
|
}),
|
|
179
179
|
numberOfCar: enu({
|
|
180
180
|
"<-1": "マイナス1台未満の車",
|
|
@@ -199,8 +199,8 @@ const clientComponentContent = {
|
|
|
199
199
|
content: {
|
|
200
200
|
myTranslatedContent: t({
|
|
201
201
|
en: "Hello World",
|
|
202
|
-
fr: "Bonjour le monde",
|
|
203
202
|
es: "Hola Mundo",
|
|
203
|
+
fr: "Bonjour le monde",
|
|
204
204
|
ja: "こんにちは世界",
|
|
205
205
|
}),
|
|
206
206
|
numberOfCar: enu({
|
|
@@ -110,8 +110,8 @@ const clientComponentContent = {
|
|
|
110
110
|
content: {
|
|
111
111
|
myTranslatedContent: t({
|
|
112
112
|
en: "Hello World",
|
|
113
|
-
fr: "Bonjour le monde",
|
|
114
113
|
es: "Hola Mundo",
|
|
114
|
+
fr: "Bonjour le monde",
|
|
115
115
|
}),
|
|
116
116
|
numberOfCar: enu({
|
|
117
117
|
"<-1": "Less than minus one car",
|
|
@@ -136,8 +136,8 @@ const clientComponentContent = {
|
|
|
136
136
|
content: {
|
|
137
137
|
myTranslatedContent: t({
|
|
138
138
|
en: "Hello World",
|
|
139
|
-
fr: "Bonjour le monde",
|
|
140
139
|
es: "Hola Mundo",
|
|
140
|
+
fr: "Bonjour le monde",
|
|
141
141
|
}),
|
|
142
142
|
numberOfCar: enu({
|
|
143
143
|
"<-1": "マイナス1台未満の車",
|
|
@@ -162,8 +162,8 @@ const clientComponentContent = {
|
|
|
162
162
|
content: {
|
|
163
163
|
myTranslatedContent: t({
|
|
164
164
|
en: "Hello World",
|
|
165
|
-
fr: "Bonjour le monde",
|
|
166
165
|
es: "Hola Mundo",
|
|
166
|
+
fr: "Bonjour le monde",
|
|
167
167
|
}),
|
|
168
168
|
numberOfCar: enu({
|
|
169
169
|
"<-1": "マイナス1台未満の車",
|
|
@@ -110,8 +110,8 @@ const component1Content = {
|
|
|
110
110
|
content: {
|
|
111
111
|
myTranslatedContent: t({
|
|
112
112
|
en: "Hello World",
|
|
113
|
-
fr: "Bonjour le monde",
|
|
114
113
|
es: "Hola Mundo",
|
|
114
|
+
fr: "Bonjour le monde",
|
|
115
115
|
}),
|
|
116
116
|
numberOfCar: enu({
|
|
117
117
|
"<-1": "マイナス1台未満の車",
|
|
@@ -136,8 +136,8 @@ const component1Content = {
|
|
|
136
136
|
content: {
|
|
137
137
|
myTranslatedContent: t({
|
|
138
138
|
en: "Hello World",
|
|
139
|
-
fr: "Bonjour le monde",
|
|
140
139
|
es: "Hola Mundo",
|
|
140
|
+
fr: "Bonjour le monde",
|
|
141
141
|
}),
|
|
142
142
|
numberOfCar: enu({
|
|
143
143
|
"<-1": "マイナス1台未満の車",
|
|
@@ -162,8 +162,8 @@ const component1Content = {
|
|
|
162
162
|
content: {
|
|
163
163
|
myTranslatedContent: t({
|
|
164
164
|
en: "Hello World",
|
|
165
|
-
fr: "Bonjour le monde",
|
|
166
165
|
es: "Hola Mundo",
|
|
166
|
+
fr: "Bonjour le monde",
|
|
167
167
|
}),
|
|
168
168
|
numberOfCar: enu({
|
|
169
169
|
"<-1": "マイナス1台未満の車",
|