今話題のVibeコーディングで「冷蔵庫の材料 × 料理推薦アプリ」を作ってみたレビュー
Photo by Kristine Tumanyan on Unsplash
プロジェクトを始めたきっかけ
最近「Vibeコーディング」が流行っていると聞いて、興味を持ちました。
最初はYouTubeで動画を見て「AIがコードを書いてくれるなんてすごい」と思っていました。
でも、見るだけでは上達しないと感じました。
それで「自分で作ってみよう」と決めて、すぐに開発を始めました。
データ準備とアプリ作成
アプリには材料のデータが必要でしたが、レシピの文章まで自由に使えるオープンなサイトはほとんどありませんでした。
その時、MAFFの公開サイトで「料理が検索できて、画像は二次利用も可能」という文を見つけました。
しかし、レシピの文章はダウンロードできなかったので、料理名と食材(材料)の部分だけを収集して、自分でデータベースを作ることにしました。
データ収集ではサーバーの負担が大きくなる可能性があると考えて、10分に5件ずつだけスクレイピングするようにスケジュールを設定しました。
収集したデータはMongoDB Atlasに保存し、NestJSとVueで画面から材料を選ぶと、おすすめ料理がリストで表示されるところまで完成させました。
公開したプロジェクト
47-kitchen(アプリ)
https://47-kitchen.vercel.app/
ソースコード(GitHub)
https://github.com/23hh/47Kitchen
大変だったところ
開発で一番時間がかかったのは「デプロイ設定」と「接続設定」の部分でした。
コードを書くより、技術同士をつなげる設定(例:CORS、環境変数、IP許可、IPv4オプション)が大変でした。
気づいたこと・感想
このプロジェクトで、コードを書くだけよりも「どの機能から作るか」「どの技術を選ぶか」「どうつなげるか」という全体の流れを考えることが大事だと気づきました。
今はAIが書いてくれるコードより、技術選択と接続の設計にもっと集中するべきという考えに変わりました。
まとめ
Vibeコーディングは魔法ではないけれど、学ぶ目的を持って使えば、とても良い学習ツールになると感じました。
これからも改善と拡張を続けながら成長していきたいです。