メニュー・材料表が作りたい

Question

実現したいこと

• 画像に添付したような「メニュー・材料表」を作る。

前提

プログラミングが全くわからない人からプログラミング初心者（と言ってもHTMLやCSSが少しできるだけでWebアプリケーションを作ったことはない）の自分が依頼されてどうしたものか困っています。

はじめはExcelのドロップダウンリストとVLOOKUP関数を使って実現しようとしましたが、無理だとわかりました。
なぜなら依頼者からの要望では、Excelで以下のような多階層のドロップダウンリストが出来ないからです。
https://webdesignday.jp/inspiration/technique/css/5793/

どうして、多階層のドロップダウンメニューが必要なのかというと、たとえば、魚料理と肉料理にわけて、1階層目では魚、2階層目で具体的な魚のフライなどの料理名を選びたいからです。

発生している問題・エラーメッセージ

発生している問題というか、ぶっちゃけ何から手をつけていいかいまいちわかりません。
一応、考えているのは、XAMPPを使って、PHP、データベースでどうにかできないか？ということで、以下のサイトを検索して見つけたりしました。
https://www.javadrive.jp/xampp/mysql/index6.html
書いてあることは大体わかるんですが、これで本当に自分に出来るのか、ドロップダウンメニューで料理名を選んで、
全部で10カ所選んでその下に材料名を列挙しなければならないのですが、果たしてどうやったらそんなことが出来るのか、皆目見当が付きません。

まったくこのteratailを使うのも初めてで、変な質問をしているかもしれません。
が、もしなにかヒントになるようなことでもあれば、よろしくお願いします。

Comments

[duck75]

調査したことは、エクセルで多階層のドロップダウンメニューを実現することは無理らしいということ、だから、多階層のドロップダウンメニューは最初に貼ったリンクで作ればいいのかということ、そうすると、Webアプリケーションになってしまうので、二番目のリンクにあるように、PHPとデータベースでXAMPPを使ってやればいいのかな？ということです。

[Lhankor_Mhy]

初めにExcelを検討したということですが、そうだとするとPHPなどのサーバ側は不要なのではないですか？

[duck75]

はい、はじめはExcelを検討しましたが、先に書いたように、多階層のドロップダウンリスト（質問の一番最初のリンクに貼ってある）がExcelで出来ないことが発覚したので、Webアプリケーションを選択することとなりました。

[Lhankor_Mhy]

Webアプリケーション は web で公開しているものだと思いますが、はじめに Excel を検討したということは、 web で公開する必要はないのではないか？ ということが先の質問の要旨です。

もし、そうであればPHPなどのサーバ側は不要かと思います。

[duck75]

Webアプリケーションという言い方が悪かったのかもしれません。今の段階では、Webでの公開は必要ないので考えておらず、XAMPPをつかってローカルで動かす予定です。また、繰り返しになりますが、多階層のドロップダウンリストを実現するためにもExcelでは無理でした。

[Lhankor_Mhy]

コメントがわかりにくかったかもしれません。

XAMPP や PHP などでの運用に不安があり、JavaScript がある程度使えるのであれば、わざわざ XAMPP や PHP を使わずに、JavaScript のみで記述すればいいのでは、という感想を持ちました。
PHPなどにこだわる理由がよくわかりませんでしたのでので、「サーバ側は不要では」とコメントをしています。

ご存知かとは思いますが、JavaScript（とブラウザ）にもキーバリュー形のデータベースがありますので、ローカルで動かすのであれば、JavaScript（+HTML+CSS）で十分な処理ができそうな気がしています。

もし、他に要件があるようでしたら、失礼しました。

[duck75]

回答ありがとうございます。全然ご存じではないです笑。プログラミングもいくつかの人気な言語の入門書を読んで文法がわかる程度ですので、何も実装したことはありませんし、JavaScript（+HTML+CSS）でできるようなのであれば、そっちのほうがいいです。が、なにせ全く経験がないので、果たしてググって自分で対処できるのかどうか不安ではあります。まぁ、最悪できなくてもそれはそれでしようがない、諦めよう、これはそういう仕事なのでそこは気は楽ではあります。

Answer 1

単純に言えばXAMPPのMySQLで料理テーブルをつくり正規化すればいいのですが、レシピサイトなどのメニューと違って、家庭料理の場合おなじ料理名でも材料は毎回違うということです。
そういう場合、「もやしとカニカマの中華風サラダ」に対して「もやし」と「カニカマ」を必須材料とし、「きゅうり」を任意材料とするなどの工夫が必要です。またバリエーション「もやしとカニカマの和風サラダ」や「もやしとカニカマのフレンチ風サラダ」があるなら料理名は「もやしとカニカマのサラダ」などにしてバリエーションを確保したほうがよいです。

いずれにしても現在は要求定義といってどういう機能がほしいか洗い出しをするタイミングだと思うので、仕様のパターンをあげていき、具体的な素材をサンプリングして仮組みしてみることが肝要です。その段階が一通りおわったら要件定義という具体的にシステムにどう落とし込み、どの機能が必要で、どの仕様はカットするかを決め込む段階に移ります。

参考

ざっくりこんなテーブル構成が必要になります

create table cate(
cid int primary key,
cname varchar(100));
insert into cate values
(3001,'サラダ'),
(3002,'炒めもの'),
(3003,'煮物'),
(3004,'揚げ物'),
(3005,'副菜');

create table genre(
gid int primary key,
gname varchar(100));
insert into genre values
(4001,'魚'),
(4002,'肉'),
(4003,'野菜'),
(4999,'その他');

create table menu(
mid int primary key,
cid int null,
gid int null,
mname varchar(100),
foreign key (cid) references cate(cid)
on update cascade on delete set null,
foreign key (gid) references genre(gid)
on update cascade on delete set null
);

insert into menu(mid,cid,gid,mname) values
(1001,3003,4001,'魚の煮付け'),
(1002,3001,4003,'ほうれん草とコーンのソテー'),
(1003,3003,4003,'里芋煮'),
(1004,3001,4999,'マカロニサラダ'),
(1005,3002,4003,'八宝菜'),
(1006,3004,4999,'春巻'),
(1007,3001,4003,'もやしとかにかまの中華サラダ'),
(1008,3003,4003,'かぼちゃ煮'),
(1009,3002,4003,'小松菜炒め'),
(1010,3005,4003,'しそ昆布');
           
create table ingre(
iid int primary key,
iname varchar(100));
insert into ingre values
(2001,'魚'),
(2002,'ほうれん草'),
(2003,'コーン'),
(2004,'里芋'),
(2005,'厚揚げ'),
(2006,'いんげん'),
(2007,'マカロニ'),
(2008,'にんじん'),
(2009,'きゅうり'),
(2010,'卵'),
(2011,'豚肉'),
(2012,'玉ねぎ'),
(2013,'ピーマン'),
(2014,'しいたけ'),
(2015,'きくらげ'),
(2016,'白菜'),
(2017,'春巻き'),
(2018,'レタス'),
(2019,'もやし'),
(2020,'かにかま'),
(2021,'かぼちゃ'),
(2022,'丸天'),
(2023,'小松菜'),
(2024,'ベーコン'),
(2025,'しそ昆布');

create table menu_ingres(
miid int primary key auto_increment,
mid int null,
iid int null,
foreign key (mid) references menu(mid)
on update cascade on delete set null,
foreign key (iid) references ingre(iid)
on update cascade on delete set null
);

insert into menu_ingres(mid,iid) values
(1007,2019),
(1007,2020),
(1007,2009);

create table daily_menu(
did int primary key auto_increment,
d date not null,
term enum('朝食','昼食','夕食')  not null,
mid int,
foreign key (mid) references menu(mid)
on update cascade on delete set null
);
insert into daily_menu(d,term,mid) values
('2023-03-27','夕食',1005),
('2023-03-27','夕食',1006),
('2023-03-27','夕食',1007);

UIとしてはメニュー追加ボタンを押すとモーダルダイアログが開いて、カテゴリーやジャンルを選んで検索ボタンをおした結果からメニューを選択し、メニューに紐づく材料を、menu_ingreテーブルを利用して抽出します

Comments

[duck75]

詳しくご回答ありがとうございます。ヒントになります。実際、これはそう厳密なものではなく、どういう機能が欲しいのかはほぼわかっています。しかし、問題は、質問にも書いたように、それを実装したことがないので、なかなかきっかけがつかめない（どこかにちょうどいいサンプルでも落ちてないかな…）みたいなことを悶々と考えているところです。

[duck75]

さらなる詳しい回答、ありがとうございます。が、恐らくこれは僕の能力の範囲を超えており、大半が理解不能、実現不可能の予感がします…。しかし、とにもかくにもありがとうございました。

[yambejp]

なれてれば2-3時間くらいでプロトがつくれそうですが
一から覚えるとなると2-3週間くらいみっちり勉強しながらかなぁと・・・
最低限必要になりそうな知識についてキーワードをざっくりあげておきます
・sql マスターテーブル 正規化 中間テーブル 外部キー制約 pdo prepare(プレースホルダ)
・html modal dialog 検索フォーム
・js 非同期処理 fetch dom テーブル json
・css

ちなみにXAMPP導入済みとのことなので、テーブル自体は私の書いたものをコピペするだけで作成できるので
簡易的なテストはすぐできると思いますよ

[duck75]

ありがとうございます。一応、キーワードをヒントに考えてみようと思います。ですが、これまで全くアプリケーションを作ったことがなく、おそらくその2〜3週間みっちりコースになると思われるので、諦めるのも一つの手かなぁと思います。なにせ、僕は障害者で、これは時給500円の仕事なので。正直、無茶振りもいいところだなぁと思い始めました。

[yambejp]

流石に500円でうける仕事にしてはきびしそうですね。
まぁ興味があるのであればいろいろ試してみてください
ご質問があればお役に立てる範囲でご協力はできるかとは思います