インターフェイス内の通貨の切り替え
1）原則
1.まず意味、次にUI。口座通貨（会計真実）と表示通貨（利便性）と取引通貨（実際のマネーコンバージョン）を分離します。
2.曖昧さゼロ。混乱の危険にあるコード+シンボルを表示する（'US$'、'CA$'、'MXN'、 'R$'）。₴/₸/₼のために、常に詳細にコードを追加します。
3.コースの完全性。コースのソース、最終更新の瞬間、コミッション/スプレッドが含まれているかどうかを確認できます。
4.入力安定性。通貨切り替えは、明示的な同意なしに（特にレート/預金フォームで）エントリ値を「ジャンプ」するべきではありません。
5.フォーマットのローカライズ。区切り文字、スペース、通貨記号-ユーザーロケール別；正確さ-通貨によって。
2）スイッチングモデル
Display-only-すべての計算が口座通貨に残り、UIは選択した通貨に相当するものを表示します。カタログ、プロファイル、寸法に使用します。
ハイブリッド（ソフトコンバート）：選択した通貨に表示+口座通貨での取引の確認（両方を表示）。
操作（ハードコンバート）：ユーザーはトランザクション通貨（入出金/レート）を変更します。明示的なコース、手数料、固定時間が必要です。
ルール：デフォルトでは-表示のみ、対応するフロー（現金、出金、資金の移転）でのみ「ハード」変換をオンにします。
3）コントロールと配置
ヘッダー/プロファイルパネルの通貨スイッチ（「₴/€/$」アイコンまたは通貨コード）。
セレクター：コード/名前/シンボルで検索します。選択された/頻度通貨-上。
フォーム内（デポジット/レート）：金額フィールドの右側にあるコンパクトセレクター。「XXXで同等の≈」のヒントの横にあります。
モバイルパターン：リストとフィルタリングのための入力を持つボトムシート。
html
<button aria-haspopup="listbox" aria-expanded="false" class="currency-switch">UAH</button>
<ul role="listbox" class="currency-menu" hidden>
<li role="option" aria-selected="true">UAH — ₴</li>
<li role="option">USD — US$</li>
<li role="option">EUR — €</li>
<li role="option">TRY — ₺</li>
</ul>4）フォーマットおよび正確さ
マイナーユニット：最小単位（ペニー、セント、サトシ）全体の量を格納します。
小数点以下通貨：- 0： JPY、 KRW、 CLP
- 2： USD、 EUR、 UAH、 TRY
- 3+：一部のZAR （2）、 KWD （3）、暗号（4-8）通貨
- Cryptocurrencies：最大8文字を表示します（動的精度、しかし可読性のための下限付き）。
- テーブル桁：'font-variant-numeric： tabular-nums；'列の配置のために。
js const fmt = (amountMinor, currency, locale) => {
const fraction = { JPY:0, KRW:0, KWD:3 }[currency]?? 2;
return new Intl.NumberFormat(locale, { style:'currency', currency, minimumFractionDigits:fraction, maximumFractionDigits:fraction })
.format(amountMinor / 10fraction);
};
fmt(200000, 'UAH', 'uk-UA'); // 2 000,00 ₴5）コースとアップデート
ソース：コースプロバイダ（内部価格/銀行/FX-API）を修正します。
キャッシュ：適度な頻度でコースを更新する（例：60-300秒ごとに）+増分は要求に応じて更新します。
固定時間：チェックアウト時に「更新されたN分前」と固定時間を表示します。
スプレッド/コミッション： 明示的なラインを表示："レート1 USD=36。60 UAH（スプレッド1含む。5%)».
丸め：銀行または通常-1つを選択し、ポリシーで修正します。
6） UXのテキストと説明
同等："≈ 52。10€"-量の横に、ミュートされた色、リアルタイムで更新。
法的注意： 「実際のレートと手数料は確認ステップに記録されます。」
ロングコード：ツールチップ/セカンダリ文字列：「US$-米ドル」。
バスケットの変換：説明なしで「合計」を変更しないでください。再集計ラインを表示します。
7）空室状況（A11y）
通貨セレクタで'role=「listbox/option」'。
キーボードのサポート：矢印、Enter、 Type-ahead by code/name。
SRのための読書：「表示通貨：UAH-ウクライナのグリブナ」。
色≠意味の唯一の媒体です（常にコード/テキストがあります）。
RTL：アラビア文字列内の'dir=「ltr」の数字/コード。
8）パフォーマンスとキャッシュ
コース-メモリ+localStorageでTTL（例えば、5分）。
バッチ更新：バッチ内の同値を再計算します（requestAnimationFrame、 debunks 100-200 ms）。
コースが<しきい値（例えば0）を変動させたときに、余分なリストのレレンダーをトリガーしないでください。1%).
9） iGamingの詳細
口座通貨-基本レポート（預金、残高、履歴）。
レート通貨：通常=口座通貨；別のものが指定されている場合は、ダブルブロックを表示します。「Debited X XXX in USD （≈ Y YYY in UAH）」。
決済の修正：賞金は、賭けではなく、決済時のレートで変換されます-これはクーポン/履歴の詳細に見られるはずです。
入金/出金：PSP/銀行のレートと手数料-別のラインで；メソッドによるETA。
責任あるプレイ制限：口座通貨で定義されています。UIが異なる通貨の場合は、両方の値を表示します。
トーナメントと賞品：賞金基金の通貨は固定されています。表示されるとき、等価はおおよその、印が付いています。
10） Antipatterns
明示的な同意なしに通貨を切り替える際に入力フィールドの「魔法」値が変化します。
国コードのない1つの「$」文字の使用。
知っている内に隠されたコミッション（スプレッドについての行はありません）。
ロケールと通貨を混在させる（'UAH'の'en-Us'によるフォーマット）。
JPY/KRWの「2文字」またはすべての暗号通貨の「8文字」のハード精度。
現在の為替レートでの過去の取引の再計算「遡及的」-マークなし「再計算」。
11）システムトークンの設計（例）
json
{
"currency": {
"default": "UAH",
"displayList": ["UAH","USD","EUR","TRY","PLN","BRL","MXN"],
"fractions": { "JPY":0, "KRW":0, "KWD":3, "BTC":8 },
"showCodeWithSymbol": ["USD","CAD","AUD","NZD"],
"approxPrefix": "≈ "
},
"format": {
"tabularNums": true,
"grouping": "locale",
"negative": "−"
},
"fx": {
"ttlSec": 300,
"changeThresholdPct": 0.1,
"showSpread": true
}
}12）スニペット
通貨スイッチ（React、 context+Intl）
tsx import { createContext, useContext, useState, useMemo } from 'react';
type Cur = 'UAH' 'USD' 'EUR' 'TRY';
const CurrencyCtx = createContext<{cur:Cur,set:(c:Cur)=>void, rate:(from:Cur,to:Cur)=>number}>({cur:'UAH',set:()=>{},rate:()=>1});
export function CurrencyProvider({children}:{children:React.ReactNode}){
const [cur, set] = useState<Cur>('UAH');
// fx: получить из кэша/апи; здесь — заглушка const table = { UAH:{USD:0.027,EUR:0.025,TRY:0.89,UAH:1}, USD:{UAH:36.6,EUR:0.93,TRY:33.0,USD:1}, EUR:{UAH:39.2,USD:1.07,TRY:35.4,EUR:1}, TRY:{UAH:1.12,USD:0.030,EUR:0.028,TRY:1} };
const rate = (from:Cur,to:Cur)=> table[from][to];
const value = useMemo(()=>({cur, set, rate}),[cur]);
return <CurrencyCtx.Provider value={value}>{children}</CurrencyCtx.Provider>;
}
export function useCurrency(){ return useContext(CurrencyCtx); }
export function Money({minor, iso}:{minor:number, iso:Cur}){
const { cur, rate } = useCurrency();
const fraction = { JPY:0, KRW:0, KWD:3 }[cur as any]?? 2;
const v = (minor/10fraction) rate(iso, cur);
return <span style={{fontVariantNumeric:'tabular-nums'}}>{new Intl.NumberFormat(undefined,{style:'currency',currency:cur, minimumFractionDigits:fraction, maximumFractionDigits:fraction}).format(v)}</span>;
}デュアルディスプレイ（動作変換）
html
<div class="amount">
<label>Сумма депозита</label>
<div class="row">
<input type="number" inputmode="decimal" aria-describedby="fxnote">
<select aria-label="Валюта операции">
<option>USD</option><option>EUR</option><option>UAH</option>
</select>
</div>
<small id="fxnote">≈ 2 000,00 ₴ · Курс будет зафиксирован на следующем шаге</small>
</div>13）メトリクス
FXレイテンシ：通貨スイッチからすべてのフィールドの更新までの時間（ターゲット≤ 150ミリ秒）。
正正率： 「不正確な量」（<0。2%).
Display vs account mismatch：ユーザーが通貨を混乱させるイベント（下位ヒント）。
CTRコースのヒント：「コース/コミッションの詳細」をクリックします。
換算の現金割引：金額の「突然の」変化に関連する失敗のシェア。
14） QAチェックリスト
意味と透明性
- 口座および/または取引の通貨はどこにでも表示されます。
- $は国コード（US$、CA$など）を示します。
- レート、更新日、スプレッド/コミッションに関する行があります。
フォーマットと精度
- 通貨単位の小数点（JPY=0、 KWD=3、 crypto=8まで）。
- 数値/通貨ロケールはUI言語に対応しています。
- 過去の取引は、マーキングなしで「現在の為替レートで」再計算されません。
ビヘイビアー
- 通貨の切り替えは、確認なしにエントリを変更しません。
- 「≈」相当はスムーズかつ迅速に更新されます。
- 通貨セレクターはキーボードでアクセス可能で、Type-aheadが動作します。
iGamingの詳細
- クーポン：チャージ/ウィンとその通貨が署名され、固定率が表示されます。
- まで：PSP/銀行手数料は別途表示されます。
- 制限内：両方の値が表示されます（アカウントと表示）。
RTL/A11y
- コード/金額はRTLで正しく読み込まれます（数値は'dir='ltr'）。
- コントラストとフォーカスインジケーターはAAに対応しています。
15）設計システムにおけるドキュメンテーション
コンポーネント：'CurrencySwitch'、 'Money'、 'FxNote'、 'DualAmount'。
精密/丸めの方針および単一のフォーマット機能。
ルール： 「表示のみの場合」「、ハード変換の場合」「、スプレッドの表示方法」
通貨参照：コード、シンボル、桁、地域文字の衝突。
Gallery Do/Don 't：「$without code」、自動ジャンプ入力、隠しコミッション。
簡単な要約
通貨の切り替えは単なる₴/€/$セレクターではありません。これは、お金の明確なモデル（口座通貨と表示と操作）、手数料の公正なレート、ロケールによる正しい書式設定、入力フィールドの慎重な動作です。デザインシステムのルールを修正し、コースの書式設定とキャッシュを自動化します。ユーザーは自信を持って数字を疑わず、「見えない」スプレッドでお金を失うことはありません。