0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「大さじ 1½」を綺麗にスケーリング表示するレシピ計算機を作った

0
Posted at

作ったもの

Recipe Scalehttps://sen.ltd/portfolio/recipe-scale/

スクリーンショット

  • 混合分数・小数・Unicode 分数 (½, ¼, ⅓) のパース
  • 英語単位(cup / tbsp / tsp / oz / lb / g / kg / ml / l)
  • 日本料理単位(大さじ / 小さじ / 杯 / 個 / 本 / 片)
  • メトリック ↔ インペリアル変換
  • スマート分数表示(0.75 → ¾)
  • ペースト後の個別編集

vanilla JS、ゼロ依存、ビルド不要node --test で 65 ケース。

パーサの優先順位

"1 1/2 cups flour" → 1.5 cups flour
"1½ cups flour"    → 1.5 cups flour
"大さじ 2 の醤油"   → 大さじ 2 の醤油
"salt to taste"    → 数量なし

混合分数(1 1/2)→ 小数(1.5)→ 分数(1/2)→ Unicode(½)の順にチェック。順序を間違えると 1 1/211/2 に分かれてしまう。

スマート分数表示

const FRACTIONS = [
  { value: 0.25, symbol: '¼' },
  { value: 0.333, symbol: '' },
  { value: 0.5,  symbol: '½' },
  { value: 0.667, symbol: '' },
  { value: 0.75, symbol: '¾' },
];
for (const f of FRACTIONS) {
  if (Math.abs(frac - f.value) < 0.01) return `${whole}${f.symbol}`;
}

許容誤差 0.01 で 1/3(0.333...)や 2/3(0.666...)の float 誤差を吸収。1.5 → 1½0.25 → ¼2.75 → 2¾

日本単位

  • 大さじ = 15ml(tbsp と同じ)
  • 小さじ = 5ml(tsp と同じ)
  • 個 / 本 / 片: 個数単位、変換せずスケーリングのみ

英語単位との相互変換が自然にできるので、海外レシピを日本の計量器で使える。

単位変換は正準単位経由

const TO_ML = { 'cup': 240, 'tbsp': 15, 'tsp': 5, '大さじ': 15, '小さじ': 5 };

全単位 → ml → 全単位。15×15 の 225 定数の代わりに 15 定数だけ。新単位の追加はテーブルに 1 行追加するだけ。

シリーズ

100+ 公開ポートフォリオ シリーズの #65 です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?