ハコヅミを作る #59：キャンプの前の晩に使ってみたら、着替えと食材がまざった（カテゴリ分けと「身の回り品」）
前回（#58）の最後に、「今週末は、自分でキャンプに行きます」と書きました。その前の晩、荷物を用意しながら、はじめてハコヅミを実戦で使いました。使いはじめて数分で、直したいところが見つかりました。
- 着替えは、ギアか、消耗品か
- まず、表示だけを直す
- 「使ってみてから決める」の半日後
- 名前を「持ち物」にしかけて、やめる
- テーブルを分けない
- 角の丸みで、テストが落ちる
着替えは、ギアか、消耗品か
ハコヅミに登録できる持ち物は、2種類です。
- ギア：テント、バーナー、ランタンなど、キャンプ道具
- 消耗品：ガス缶、薪、食材など、使ったら減るもの
ところが、キャンプに持っていくものは、これだけではありません。着替え、お風呂セット、カメラ、充電器。キャンプ道具ではないので、ギアに入れるのは違います。残るのは消耗品なので、消耗品に「毎回用意する」として登録しました。
そして、前の晩。持ち物チェックを開くと、コンテナに入っていないものが、全部「消耗品」という1つのまとまりに、名前順で並んでいました。
- うどん
- お風呂セット
- お米
- カメラ
- シェーバー
- バゲット
- 下着
食材と、着替えと、カメラが、まざっています。
食材は、買い出しでそろえます。着替えやカメラは、家でかばんに詰めます。用意する場面が違うものが、1つの列に並んでいると、「あと何が残っているか」が頭に入りません。
この「消耗品」のまとまりは、#54で作ったばかりです。そのときは、消耗品＝食材とガス缶くらい、という頭でした。机の上で考えたときには、着替えのことは、思いつきませんでした。
まず、表示だけを直す
Claude Code に相談すると、案が2つ出ました。
- 持ち物チェックで、コンテナに入っていない消耗品を、カテゴリごとに分けて出す
- 消耗品に、「身の回り品」という種類を足す
1 は、表示だけの変更です。消耗品には、もともとカテゴリ（食材、日用品、ガジェットなど）を付けられます。その名前を見出しにして、分けるだけです。データベースは変えません。
2 は、もう少し大きな話です。Claude Code の考えは、こうでした。
②は、①を使ってみてから決めても遅くない。①でカテゴリごとに分かれれば、「日用品」「ガジェット」が見出しに出るので、「消耗品か？」という違和感も、かなり薄まると思う。
もっともなので、まず 1 だけを作りました。
コンテナに入っていない消耗品を、カテゴリごとに分けた（架空のデータ）
並びは、コンテナ → コンテナなし（ギア）→ カテゴリ（名前順）→ 未分類、です。見出しの右に「あと 3」と出るので、「食材は、あと3つ買う」「ガジェットは、全部詰めた」が、ひと目で分かります。
直したのは、並べ方を決める関数1つと、データベースからカテゴリも読むようにした1行です。あとは、「消耗品」という見出しを探していたテストを、直しました。
「使ってみてから決める」の半日後
1 を開発環境で確かめました。持ち物チェックは、見やすくなりました。
ところが、消耗品の一覧と、料理の画面を開くと、やっぱり気になります。
- 消耗品の一覧で、食材の隣に「着替え」が並ぶ
- 着替えの右に、「毎回用意」という札が付いている（用意するのではなく、家にあるものを詰めるだけ）
- 料理の食材を選ぶ欄に、充電器が出てくる
「使ってみてから決める」と言ってから、半日。使ってみたので、決めました。2 も作ります。
先に 1 だけを出したのは、遠回りではありませんでした。1 を触ったから、「持ち物チェックは、もうこれでよい。残っているのは、一覧と料理の欄」と、直すところを絞れました。最初から 2 つまとめて考えていたら、持ち物チェックの側にも、何か足していたと思います。
名前を「持ち物」にしかけて、やめる
新しい種類の名前を決めます。Claude Code の案は「身の回り品」でした。少し硬い気がして、「持ち物」がいい、と返しました。
すると、こう指摘されました。
画面にはすでに「持ち物チェック」があり、そちらはギア・消耗品を全部含む言葉になっている。種類の名前も「持ち物」にすると、使い方のページなどで「持ち物チェックには、ギアと消耗品と持ち物が並ぶ」という文になる。
たしかに、おかしな文です。「身の回り品」に戻しました。
名前は、単体で聞くと、短くてやさしいほうがよく見えます。ほかの言葉と並べて、文にしてみると、ぶつかるかどうかが分かります。
もう1つ、言葉の行き違いがありました。「一覧を、タブで分ける」という案に、わたしは OK を出しました。頭にあったのは、カテゴリの見出し（緑の仕切り）です。Claude Code が言っていたのは、一覧の上で切り替える、別のものでした。
返事がかみ合っていないことに、Claude Code のほうが気づいて、2つの案を表にして聞き直してくれました。作ってから「思っていたのと違う」となる前に、止まれました。
テーブルを分けない
「ギア」「消耗品」「身の回り品」の3つを、別々のメニュー・別々のテーブルにする手もあります。それは、やりすぎと考えました。
身の回り品が、消耗品と違うところは、3つだけです。
| 消耗品 | 身の回り品 | |
|---|---|---|
| 残り（あり／なし）の管理 | する | しない |
| 一覧の札（「毎回用意」など） | 出す | 出さない |
| 料理の食材の欄 | 出す | 出さない |
プランに入れる、コンテナに入れる、持ち物チェックに並ぶ、登録できる数の上限、データの書き出し。ほかは、全部同じです。
そこで、消耗品の「種類」に、3つ目の選択肢として足しました。
種類の3つ目に「身の回り品」
データベースの上では、種類の列に入る文字が1つ増えただけです。テーブルの形は変わらないので、データベースの変更（マイグレーション）もありません。
消耗品の一覧は、上のタブで分けました。ギアの一覧の「所有・欲しい・廃棄済」と同じ形です。
「消耗品」のタブ
「身の回り品」のタブ。札は出ない
料理の食材の欄には、身の回り品を出しません。ただ、1つだけ例外を作りました。その料理に、もう選んであるものは、出します。
食材として選んだあとで、種類を「身の回り品」に変えることが、ありえます。そのときに欄から消してしまうと、選ばれたままなのに、外す手段がなくなります。「出さない」と決めるときは、「もう入っているものを、どうやって外すか」も一緒に決めます。
角の丸みで、テストが落ちる
PR を出すと、CI のテストが1件、落ちました。落ちたのは、消耗品とは関係のなさそうなテストです。
コンテナ・プラン・キャンプの一覧は、まだ登録がないとき、消耗品と同じく白いカードの中にメッセージが出る
このテストは、4つの一覧の「まだ登録がありません」のカードが、同じ見た目かを比べています。背景の色、枠の太さ、余白、そして左上の角の丸みです。
消耗品の一覧にタブを付けたとき、カードの左上の角だけ、丸めるのをやめました。タブの左の線と、カードの左の線を、まっすぐつなげるためです。そこだけが、ほかの3つと違ってしまいました。
アプリの不具合ではないので、テストのほうを、右上の角で比べるように直しました。
手元では、「消耗品」「料理」「上限」など、関係しそうなテストだけを流していました。E2E テストは、全部流すと時間がかかるので、全件は CI に任せる、と決めています。その決まりのとおりに、CI が拾いました。
「関係するテスト」を、名前だけで選ぶと、こういうものを落とします。画面の見た目を変えたときは、その画面の名前でテストを検索して、「ほかの画面と比べる」役で出てくるテストも、手元で流すようにします。
おわりに
- 机の上で考えた分け方は、実際の荷物を前にすると、足りないことが分かる
- 大きな直しと小さな直しがあるときは、小さいほうを先に出す。触ってみると、大きいほうで直すところが絞れる
- 名前は、ほかの言葉と並べて、文にしてみて決める
- 違うところが少ないものは、テーブルを分けずに、種類の1つとして持つ
- 「出さない」と決めるときは、もう入っているものを外す手段も決める
- 見た目を変えたら、その画面を「比べる相手」にしているテストも流す
これで、荷物の用意ができました。次回こそ、キャンプで実際に使ってみた話を書く予定です。