Subwayの正確なカロリー＆栄養計算機を作った方法

ヘルステック分野に情熱を持つ開発者として、市場のギャップに気づきました。サブウェイは栄養情報を提供していますが、お客様は自分の食事の組み合わせをカスタマイズするためのインタラクティブなツールを持っていません。私は、最後のカロリーに至るまで、人々の食事選択についてリアルタイムの洞察を提供するものを作りたいと思いました。

課題は明確でした：サブウェイのメニューの膨大な多様性—パンの選択からタンパク質の選択、すべての野菜やコンディメントまで—を処理できる包括的な計算機を構築し、公式の栄養データの正確さを維持することです。

同じことをするnutritionixのツールを見つけましたが、それは良いものでしたが、もっとユーザーフレンドリーに感じるものを作りたいと思いました。

技術スタックと構造

1. データの課題

最初の仕事は栄養データの収集と構造化でした。サブウェイの公式栄養チャートの収集、測定の標準化、包括的なJSONデータベースの作成に数週間を費やしました。

構造は包括的かつ効率的である必要がありました：

const subwayMenu = { breads: [ { id: 'artisan-italian', name: '6" Artisan Italian Bread', calories: 210, totalFat: 2, saturatedFat: 1, // ... 14 additional nutritional fields }, // ... 10 more bread options ], // ... 9 additional categories };

\ 各メニュー項目には19の栄養指標が含まれており、カロリーだけでなく、完全なFDAスタイルの栄養ラベルを表示できることを保証しています。

2. 状態管理アーキテクチャ

核心的な複雑さはユーザーの選択状態の管理にありました。サブウェイの注文は単純な選択ではなく、多次元の組み合わせです：

let currentSelection = { sandwichSize: '6inch', bread: null, proteins: {}, cheeses: {}, vegetables: {}, condiments: {}, // ... with quantities for each };

\ ユーザーがタンパク質、チーズ、野菜の複数の部分を追加できる数量ベースのシステムを実装しました。「フットロング」の乗数は、適切なコンポーネントを自動的に2倍にしながら、他のもの（サラダなど）は影響を受けないようにする必要がありました。

3. レスポンシブ、分離されたコンポーネント設計

CSSの競合なしにどのウェブサイトでも計算機が機能するようにするために、スコープ付きのアプローチを使用しました：

#subway-calculator-isolated { all: initial; display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', ...; } #subway-calculator-isolated * { box-sizing: border-box; margin: 0; padding: 0; }

\ all: initialリセットと高いz-index（99999）により、ホストサイトのスタイリングに関係なく、計算機が一貫してレンダリングされることを保証しました。

精度エンジン：公式栄養データの統合

1. 包括的なデータ統合

このツールはサブウェイの公式2025年栄養情報を使用しており、ゴーストペッパーブレッドやアップデートされたサラダの配合など最近の追加も含まれています。各データポイントはサブウェイのPDF栄養ガイドとウェブサイトデータと照合されました。

データベースにはカロリーだけでなく以下も含まれています：

• マクロ栄養素（脂肪、炭水化物、タンパク質）
• 微量栄養素（ビタミンA、C、カルシウム、鉄）
• 特別な食事の考慮事項（ナトリウム、添加糖、食物繊維）
• アレルゲン関連情報（コレステロール、トランス脂肪）

2. 動的計算アルゴリズム

計算エンジンは複雑なシナリオを処理する必要がありました：

function calculateTotalNutrition() { let total = { calories: 0, totalFat: 0, /* ... */ }; const sizeMultiplier = currentSelection.sandwichSize === 'footlong' ? 2 : 1; // Bread calculation (size-dependent) if (currentSelection.bread) { addItemNutrition(total, bread, currentSelection.bread.quantity * sizeMultiplier); } // Proteins, cheeses, vegetables (size-dependent) ['proteins', 'cheeses', 'vegetables'].forEach(category => { // Apply size multiplier }); // Soups, desserts (size-independent) ['soups', 'desserts'].forEach(category => { // No size multiplier }); return { nutrition: total, ingredients }; }

3. FDA準拠の栄養ラベル

2,000カロリーの食事（ユーザー調整可能）に基づいて、1日の摂取量の割合を計算し、正確なFDA栄養ラベル形式を複製しました：

const fdaDailyValues = { totalFat: 78, saturatedFat: 20, cholesterol: 300, sodium: 2300, totalCarbs: 275, dietaryFiber: 28, addedSugars: 50, protein: 50, vitaminA: 900, vitaminC: 90, calcium: 1300, iron: 18 };

% Daily Valueの計算はこれらの公式FDA参照量を使用し、規制遵守を確保しています。

ユーザー体験の課題と解決策

1. 直感的なカテゴリ管理

リアルタイムカウンター付きのアコーディオンスタイルのドロップダウンが複雑さの問題を解決しました：

• 単一選択パン用（ラジオボタン）
• 数量付きの複数選択タンパク質、野菜などの場合
• 選択数とカロリーバッジによる明確な視覚的フィードバック
• 各カテゴリの一括アクション（すべてクリア）

2. リアルタイムフィードバックシステム

ユーザーの各アクションは複数の更新をトリガーします：

1. 選択プレビューが即時に更新
2. 栄養ラベルが再計算
3. カロリー進捗バーがアニメーション
4. 成分リストが再生成

進捗バーは色分け（緑→黄→赤）を使用して、食事が1日の目標にどのように適合するかを視覚的に示します。

3. モバイルファーストのレスポンシブ性

計算機は戦略的なブレークポイントを持つCSSグリッドとフレックスボックスを使用しています：

@media (max-width: 768px) { .calculator-container { flex-direction: column; } .item-with-quantity { flex-direction: column; } .goal-setting-content { grid-template-columns: 1fr; } }

モバイルでは、アイテムが縦に積み重なり、栄養ラベルは水平スクロールなしで読みやすく保たれます。

高度な機能と洗練

1. 保存機能

エクスポート機能は以下を含む詳細なテキストレポートを生成します：

• 完全な栄養成分
• 数量付きの成分リスト
• 1日の進捗分析
• 食事の栄養プロファイルに基づいたパーソナライズされた健康のヒント

window.subwaySaveNutritionInfo = function() { const summary = ` ============================================================ SUBWAY NUTRITION CALCULATOR - MEAL SUMMARY ============================================================ MEAL DETAILS: ------------- Size: ${sizeText} Total Calories: ${Math.round(nutrition.calories)} Daily Calorie Goal: ${userSettings.dailyCalorieGoal} calories Percentage of Daily Goal: ${Math.round((nutrition.calories / userSettings.dailyCalorieGoal) * 100)}% `; // ... generates downloadable file };

2. 視覚的フィードバックとマイクロインタラクション

• ドロップダウンと進捗バーのアニメーション遷移
• 選択フィードバック用のパルスアニメーション
• 役立つ説明付きのホバーツールチップ
• リセット確認時のフラッシュ効果
• タブコンテンツのスムーズな読み込み

3. パフォーマンス最適化

• タブコンテンツの遅延読み込み
• 効率的なDOM更新（可能な場合はバッチ処理）
• ターゲットを絞った更新による最小限の再レンダリング
• 最適化されたイベント委任

データの正確性とメンテナンス

1. 検証プロセス

すべての栄養価は以下と相互参照されました：

1. サブウェイの公式PDF栄養ガイド
2. ウェブサイトの栄養計算機
3. 栄養ラベルのFDA丸め規則
4. 類似アイテム間の一貫性チェック

2. 更新戦略

モジュラーなJSON構造により、サブウェイが以下を行う場合に簡単に更新できます：

• 新しいメニュー項目の導入
• 既存の項目の再配合
• ポーションサイズの変更
• 栄養情報の更新

3. 地域的なバリエーションの処理

このツールには、地域的なバリエーションの可能性がある項目に対するメモ（**）が含まれており、利用可能な場合は地域の栄養情報を確認するようユーザーにアドバイスしています。

学んだ教訓と将来の改善点

うまくいったこと：

1. 分離されたコンポーネントアーキテクチャ - ホストサイトとの競合がゼロ
2. 包括的なデータ構造 - 維持と拡張が容易
3. リアルタイムフィードバック - ユーザーは選択の結果をすぐに確認できる
4. モバイル最適化 - すべてのデバイスでシームレスに動作

克服した課題：

1. 複雑な状態管理 - 明確なデータ構造で解決
2. 多数のアイテムでのパフォーマンス - 最適化されたDOM更新
3. 正確なサイズ計算 - フットロングで何が2倍になるかの明確なルール
4. 視覚的一貫性 - 信頼性の高いレンダリングのためのカスタムCSSリセット

計画されている将来の拡張：

1. お気に入りの組み合わせを保存するためのユーザーアカウント
2. （低炭水化物、高タンパク質など）の食事目標追跡
3. 複数日にわたる食事計画
4. APIを介したフィットネスアプリとの統合
5. ユーザーの位置に基づく地域メニュー検出

結論

サブウェイ栄養計算機の構築は単なるコーディングプロジェクト以上のものでした—それは食品選択の透明性を作り出すことでした。正確な公式栄養データと直感的なインターフェースを組み合わせることで、ユーザーが食事について情報に基づいた決定を下せるようにしました。

このツールは、ウェブ技術（HTML、CSS、JavaScript）が企業データと消費者理解の間のギャップを埋める強力でインタラクティブなアプリケーションを作成できることを示しています。すべてのコード行は究極の目標に役立ちます：人々が自分が食べているものを正確に理解し、サブウェイの選択を健康目標に合わせることができるようにすることです。

計算機は生きたプロジェクトであり、すでに何千人ものユーザーにとって価値あるものとなっている正確性と使いやすさへの中核的なコミットメントを維持しながら、その機能を拡張する計画があります。

計算機リンク：サブウェイカロリー計算機：カロリーを数えてサブを楽しむ - サブウェイカロリー計算機

\ \