@intlayer/docs 5.8.0-canary.0 → 5.8.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 +2 -2
- package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +96 -219
- package/blog/ar/react-i18next_vs_react-intl_vs_intlayer.md +88 -129
- package/blog/ar/vue-i18n_vs_intlayer.md +268 -0
- package/blog/de/intlayer_with_next-i18next.md +2 -2
- package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/de/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/de/vue-i18n_vs_intlayer.md +268 -0
- package/blog/en/intlayer_with_next-i18next.md +2 -2
- package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +89 -220
- package/blog/en/react-i18next_vs_react-intl_vs_intlayer.md +85 -123
- package/blog/en/vue-i18n_vs_intlayer.md +268 -0
- package/blog/en-GB/intlayer_with_next-i18next.md +2 -2
- package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +85 -218
- package/blog/en-GB/react-i18next_vs_react-intl_vs_intlayer.md +80 -130
- package/blog/en-GB/vue-i18n_vs_intlayer.md +258 -0
- package/blog/es/intlayer_with_next-i18next.md +2 -2
- package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/es/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/es/vue-i18n_vs_intlayer.md +268 -0
- package/blog/fr/intlayer_with_next-i18next.md +2 -2
- package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +91 -214
- package/blog/fr/react-i18next_vs_react-intl_vs_intlayer.md +86 -127
- package/blog/fr/vue-i18n_vs_intlayer.md +269 -0
- package/blog/hi/intlayer_with_next-i18next.md +2 -2
- package/blog/hi/next-i18next_vs_next-intl_vs_intlayer.md +97 -220
- package/blog/hi/react-i18next_vs_react-intl_vs_intlayer.md +89 -130
- package/blog/hi/vue-i18n_vs_intlayer.md +268 -0
- package/blog/it/intlayer_with_next-i18next.md +2 -2
- package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +91 -214
- package/blog/it/react-i18next_vs_react-intl_vs_intlayer.md +86 -127
- package/blog/it/vue-i18n_vs_intlayer.md +268 -0
- package/blog/ja/intlayer_with_next-i18next.md +2 -2
- package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/ja/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/ja/vue-i18n_vs_intlayer.md +268 -0
- package/blog/ko/intlayer_with_next-i18next.md +2 -2
- package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +95 -217
- package/blog/ko/react-i18next_vs_react-intl_vs_intlayer.md +89 -130
- package/blog/ko/vue-i18n_vs_intlayer.md +268 -0
- package/blog/pt/intlayer_with_next-i18next.md +2 -2
- package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/pt/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/pt/vue-i18n_vs_intlayer.md +268 -0
- package/blog/ru/intlayer_with_next-i18next.md +2 -2
- package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +94 -217
- package/blog/ru/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/ru/vue-i18n_vs_intlayer.md +268 -0
- package/blog/zh/intlayer_with_next-i18next.md +2 -2
- package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/zh/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/zh/vue-i18n_vs_intlayer.md +269 -0
- package/dist/cjs/generated/blog.entry.cjs +41 -0
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +41 -0
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/types/generated/blog.entry.d.ts +1 -0
- package/dist/types/generated/blog.entry.d.ts.map +1 -1
- package/docs/ar/formatters.md +417 -31
- package/docs/ar/how_works_intlayer.md +2 -4
- package/docs/ar/interest_of_intlayer.md +7 -10
- package/docs/ar/intlayer_CMS.md +2 -3
- package/docs/ar/intlayer_visual_editor.md +2 -3
- package/docs/ar/intlayer_with_tanstack.md +1 -1
- package/docs/ar/introduction.md +4 -4
- package/docs/de/formatters.md +444 -34
- package/docs/de/introduction.md +2 -2
- package/docs/en/dictionary/enumeration.md +2 -2
- package/docs/en/dictionary/function_fetching.md +2 -2
- package/docs/en/dictionary/get_started.md +2 -2
- package/docs/en/dictionary/translation.md +2 -2
- package/docs/en/formatters.md +383 -15
- package/docs/en/how_works_intlayer.md +2 -4
- package/docs/en/interest_of_intlayer.md +40 -29
- package/docs/en/intlayer_CMS.md +2 -3
- package/docs/en/intlayer_visual_editor.md +2 -3
- package/docs/en/intlayer_with_create_react_app.md +2 -2
- package/docs/en/intlayer_with_express.md +2 -2
- package/docs/en/intlayer_with_tanstack.md +1 -1
- package/docs/en/introduction.md +4 -4
- package/docs/en/packages/express-intlayer/index.md +2 -2
- package/docs/en/packages/intlayer/getConfiguration.md +2 -3
- package/docs/en/packages/intlayer/getEnumeration.md +2 -7
- package/docs/en/packages/intlayer/getHTMLTextDir.md +2 -4
- package/docs/en/packages/intlayer/getLocaleLang.md +2 -4
- package/docs/en/packages/intlayer/getLocaleName.md +2 -3
- package/docs/en/packages/intlayer/getLocalizedUrl.md +2 -8
- package/docs/en/packages/intlayer/getMultilingualUrls.md +2 -7
- package/docs/en/packages/intlayer/getPathWithoutLocale.md +2 -3
- package/docs/en/packages/intlayer/getTranslation.md +2 -4
- package/docs/en/packages/intlayer/index.md +2 -2
- package/docs/en/packages/next-intlayer/index.md +2 -2
- package/docs/en/packages/next-intlayer/t.md +2 -2
- package/docs/en/packages/next-intlayer/useDictionary.md +2 -2
- package/docs/en/packages/next-intlayer/useIntlayer.md +2 -2
- package/docs/en/packages/next-intlayer/useLocale.md +2 -2
- package/docs/en/packages/react-intlayer/index.md +2 -2
- package/docs/en/packages/react-intlayer/t.md +2 -2
- package/docs/en/packages/react-intlayer/useI18n.md +2 -2
- package/docs/en/packages/react-intlayer/useIntlayer.md +2 -2
- package/docs/en/packages/react-intlayer/useLocale.md +2 -2
- package/docs/en/packages/react-scripts-intlayer/index.md +2 -2
- package/docs/en/packages/solid-intlayer/index.md +2 -2
- package/docs/en/packages/vite-intlayer/index.md +2 -2
- package/docs/en-GB/formatters.md +402 -16
- package/docs/en-GB/how_works_intlayer.md +2 -4
- package/docs/en-GB/interest_of_intlayer.md +7 -10
- package/docs/en-GB/intlayer_with_tanstack.md +1 -1
- package/docs/en-GB/introduction.md +2 -2
- package/docs/es/formatters.md +438 -28
- package/docs/es/how_works_intlayer.md +2 -4
- package/docs/es/interest_of_intlayer.md +7 -10
- package/docs/es/intlayer_with_tanstack.md +1 -1
- package/docs/es/introduction.md +2 -2
- package/docs/fr/formatters.md +438 -28
- package/docs/fr/how_works_intlayer.md +2 -4
- package/docs/fr/interest_of_intlayer.md +7 -10
- package/docs/fr/intlayer_with_tanstack.md +1 -1
- package/docs/fr/introduction.md +2 -2
- package/docs/hi/formatters.md +430 -39
- package/docs/hi/how_works_intlayer.md +2 -4
- package/docs/hi/interest_of_intlayer.md +7 -10
- package/docs/hi/intlayer_with_tanstack.md +1 -1
- package/docs/hi/introduction.md +2 -2
- package/docs/it/formatters.md +438 -30
- package/docs/it/how_works_intlayer.md +2 -4
- package/docs/it/interest_of_intlayer.md +7 -10
- package/docs/it/intlayer_with_tanstack.md +1 -1
- package/docs/it/introduction.md +2 -2
- package/docs/ja/formatters.md +435 -47
- package/docs/ja/how_works_intlayer.md +2 -4
- package/docs/ja/interest_of_intlayer.md +7 -10
- package/docs/ja/intlayer_with_tanstack.md +1 -1
- package/docs/ja/introduction.md +2 -2
- package/docs/ko/formatters.md +432 -41
- package/docs/ko/how_works_intlayer.md +2 -4
- package/docs/ko/interest_of_intlayer.md +7 -10
- package/docs/ko/intlayer_with_tanstack.md +1 -1
- package/docs/ko/introduction.md +2 -2
- package/docs/pt/formatters.md +416 -30
- package/docs/pt/how_works_intlayer.md +2 -4
- package/docs/pt/intlayer_with_tanstack.md +1 -1
- package/docs/pt/introduction.md +2 -2
- package/docs/ru/autoFill.md +2 -2
- package/docs/ru/configuration.md +1 -40
- package/docs/ru/formatters.md +438 -28
- package/docs/ru/how_works_intlayer.md +5 -7
- package/docs/ru/index.md +1 -1
- package/docs/ru/interest_of_intlayer.md +8 -11
- package/docs/ru/intlayer_CMS.md +7 -8
- package/docs/ru/intlayer_cli.md +4 -7
- package/docs/ru/intlayer_visual_editor.md +5 -6
- package/docs/ru/intlayer_with_angular.md +1 -1
- package/docs/ru/intlayer_with_create_react_app.md +5 -5
- package/docs/ru/intlayer_with_lynx+react.md +1 -1
- package/docs/ru/intlayer_with_nextjs_15.md +3 -3
- package/docs/ru/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/ru/intlayer_with_nuxt.md +1 -1
- package/docs/ru/intlayer_with_react_native+expo.md +2 -2
- package/docs/ru/intlayer_with_tanstack.md +3 -3
- package/docs/ru/intlayer_with_vite+preact.md +3 -3
- package/docs/ru/intlayer_with_vite+react.md +3 -3
- package/docs/ru/intlayer_with_vite+solid.md +1 -1
- package/docs/ru/intlayer_with_vite+svelte.md +1 -1
- package/docs/ru/intlayer_with_vite+vue.md +2 -2
- package/docs/ru/introduction.md +5 -5
- package/docs/ru/locale_mapper.md +1 -1
- package/docs/ru/packages/@intlayer/api/index.md +2 -2
- package/docs/ru/packages/@intlayer/chokidar/index.md +1 -1
- package/docs/ru/packages/@intlayer/cli/index.md +2 -2
- package/docs/ru/packages/@intlayer/config/index.md +2 -2
- package/docs/ru/packages/@intlayer/core/index.md +2 -2
- package/docs/ru/packages/@intlayer/design-system/index.md +2 -2
- package/docs/ru/packages/@intlayer/dictionary-entry/index.md +2 -2
- package/docs/ru/packages/@intlayer/editor/index.md +1 -1
- package/docs/ru/packages/@intlayer/editor-react/index.md +1 -1
- package/docs/ru/packages/@intlayer/webpack/index.md +1 -1
- package/docs/ru/packages/angular-intlayer/index.md +1 -1
- package/docs/ru/packages/express-intlayer/index.md +3 -3
- package/docs/ru/packages/express-intlayer/t.md +1 -1
- package/docs/ru/packages/intlayer/getEnumeration.md +3 -8
- package/docs/ru/packages/intlayer/getTranslation.md +3 -5
- package/docs/ru/packages/intlayer/getTranslationContent.md +1 -3
- package/docs/ru/packages/intlayer/index.md +3 -3
- package/docs/ru/packages/intlayer-cli/index.md +1 -1
- package/docs/ru/packages/intlayer-editor/index.md +2 -2
- package/docs/ru/packages/lynx-intlayer/index.md +1 -1
- package/docs/ru/packages/next-intlayer/index.md +4 -4
- package/docs/ru/packages/next-intlayer/t.md +4 -4
- package/docs/ru/packages/next-intlayer/useLocale.md +3 -3
- package/docs/ru/packages/nuxt-intlayer/index.md +1 -1
- package/docs/ru/packages/preact-intlayer/index.md +1 -1
- package/docs/ru/packages/react-intlayer/index.md +4 -4
- package/docs/ru/packages/react-intlayer/t.md +4 -4
- package/docs/ru/packages/react-native-intlayer/index.md +1 -1
- package/docs/ru/packages/react-scripts-intlayer/index.md +3 -3
- package/docs/ru/packages/solid-intlayer/index.md +3 -3
- package/docs/ru/packages/svelte-intlayer/index.md +1 -1
- package/docs/ru/packages/vite-intlayer/index.md +3 -3
- package/docs/ru/packages/vue-intlayer/index.md +1 -1
- package/docs/ru/per_locale_file.md +1 -1
- package/docs/ru/roadmap.md +3 -5
- package/docs/ru/vs_code_extension.md +1 -1
- package/docs/zh/formatters.md +446 -38
- package/docs/zh/how_works_intlayer.md +2 -4
- package/docs/zh/interest_of_intlayer.md +7 -10
- package/docs/zh/intlayer_with_tanstack.md +1 -1
- package/docs/zh/introduction.md +2 -2
- package/frequent_questions/ar/domain_routing.md +1 -1
- package/frequent_questions/en/domain_routing.md +1 -1
- package/frequent_questions/en-GB/domain_routing.md +1 -1
- package/frequent_questions/es/domain_routing.md +1 -1
- package/frequent_questions/fr/domain_routing.md +1 -1
- package/frequent_questions/hi/domain_routing.md +1 -1
- package/frequent_questions/it/domain_routing.md +1 -1
- package/frequent_questions/ko/domain_routing.md +1 -1
- package/frequent_questions/pt/domain_routing.md +1 -1
- package/frequent_questions/ru/domain_routing.md +1 -1
- package/frequent_questions/ru/get_locale_cookie.md +4 -4
- package/frequent_questions/ru/static_rendering.md +1 -2
- package/frequent_questions/zh/domain_routing.md +1 -1
- package/package.json +7 -7
- package/src/generated/blog.entry.ts +41 -0
package/docs/ja/formatters.md
CHANGED
|
@@ -13,6 +13,7 @@ keywords:
|
|
|
13
13
|
- 相対時間
|
|
14
14
|
- 単位
|
|
15
15
|
- コンパクト
|
|
16
|
+
- リスト
|
|
16
17
|
- 国際化
|
|
17
18
|
slugs:
|
|
18
19
|
- doc
|
|
@@ -23,7 +24,7 @@ slugs:
|
|
|
23
24
|
|
|
24
25
|
## 概要
|
|
25
26
|
|
|
26
|
-
Intlayerは、ネイティブの`Intl` API
|
|
27
|
+
Intlayerは、ネイティブの`Intl` APIの上に構築された軽量なヘルパー群と、重いフォーマッターを繰り返し構築することを避けるためのキャッシュされた`Intl`ラッパーを提供します。これらのユーティリティは完全にロケール対応しており、メインの`intlayer`パッケージから利用可能です。
|
|
27
28
|
|
|
28
29
|
### インポート
|
|
29
30
|
|
|
@@ -37,6 +38,18 @@ import {
|
|
|
37
38
|
relativeTime,
|
|
38
39
|
units,
|
|
39
40
|
compact,
|
|
41
|
+
list,
|
|
42
|
+
getLocaleName,
|
|
43
|
+
getLocaleLang,
|
|
44
|
+
getLocaleFromPath,
|
|
45
|
+
getPathWithoutLocale,
|
|
46
|
+
getLocalizedUrl,
|
|
47
|
+
getHTMLTextDir,
|
|
48
|
+
getContent,
|
|
49
|
+
getLocalisedContent,
|
|
50
|
+
getTranslation,
|
|
51
|
+
getIntlayer,
|
|
52
|
+
getIntlayerAsync,
|
|
40
53
|
} from "intlayer";
|
|
41
54
|
```
|
|
42
55
|
|
|
@@ -44,33 +57,283 @@ Reactを使用している場合は、フックも利用可能です。詳細は
|
|
|
44
57
|
|
|
45
58
|
## キャッシュされたIntl
|
|
46
59
|
|
|
47
|
-
エクスポートされる`Intl`は、グローバルな`Intl`の薄いキャッシュラッパーです。`NumberFormat`、`DateTimeFormat`、`RelativeTimeFormat`のインスタンスをメモ化し、同じフォーマッターを繰り返し再構築するのを防ぎます。
|
|
60
|
+
エクスポートされる`Intl`は、グローバルな`Intl`の薄いキャッシュラッパーです。`NumberFormat`、`DateTimeFormat`、`RelativeTimeFormat`、`ListFormat`、`DisplayNames`、`Collator`、および`PluralRules`のインスタンスをメモ化し、同じフォーマッターを繰り返し再構築するのを防ぎます。
|
|
48
61
|
|
|
49
|
-
|
|
62
|
+
フォーマッターの構築は比較的コストが高いため、このキャッシュは動作を変えずにパフォーマンスを向上させます。ラッパーはネイティブの`Intl`と同じAPIを公開しているため、使用方法は同一です。
|
|
50
63
|
|
|
51
64
|
- キャッシュはプロセス単位で行われ、呼び出し元には透過的です。
|
|
52
65
|
|
|
53
|
-
> 環境に`Intl.DisplayNames
|
|
66
|
+
> 環境に`Intl.DisplayNames`が存在しない場合、開発者向けの警告が一度だけ表示されます(ポリフィルの検討を推奨)。
|
|
54
67
|
|
|
55
|
-
|
|
68
|
+
例:
|
|
56
69
|
|
|
57
70
|
```ts
|
|
58
71
|
import { Intl } from "intlayer";
|
|
59
72
|
|
|
73
|
+
// 数値のフォーマット
|
|
60
74
|
const numberFormat = new Intl.NumberFormat("en-GB", {
|
|
61
75
|
style: "currency",
|
|
62
76
|
currency: "GBP",
|
|
63
77
|
});
|
|
64
78
|
numberFormat.format(1234.5); // "£1,234.50"
|
|
79
|
+
|
|
80
|
+
// 言語、地域などの表示名
|
|
81
|
+
const displayNames = new Intl.DisplayNames("fr", { type: "language" });
|
|
82
|
+
displayNames.of("en"); // "anglais"
|
|
83
|
+
|
|
84
|
+
// ソート用の照合
|
|
85
|
+
const collator = new Intl.Collator("fr", { sensitivity: "base" });
|
|
86
|
+
collator.compare("é", "e"); // 0(等しい)
|
|
87
|
+
|
|
88
|
+
// 複数形ルール
|
|
89
|
+
const pluralRules = new Intl.PluralRules("fr");
|
|
90
|
+
pluralRules.select(1); // "one"
|
|
91
|
+
pluralRules.select(2); // "other"
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## 追加のIntlユーティリティ
|
|
95
|
+
|
|
96
|
+
フォーマッターヘルパーに加えて、キャッシュされたIntlラッパーを直接使用して他のIntl機能も利用できます。
|
|
97
|
+
|
|
98
|
+
### `Intl.DisplayNames`
|
|
99
|
+
|
|
100
|
+
言語、地域、通貨、スクリプトのローカライズされた名前の取得:
|
|
101
|
+
|
|
102
|
+
```ts
|
|
103
|
+
import { Intl } from "intlayer";
|
|
104
|
+
|
|
105
|
+
const languageNames = new Intl.DisplayNames("en", { type: "language" });
|
|
106
|
+
languageNames.of("fr"); // "French"
|
|
107
|
+
|
|
108
|
+
const regionNames = new Intl.DisplayNames("fr", { type: "region" });
|
|
109
|
+
regionNames.of("US"); // "États-Unis"
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### `Intl.Collator`
|
|
113
|
+
|
|
114
|
+
ロケールに対応した文字列の比較とソートのために:
|
|
115
|
+
|
|
116
|
+
```ts
|
|
117
|
+
import { Intl } from "intlayer";
|
|
118
|
+
|
|
119
|
+
const collator = new Intl.Collator("de", {
|
|
120
|
+
sensitivity: "base",
|
|
121
|
+
numeric: true,
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
const words = ["äpfel", "zebra", "100", "20"];
|
|
125
|
+
words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
|
|
65
126
|
```
|
|
66
127
|
|
|
128
|
+
### `Intl.PluralRules`
|
|
129
|
+
|
|
130
|
+
異なるロケールでの複数形の判定のために:
|
|
131
|
+
|
|
132
|
+
```ts
|
|
133
|
+
import { Intl } from "intlayer";
|
|
134
|
+
|
|
135
|
+
const pluralRules = new Intl.PluralRules("ar");
|
|
136
|
+
pluralRules.select(0); // "zero"
|
|
137
|
+
pluralRules.select(1); // "one"
|
|
138
|
+
pluralRules.select(2); // "two"
|
|
139
|
+
pluralRules.select(3); // "few"
|
|
140
|
+
pluralRules.select(11); // "many"
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## ロケールユーティリティ
|
|
144
|
+
|
|
145
|
+
### `getLocaleName(displayLocale, targetLocale?)`
|
|
146
|
+
|
|
147
|
+
あるロケールの名前を別のロケールで取得します:
|
|
148
|
+
|
|
149
|
+
```ts
|
|
150
|
+
import { getLocaleName } from "intlayer";
|
|
151
|
+
|
|
152
|
+
getLocaleName("fr", "en"); // "French"
|
|
153
|
+
getLocaleName("en", "fr"); // "anglais"
|
|
154
|
+
getLocaleName("de", "es"); // "alemán"
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
- **displayLocale**: 名前を取得する対象のロケール
|
|
158
|
+
- **targetLocale**: 名前を表示するロケール(省略時は displayLocale と同じ)
|
|
159
|
+
|
|
160
|
+
### `getLocaleLang(locale?)`
|
|
161
|
+
|
|
162
|
+
ロケール文字列から言語コードを抽出します:
|
|
163
|
+
|
|
164
|
+
```ts
|
|
165
|
+
import { getLocaleLang } from "intlayer";
|
|
166
|
+
|
|
167
|
+
getLocaleLang("en-US"); // "en"
|
|
168
|
+
getLocaleLang("fr-CA"); // "fr"
|
|
169
|
+
getLocaleLang("de"); // "de"
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
- **locale**: 言語コードを抽出する対象のロケール(省略時は現在のロケール)
|
|
173
|
+
|
|
174
|
+
### `getLocaleFromPath(inputUrl)`
|
|
175
|
+
|
|
176
|
+
URLまたはパス名からロケール部分を抽出します:
|
|
177
|
+
|
|
178
|
+
```ts
|
|
179
|
+
import { getLocaleFromPath } from "intlayer";
|
|
180
|
+
|
|
181
|
+
getLocaleFromPath("/en/dashboard"); // "en"
|
|
182
|
+
getLocaleFromPath("/fr/dashboard"); // "fr"
|
|
183
|
+
getLocaleFromPath("/dashboard"); // "en"(デフォルトのロケール)
|
|
184
|
+
getLocaleFromPath("https://example.com/es/about"); // "es"
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
- **inputUrl**: 処理する完全なURL文字列またはパス名
|
|
188
|
+
- **returns**: 検出されたロケール、またはロケールが見つからない場合はデフォルトのロケール
|
|
189
|
+
|
|
190
|
+
### `getPathWithoutLocale(inputUrl, locales?)`
|
|
191
|
+
|
|
192
|
+
URLまたはパス名からロケールセグメントを削除します:
|
|
193
|
+
|
|
194
|
+
```ts
|
|
195
|
+
import { getPathWithoutLocale } from "intlayer";
|
|
196
|
+
|
|
197
|
+
getPathWithoutLocale("/en/dashboard"); // "/dashboard"
|
|
198
|
+
getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
|
|
199
|
+
getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
- **inputUrl**: 処理する完全なURL文字列またはパス名
|
|
203
|
+
- **locales**: サポートされているロケールのオプション配列(デフォルトは設定されたロケール)
|
|
204
|
+
- **returns**: ロケール部分を除いたURL
|
|
205
|
+
|
|
206
|
+
### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
|
|
207
|
+
|
|
208
|
+
現在のロケールに対応したローカライズされたURLを生成します:
|
|
209
|
+
|
|
210
|
+
```ts
|
|
211
|
+
import { getLocalizedUrl } from "intlayer";
|
|
212
|
+
|
|
213
|
+
getLocalizedUrl("/about", "fr", ["en", "fr"], "en", false); // "/fr/about"
|
|
214
|
+
getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
|
|
215
|
+
getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
- **url**: ローカライズする元のURL
|
|
219
|
+
- **currentLocale**: 現在のロケール
|
|
220
|
+
- **locales**: サポートされているロケールのオプション配列(デフォルトは設定されたロケール)
|
|
221
|
+
- **defaultLocale**: オプションのデフォルトロケール(設定されたデフォルトロケールが使用されます)
|
|
222
|
+
- **prefixDefault**: デフォルトロケールにプレフィックスを付けるかどうか(設定された値が使用されます)
|
|
223
|
+
|
|
224
|
+
### `getHTMLTextDir(locale?)`
|
|
225
|
+
|
|
226
|
+
ロケールに対するテキストの方向を返します:
|
|
227
|
+
|
|
228
|
+
```ts
|
|
229
|
+
import { getHTMLTextDir } from "intlayer";
|
|
230
|
+
|
|
231
|
+
getHTMLTextDir("en-US"); // "ltr"
|
|
232
|
+
getHTMLTextDir("ar"); // "rtl"
|
|
233
|
+
getHTMLTextDir("he"); // "rtl"
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
- **locale**: テキスト方向を取得するロケール(デフォルトは現在のロケール)
|
|
237
|
+
- **returns**: `"ltr"`、`"rtl"`、または `"auto"`
|
|
238
|
+
|
|
239
|
+
## コンテンツ処理ユーティリティ
|
|
240
|
+
|
|
241
|
+
### `getContent(node, nodeProps, locale?)`
|
|
242
|
+
|
|
243
|
+
すべての利用可能なプラグイン(翻訳、列挙、挿入など)を使ってコンテンツノードを変換します:
|
|
244
|
+
|
|
245
|
+
```ts
|
|
246
|
+
import { getContent } from "intlayer";
|
|
247
|
+
|
|
248
|
+
const content = getContent(
|
|
249
|
+
contentNode,
|
|
250
|
+
{ dictionaryKey: "common", dictionaryPath: "/path/to/dict" },
|
|
251
|
+
"fr"
|
|
252
|
+
);
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
- **node**: 変換するコンテンツノード
|
|
256
|
+
- **nodeProps**: 変換コンテキストのプロパティ
|
|
257
|
+
- **locale**: オプションのロケール(デフォルトは設定されたデフォルトロケール)
|
|
258
|
+
|
|
259
|
+
### `getLocalisedContent(node, locale, nodeProps, fallback?)`
|
|
260
|
+
|
|
261
|
+
翻訳プラグインのみを使ってコンテンツノードを変換します:
|
|
262
|
+
|
|
263
|
+
```ts
|
|
264
|
+
import { getLocalisedContent } from "intlayer";
|
|
265
|
+
|
|
266
|
+
const content = getLocalisedContent(
|
|
267
|
+
contentNode,
|
|
268
|
+
"fr",
|
|
269
|
+
{ dictionaryKey: "common" },
|
|
270
|
+
true // 翻訳がない場合はデフォルトロケールにフォールバック
|
|
271
|
+
);
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
- **node**: 変換するコンテンツノード
|
|
275
|
+
- **locale**: 翻訳に使用するロケール
|
|
276
|
+
- **nodeProps**: 変換コンテキストのプロパティ
|
|
277
|
+
- **fallback**: デフォルトロケールにフォールバックするかどうか(デフォルトは false)
|
|
278
|
+
|
|
279
|
+
### `getTranslation(languageContent, locale?, fallback?)`
|
|
280
|
+
|
|
281
|
+
言語コンテンツオブジェクトから特定のロケールのコンテンツを抽出します:
|
|
282
|
+
|
|
283
|
+
```ts
|
|
284
|
+
import { getTranslation } from "intlayer";
|
|
285
|
+
|
|
286
|
+
const content = getTranslation(
|
|
287
|
+
{
|
|
288
|
+
en: "Hello",
|
|
289
|
+
fr: "Bonjour",
|
|
290
|
+
de: "Hallo",
|
|
291
|
+
},
|
|
292
|
+
"fr",
|
|
293
|
+
true
|
|
294
|
+
); // "Bonjour"
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
- **languageContent**: ロケールをコンテンツにマッピングしたオブジェクト
|
|
298
|
+
- **locale**: 対象のロケール(デフォルトは設定されたデフォルトロケール)
|
|
299
|
+
- **fallback**: デフォルトロケールにフォールバックするかどうか(デフォルトは true)
|
|
300
|
+
|
|
301
|
+
### `getIntlayer(dictionaryKey, locale?, plugins?)`
|
|
302
|
+
|
|
303
|
+
キーによって辞書からコンテンツを取得し変換します:
|
|
304
|
+
|
|
305
|
+
```ts
|
|
306
|
+
import { getIntlayer } from "intlayer";
|
|
307
|
+
|
|
308
|
+
const content = getIntlayer("common", "fr");
|
|
309
|
+
const nestedContent = getIntlayer("common", "fr", customPlugins);
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
- **dictionaryKey**: 取得する辞書のキー
|
|
313
|
+
- **locale**: オプションのロケール(デフォルトは設定されたデフォルトロケール)
|
|
314
|
+
- **plugins**: オプションのカスタム変換プラグインの配列
|
|
315
|
+
|
|
316
|
+
### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
|
|
317
|
+
|
|
318
|
+
遠隔の辞書から非同期にコンテンツを取得します:
|
|
319
|
+
|
|
320
|
+
```ts
|
|
321
|
+
import { getIntlayerAsync } from "intlayer";
|
|
322
|
+
|
|
323
|
+
const content = await getIntlayerAsync("common", "fr");
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
- **dictionaryKey**: 取得する辞書のキー
|
|
327
|
+
- **locale**: オプションのロケール(デフォルトは設定されたデフォルトロケール)
|
|
328
|
+
- **plugins**: オプションのカスタム変換プラグインの配列
|
|
329
|
+
|
|
67
330
|
## フォーマッター
|
|
68
331
|
|
|
69
332
|
以下のすべてのヘルパーは `intlayer` からエクスポートされています。
|
|
70
333
|
|
|
71
334
|
### `number(value, options?)`
|
|
72
335
|
|
|
73
|
-
|
|
336
|
+
数値をロケールに応じた区切りと小数点でフォーマットします。
|
|
74
337
|
|
|
75
338
|
- **value**: `number | string`
|
|
76
339
|
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
|
|
@@ -81,15 +344,15 @@ numberFormat.format(1234.5); // "£1,234.50"
|
|
|
81
344
|
import { number } from "intlayer";
|
|
82
345
|
|
|
83
346
|
number(123456.789); // "123,456.789"(en-USの場合)
|
|
84
|
-
number("1000000", { locale: "fr" }); // "1
|
|
347
|
+
number("1000000", { locale: "fr" }); // "1 000 000"
|
|
85
348
|
number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
|
|
86
349
|
```
|
|
87
350
|
|
|
88
351
|
### `percentage(value, options?)`
|
|
89
352
|
|
|
90
|
-
|
|
353
|
+
数値をパーセンテージ文字列としてフォーマットします。
|
|
91
354
|
|
|
92
|
-
動作: 1
|
|
355
|
+
動作: 1より大きい値は全体のパーセンテージとして解釈され正規化されます(例:`25` → `25%`、`0.25` → `25%`)。
|
|
93
356
|
|
|
94
357
|
- **value**: `number | string`
|
|
95
358
|
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
|
|
@@ -106,7 +369,7 @@ percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
|
|
|
106
369
|
|
|
107
370
|
### `currency(value, options?)`
|
|
108
371
|
|
|
109
|
-
|
|
372
|
+
値をローカライズされた通貨形式でフォーマットします。デフォルトは小数点以下2桁の `USD` です。
|
|
110
373
|
|
|
111
374
|
- **value**: `number | string`
|
|
112
375
|
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
|
|
@@ -118,15 +381,15 @@ percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
|
|
|
118
381
|
import { currency } from "intlayer";
|
|
119
382
|
|
|
120
383
|
currency(1234.5, { currency: "EUR" }); // "€1,234.50"
|
|
121
|
-
currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5
|
|
384
|
+
currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
|
|
122
385
|
```
|
|
123
386
|
|
|
124
387
|
### `date(date, optionsOrPreset?)`
|
|
125
388
|
|
|
126
|
-
`Intl.DateTimeFormat`
|
|
389
|
+
`Intl.DateTimeFormat` を使って日付/時刻の値をフォーマットします。
|
|
127
390
|
|
|
128
391
|
- **date**: `Date | string | number`
|
|
129
|
-
- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }`
|
|
392
|
+
- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` または以下のプリセットのいずれか:
|
|
130
393
|
- プリセット: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
|
|
131
394
|
|
|
132
395
|
例:
|
|
@@ -140,12 +403,11 @@ date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); /
|
|
|
140
403
|
|
|
141
404
|
### `relativeTime(from, to = new Date(), options?)`
|
|
142
405
|
|
|
143
|
-
`Intl.RelativeTimeFormat`
|
|
144
|
-
|
|
145
|
-
/// "now" を最初の引数に、対象の時刻を2番目の引数に渡すことで、自然な表現を得られます。
|
|
406
|
+
`Intl.RelativeTimeFormat` を使って、2つの時点間の相対時間をフォーマットします。
|
|
146
407
|
|
|
408
|
+
- 最初の引数に "now" を渡し、2番目に対象の日時を渡すと自然な表現が得られます。
|
|
147
409
|
- **from**: `Date | string | number`
|
|
148
|
-
- **to**: `Date | string | number
|
|
410
|
+
- **to**: `Date | string | number` (デフォルトは `new Date()`)
|
|
149
411
|
- **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
|
|
150
412
|
- デフォルトの `unit` は `"second"` です。
|
|
151
413
|
|
|
@@ -156,19 +418,19 @@ import { relativeTime } from "intlayer";
|
|
|
156
418
|
|
|
157
419
|
const now = new Date();
|
|
158
420
|
const in3Days = new Date(now.getTime() + 3 * 864e5);
|
|
159
|
-
relativeTime(now, in3Days, { unit: "day" }); // "
|
|
421
|
+
relativeTime(now, in3Days, { unit: "day" }); // "3日後"
|
|
160
422
|
|
|
161
423
|
const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
|
|
162
|
-
relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2
|
|
424
|
+
relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2時間前"
|
|
163
425
|
```
|
|
164
426
|
|
|
165
427
|
### `units(value, options?)`
|
|
166
428
|
|
|
167
|
-
|
|
429
|
+
`Intl.NumberFormat` の `style: 'unit'` を使って数値をローカライズされた単位文字列としてフォーマットします。
|
|
168
430
|
|
|
169
431
|
- **value**: `number | string`
|
|
170
432
|
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
|
|
171
|
-
- 共通フィールド: `unit`(例: `"kilometer"
|
|
433
|
+
- 共通フィールド: `unit`(例: `"kilometer"`、`"byte"`)、`unitDisplay`(`"short" | "narrow" | "long"`)
|
|
172
434
|
- デフォルト: `unit: 'day'`、`unitDisplay: 'short'`、`useGrouping: false`
|
|
173
435
|
|
|
174
436
|
例:
|
|
@@ -182,7 +444,7 @@ units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B"(ロケール
|
|
|
182
444
|
|
|
183
445
|
### `compact(value, options?)`
|
|
184
446
|
|
|
185
|
-
数値をコンパクト表記(例: `1.2K
|
|
447
|
+
数値をコンパクト表記(例: `1.2K`、`1M`)でフォーマットします。
|
|
186
448
|
|
|
187
449
|
- **value**: `number | string`
|
|
188
450
|
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`(内部で `notation: 'compact'` を使用)
|
|
@@ -196,32 +458,30 @@ compact(1200); // "1.2K"
|
|
|
196
458
|
compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
|
|
197
459
|
```
|
|
198
460
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
- すべてのヘルパーは `string` 入力を受け付け、内部で数値や日付に変換されます。
|
|
202
|
-
- ロケールは指定がなければ設定された `internationalization.defaultLocale` がデフォルトで使用されます。
|
|
203
|
-
- これらのユーティリティは薄いラッパーであり、高度なフォーマットが必要な場合は標準の `Intl` オプションを直接渡してください。
|
|
204
|
-
|
|
205
|
-
## エントリーポイントと再エクスポート(`@index.ts`)
|
|
461
|
+
### `list(values, options?)`
|
|
206
462
|
|
|
207
|
-
|
|
463
|
+
`Intl.ListFormat`を使用して、値の配列をローカライズされたリスト文字列にフォーマットします。
|
|
208
464
|
|
|
209
|
-
- **
|
|
465
|
+
- **values**: `(string | number)[]`
|
|
466
|
+
- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
|
|
467
|
+
- 共通フィールド: `type`(`"conjunction" | "disjunction" | "unit"`)、`style`(`"long" | "short" | "narrow"`)
|
|
468
|
+
- デフォルト: `type: 'conjunction'`、`style: 'long'`
|
|
210
469
|
|
|
211
470
|
例:
|
|
212
471
|
|
|
213
472
|
```ts
|
|
214
|
-
import {
|
|
473
|
+
import { list } from "intlayer";
|
|
215
474
|
|
|
216
|
-
|
|
217
|
-
|
|
475
|
+
list(["apple", "banana", "orange"]); // "apple, banana, and orange"
|
|
476
|
+
list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
|
|
477
|
+
list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
|
|
218
478
|
```
|
|
219
479
|
|
|
220
480
|
## 注意事項
|
|
221
481
|
|
|
222
|
-
- すべてのヘルパーは `string`
|
|
223
|
-
-
|
|
224
|
-
-
|
|
482
|
+
- すべてのヘルパーは `string` 入力を受け入れます。内部的に数値や日付に変換されます。
|
|
483
|
+
- ロケールは指定されない場合、設定された `internationalization.defaultLocale` がデフォルトになります。
|
|
484
|
+
- これらのユーティリティは薄いラッパーです。高度なフォーマットが必要な場合は、標準の `Intl` オプションを直接渡してください。
|
|
225
485
|
|
|
226
486
|
## エントリーポイントと再エクスポート(`@index.ts`)
|
|
227
487
|
|
|
@@ -231,31 +491,159 @@ compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
|
|
|
231
491
|
|
|
232
492
|
```ts
|
|
233
493
|
// アプリコード(推奨)
|
|
234
|
-
import {
|
|
494
|
+
import {
|
|
495
|
+
number,
|
|
496
|
+
currency,
|
|
497
|
+
date,
|
|
498
|
+
relativeTime,
|
|
499
|
+
units,
|
|
500
|
+
compact,
|
|
501
|
+
list,
|
|
502
|
+
Intl,
|
|
503
|
+
getLocaleName,
|
|
504
|
+
getLocaleLang,
|
|
505
|
+
getLocaleFromPath,
|
|
506
|
+
getPathWithoutLocale,
|
|
507
|
+
getLocalizedUrl,
|
|
508
|
+
getHTMLTextDir,
|
|
509
|
+
getContent,
|
|
510
|
+
getLocalisedContent,
|
|
511
|
+
getTranslation,
|
|
512
|
+
getIntlayer,
|
|
513
|
+
getIntlayerAsync,
|
|
514
|
+
} from "intlayer";
|
|
235
515
|
```
|
|
236
516
|
|
|
237
517
|
### React
|
|
238
518
|
|
|
239
519
|
クライアントコンポーネント:
|
|
240
520
|
|
|
241
|
-
```
|
|
242
|
-
import {
|
|
521
|
+
```tsx
|
|
522
|
+
import {
|
|
523
|
+
useNumber,
|
|
524
|
+
useCurrency,
|
|
525
|
+
useDate,
|
|
526
|
+
usePercentage,
|
|
527
|
+
useCompact,
|
|
528
|
+
useList,
|
|
529
|
+
useRelativeTime,
|
|
530
|
+
useUnit,
|
|
531
|
+
} from "react-intlayer/format";
|
|
243
532
|
// または Next.js アプリの場合
|
|
244
|
-
import {
|
|
533
|
+
import {
|
|
534
|
+
useNumber,
|
|
535
|
+
useCurrency,
|
|
536
|
+
useDate,
|
|
537
|
+
usePercentage,
|
|
538
|
+
useCompact,
|
|
539
|
+
useList,
|
|
540
|
+
useRelativeTime,
|
|
541
|
+
useUnit,
|
|
542
|
+
} from "next-intlayer/client/format";
|
|
543
|
+
|
|
544
|
+
const MyComponent = () => {
|
|
545
|
+
const number = useNumber();
|
|
546
|
+
const currency = useCurrency();
|
|
547
|
+
const date = useDate();
|
|
548
|
+
const percentage = usePercentage();
|
|
549
|
+
const compact = useCompact();
|
|
550
|
+
const list = useList();
|
|
551
|
+
const relativeTime = useRelativeTime();
|
|
552
|
+
const unit = useUnit();
|
|
553
|
+
|
|
554
|
+
return (
|
|
555
|
+
<div>
|
|
556
|
+
<p>{number(123456.789)}</p>
|
|
557
|
+
<p>{currency(1234.5, { currency: "EUR" })}</p>
|
|
558
|
+
<p>{date(new Date(), "short")}</p>
|
|
559
|
+
<p>{percentage(0.25)}</p>
|
|
560
|
+
<p>{compact(1200)}</p>
|
|
561
|
+
<p>{list(["apple", "banana", "orange"])}</p>
|
|
562
|
+
<p>{relativeTime(new Date(), new Date() + 1000)}</p>
|
|
563
|
+
<p>{unit(123456.789, { unit: "kilometer" })}</p>
|
|
564
|
+
</div>
|
|
565
|
+
);
|
|
566
|
+
};
|
|
245
567
|
```
|
|
246
568
|
|
|
247
569
|
サーバーコンポーネント(または React Server ランタイム):
|
|
248
570
|
|
|
249
571
|
```ts
|
|
250
|
-
import {
|
|
572
|
+
import {
|
|
573
|
+
useNumber,
|
|
574
|
+
useCurrency,
|
|
575
|
+
useDate,
|
|
576
|
+
usePercentage,
|
|
577
|
+
useCompact,
|
|
578
|
+
useList,
|
|
579
|
+
useRelativeTime,
|
|
580
|
+
useUnit,
|
|
581
|
+
} from "intlayer/server/format";
|
|
251
582
|
// または Next.js アプリの場合
|
|
252
|
-
import {
|
|
583
|
+
import {
|
|
584
|
+
useNumber,
|
|
585
|
+
useCurrency,
|
|
586
|
+
useDate,
|
|
587
|
+
usePercentage,
|
|
588
|
+
useCompact,
|
|
589
|
+
useList,
|
|
590
|
+
useRelativeTime,
|
|
591
|
+
useUnit,
|
|
592
|
+
} from "next-intlayer/server/format";
|
|
593
|
+
```
|
|
594
|
+
|
|
595
|
+
> これらのフックは `IntlayerProvider` または `IntlayerServerProvider` からロケールを考慮します
|
|
596
|
+
|
|
597
|
+
### Vue
|
|
598
|
+
|
|
599
|
+
クライアントコンポーネント:
|
|
600
|
+
|
|
601
|
+
```ts
|
|
602
|
+
import {
|
|
603
|
+
useNumber,
|
|
604
|
+
useCurrency,
|
|
605
|
+
useDate,
|
|
606
|
+
usePercentage,
|
|
607
|
+
useCompact,
|
|
608
|
+
useList,
|
|
609
|
+
useRelativeTime,
|
|
610
|
+
useUnit,
|
|
611
|
+
} from "vue-intlayer/format";
|
|
612
|
+
```
|
|
613
|
+
|
|
614
|
+
> これらのコンポーザブルは、注入された `IntlayerProvider` からロケールを考慮します
|
|
615
|
+
|
|
616
|
+
## ドキュメント履歴
|
|
617
|
+
|
|
618
|
+
| バージョン | 日付 | 変更内容 |
|
|
619
|
+
| ---------- | ---------- | ---------------------------------- |
|
|
620
|
+
| 5.8.0 | 2025-08-20 | Vueフォーマッターを追加 |
|
|
621
|
+
| 5.8.0 | 2025-08-18 | フォーマッターのドキュメントを追加 |
|
|
622
|
+
|
|
623
|
+
クライアントコンポーネント:
|
|
624
|
+
|
|
625
|
+
```ts
|
|
626
|
+
import {
|
|
627
|
+
useNumber,
|
|
628
|
+
useCurrency,
|
|
629
|
+
useDate,
|
|
630
|
+
usePercentage,
|
|
631
|
+
useCompact,
|
|
632
|
+
useList,
|
|
633
|
+
useRelativeTime,
|
|
634
|
+
useUnit,
|
|
635
|
+
} from "vue-intlayer/format";
|
|
253
636
|
```
|
|
254
637
|
|
|
255
|
-
>
|
|
638
|
+
> これらのコンポーザブルは、注入された `IntlayerProvider` からロケールを考慮します
|
|
256
639
|
|
|
257
640
|
## ドキュメント履歴
|
|
258
641
|
|
|
259
|
-
| バージョン | 日付 | 変更内容
|
|
260
|
-
| ---------- | ---------- |
|
|
261
|
-
| 5.8.0 | 2025-08-
|
|
642
|
+
| バージョン | 日付 | 変更内容 |
|
|
643
|
+
| ---------- | ---------- | ----------------------------------------------------------------------------------- |
|
|
644
|
+
| 5.8.0 | 2025-08-20 | Vueフォーマッターを追加 |
|
|
645
|
+
| 5.8.0 | 2025-08-18 | フォーマッターのドキュメントを追加 |
|
|
646
|
+
| 5.8.0 | 2025-08-20 | リストフォーマッターのドキュメントを追加 |
|
|
647
|
+
| 5.8.0 | 2025-08-20 | 追加のIntlユーティリティ(DisplayNames、Collator、PluralRules)を追加 |
|
|
648
|
+
| 5.8.0 | 2025-08-20 | ロケールユーティリティ(getLocaleName、getLocaleLang、getLocaleFromPathなど)を追加 |
|
|
649
|
+
| 5.8.0 | 2025-08-20 | コンテンツ処理ユーティリティ(getContent、getTranslation、getIntlayerなど)を追加 |
|
|
@@ -25,8 +25,8 @@ Intlayerの主なアイデアは、コンポーネントごとのコンテンツ
|
|
|
25
25
|
.
|
|
26
26
|
└── Components
|
|
27
27
|
└── MyComponent
|
|
28
|
-
├── index.content.
|
|
29
|
-
└── index.
|
|
28
|
+
├── index.content.ts
|
|
29
|
+
└── index.tsx
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
これを実現するために、Intlayerの役割は、プロジェクト内に存在するさまざまな形式の`コンテンツ宣言ファイル`をすべて見つけ出し、それらから`辞書`を生成することです。
|
|
@@ -45,12 +45,10 @@ Intlayerの主なアイデアは、コンポーネントごとのコンテンツ
|
|
|
45
45
|
- [`vite-intlayer`パッケージ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/vite-intlayer/index.md)などのアプリプラグインを使用、または[Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/index.md)用の同等のプラグインを使用。これらのプラグインのいずれかを使用すると、アプリケーションを開始(開発)またはビルド(本番)する際に、Intlayerが自動的に辞書をビルドします。
|
|
46
46
|
|
|
47
47
|
1. コンテンツファイルの宣言
|
|
48
|
-
|
|
49
48
|
- コンテンツファイルは、TypeScript、ECMAScript、CommonJS、JSONなど、さまざまな形式で定義できます。
|
|
50
49
|
- コンテンツファイルはプロジェクト内のどこにでも定義でき、これによりメンテナンス性とスケーラビリティが向上します。コンテンツファイルの拡張子の規約を守ることが重要です。この拡張子はデフォルトで`*.content.{js|cjs|mjs|ts|tsx|json}`ですが、[設定ファイル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)で変更できます。
|
|
51
50
|
|
|
52
51
|
2. `辞書`の生成
|
|
53
|
-
|
|
54
52
|
- 辞書はコンテンツファイルから生成されます。デフォルトでは、Intlayer辞書はプロジェクトの`.intlayer/dictionaries`ディレクトリに生成されます。
|
|
55
53
|
- これらの辞書は、すべてのニーズに対応し、アプリケーションのパフォーマンスを最適化するために、さまざまな形式で生成されます。
|
|
56
54
|
|