食事の組み合わせ
ごはんの組みかた
宅配食のおかずと市販のごはんを組み合わせ、公式の商品表示と注文条件を確認できるサイト。27通りの一食例をサービス別に絞り込み、表示値で並べ替えられる。個別ページでは主食の種類と個数、一品を選び直すと栄養表示の合計が変わり、各商品の出典と確認日もたどれる。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| Astro | 一食例、注文条件、読みもののページを静的に生成する。 |
| TypeScript | 食品とサービスのデータ構造、栄養表示値の合算、欠損値の扱いを記述する。 |
| ブラウザのJavaScript | 一食例の絞り込みと並べ替え、主食と一品の選択に応じた表示更新を行う。 |
| 公式ページの照合スクリプト | 食品データの掲載値を各商品の公式ページから再取得して照合する。 |
| Cloudflare Workers Static Assets | Astroが生成した静的ファイルを独自ドメインで配信する。 |
処理の流れ
一食例を探す
宅配食のサービスで27通りの一食例を絞り込み、初期の組み合わせの表示値を使って各サービス内で並べ替える。
組み合わせを変える
個別ページで主食の種類と個数を選び、必要に応じて一品を足す。主食入りの商品にはごはんを重ねない。
表示値と出典を確かめる
選んだ食品の栄養表示値の合計を確認し、商品ごとの公式ページと確認日をたどる。
注文条件を確認する
宅配食6社の案内から、食数、商品代、送料、保存方法、定期購入の条件を確認する。
実装の工夫
表示単位と欠損値を分けて計算する
栄養表示値は100g当たりと1包装当たりを区別して合算する。いずれかの食品で値が欠ける項目は、既知の値だけを合計として出さず「一部未確認」と表示する。炭水化物と糖質も別項目として扱う。
選択に合わせて画面内で再計算する
個別ページは初期の一食例を静的に表示する。主食や一品を選び直すと、同じ計算関数をブラウザ側で呼び、食品の内訳と栄養表示の合計を更新する。選択は再読み込みで初期状態に戻る。
商品表示の根拠を残す
食品データに公式ページのURLと確認日を持たせ、個別ページから参照できるようにする。別の照合スクリプトは公式ページを再取得し、掲載した数値が見つかるかを検査する。
構成と制約
- 栄養表示値の合算は、健康状態や必要量に対する判定ではない。表示のない糖質などは「一部未確認」とする。
- 送料は配送先や注文内容で変わり、ごはんと一品の実売価格も確定しないため、送料込みの一食総額は掲載しない。
実装確認：