🍳フロントとバックの二刀流！Vue.js × FlaskでCRUDアプリ作ってみた🐥
こんにちは〜！
最近ようやく「バックエンドって料理っぽいな…？」と思えるようになってきた新人エンジニア、西岡スズメです✨
今回は、Vue.js × Flaskという異色（？）のコンビで、CRUDアプリを作ってみたので、その奮闘っぷりをお届けします！
CRUDって？
→「Create（作る）」「Read（読む）」「Update（直す）」「Delete（消す）」の略で、簡単に言えば、「予定表に書いた内容を、足したり消したりする機能」です📓✍️
🔪 バックエンドはキッチン！Flaskは料理長？
バックエンド担当は Flaskさん🍳
表では見えないけど、黙々と料理（データ処理）を作ってくれる縁の下の力持ち！
たとえば…
GET /items→ メニュー一覧を取り出す（お客さんに見せる！）POST /items→ 新しい料理（データ）を追加🍝PUT /items/<id>→ 料理にちょい足し（アプデ）DELETE /items/<id>→ 「このメニュー、微妙だったね…」で削除（涙）
💡 スズメの工夫メモ：
Blueprint を使ってルートを整理！コードがごちゃごちゃしないし、拡張も超ラクでした🎯
あとね、ちゃんとユーザー認証も実装しました！「誰が何を作ったか？」ログを残しておくのって、エンジニアの礼儀（と保険）だと思ってます🔥
🍽 フロントエンドはレストラン！Vue.js×Vuetifyの華やかさ💫
フロント側はVue.js × Vuetifyでリッチな見た目を実現✨
Vuetifyのコンポーネントたち、まるで高級レストランの器みたい！
中身が豆腐でも高そうに見えるやつ！（たとえが雑）
実装した機能はこんな感じ：
- 📝 フォーム → 注文票（ユーザーが新メニューを追加・編集）
- 🧾 一覧表示 → 今出せる料理（全メニューの見た目）
- ❌ 削除ボタン → 「この料理、もう飽きた」って押せる！
💡 スズメのこだわりポイント：
Vuetifyでフォーム＆ボタンを組み合わせると、CSSをゴリゴリ書かなくてもそれっぽいUIになるので時短にもなるよ〜！VueからFlaskへの通信は Axios で実装！
これがまさに…「ホールスタッフがキッチンに電話してる感じ」📞👩🍳
🚰 フロントとバックは“パイプライン”でつながってる！
VueとFlaskって、見た目と裏方で全然違うけど、
APIという名のパイプラインでスルスルっとつながってるんですよ〜
つまり、こういう関係性：
- Vue：ホールスタッフ（お客さんの声を拾う）
- Axios：インカム（やり取り役）
- Flask：キッチン（静かに料理してる）
- JSON：料理の内容（中身）
💡 大事な気付き：
表と裏、どっちが欠けてもアプリとして成立しない…
二刀流のありがたみをひしひしと感じました⚔️
🍰 次のステップ：「もっとおいしいアプリ」に進化させたい！
今回はとりあえずCRUDの最低限を実装して満足…したいところだけど！
スズメはまだまだ羽ばたきます🐥💨
次にやりたいことリスト：
- ✅ JWTでログイン機能（入店チェック？）
- ✅ 検索＆ページネーション（混雑しないように）
- ✅ レコメンド機能（人気メニュー分析したい！）
💬 感想まとめ：
やってみたら超いいコンビ！って気付きました👏
また成長したら、次はログイン付き＆グラフ分析付きのアプリを作ってブログに書きますっ📊🔥
以上、西岡スズメの開発日記でした〜！🐣💻