きょう何食べようか悩んでいるあなたへ

5つの質問に答えるだけで、料理ジャンルをサジェストしてくれるサービスを公開しました
https://kyounanitaberu.appspot.com/
※シャットダウンしました。

きっかけ

きっかけは一つの動画。
私は美味しいものを食べることが大好きなんですが、好きが故に何を食べるかめちゃくちゃ悩んで時間を消費してしまいます。
この動画を見て「同じことを思っている人がいるんだ」と気づけたので
２択で今の気分を選ぶと、料理ジャンルをサジェストしてくれるWebアプリケーションを作りました。

システム

システムとしてはVue.jsで作ったアプリをGCP（GoogleCloudPlatform）にデプロイしているちょーシンプルな構成です。

画面構成も”NavBarコンポーネント”と”Cardコンポーネント”と至って簡単。

↓ファイル構成はこんな感じ。

$ tree -L 2 --matchdirs src
src
├── App.vue
├── components
│   ├── Card.vue
│   ├── NavBar.vue
│   ├── Search.vue ←食べログとUberEatsのリンク
│   └── Share.vue ←SNSのリンク
├── data
│   ├── questions.js ←”質問・回答”と”次の質問・回答”or”サジェストする料理ジャンルID”のマッピングファイル
│   └── results.js ←”料理ジャンルID”と”ジャンル名や画像”とのマッピングファイル
├── main.js
├── store
│   ├── actions.js
│   ├── index.js
│   └── mutations.js
└── views
    └── Main.vue

ちなみに表示するカードの切り替えにはVuex、UIライブラリにはBootstrapを使っているので、Vueを勉強したての人が一通り復習するのにいいかも、と思いました

また、GCPへのデプロイは、Vue.jsで作成したSPAなアプリをGoogle App Engineへデプロイするを参考にさせていただきました、ありがとうございます。

感想

昨日さっそく使ってみたのですが、いつも30分くらい悩むところを（悩みすぎ）5分くらいでパパッと決められて満足です。

改善点は色々ありますが、質問や回答を自分で考えてファイルとして定義しているので、こういうところで機械学習を使っていきたいなーと思いました。

最後に、私はVueもGCPも初心者ですが1〜2日（ずっと開発してたわけではない）でゼロから公開までできました。
VueやGCPに興味をお持ちの方に「このくらいのものは作れるんだ」と思ってもらえると嬉しいです