【個人開発】初めて個人でWebアプリ（レシピ管理アプリ）を作ってみた

Posted at 2024-09-29

はじめに

半年間をかけて頑張って開発したレシピ管理アプリについて、備忘として記載します。
このレシピ管理アプリは、料理好きの方向けに開発したWebアプリケーションで、現在はローカル環境でのみ動作する形で作成されています。

このレシピ管理アプリは、料理を愛する方々が個人の料理レシピを簡単に管理し、より多くの料理を作りたくなるような意欲やわくわく感を提供することを目的としています。ユーザーは自分の好みに合わせたレシピを記録・管理し、いつでもオリジナルの味を再現できるようにします。

私自身、料理の際に特定のレシピサイトだけを見ることはなく、複数のレシピを参考にして自分好みのオリジナルな味にアレンジすることが多いです。このような時、レシピ管理アプリにメモを残すことで、自分だけのレシピを記録し、いつでも同じ味にたどり着くことができます。

ユーザーが料理を作る際、既存のレシピからインスピレーションを得て、新しいレシピを作成したり、既存のレシピをカスタマイズしたりする場面で利用されます。

料理前：過去に作成したレシピを確認し、手早く作れそうなものや今の気分に合うものを選ぶ。
料理後：既存レシピをもとに料理をした場合、火加減や味加減の調整など新たに気付いた点をメモする。また、新しいレシピを作成した場合は、レシピ情報を入力し記録する。

以下はアプリが提供する主な機能です。

#	機能名	概要
1	ログイン機能	レシピ管理アプリにログインする。
2	ログアウト機能	レシピ管理アプリからログアウトする。
3	アカウント登録機能	ログインに必要なユーザー登録を行う。
4	レシピ情報入力機能	タイトル、材料、所要時間、調理手順、感想を入力。
5	写真アップロード機能	作成したレシピ写真をアップロードする。
6	分量自動調整機能	材料の分量を必要に応じて自動調整する。
7	レシピ編集機能	ユーザーが既存のレシピを編集できる。
8	レシピ削除機能	ユーザーが既存のレシピを削除できる。
9	レシピ一覧の表示機能	登録したレシピを一覧で確認し、所要時間順で並べ替えて表示する。

ローカル環境で動作する本アプリのデモとして、下記の通り紹介します。

直感的なフォーム設計：
初めて使う人でも迷わず使えるよう、レシピの追加・編集・削除をシンプルに実装しました。各ボタンやフォームは、操作意図が明確に伝わるようにデザインされています。
分量自動調整機能：
家族の人数に合わせて材料の分量を自動で計算し、より簡単にレシピを活用できるようにしました。

モーダル内でのデータ更新の問題：
編集モーダル内でフォームのデータを正しく送信する際に、404エラーに悩まされました。この問題の原因は、フォームのaction属性が正しく設定されていないことでした。正しいエンドポイントにデータを送るために、各モーダル内のIDやデータ属性を見直し、JavaScriptでの操作を改善しました。
材料の追加・削除機能の挙動：
材料の行を追加・削除する際に、DOM の操作がうまくいかず、何度か削除しないと行が消えない問題が発生しました。この問題を解決するため、イベントリスナーの重複設定を避ける工夫を行いました。
Pugファイルのインデントのズレ：
フロントエンド部分をPugで記述していた際に、インデントがずれていることに気づかず、表示や機能が正しく動作しない問題が発生しました。本当に初歩的なところでここにかなりの時間を割いてしまい、VSCodeのエディタ設定を見直すことで、見つけやすくする仕組みを導入しました。

初めて一人でWebアプリを作るというチャレンジは、思った以上に困難な道のりで何度も挫折しそうになりました、、

しかし、問題が発生するたびに諦めずに調べたり試行錯誤を繰り返したりして、
なんとかこのレシピ管理アプリを完成させることができました。

また、要件を実装する中で、初めて「どこが不足しているのか」に気づく場面が何度もあり、自分の視座が低かったことを痛感しました。
設計段階では見えていなかった細かな点が実装中に浮かび上がってくる経験を通して、要件定義や設計の難しさと大切さを実感しています。

今回の個人開発で学んだことは、技術的な面だけでなく、自分の視野を広げることや、課題に向き合う粘り強さ、そして何よりも「自分の手で動くものを作り上げる喜び」でした。

この経験を次のステップに活かし、もっと良いアプリを作れるように頑張りたいと思います。