React Native で kg/lbs の単位変換が二重にかかるバグと設計のポイント

React Native で kg/lbs の単位切り替えを実装したら、数値がおかしくなった。二重変換が原因だった。

事象

設定で「kg」から「lbs」に切り替えた
入力した重量の表示値が想定と大きくずれる（例：100kg を入力したのに 220.46 lbs ではなく 486 lbs になる）
切り替えを繰り返すたびにさらにずれていく
単位を元に戻しても正しい値に戻らない

原因

DB への保存時にも単位変換、画面の表示時にも単位変換、と二か所で変換が走っていた。

// ❌ 二重変換パターン

// 保存時（lbs 設定のとき kg→lbs に変換してから保存）
const valueToSave = unit === 'lbs' ? kg * 2.20462 : kg;
db.save({ weight: valueToSave });

// 表示時（DB の値をさらに変換して表示）
const display = unit === 'lbs' ? saved * 2.20462 : saved;

「lbs」設定で 100kg を入力すると：

保存時に 100 × 2.20462 = 220.46 として DB に保存
表示時にさらに 220.46 × 2.20462 = 486 として表示

2 回変換された値が画面に出る。

解決策

DB には常に単一単位（kg）で保存し、変換は表示時だけ行う。

// ✅ 正しい設計

// 保存時：ユーザーが lbs で入力していたら kg に戻してから保存
const valueToSave = unit === 'lbs' ? lbsInput / 2.20462 : kgInput;
db.save({ weight: valueToSave });  // 常に kg で保存

// 表示時：DB の kg 値を設定に合わせて変換
const display = unit === 'lbs' ? dbWeight * 2.20462 : dbWeight;

変換のロジックが一か所に集まるので、単位を切り替えても DB の値は変わらず、表示だけが切り替わる。

補足

「DB は単一単位・表示時のみ変換」は単位系を扱うアプリの基本設計。cm/inch、km/mile、℃/℉ など他の単位でも同じ考え方が使える
変換係数（2.20462 等）は定数として一か所にまとめておくと、変更・テストが楽になる
既に二重変換で保存されたデータがある場合は、マイグレーションで DB の値を逆変換して正規化する必要がある