ハコヅミを作る #42：料理を登録できるようにする（食材は、消耗品から選ぶ）

2026年10月06日

前回（#41）で、ベータ版の前に「料理」を入れると決めました。条件は、最小の形で作ることです。

今回は、その1つ目です。

最小の形

前回決めた形を、もう一度書いておきます。

食材を消耗品にしたのは、次の回で作る「キャンプで料理を選ぶと、食材が持ち物チェックに入る」のためです。持ち物チェックには、もう消耗品の項目があります。食材が消耗品なら、その仕組みにそのまま乗れます。

テーブルは2つだけ足しました。

テーブル	役割
`dishes`	料理（名前、レシピ、参考の URL）
`dish_supplies`	料理と消耗品のつながり

料理を消しても、消耗品は消えません。消えるのは、つながりだけです。

#28 から、実装は Claude Code のバックグラウンドの作業に任せることが増えました。今回も、次の2段階で進めています。

先に用意したのは、トップページのメニューに置く絵のアイコンだけです。画像を作って渡し、ヘッダーの白い線画のアイコンは、Claude Code に作ってもらいました（Lucide の鍋の絵を、使う分だけ写しています）。

料理を足すと、メニューは6つになります。並びは、キャンプ・ギア・消耗品・料理・コンテナ・プランです。

心配だったのは、スマホの幅のヘッダーです。#40 で、幅 320px のはみ出しを直したばかりでした。5つでぎりぎりだったところに、もう1つ入ります。

画面イメージは、3つの案で届きました。

選んだのは、案A です。文字の大きさは今のままで、項目の間だけを詰めます。幅 320px でも収まることを、E2E で確かめています。

案C は、ヘッダーが 28px ほど高くなります。持ち物チェックは、スマホで縦に長い一覧を見る画面です。上の帯は、低いほうが助かります。

トップページのメニューは、スマホの幅で3つずつ2段、広い幅で6つを1行にしました。

一覧は、1件を1行にしました。名前と、食材の数だけです。作りは、プランの一覧に合わせています。

食材の欄は、自分の消耗品を、カテゴリごとにチェックで選びます。プランの「持っていく消耗品」と同じ形です。

参考の URL は、https だけを受け付けます。編集の画面には、保存した URL を開くリンクを足しました。Issue には書いていなかったものですが、URL を入れても押せないと、使い道がありません。

前回、先に決めることとして挙げていた点が、1つありました。食材を消耗品に登録する手間です。

カレーを登録しようとして、「玉ねぎ」が消耗品にない。いったん消耗品の画面に行って登録し、戻ってきて選ぶ。これでは、料理を登録する気がなくなります。

そこで、料理の画面に「新しい食材」の欄を置きました。名前を書いて保存すると、消耗品として登録して、その料理に付けます。

決めたことは、次のとおりです。

消耗品には、登録数の上限があります（#29）。新しい食材を3つ書いて、あと2つしか作れないとき、どうするか。

2つだけ作って、1つは捨てる、という手もあります。ただ、それだと「保存できたのに、食材が1つ足りない」料理ができます。気づかないまま、キャンプに行くことになりかねません。

作れない分があるときは、保存を丸ごとやめることにしました。料理も保存しません。足せない名前を、エラーで伝えます。もうある消耗品を使うだけなら、上限に達していても保存できます。

料理と、新しい消耗品と、つながりは、1回のバッチで作ります。途中で失敗して、消耗品だけが残ることはありません。

上の画像の「新しい食材」の欄は、1行に1つずつ名前を書く形です。レシピも、大きな入力欄に、自分で「1. 〜 2. 〜」と書きます。

作るのは簡単な形です。受入確認では、そのまま OK にしました。ただ、触っているうちに、ここがどうにも引っかかってきます。この話は、#46 で書きます。

次回は、キャンプで料理を選んで、食材を持ち物チェックに入れます。